Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Armin Weihbold:
Diving into API Platform - Part 2
Oct 02, 2017 @ 11:50:15

Armin Weihbold has continued his series looking at building APIs in PHP applications in part two covering the use of the API Platform project as a base. You can find part one here if you need to get caught up.

He picks up right where the last article ends and continues setting up the Docker environment for the application. Once he figured out a small snag in the setup he was able to get the basic documentation (the list of endpoints) up and running.

Next he creates a "material design" administration interface using React showing how he pulled in the requirements he needed to get the interface up and running. Code is included for the interface and a screenshot is included so you can see the end result.

tagged: api platform apiplatform project tutorial series part2 frontend docker

Link: https://medium.com/@koyaan5/diving-into-api-platform-part-2-1ce890c0b85f

Pineco.de:
Implementing Laravel’s Authorization on the Front-End
Sep 27, 2017 @ 10:15:56

On the Pineco.de site there's a tutorial posted showing you how to implement the Laravel auth system on the frontend re-using the same logic in a single-page Vue.js application as you would on the backend.

If you are using Laravel, probably you are familiar with its ACL. You can easily restrict user’s access by creating policies and binding them to the specific models. It works perfectly on the back-end, but what can we do if our app is something like an SPA?

The post starts with a brief overview of the Laravel ACL handling as it relates to users and policies about what they can do or access. The frontend setup then makes use of a "cheap copy" of the Laravel "gate" handling via a Javascript-based request. They walk you through the preparation work you'll need and the creation of a gate class to define the current policies for CRUD methods. The main "Gate" class is then defined, setting up the before, allow and deny action methods. Finally these pieces are integrated into the Vue.js application with an example of either showing or hiding the "Edit" link based on the user permissions.

tagged: laravel authentication gate frontend vuejs tutorial gate logic javascript

Link: https://pineco.de/implementing-laravels-authorization-front-end/

SitePoint PHP Blog:
What Is Snapshot Testing, and Is It Viable in PHP?
Jun 21, 2017 @ 12:28:01

On the SitePoint PHP blog they've posted another article from author Christopher Pitt. This time he talks about snapshot testing and if it's a viable way to evaluate code in PHP applications.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it. For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

He starts with a brief introduction to the technology to be used (React in Javascript) and how it could be recreated in PHP. He then covers testing interfaces, evaluating the correct functionality of frontends via various testing tools. He includes some examples of this kind of testing and how it can help a developer mentally break up functionality into components. From there he switches over to the PHP side, introducing the spatie/phpunit-snapshot-assertions package and showing how to use it to check the make up of a snapshot and test several assertions that should exist.

tagged: snapshot testing viable javascript frontend assertion tutorial

Link: https://www.sitepoint.com/snapshot-testing-viable-php/

Symfony Blog:
Introducing Webpack Encore for Asset Management
Jun 13, 2017 @ 11:08:19

On the Symfony blog they've released an announcement about the release of a tool that wants to help make it easier for Symfony developers to work with frontend resources using the Webpack standard: Webpack Encore.

For everyone that has hit [the barrier of complexity in frontend dependencies and compilation], I'm very excited to show you something we've been working on for the last few months: Webpack Encore.

Encore gives you powerful CSS and JavaScript processing, combination, minification and a lot more, wrapped up in a simple API that's built on an industry-standard tool (Webpack).

He includes an example of the Javascript configuration to build out the Javascript, CSS and dependencies required for his build. He talks briefly about the conformity to the Webpack handling and how Encore fills that role in Symfony applications. The post ends linking to the project repository and the changes required to get the package installed.

tagged: webpack symfony encore library configuration frontend library dependency tool

Link: http://symfony.com/blog/introducing-webpack-encore-for-asset-management

TutsPlus.com:
Building Your Startup: Requesting Scheduling Changes
Feb 07, 2017 @ 12:44:23

The TutsPlus.com site has continued their "Building Your Startup" series with this new article enhancing the application they've already created to send requests for scheduling changes.

As the Meeting Planner alpha testing phase began, the clearest feature gap was the inability to change a meeting after it had been scheduled. It's not an easy problem. Is it okay to just change a meeting without a participant's permission? Or should you ask? Or do either, depending on your role in organizing the meeting? What if you just want to ask if it's okay to meet 15 minutes later—that should be easy, right?

Solving all this required some reflecting on the social aspects of adjusting a meeting. Over time, I realized that the ability to adjust meetings easily after they've been scheduled could make or break the Meeting Planner brand.

He then starts out by describing the "tall mountain to climb" in the number of changes to backend, frontend and UX/UI functionality required to add the feature. He includes all of the code changes and additions that need to be made including:

  • migrations to add new tables
  • UI updates to add options for rescheduling requests
  • form changes
  • handling request submissions

Each point on the list includes code, screenshots and anything else that was required to make the update.

tagged: startup build scheduling change yii2 tutorial ui backend frontend

Link: https://code.tutsplus.com/tutorials/building-your-startup-requesting-scheduling-changes--cms-27076

Symfony Finland:
Sharing state in a Symfony hybrid with Twig, React and other JavaScript apps
Jan 26, 2017 @ 11:14:12

The Symfony Finland site has posted a new tutorial showing you how you can share state in a Symfony application between Twig, React and other Javascript-based applications.

Front end development has certainly grown up in the last few years. UI logic is increasingly being moved to the client side, but the traditional server-rendered views aren't going anywhere soon. And they shouldn't.

The two methods will live alongside each other and you'll have to work with two worlds. Let's explore an idea how to make this pleasant to work with, by sharing state between Twig templates and JavaScript.

The post starts with some background on a case where this kind of sharing was a requirement and, while the initial version was scrapped, a prototype application was born. He details what this prototype showcases (which JS libraries) and links to the Javascript involved over on GitHub. They then get into the code examples showing the creation of an AppState object that handles the serializing of the state information and store the result in the database via a Doctrine connection. This value is then output to the pages that require it, making it available to the frontend application (Vue.js, React or plain Javascript).

tagged: tutorial symfony shared state backend frontend javascript twig react vuejs

Link: https://www.symfony.fi/entry/sharing-state-in-a-symfony-hybrid-app-with-twig-react-etc

TutsPlus.com:
Building a WordPress-Powered Front End With the WP REST API and AngularJS: Intro & Set
Aug 05, 2016 @ 11:17:36

The TutsPlus.com site has kicked off a new tutorial series today with part one of a look at using the WordPress REST API and AngularJS to create an API-powered frontend application.

In this series about building a WordPress-powered front end with the WP REST API and AngularJS, we will put the knowledge acquired in the introductory series to use. We will learn how we can leverage this knowledge to decouple the conventional theme-admin model supported by WordPress until now. We will plan and build a single-page application (that I've named Quiescent) with a WordPress back end which will feature posts, users, and categories listing pages. We will configure AngularJS routing and build a custom directive and controllers for the resources mentioned above.

In this first part of the series they walk you through some of the planning steps before the application even gets written (including wireframes). From there they get a bare-bones HTML structure setup for the Angular app to live in and make a matching WordPress plugin. This plugin will return a featured image, author name, associated categories and image resize data related to a post. The code for the plugin is included.

tagged: wordpress api frontend angularjs tutorial plugin wireframe planning series part1

Link: http://code.tutsplus.com/tutorials/building-a-wordpress-powered-front-end-with-the-wp-rest-api-and-angularjs-introduction-and-setup--cms-26115

Symfony Finland:
Choosing a front end architecture for Symfony framework projects
Aug 01, 2016 @ 11:21:42

On the Symfony Finland site there's a new post with some suggestions on choosing a frontend for your Symfony-based applications according to your needs.

Most projects created with the Symfony framework nowadays also include quite a bit of logic done on the client side. There is a large number of options on the market and this can lead to trouble choosing between the options. The JavaScript scene is full of camps and cutting through the buzz is quite a bit of work. [...] Symfony remains neutral to what is running in the front end of the project. As with most things in web development, there is no single "right" answer to which front end frameworks to use.

They talk briefly about the history of the framework and what kinds of considerations should be made for both the front and backend technology. They also remind you that there's not a "one size fits all" frontend technology out there. They describe a few different kinds of situations (backend heavy, frontend heavy, etc) and make a few suggestions as to which way you might want to go and libraries to investigate.

The next time you're faced with starting work on a front end of a web site or web application built with Symfony, you can reflect on the experience you've got from the back end. There are usually many right answers and no absolute truths.
tagged: frontend architecture symfony application suggestion opinion project

Link: https://www.symfony.fi/entry/choosing-a-front-end-architecture-for-symfony-framework-projects

Chris White:
Avoiding the burden of file uploads
Jun 14, 2016 @ 09:18:59

Chris White has a post to his site sharing a method he's come up with to avoid the burden of file uploads in your PHP application with the help of the offerings of Amazon S3 and some creative coding.

Handling file uploads sucks. Code-wise it's a fairly simple task, the files get sent along with a POST request and are available server-side in the $_FILES super global. Your framework of choice may even have a convenient way of dealing with these files, probably based on Symfony's UploadedFile class. Unfortunately it's not that simple.

[...] For most situations using S3 is a no brainer, but the majority of developers transfer their user's uploads to S3 after they have received them on the server side. This doesn't have to be the case, your user's web browser can send the file directly to an S3 bucket. You don't even have to open the bucket up to the public. Signed upload URLs with an expiry will allow temporary access to upload a single object.

He points out two advantages of this method: that you don't have to handle the upload part of file uploads and that it gives the user more control. He shares a video of the end result (a simple file upload frontend) and the code that you'll need to use the AWS PHP SDK to make it all work together. There's some configuration changes that'll need to be made on the S3 bucket side (like for CORS) but the code itself to make the connection is relatively simple. He does a great job of explaining every step of the way and includes the Javascript needed for the frontend as well.

tagged: file upload amazon s3 aws tutorial frontend

Link: https://cwhite.me/avoiding-the-burden-of-file-uploads/

Freek Van der Herten:
Building a dashboard using Laravel and Vue
Jun 09, 2016 @ 18:55:17

Freek Van der Herten has a post to his site showing you how to combine Vue.js and Laravel to make a dashboard, a simple way to display statistics and information in a "quick glance" format.

At Spatie we have tv screen against the wall that displays a dashboard. This dashboard displays the tasks that our team should be working on, important events in the near future, which music is playing at our office, and so on. We’ve opensourced our dashboard, so you can view the entire source code on GitHub. It is built with Laravel and Vue. In this post I’d like to explain why and how we made it.

He starts with a bit of history around their need for the dashboard and how previous versions (using Dashing) turned out. He gives a high level overview of what he was trying to accomplish and why he chose Vue.js. He then gets into the construction of the pieces of the dashboard:

  • the grid
  • the internet connection (server and client side)
  • the package statistics component

He also talks about the security they added to the system (protecting the dashboard from outside eyes) and how they displayed it on a TV using a Raspberry Pi.

tagged: dashboard vuejs tutorial laravel frontend backend

Link: https://murze.be/2016/06/building-dashboard-using-laravel-vue/