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

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/

Gonzalo Ayuso:
Sharing authentication between socket.io and a PHP frontend
May 16, 2016 @ 10:56:30

In a post to his site Gonzalo Ayuso shows you how to combine authentication between Socket.io and a PHP frontend running a simple Silex-based application.

Normally, when I work with websockets, my stack is a socket.io server and a Silex frontend. Protect a PHP frontend with one kind of authentication of another is pretty straightforward. But if we want to use websockets, we need to set up another server and if we protect our frontend we need to protect our websocket server too.

If our frontend is node too (express for example), sharing authentication is more easy but at this time we we want to use two different servers (a node server and a PHP server). I’ve written about it too but today we`ll see another solution.

He sets up a simple Silex application with three routes - the root (/), a login route and a "private" one requiring a user to be logged in. This last route makes the connection to the websocket server in the template. This connection sends the current session ID to the backend where it's verified with a simple Socket.io middleware. Sometimes the session ID cookie will be set as HttpOnly so he provides an alternative for that: a new endpoint just for getting the current session ID for the websocket request.

tagged: socketio websocket server frontend sharing authentication session silex tutorial

Link: https://gonzalo123.com/2016/05/16/sharing-authentication-between-socket-io-and-a-php-frontend/

Symfony Finland:
Universal Rendering in PHP/Twig could be done with the Angular 2 Template Compiler
May 09, 2016 @ 11:15:01

The Symfony Finland site has a post about Angular 2, its server-side rendering support and how Symfony can fit into the picture.

At the ng-conf event in May 2016 there were sessions discussing how Angular 2 can support server side rendering in various platforms. If you're working on a project running on Node.js, then Angular 2 is a native citizen. For other options like ASP, Java and PHP there are a few options on the table.

[...] Later during the ng-conf more details on the Server Side Rendering (Universal Rendering in Angular lingo) can be implemented in different environments to improve first page load experience. [...] The downside of these approaches is that you need to add additional complexity either by adding a dependency to an external service or require a rather exotic PHP extension at this point.

Instead he suggests using Twig along with the Angular 2 template compiler and some custom extensions to the base templating to format the output as Angular is expecting it. He talks about how the current backend rendering of templates could easily be translated to this handling. He also suggests that even just partial server-side rendering might be enough to help with the performance of the application.

tagged: symfony universalrendering angular2 twig template backend frontend performance

Link: https://www.symfony.fi/entry/universal-rendering-in-php-twig-with-angular-2-template-compiler

That Podcast:
Episode 26: Show me the Monii
Mar 09, 2016 @ 09:13:26

That Podcast, a show hosted by PHP community members Beau Simensen and Dave Marshall, has posted their latest episode - Episode #26: Show me the Monii.

Beau and Dave start a series of episodes discussing Beau's new startup, Monii. We talk briefly about the features and scope of their first product, including how he can really see how it would have helped him while he was self-employed.

We then take a dive in to some of the tech stack, with Beau telling us all about the front-end, including the frameworks, libraries and build tools.

Other topics mentioned in this episode include React, the JSON API project, Babel and Webpack. You can listen to this latest episode either through the in-page audio player or by downloading the mp3 directly. If you enjoy the show, be sure to subscribe to their RSS feed or on iTunes to get the latest episodes as they're released.

tagged: thatpodcast ep26 monii frontend framework library build tool

Link: https://thatpodcast.io/episodes/episode-26-show-me-the-monii

Symfony Finland:
A simple front end workflow for Symfony and Foundation frameworks
Mar 07, 2016 @ 10:52:08

The Symfony Finland blog has posted a guide with a simple frontend workflow for those working in Symfony-based applications. He shows how to easily integrate and work with Gulp from inside of your application with relative ease.

In Symfony 2.7 the team introduced the asset component. It allows for a standard method for linking to front end assets in your bundles, but has no say in how assets are built. It is agnostic to whether assets are built with Gulp, Grunt, Webpack or some other tool.

[...] All files placed in the Resources/public -directory within a bundle is made available to the web server using a Symfony Command for assets install. Since Symfony 2.6 it has featured symlinking to the real asset directories, making the requirement to run the command limited to the times you add new bundles.

He shows how to use the assets component and its related commands to set up the symlink for a new bundle. He then helps you get the foundation command line tool installed and create a simple Gulp configuration file to build out your SASS files and compile them. From there using the setup is as easy as adding a tag to the Twig template, making a call to the asset method and pointing to the required resulting CSS file from the compile.

tagged: frontend workflow symfony foundation tutorial setup gulp

Link: https://www.symfony.fi/entry/a-simple-front-end-workflow-for-symfony-and-foundation-frameworks