Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

58 views

Published on

Talk delivered on June 8, 2019 at Dutch PHP Conference 2019.

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Integrating React.js Into a PHP Application Slides online at: @AndrewRota | Dutch PHP Conference 2019
  2. 2. What is React.js? “A JavaScript library for building user interfaces” https://reactjs.org/
  3. 3. React.js has, by far, the greatest market share of any frontend framework Laurie Voss, npm and the future of JavaScript (2018)
  4. 4. ...and it’s still growing Laurie Voss, npm and the future of JavaScript (2018)
  5. 5. Among developers, use of both PHP and React.js are correlated Stack Overflow, Developer Survey Results 2019
  6. 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. 7. Andrew Rota @AndrewRota Associate Director, Software Engineering
  8. 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. 9. What can React.js add to a PHP web application?
  10. 10. How can we integrate React.js into a PHP web application?
  11. 11. PHP and React.js can complement each other in a web application
  12. 12. Make views a first-class aspect of your web application
  13. 13. Client Model ControllerView
  14. 14. Client Model Controller View
  15. 15. Flexibility to support “single-page application” experiences
  16. 16. Frontend frameworks can unlock new interaction patterns
  17. 17. React.js makes it easy (and fun) to create and manage rich view logic
  18. 18. What is React.js? “A JavaScript library for building user interfaces”
  19. 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. 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. 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. 22. Adding React.js to your PHP site: the easy way… 100% Client-Side Rendering
  23. 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. 24. Initial page load is blank JavaScript loads Client-Side Rendered
  25. 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. 26. But we’ve only partially integrated React.js into our site... Enter Server-Side Rendering
  27. 27. What is server-side rendering (SSR)? Constructing the HTML for your view on the server-side of the web request.
  28. 28. Client-Side Rendered Server-Side Rendered JavaScript loads Hydration
  29. 29. Why server-side render? ‣ Performance ‣ Search engine optimization ‣ Site works without JavaScript
  30. 30. React has built-in support for SSR with ReactDOMServer
  31. 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. 32. Universal JavaScript: The same application code (components) is run on both client and server. (sometimes also referred to as Isomorphic JavaScript)
  33. 33. For universal JavaScript we need a way to execute JavaScript on the server.
  34. 34. Let’s look at a few different possible architectures.
  35. 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. 36. SSR with V8Js extension in PHP
  37. 37. What is V8Js? A PHP extension which embeds the V8 JavaScript engine
  38. 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. 39. Success!
  40. 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. 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. 42. SSR with requests to Node.js from PHP
  43. 43. What is Node.js? A JavaScript runtime built on the V8 engine.
  44. 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. 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. 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. 47. SSR with in Node.js with data requests to PHP
  48. 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. 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. 50. Future of React.js and SSR
  51. 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. 52. Load JS incrementally for progressive hydration Streaming Server Side Rendering Streaming SSR w/ Partial Hydration
  53. 53. Continued Investment in React.js Server-Side Rendering
  54. 54. Takeaways
  55. 55. Easiest way to get started with React.js is 100% client-side rendering
  56. 56. React.js has solid server-side rendering support
  57. 57. Think about how you’re architecting the view layer of your application
  58. 58. React.js + SSR can help make the view layer a first class piece of your web architecture
  59. 59. Give it a try!
  60. 60. Dank je wel! Andrew Rota @AndrewRota

×