![<?php
$component_name = 'Greeting';
$ch = curl_init("https://nodeserver.local:3333/");
$props = ["name" => "BGPHP"];
$data = ["data" => $props, "path" => "./resources/assets/js/" . $component_name . ".js"];
$data_string = json_encode($data);
$props_string = json_encode($props);
curl_setopt(/* … */); $result = curl_exec($ch); <div id="app"><?= $result ?></div>
<script src="{{ asset('js/react-bundle.js') }}"></script>
<script src="{{ asset('js/components.js') }}”></script>
<script>ReactDOM.render(React.createElement(<?= $component_name ?>, "<?= $props_string ?>"), document.getElementById('app'));</script>](https://image.slidesharecdn.com/reactphp-161008101809/75/Integrating-React-js-Into-a-PHP-Application-41-2048.jpg)
![<?php
$react_source = file_get_contents(__DIR__ . 'path/to/react-bundle.js');
$app_source = file_get_contents(__DIR__ . 'path/to/components.js');
$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('Greeting', [ 'name' => 'world' ]); ?> <div id="app"><?= $rjs->getMarkup(); ?></div> <script src="path/to/react-bundle.js'"></script>
<script src="path/to/components.js"></script>
<script><?= $rjs->getJS("#app"); ?></script>](https://image.slidesharecdn.com/reactphp-161008101809/75/Integrating-React-js-Into-a-PHP-Application-54-2048.jpg)
![<div>
@react_component('Hello', $data )
</div>
Route::get('/foo', function() {
return view('foo', ['data' => [ 'name' => 'world'] ]);
});](https://image.slidesharecdn.com/reactphp-161008101809/75/Integrating-React-js-Into-a-PHP-Application-56-2048.jpg)
Uploaded byAndrew Rota
Integrating React.js Into a PHP Application
The document discusses integrating React.js into PHP applications, highlighting the advantages of client-side rendering and options for server-side rendering (SSR) using Node.js or V8JS. It emphasizes React.js's component-driven architecture and the importance of considering performance, SEO, and user experience in web applications. The author concludes that while client-side integration is simpler, several SSR approaches can accommodate PHP environments.
Integrating React.js Into a PHP Application
- 1. Integrating React.js intoa PHP Application @AndrewRota | #BGPHP16
- 2.
- 3. Software Engineer atwayfair.com JavaScript Platform Team @AndrewRota Boston, MA Andrew Rota
- 4. Let’s take astep back.
- 5. Traditional Website Lifecycle ServerBrowser HTMLResponse HTML Request ServerBrowser HTML Response HTML Request ServerBrowser HTML Response HTML Request
- 6. Traditional Website Stack Server-SideMVC Framework Data Persistance JavaScript
- 7. Single Page Application Lifecycle Browser HTMLResponse HTML Request Server Data Response Data Request Server Data Response Data Request Server
- 8. Single Page Application Stack Server-SideMVC Framework Data Persistance JavaScript
- 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?
- 10. What is React.js? “AJavaScript library for building user interfaces”
- 11.
- 12. Entire component re-renders ondata change No more manual DOM manipulation! Implemented under the hood with “virtual DOM” engine.
- 13. “Learn once, write anywhere” ReactNative for native iOS and Android Apps
- 14. var Greeting =React.createClass({ render: function() { return <strong> Hello, {this.props.name}! </strong>; } }); ReactDOM.render(<Greeting name="World"/>, el);
- 15. var Greeting =React.createClass({ displayName: "Greeting", render: function render() { return React.createElement( "strong", null, "Hello, ", this.props.name, "!" ); } }); ReactDOM.render(React.createElement( Greeting, {name: "World"}), el);
- 16. var Greeting =React.createClass({ render: function() { return <strong> Hello, {this.props.name}! </strong>; } }); ReactDOM.render(<Greeting name="World"/>, el);
- 17. React.createClass({ // ... render: function(){ return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange} value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div> ); } }); This is today’s demo based on the simple todo list app from facebook.github.io/react/
- 18.
- 19.
- 20.
- 21. Advantages of rendering React.jsclient-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 mightI need server-side rendering (SSR)? • Performance sensitive applications • Search engine optimization • Site needs to work without JavaScript
- 24. Server-Side Rendering + Performance Morecontrol to reduce time to first meaningful paint Client-Side +SSR JS Loads Rendered Interactive JS Loads
- 25. SEO • Allow siteto 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 withoutJavaScript • 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.)
- 27. Don’t let JavaScript becomea single point of failure
- 28.
- 29. var Greeting =React.createClass({ render: function() { return <strong> Hello, {this.props.name}! </strong>; } }); ReactDOM.render(<Greeting name="World"/>, el);
- 30. var Greeting =React.createClass({ render: function() { return <strong> Hello, {this.props.name}! </strong>; } }); ReactDOMServer.renderToStaticMarkup(<Greeting name="World"/>); <strong>Hello, World!</strong>
- 31. var Greeting =React.createClass({ render: function() { return <strong> Hello, {this.props.name}! </strong>; } }); ReactDOMServer.renderToString(<Greeting name="World"/>); <strong data-reactroot="" data-reactid="1" data-react- checksum="1367554571"><!-- react-text: 2 -->Hello, <!-- /react- text --><!-- react-text: 3 -->World<!-- /react-text --><!-- react-text: 4 -->!<!-- /react-text --></strong>
- 32. This is greatif our server runs JavaScript
- 33. The easiest wayto do React.js SSR is by running Node.js on the server
- 34.
- 35.
- 36. But what ifyour server is PHP?
- 37. Two options forSSR with PHP on the server side
- 38. React.js SSR witha Node.js Service
- 39.
- 40. curl -X POST -H'Content-Type: application/json' -d ‘{"path":"./resources/assets/js/Greeting.js", "data": {"name": "BGPHP"}}' http://127.0.0.1:3333/ <div data-reactroot="" data-reactid="1" data-react- checksum="-520141946"><strong data-reactid="2"><!-- react-text: 3 -- >Hello, <!-- /react-text --><!-- react-text: 4 -->BGPPH<!-- /react- text --><!-- react-text: 5 -->!<!-- /react-text --></strong></div>
- 41. <?php $component_name = 'Greeting'; $ch= curl_init("https://nodeserver.local:3333/"); $props = ["name" => "BGPHP"]; $data = ["data" => $props, "path" => "./resources/assets/js/" . $component_name . ".js"]; $data_string = json_encode($data); $props_string = json_encode($props); curl_setopt(/* … */); $result = curl_exec($ch); <div id="app"><?= $result ?></div> <script src="{{ asset('js/react-bundle.js') }}"></script> <script src="{{ asset('js/components.js') }}”></script> <script>ReactDOM.render(React.createElement(<?= $component_name ?>, "<?= $props_string ?>"), document.getElementById('app'));</script>
- 42. But what ifwe could execute JavaScript from within PHP…
- 43.
- 44.
- 45.
- 46. Installing V8Js • Ifyou’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 v8jsdocs “it's way more tedious to install V8Js on Windows” Oh, and…
- 48.
- 49. <?php $v8 = newV8Js(); echo($v8->executeString(" var name = 'World'; const GREETING = 'Hello'; function greeting(str) { return GREETING + ‘, ' + str + '!'; } greeting(name); ")); JS!!!
- 50. nacmartin/phpexecjs V8js or node.jssubprocess
- 51.
- 52. <?php $phpexecjs = newPhpExecJs(); echo($phpexecjs->evalJs(" var name = 'World'; const GREETING = 'Hello'; function greeting(str) { return GREETING + ‘, ' + str + '!'; } greeting(name); "));
- 53.
- 54. <?php $react_source = file_get_contents(__DIR__. 'path/to/react-bundle.js'); $app_source = file_get_contents(__DIR__ . 'path/to/components.js'); $rjs = new ReactJS($react_source, $app_source); $rjs->setComponent('Greeting', [ 'name' => 'world' ]); ?> <div id="app"><?= $rjs->getMarkup(); ?></div> <script src="path/to/react-bundle.js'"></script> <script src="path/to/components.js"></script> <script><?= $rjs->getJS("#app"); ?></script>
- 55.
- 56. <div> @react_component('Hello', $data ) </div> Route::get('/foo',function() { return view('foo', ['data' => [ 'name' => 'world'] ]); });
- 57. Limenius/ReactBundle phpexecjs or node.jsservice (for Symfony)
- 58. node.js server Easier toinstall, 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 + + - + - - -
- 59. And remember, forany of these options: + Cache in production!
- 60. So what about allthat JSX?
- 61. ReactDOM.render(<Greeting name="World"/>, el); Technically,this isn’t JavaScript
- 62. ReactDOM.render(<Greeting name="World"/>, el); Babelto the rescue! ReactDOM.render(React.createElement(Greeting, { name: "World" }), el);
- 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 LaravelElixir 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');
- 66. …without JavaScript. Let’s talkfunctionality
- 67. • Use reallinks instead of buttons for navigation • Use forms with real submit actions for mutating data • Test without JavaScript!
- 68. this isn’t reallya talk about React.js …or even PHP. But…
- 69. Let’s go acouple levels higher
- 70. What does MVCmean in a world of JavaScript frameworks?
- 71.
- 72. Separate by concerns, nottechnologies
- 73.
- 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
- 75.
- 76. The library youchoose is less important than how you choose to use it
- 77. Takeaways • React.js ismost 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
- 78.