React.js has taken the web development world by storm, and for good reason: React offers a declarative, component-oriented approach to building highly-scalable web UIs. But how can we take advantage of a JavaScript library like React in our server-side PHP applications. In this talk l cover the different ways React.js can be integrated into an existing PHP web application: from a client-side only approach to multiple techniques that support full server-side rendering with a Node.js server or PHP’s v8js. I also discuss the trade-offs in each of these designs and the challenges involved with adding React to a PHP site. Most importantly, I consider the higher-level issue of how to improve view cohesion across the client-server divide in a PHP application.
9. • Introducing React.js
• Client-Side React.js with PHP
• Server-side rendering React.js with PHP
• JSX
• Fallback to server functionality
• What does it all mean?
21. Advantages of rendering
React.js client-side
• Server-agnostic
• Isolates UI layer to one technology: JavaScript
• Least amount of client-server sync complexity
• Easiest way to get started with React.js
22. For many apps, client-side rendering
with React.js is the most practical
and least complex approach
23. So why might I need
server-side rendering (SSR)?
• Performance sensitive applications
• Search engine optimization
• Site needs to work without JavaScript
25. SEO
• Allow site to be crawled by Search engines which don’t
execute JavaScript
• Google does crawl sites with JavaScript, though, so
this may be less of an issue today
26. Site works without JavaScript
• You may have users who disable JavaScript in their
browser (for example by using NoScript)
• The user should be able to interact with the site before
JavaScript downloads
• The site’s JavaScript fails to load
(poor connection, CDN issue, etc.)
46. Installing V8Js
• If you’re lucky there might be a binary available,
otherwise…
• Build and install the latest version of v8
• Build and install php-v8js
• Enable the v8js extension in PHP
• extension=v8js.so
47. - php v8js docs
“it's way more tedious to install
V8Js on Windows”
Oh, and…
58. node.js server
Easier to install, update
Standard environment
for running react.js on
the server
Maintain separate
server
Fewer framework-level
integrations
v8js or node.js
subprocess
Write JS in PHP
Complicated install and
update process
react-php-v8js library is
experimental
+
+
-
+
-
-
-
63. Babel: Option 1
1. Transform JSX to JS on file change
2. Consume transformed bundle in V8js or
node.js render server
Use grunt, gulp, webpack, make, or a custom script.
Or use your framework’s asset pipeline.
64. e.g., Using Laravel Elixir
and Browserify
elixir.config.js.browserify.transformers.push({
name: 'babelify',
options: {}
});
65. Babel: Option 2
1. Use babel’s require hook
2. Also requires standalone build for
production
(only for dev, node.js)
npm install babel-register
require('babel-register');
74. Architecture over Technologies
• React.js and PHP can work great together
• But there are other options for client/server framework
integration
• reactjs/react-rails
• laravel-angular (by @jadjoubran)
• At Wayfair we wrote and use tungsten.js
76. The library you choose is less important
than how you choose to use it
77. Takeaways
• React.js is most easily integrated in a PHP app if
you’re ok with client-side only rendering
• If you want server-side rendering, you have a few
options too: node.js render server, or V8js
• Focus primarily on architecture and design rather
than just the choice of individual libraries