This document discusses integrating React.js into a PHP application. It provides an overview of React.js and its benefits for building user interfaces. It then covers different approaches to server-side rendering (SSR) with React in a PHP application, including using the V8Js PHP extension to run JavaScript, making requests from PHP to a Node.js service, and making requests from Node.js to PHP. It emphasizes that React.js and PHP can complement each other and discusses frameworks like Next.js that support SSR. The key takeaways are that React.js can enhance PHP applications, there are different SSR architectures to integrate them, and giving React.js a try can help modernize app views.
8. 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
19. 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>;
}
20. 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>)
}
21. 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>;
}
}
22. Adding React.js to your PHP site:
the easy wayâŠ
100% Client-Side Rendering
23. 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);
25. 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
26. But weâve only partially integrated
React.js into our site...
Enter Server-Side Rendering
31. 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);
32. Universal JavaScript: The same application
code (components) is run on both client and
server.
(sometimes also referred to as Isomorphic JavaScript)
35. 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
37. What is V8Js?
A PHP extension which embeds the
V8 JavaScript engine
38. 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)
40. 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));
41. 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
44. 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
45. PHP requests to Node.js
+ Full Node.js support
+ PHP can still handle routing,
and partial view rendering
- Additional service to manage
Client
46. 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
48. 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
49. 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.
51. 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
52. Load JS incrementally for progressive hydration
Streaming Server Side Rendering
Streaming SSR w/ Partial Hydration