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

Recommended

More Related Content

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

More from Andrew Rota (17)

Recently uploaded (20)

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