{"id":1715,"date":"2013-09-13T13:42:44","date_gmt":"2013-09-13T18:42:44","guid":{"rendered":"http:\/\/www.phpied.com\/?p=1715"},"modified":"2013-09-13T13:42:44","modified_gmt":"2013-09-13T18:42:44","slug":"server-side-react-with-php","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/server-side-react-with-php\/","title":{"rendered":"Server-side React with PHP"},"content":{"rendered":"

Problem: Build web UIs<\/em>
\nSolution: React
\nProblem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)<\/em>
\nSolution: React page<\/a> to render the first view
\nProblem: Can't host node.js apps \/ I have tons of PHP code<\/em>
\nSolution: Use PHP then!<\/p>\n

This post is an initial hack to have React components render server-side in PHP.<\/p>\n

Previously...<\/h2>\n

So you know about React<\/a> and how to build your own<\/a> components. And you know you can run JavaScript inside PHP<\/a> scripts, thanks to v8js. So nothing can stop you from rendering React components on the server side in PHP. Which means you send the first view from the server and then continue from there.<\/p>\n

Step by step (oh baby!<\/a>)<\/h2>\n
    \n
  1. Get the latest React build<\/a>, unzip to a react\/<\/code> sub-directory of where your PHP scripts live on the server<\/li>\n
  2. Create your own components, and put them in react\/build\/<\/code> too for simplicity. I'll just have one Table<\/code> component from the earlier blog post<\/a><\/li>\n
  3. Create test.php that concatenates JS code consisting of: stubs, react, custom components. Fetch (or fake) data somehow (this where you PHP code you've been slaving away for the past 3 years shines). Render the custom component with the PHP-fetched data.<\/li>\n
  4. Load http:\/\/localhost\/test.php<\/li>\n
  5. Profit!<\/li>\n<\/ol>\n

    How (A-haw haw haw haw<\/a>)<\/h2>\n

    First, the custom component goes into react\/build\/table.js<\/code>:<\/p>\n

    \n
    var<\/span> <\/span>Table<\/span> = <\/span>React<\/span>.<\/span>createClass<\/span>(<\/span>{<\/span>\r\n  <\/span>render<\/span>: <\/span>function<\/span> <\/span>(<\/span>)<\/span> <\/span>{<\/span>\r\n    <\/span>return<\/span> <\/span>(<\/span>\r\n      <\/span>React<\/span>.<\/span>DOM<\/span>.<\/span>table<\/span>(<\/span>null<\/span>, <\/span>React<\/span>.<\/span>DOM<\/span>.<\/span>tbody<\/span>(<\/span>null<\/span>,\r\n        <\/span>this<\/span>.<\/span>props<\/span>.<\/span>data<\/span>.<\/span>map<\/span>(<\/span>function<\/span> <\/span>(<\/span>row<\/span>)<\/span> <\/span>{<\/span>\r\n          <\/span>return<\/span> <\/span>(<\/span>\r\n            <\/span>React<\/span>.<\/span>DOM<\/span>.<\/span>tr<\/span>(<\/span>null<\/span>, \r\n              <\/span>row<\/span>.<\/span>map<\/span>(<\/span>function<\/span> <\/span>(<\/span>cell<\/span>)<\/span> <\/span>{<\/span>\r\n                <\/span>return<\/span> <\/span>React<\/span>.<\/span>DOM<\/span>.<\/span>td<\/span>(<\/span>null<\/span>, <\/span>cell<\/span>)<\/span>;\r\n              <\/span>}<\/span>)<\/span>)<\/span>)<\/span>;\r\n        <\/span>}<\/span>)<\/span>)<\/span>)<\/span>)<\/span>;\r\n  <\/span>}<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Alternatively the more readable version goes to react\/src\/test.js<\/code> and you transform it to the build version:<\/p>\n
    \n
    var Table = React.createClass({\r\n  render: function () {\r\n    return (\r\n      <\/span><<\/span>table<\/span>><\/span><<\/span>tbody<\/span>><\/span>\r\n        {this.props.data.map(function(row) {\r\n          return (\r\n            <\/span><<\/span>tr<\/span>><\/span>\r\n              {row.map(function(cell) {\r\n                return <\/span><<\/span>td<\/span>><\/span>{cell}<\/span><\/<\/span>td<\/span>><\/span>;\r\n              })}\r\n            <\/span><\/<\/span>tr<\/span>><\/span>);\r\n        })}\r\n      <\/span><\/<\/span>tbody<\/span>><\/span><\/<\/span>table<\/span>><\/span>\r\n    );\r\n  }\r\n});<\/span><\/pre>\n<\/div>\n
    Now, let's see about this test.php<\/code>. Starting:<\/p>\n
    \n
     \r\n<\/span><?php<\/span>\r\n<\/span>$v8<\/span> = <\/span>new<\/span> <\/span>V8Js<\/span>(<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Hm, easy enough. Now let's start pushing some JS to an array to concatenate later.<\/p>\n
    \n
    $react<\/span> = <\/span>array<\/span>(<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Concatenating code is ugly, but here in PHP we have to pass JS code to V8 as a string. Surely the following code can be cleaned up a bit by using external files, but for a quick hack it's just \"perfect\" :).<\/p>\n
    \n
    \/\/<\/span> stubs, react<\/span><\/span>\r\n<\/span>$react<\/span>[<\/span>]<\/span> = <\/span>"<\/span>var console = {warn: function(){}, error: print}<\/span>"<\/span>;\r\n<\/span>$react<\/span>[<\/span>]<\/span> = <\/span>"<\/span>var global = {}<\/span>"<\/span>;\r\n<\/span>$react<\/span>[<\/span>]<\/span> = <\/span>file_get_contents<\/span>(<\/span>'<\/span>react\/build\/react.js<\/span>'<\/span>)<\/span>;\r\n<\/span>$react<\/span>[<\/span>]<\/span> = <\/span>"<\/span>var React = global.React<\/span>"<\/span>;<\/span><\/pre>\n<\/div>\n
    React uses console.warn()<\/code> and console.error()<\/code> which do not exist in V8. But there's print()<\/code> in V8. So warnings will be silenced and errors will be printed on the page. We can be more creating here, e.g. print server-side JS errors in client side JS console but hey, this is a proof of concept.<\/p>\n
    The global<\/code> jazz is a React bug IMO because at the top of the react.js file there's a bootstrapping code that goes like: window ? window.React : global.React<\/code>. In V8 there's no window<\/code> nor global<\/code>, so hence the workaround.<\/p>\n
    Load custom react components:<\/p>\n
    \n
    \/\/<\/span> my custom components<\/span><\/span>\r\n<\/span>$react<\/span>[<\/span>]<\/span> = <\/span>file_get_contents<\/span>(<\/span>'<\/span>react\/build\/table.js<\/span>'<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Now the \"brains\" of the app. We must fetch data somehow. This is where your legacy PHP can do its thing. We don't care about this as long as we end up with an array of data to put in a table<\/p>\n
    \n
    \/\/<\/span> my application<\/span><\/span>\r\n<\/span>$data<\/span> = <\/span>array<\/span>(<\/span> <\/span>\/\/<\/span> database, web services, whatevers<\/span><\/span>\r\n    <\/span>array<\/span>(<\/span>1<\/span>, <\/span>2<\/span>, <\/span>3<\/span>)<\/span>,\r\n    <\/span>array<\/span>(<\/span>4<\/span>, <\/span>5<\/span>, <\/span>6<\/span>)<\/span>,\r\n    <\/span>array<\/span>(<\/span>7<\/span>, <\/span>8<\/span>, <\/span>9<\/span>)<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Now for the magic: instead  of rendering a react component in a DOM node, you can render it to a string. This is an async operation, so you need to pass a callback. V8's print()<\/code> is the most appropriate callback. It will simply pass the output to PHP's print()<\/code>\/echo<\/code><\/p>\n
    \n
    $react<\/span>[<\/span>]<\/span> = <\/span>sprintf<\/span>(<\/span>\r\n  <\/span>"<\/span>React.renderComponentToString(Table({data: %s}), print)<\/span>"<\/span>,\r\n  <\/span>json_encode<\/span>(<\/span>$data<\/span>)<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    That's enough JavaScript!<\/p>\n
    \n
    \/\/<\/span> concat all JS<\/span><\/span>\r\n<\/span>$react<\/span> = <\/span>implode<\/span>(<\/span>"<\/span>;<\/span>\\n<\/span>"<\/span>, <\/span>$react<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
    Run the JavaScript:<\/p>\n
    \n
    try<\/span> <\/span>{<\/span>\r\n  <\/span>$v8<\/span>-><\/span>executeString<\/span>(<\/span>$react<\/span>)<\/span>;\r\n<\/span>}<\/span> <\/span>catch<\/span> <\/span>(<\/span>V8JsException<\/span> <\/span>$e<\/span>)<\/span> <\/span>{<\/span>\r\n  <\/span>\/\/<\/span> blow up spectacularly<\/span><\/span>\r\n  <\/span>echo<\/span> <\/span>"<\/span><pre><\/span>"<\/span>; <\/span>var_dump<\/span>(<\/span>$e<\/span>)<\/span>;\r\n<\/span>}<\/span><\/pre>\n<\/div>\n
    Boom!<\/p>\n
    \"phpreact\"<\/p>\n
    todo<\/h2>\n
      \n
    • Marry the server-side generated code with React on the client side to handle events and reactive updates (in my example I don't even load client side React)<\/li>\n
    • Strip the events part of React as it's not needed server-side<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
      Problem: Build web UIs Solution: React Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives) Solution: React page to render the first view Problem: Can’t host node.js apps \/ I have tons of PHP code Solution: Use PHP then! This post […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,40,366],"tags":[],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1715"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=1715"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1715\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=1715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=1715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}