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

Symfony Finland:
Attaching React.js to a template rendered on the server with Twig
Nov 13, 2017 @ 09:27:49

On the Symfony Finland blog there's a new tutorial posted sharing the results of their effort to get React.js to play nice with Twig, a popular PHP templating library, via a server-side generated template.

React.js is a JavaScript view library that allows developers to create interfaces is a structured way based on a hierarchical component structure. React can either create the DOM structure from scratch, or attach to an existing one rendered by the server to speed up the first load.

If you create Twig templates that match the React rendering, you can take advantage of this feature without a complicated rendering setup.

While there were other methods created to try to solve the problem (rendering the React.js template on the server side) they show a better way via React.js 16 and Twig templates. Code is included showing how to create a simple React application, and how to hook in Twig via a "hydrate" call to pull in the content. React.js has a bit of an issue by default but a little extra work on the Twig side fixes that (see the post for the solution on that one).

tagged: reactjs template render twig serverside inject content tutorial

Link: https://symfony.fi/entry/attaching-react-js-to-a-template-rendered-on-the-server-with-twig

Sitepoint PHP Blog:
ReactJS in PHP: Writing Compilers Is Easy and Fun!
Aug 28, 2017 @ 11:11:10

The SitePoint PHP blog has a tutorial they recently posted from Christopher Pitt covering creating compilers in PHP and examples of it in use.

Many developers avoid writing their own compilers or interpreters, thinking that the topic is too complex or difficult to explore properly. I used to feel like that too. Compilers can be difficult to make well, and the topic can be incredibly complex and difficult. But, that doesn’t mean you can’t make a compiler.

[...] Compilers (and interpreters) begin with humble string manipulation and temporary variables. When they’re sufficiently popular (or sufficiently slow) then the experts can step in; to replace the string manipulation and temporary variables with unicorn tears and cynicism. [...] In our case, we want to maintain most of the PHP syntax, but we also want to add our own little bit of syntax on top. We could create a whole new interpreter…or we could preprocess the new syntax, compiling it to syntactically valid PHP code.

He starts off with some of the basic concepts involved with creating compilers and breaking the current code down into tokens. He shares all the code you'll need to follow along as he goes through the parsing and splitting of the tokens. He shows how to organize the tokens into a more AST-like structure and building it out into a more correct PHP structure. He ends the tutorial by taking what he's helped you create and integrate it with the Pre PHP-based precompiler as a custom compiler. He includes some examples of it in use and a simple screencast of what the end result looks like (a basic task list application).

tagged: reactjs tutorial compiler parser token pre precompile integration

Link: https://www.sitepoint.com/reactjs-php-writing-compilers-easy-fun/

SitePoint PHP Blog:
Procedurally Generated Game Terrain with ReactJS, PHP, and Websockets
Apr 03, 2017 @ 13:41:45

Christopher Pitt has continued his series on the SitePoint PHP blog showing the creation of a game combining PHP & React JS. In this latest part of the series he builds on part one and hows how to procedurally generated game terrain.

Last time, I began telling you the story of how I wanted to make a game. I described how I set up the async PHP server, the Laravel Mix build chain, the ReactJS front-end, and the Web Sockets connecting all this together. Now, let me tell you about what happened when I starting building the game mechanics with this mix of ReactJS, PHP, and Websockets…

He started with the idea of a simple "farm" in the game represented by a set of "patches" in the game (pixels, basically). He includes the code he use to create it and allow for new ones to be created on request (including both the PHP side and the React.js code). He then shows how to modify it to make each farm requested come in with a bit of randomness as far as what kind of terrain (dirt/grass/wheat) it came in with. The post wraps up with the code required to render the farm in the UI and style it based on what kind of terrain it contained.

tagged: game terrain reactjs tutorial generated farm render procedural

Link: https://www.sitepoint.com/procedurally-generated-game-terrain-reactjs-php-websockets/

SitePoint PHP Blog:
Game Development with ReactJS and PHP: How Compatible Are They?
Mar 29, 2017 @ 11:56:13

The SitePoint PHP blog has a new tutorial posted from Christopher Pitt (known for his "interesting" uses of PHP) covering the combination of ReactJS and PHP in game development. He wants to answer the question of how compatible they are and provide an example to help illustrate.

I started thinking about this the moment I decided to try and build a game using PHP and ReactJS. The trouble is that I knew nothing about the dynamics of multiplayer games, or how to think about and implement player-based economies.

I wasn’t even sure that I knew enough about ReactJS 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 lead to me writing 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.

He hops right in to the code from there, starting with the setup of the backend functionality making use of Aerys for the HTTP/WebSocket handling. He creates a few basic routes then moves on to the frontend using Laravel Mix to pull in the dependencies he needs and perform the steps needed to build things out. He then goes through the process of creating the application frontend and connecting the WebSocket requests to a "GameSocket" endpoint. He finishes up the post with updates the Javascript to add in functionality to send a message to all users connected to the WebSocket.

tagged: reactjs game development combination tutorial aerys laravelmix

Link: https://www.sitepoint.com/game-development-with-reactjs-and-php-how-compatible-are-they/

Symfony Finland:
Symfony & staying relevant: React.js rendering, GraphQL and Neo4j OGM
Sep 20, 2016 @ 11:15:50

On the Symfony Finland site there's a new post providing some examples of how the Symfony framework is staying relevant with new technologies and trends that have emerged recently in the web development world.

Symfony2 just turned five years old some months ago. This is an eternity in the web world and you average technology stack has likely grown in complexity since then. In addition to the standard components in LAMP you'll likely be peddling with a number of complementary technologies.

[...] The stability and flexibility have enabled Symfony to take hold also in more conservative industries like travel, where the backend systems are critical. [...] Next let's take a few options that developers of contemporary web applications may choose to adopt in their Symfony full stack framework applications when needed.

The post covers three "in style" technologies and how the Symfony framework (and community) are keeping pace:

  • React.js Server Side Rendering with ReactBundle
  • GraphQL APIs with the GraphQLBundle
  • An Graph Database storage layer using Neo4j over PHP OGM

Each point includes a bit of information about both the technology and the related bundle with plenty of links to other resources and tutorials.

tagged: symfony relevance reactjs graphql neo4j ogm bundle

Link: https://www.symfony.fi/entry/symfony-staying-relevant-react-js-rendering-graphql-and-neo4j-ogm

Frank de Jonge:
Rendering ReactJS templates server-side
May 21, 2015 @ 09:17:50

Frank de Jonge has posted a tutorial to his site showing how you can render React.js templates server-side in PHP. He makes use of the V8JS extension to execute Javascript inside of PHP and echo out the rendered result.

The last couple of months I've been working with ReactJS quite extensively. It's been a very rewarding and insightful journey. There is, however, one part that kept coming back to me: server-side rendering. How on earth am I going to use ReactJS when I want to render my templates on the server? So, I sat down and looked at the possibilities.

He suggests two options, running a small Node application or using the V8JS extension, and opts for trying the second option to meet his needs. He talks about the "why" of rendering server-side JS and gives a brief introduction to V8JS and the workflow he'll follow to use it. He helps you get this library via Composer to make working with it easier and provides an example of how to use it. After trying out this method, he then goes back to option #1, the small Node application (what he ended up choosing). He walks through the setup of this application, showing how to set it up inside a Lumen application and using Express to output the generated templates and data. He then hooks this into the PHP application via a simple HTTP client grabbing the results and pushing them back out to the page.

tagged: reactjs template serverside nodejs v8js extension http lumen

Link: http://blog.frankdejonge.nl/rendering-reactjs-templates-server-side/