Integrating React.js Into a PHP Application: Dutch PHP 2019

Integrating React.js Into a PHP Application Slides online at: @AndrewRota | Dutch PHP Conference 2019

What is React.js? “A JavaScript library for building user interfaces” https://reactjs.org/

React.js has, by far, the greatest market share of any frontend framework Laurie Voss, npm and the future of JavaScript (2018)

...and it’s still growing Laurie Voss, npm and the future of JavaScript (2018)

Among developers, use of both PHP and React.js are correlated Stack Overflow, Developer Survey Results 2019

As developers, as want to build the best interfaces for our users, and React is arguably one of the best tools for building modern web UIs.

Andrew Rota @AndrewRota Associate Director, Software Engineering

Agenda ● ⚛ Lightning Introduction to React.js ● 🎨 Getting Started with Client-Side Rendered React ● ⚙ Server-Side Rendering Architectures ■ V8Js PHP Extension ■ PHP Requests to a Node.js Service ■ Node.js Requests to PHP ● ✨ Future of React.js SSR ● 💡Takeaways

What can React.js add to a PHP web application?

How can we integrate React.js into a PHP web application?

PHP and React.js can complement each other in a web application

Make views a first-class aspect of your web application

Flexibility to support “single-page application” experiences

Frontend frameworks can unlock new interaction patterns

React.js makes it easy (and fun) to create and manage rich view logic

What is React.js? “A JavaScript library for building user interfaces”

Declarative ‣ Design views as “components” which accept props and return React elements ‣ React will handle rendering and re-rendering the DOM when data changes function Hello(props) { return <h1>Hello, {props.name}</h1>; }

Composable ‣ In addition to DOM nodes, components can also render other components ‣ You can also render child components for more generic “box” components using props.children. function Hello(props) { return <h2>My name is, {props.name}</h2>; } function NameBadge(props) { return (<div> Welcome to {props.conf} Conference.<br /> {props.children} </div>) } function App() { return (<div> <NameBadge conf={'Dutch PHP 2019'}> <Hello name={'Andrew'} /> </NameBadge> </div>) }

Encapsulate State ‣ Components can manage their own encapsulated state ‣ When state is shared across components, a common pattern is to lift that state up to a common ancestor ‣ Libraries such as Redux or MobX can help with more complex state management import {Component} from "react"; class App extends Component { state = {count: 0}; handleClick = () => { this.setState(state => { return {count: state.count + 1} }); }; render() { return <div> <span>Count: {this.state.count} </span> <button onClick={this.handleClick}>+</button> </div>; } }

Adding React.js to your PHP site: the easy way… 100% Client-Side Rendering

Render a React App ‣ Start with the root element on a page, and use ReactDOM.render to start the application const root = document.getElementById('root'); const App = <h1>Hello, world</h1>; ReactDOM.render(App, root);

Initial page load is blank JavaScript loads Client-Side Rendered

Incremental Adoption ‣ A 100% react application would have a single react root. ‣ Use ReactDOM.render() to create multiple roots when converting an application ‣ In general, convert components from the “bottom up” of the view tree

But we’ve only partially integrated React.js into our site... Enter Server-Side Rendering

What is server-side rendering (SSR)? Constructing the HTML for your view on the server-side of the web request.

Client-Side Rendered Server-Side Rendered JavaScript loads Hydration

Why server-side render? ‣ Performance ‣ Search engine optimization ‣ Site works without JavaScript

React has built-in support for SSR with ReactDOMServer

Render a React App (Server Side) ‣ Running on the server, ReactDOMServer.renderToString() will return a string of HTML ‣ Running on the client, ReactDOM.hydrate() will attach the event listeners, and pick up subsequent rendering client-side // Shared const App = <h1>Hello, world</h1>; // Server side ReactDOMServer.renderToString(App); // Client side ReactDOM.hydrate(App, root);

Universal JavaScript: The same application code (components) is run on both client and server. (sometimes also referred to as Isomorphic JavaScript)

For universal JavaScript we need a way to execute JavaScript on the server.

Let’s look at a few diﬀerent possible architectures.

1. V8Js → running JavaScript from PHP 2. Node.js → requests to a standalone JS service a. Web requests go to PHP, which then makes requests to Node.js service for HTML b. Web requests go to Node.js, which then makes requests to PHP for data

SSR with V8Js extension in PHP

What is V8Js? A PHP extension which embeds the V8 JavaScript engine

A PHP extension which embeds the V8 JavaScript engine 1. Install V8Js ○ Try the V8Js Docker image or a pre-built binary ○ Or compile latest version yourself 2. Enable the extension in php (extension=v8js.so)

Execute JS in PHP ‣ With V8js, JS can be executed from PHP ‣ From this starting point, we could build a PHP class to consume JS modules, and output the result as HTML <?php $v8 = new V8Js(); $js = "const name = 'World';"; $js .= "const greeting = 'Hello';"; $js .= "function printGreeting(str) {"; $js .= " return greeting + ‘, ' + str + '!';"; $js .= "}"; $js .= "printGreeting(name);"; echo($v8->executeString($js));

Using the V8Js Extension + No additional service calls need to be made - Builds can be diﬀicult to maintain - No built-in Node.js libraries or tooling available Client V8js

SSR with requests to Node.js from PHP

What is Node.js? A JavaScript runtime built on the V8 engine.

A JavaScript runtime built on the V8 engine. 1. Install node.js as a standalone service; can be on same host, or another. 2. Your web host may already support it ○ See oﬀicial Docker images ○ Or install yourself

PHP requests to Node.js + Full Node.js support + PHP can still handle routing, and partial view rendering - Additional service to manage Client

Hypernova: a Node.js service for server-side rendering JavaScript views Hypernova ‣ Airbnb open sourced a standalone Node.js service for rendering React components: airbnb/hypernova ‣ Wayfair open sourced a PHP client for Hypernova: wayfair/hypernova-php

SSR with in Node.js with data requests to PHP

Node.js requests to PHP + Full Node.js support + Both views and routes live in Node.js - May be diﬀicult to incrementally migrate to - PHP is essentially just a data access layer Client

Next.js: SSR framework for React.js ‣ Next.js is a complete framework for server-side rendered react in Node.js, with out-of-the-box support for features like routing, code splitting, caching, and data fetching.

JS Loads Hydrate all at onceStreaming Server Side Rendering React now supports streaming using ReactDOMServer.renderToNodeStream() . We can use HTML Chunked Encoding to flush content as its rendered ready (e.g., PHP’s ob_flush() ). Streaming SSR

Load JS incrementally for progressive hydration Streaming Server Side Rendering Streaming SSR w/ Partial Hydration

Continued Investment in React.js Server-Side Rendering

Easiest way to get started with React.js is 100% client-side rendering

React.js has solid server-side rendering support

Think about how you’re architecting the view layer of your application

React.js + SSR can help make the view layer a first class piece of your web architecture

Dank je wel! Andrew Rota @AndrewRota

Integrating React.js Into a PHP Application: Dutch PHP 2019

More Related Content

What's hot

Similar to Integrating React.js Into a PHP Application: Dutch PHP 2019

More from Andrew Rota

Recently uploaded

Integrating React.js Into a PHP Application: Dutch PHP 2019