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.

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

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

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

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

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

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

7. Andrew Rota
@AndrewRota
Associate Director, Software Engineering

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

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

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

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

12. Make views a first-class aspect of your web
application

13. Client
Model
ControllerView

14. Client
Model
Controller
View

15. Flexibility to support “single-page
application” experiences

16. Frontend frameworks can unlock new
interaction patterns

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

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

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

24. Initial page load is
blank
JavaScript
loads
Client-Side Rendered

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

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

28. Client-Side
Rendered
Server-Side Rendered
JavaScript
loads
Hydration

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

30. React has built-in support for SSR
with ReactDOMServer

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)

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

34. Let’s look at a few different possible
architectures.

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

36. SSR with V8Js extension in PHP

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)

39. Success!

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 difficult to
maintain
- No built-in Node.js libraries
or tooling available
Client
V8js

42. SSR with requests to Node.js from PHP

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

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 official 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

47. SSR with in Node.js with data requests to PHP

48. Node.js requests to PHP
+ Full Node.js support
+ Both views and routes live in
Node.js
- May be difficult 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.

50. Future of React.js and SSR

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

53. Continued Investment in
React.js Server-Side
Rendering

54. Takeaways

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

56. React.js has solid server-side
rendering support

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

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

59. Give it a try!

60. Dank je wel!
Andrew Rota
@AndrewRota