On the Delicious Brains site they've posted the latest part in their "Develop[ing] a WordPress Plugin Using Webpack 3, React and the REST API" series. This is part two of the series, building on the foundation set up in part one of the series. In this second part more work is put into the Webpack setup, the creation of the REST API and the React frontend.

Have you ever wondered how to get React working with the WordPress REST API? If so you’re in the right place – that’s what we’re going to cover in this follow-up to part one of how to develop a WordPress plugin! In our previous post, we explained what Webpack is and got it integrated into our WordPress sample plugin. We also got BrowserSync set up and reloading our app. In this part we’re going to look at how to get the React side of our plugin working with the WordPress REST API so that the plugin actually does something cool.

The tutorial starts with the Webpack changes, mostly configuration updates adding in additional plugins. Next comes the changes for the REST API and working with it to get information from the WordPress backend. After showing you how to test that the API is working as expected they move along to the React changes on the frontend and using components to split up the logic and make it easier to maintain.

The TutsPlus.com site has posted the second part of their series covering the creation of a React application with a Laravel backend. In part one of the series they started in on some of the setup for the application. In part two continues down that path and shows how to set up React and integrate it with the Laravel backend.

In the previous tutorial, we developed a Laravel application that responds to API calls. We created routes, a controller, and a model for the simple product listing application. Since it was the controller's job to return a response to the HTTP requests, the view section was entirely skipped.

[...] In this tutorial, we will be shifting our focus towards the front end. The first half of the tutorial is about setting up React in a Laravel environment. I will also introduce you to Laravel Mix (supported by Laravel 5.4 and later), which is an API for compiling assets. In the second half of the tutorial, we will start building a React application from scratch.

The tutorial walks through the the use of the Laravel artisan command to help with some of the setup tasks and the creation of some of the initial templates and Javascript files. Then it starts in on the application itself including the display of product data and functionality to add a new project.

The SitePoint PHP blog has posted a new tutorial from Christopher Pitt that tries to answer the question wondering if React and PHP are compatible for game development.

“I’d like to make a multiplayer, economy-based game. Something like Stardew Valley, but with none of the befriending aspects and a player-based economy.”

I started thinking about this the moment I decided to try and build a game using PHP and React. The trouble is, I knew nothing about the dynamics of multiplayer games, or how to think about and implement player-based economies. I wasn’t even sure I knew enough about React to justify using it.

I once watched a talk by dead_lugosi, where she described building a medieval game in PHP. Margaret inspired me, and that talk was one of the things that led to me writing <a href="https://www.amazon.com/dp/1484224922>a book about JS game development. I became determined to write about my experience. Perhaps others could learn from my mistakes in this case, too.

With the foundation laid, he starts in on the setup of the backend for the game: a PHP server running a server compatible with multiple websocket (React) requests. He chose Aerys for the HTTP and websocket functionality and includes the code to create the server and the packages he required. He shares some of the code to create the server and a "Hello world" endpoint the frontend will use. He then moves over to the frontend side of things, showing the packages he installed via NPM and the Laravel Mix configuration to use Webpack to bundle up the files required. He then walks through the integration of the front and back end code including the connection of the websockets.

For those that want to see the end result all together he has posted it to GitHub in a complete form for this part of the series.

On the TeachersPayTeachers.com Engineering blog they've posted a retrospective of what they went through to scale to millions of views per day on AWS using Kubernetes, React, PHP, and Elixir.

Here at Teachers Pay Teachers (or TpT, as we call it) we’ve been in the process of migrating our website from a PHP monolith to a microservice based architecture utilizing React, Phoenix and GraphQL. To date, this migration has delighted our community of educators with it’s myriad of UX improvements. We’re able to objectively measure these improvements with our A/B testing infrastructure which also enables us to gradually expose functionality to broader and broader levels of traffic.

Our product page receives ~2 million pages views per day making it the most heavily trafficked page on TpT (here’s an example page). We decided to use a simple UI refresh as an opportunity to migrate the page to our new tech stack. This post dives deeply into the challenges we overcame while scaling the product page on our new infrastructure!

The post then shows an infographic of their migration and the major steps in the process along a timeline. They also include an overview of their updated architecture, specific technical issues found during the migration and handling server load. They also cover error spikes they saw just after scaling and how they were either able to resolve or just dismiss them as "red herrings".

The SitePoint PHP blog has posted a tutorial from Christopher Pitt with another interesting use of PHP: using it and React to scan fingerprints to aid in multi-factor authentication.

We live in interesting times. A short while ago, a company called OfferZen announced a new, programmable credit card. It’s been a long time since I was this excited to get my hands on a piece of tech. My mind has been brimming with ideas ever since.

So, I decided to write about one of them!

I’m going to describe the process of building custom multi-factor authentication for all transactions. I don’t want to do the usual (and boring on its own) SMS or push notification one-time-password stuff. I want to build a fingerprint scanner right into my phone. [...] In this tutorial, we’re going to look at how to set up a simple iOS app using React Native. We will also set up an asynchronous HTTP server, with a web socket connection to the app.

He starts by taking some time to introduce React Native for those not familiar with it and what it brings to the table. He then walks through the installation of React Native and how to install the TouchID package using yarn. He also includes some simple JS code you can use to ensure it's all working. Next up he uses PHP to create an asynchronous server with the amphp/aerys package (this code). He creates the server with a "scan" endpoint handlers for opening the connection, performing the handshake and reacting to incoming data. Then he brings them together, connecting React and PHP, and sets up a script to wait for fingerprints. Code is included to perform the validation of the fingerprint and the end result should look something like this.

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).

In a follow up to his previous article about high performance PHP with React's help, Marc Schmidt has returned with a follow up post two years after the fact with some updates and additional information.

This is a follow up article on “Bring High Performance Into Your PHP App”, which went quiet viral with over 100k visits. This does not only show that many people still struggle with PHP and its performance, but also that people are highly interested in a solution to this kind of issues. PHP-PM could be one solution. But first things first. Over two years later since my blog post about high-performance things have changed dramatically.

[...] When I hacked together some lines of code back then in 2013 I never though that this kind of application style would ever succeed in the PHP world. [...] However, things have changed there as well.

He talks about some of the advancements that have been made since his previous post including PHP 7, improvements in PHP-FM and the HttpKernel component of the Symfony framework. Along the lines of bringing even more performance to PHP applications with React, they created an adapter to link the two. The post covers some of the currently open issues, the "good things" about it and some of the design issues to keep in mind when using it. He ends the post talking about where the PHP-PM project is now and some of the benchmarks about performance between PHP-PM and PHP-FPM.

Matthew Weier O'Phinney has a post to his site showing you how to combine PSR-7 request/response handling (his examples use Zend Expressive) with React and middleawre in your application.

I've been intending to play with React for some time, but, for one reason or another, kept putting it off. This past week, I carved some time finally to experiment with it, and, specifically, to determine if serving PSR-7 middleware was possible.

He starts with a brief introduction to React and what kind of functionality it brings to the table. He includes a bit of sample code showing it in use creating a basic HTTP server responding to any request with a simple "Hello World" message. He then starts on the React+PSR-7 integration, wrapping the request and response handling from one in the other to keep the expected responses the same. He also talks about serving up static files using the React+PSR-7 handling via a middleware on the Expressive side. Finally he shares the work he's done via a library to help make it easier to reuse in other situations. He shows the installation and usage of this library and sample requests you can use to test it out.

Gonzalo Ayuso has put together a post showing how (by implementing the Reactor design pattern) he created a simple web server inside a PHP application. It combines a few Symfony2 components and the React library to build a simple server in a bit more programatic way.

Normally we deploy our PHP applications in a webserver (such as apache, nginx, …). I used to have one apache webserver in my personal computer to play with my applications, but from time to now I prefer to use PHP’s built-in webserver for my experiments. It’s really simple. [...] With PHP we cannot do it. Sure? That assertion isn’t really true. We can do it. I’ve just create one small library to do it in two different ways. First running the built-in web server and also running one React web server.

The idea is that all that would be needed is a stand-alone PHP script that could be run anywhere and start up its own web server, no other software required. He includes a simplified version of the example, showing how to make servers with both React and PHP's own server. He also includes an example of a basic Silex application that uses it as well as some benchmarks (with Apache ab) for each of the implementations and their request/response times on average for simple and Silex requests.

In a a previous post Stoyan Stefanov introduced a setup where you could render React templates on the server-side with the help of PHP and the v8 parsing. In this second part of the series, he extends that system and shows how to use it to update views based on new data.

Part 1 ended with todos. The first one was to couple the server-side generated code with the client-side React, so that any updates past the initial page load will be handled by React's client JS, which is where React shines. Let's see how you can do just that.

He gives an example similar to his previous one - displaying a table - but shows how to inject some values from PHP as a JSON string into the component. This time he saves the output of that rendering into a variable and reuses it as a part of a whole site render later.