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

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/

Gonzalo Ayuso:
Sharing authentication between socket.io and a PHP frontend (using JSON Web Tokens)
Jun 06, 2016 @ 11:50:29

In a follow up to his previous post about sharing authentication information between socket.io and PHP, Gonzalo Ayuso has posted an updated method using JSON Web Tokens instead.

I’ve written a previous post about Sharing authentication between socket.io and a PHP frontend but after publish the post a colleague (hi @mariotux) told me that I can use JSON Web Tokens (jwt) to do this. I had never used jwt before so I decided to study a little bit.

JWT are pretty straightforward. You only need to create the token and send it to the client. You don’t need to store this token within a database. Client can decode and validate it on its own.

He updates the code from the previous post, showing how to replace the HTTP basic authentication with the JWT functionality. He makes use of some simple JWT library handling to encode/decode the claims when the token is made a part of the request.

tagged: socketio share authentication frontend jwt jsonwebtokens

Link: https://gonzalo123.com/2016/06/06/sharing-authentication-between-socket-io-and-a-php-frontend-using-json-web-tokens/

SitePoint PHP Blog:
We’re Building a Marvel Catalog Reader! Avengers, Assemble!
May 16, 2016 @ 13:23:08

On the SitePoint PHP blog they've shared a tutorial covering the construction of a Marvel Catalog Reader that hooks in to the Marvel API for its data.

In this tutorial, we’re going to take a look at the Marvel API, a tool provided by Marvel for developers to get access to the 70-plus years of Marvel comics data. First, we’ll walk through the steps in which one can acquire the keys needed to make requests to the API. Then, we’ll look at the tools we can use to test out the API. Finally, we’re going to build a website that uses the API.

They start out on the API side of things, showing you how to sign up for an account, get your token information and include a note about using the API (rate limiting and referencing the source of the images). There's a mention and example of working with the interactive API documentation and the first part of the code you'll need to make the connection. They then get into the construction of the site itself using the Laravel framework and a simple caching command. This is used to store the results from a query made via a Guzzle client. The focus then shifts to the frontend where they create the HomeController and define both the main endpoint and two others: one for viewing a specific comic and the other for the character listing. The tutorial continues on showing you how to handle the (paginated) responses from each of the calls and push the results into a cache record. Finally, they create the matching views of the API query results and some example screenshots of the results.

tagged: marvel api tutorial laravel frontend cache reader guzzle

Link: http://www.sitepoint.com/were-building-a-marvel-catalog-reader-avengers-assemble/