## Going Isomorphic with React [@bensmithett](https://twitter.com/bensmithett)
## Isomorphic JavaScript
![](img/airbnb.png)
### Isomorphic JavaScript Shared JavaScript that runs on both the client & server
### "Holy Grail" web app - On first page load, serve real server-rendered HTML - Client-side JS app bootstraps on top of server-rendered HTML - rather than bootstrapping into an empty div - From that point on, it's a client-side JS app
## [React](http://facebook.github.io/react/) A JavaScript library for building user interfaces The V in MVC
This is a React component: ``` var HiButton = React.createClass({ handleClick: function () { alert("hi " + this.props.name); }, render: function () { return ( <button onClick={this.handleClick}> Say hi </button> ); } }); ```
React.renderComponent(<HiButton name="Ben" />, document.body);

``` React.renderComponentToString(<HiButton name="Ben" />); ``` returns this string... ``` <button data-reactid=".1" data-react-checksum="762252829"> Say hi </button> ```
React component + ability to run JS

=

Ability to render a React component to a HTML string
We can run JS on servers now...

... so we can render React components on the server!
## The End...?
### Let's talk about Views
### Let's talk about server-rendered Views ![](img/yahoo-1998.jpg)
React is a pretty great option for server-rendered views.
Client-rendered view (Backbone)
Handlebars template
|
|
Server-rendered view (Rails)
ERB template
ERB template: ![](img/erb.png)
What is a template?
We give a template some data

It gives us back a string
Templates are just functions.
Early on they were big, ugly, complicated functions: ![](img/php.png) *Source: W3Schools*
We reacted to unmaintainable spaghetti templates ### "no logic in templates!"
But we wanted a little bit of flexibility... ### "no business logic in templates!" (but the occasional loop or conditional is ok...)
Sometimes we need to do string manipulation, or sorting... ### "view logic belongs in ViewModels, not templates!" (except loops & conditionals, which are still arbitrarily allowed in templates)
**Current state of play for server-rendered views:** - *Mostly* logic-less template, but loops & conditionals are allowed - Template logic written in the same language as other server code - ViewModel/Presenter handles more complex logic - Different files
A better server-rendered View: **React components**
![](img/component.png)
![](img/lex.jpg)
![](img/component1.png)
![](img/component2.png)
![](img/component3.png)
![](img/component4.png)
![](img/component5.png)
#### So using React for server-side templates is awesome
#### Meanwhile, back in 2014... client-side JS is a bit of a thing
Client-rendered view
Handlebars template
|
|
Server-rendered view
ERB template
Client-rendered view
React component
|
|
Server-rendered view
React component
## Isomorphic JavaScript!
Server ``` <body> <%= React.renderComponentToString(<UserProfileView />); %> </body> ``` Browser ``` React.renderComponent(<UserProfileView />, document.body); ``` When browser-React encounters HTML rendered by server-React, it just adds event listeners.
Same component file used on client & server!
But what if my back end isn't node.js? **How can I do this in Rails/PHP/.NET/whatever?**
### View rendering as a service Your app might already talks to other services over HTTP - Search - Authentication - Third party APIs
*https://github.com/facebook/react/tree/master/examples/server-rendering* ![](img/server-render.png)
https://github.com/reactjs/react-rails
#### Bonus! Free progressive enhancement! - You can render a view on the server based on application state at any point in time. - If something goes wrong in the browser, no worries! Submit a form, click a link... - The server will render the app in exactly the same state as the client JS would have.
live demo time...
# Thanks! [@bensmithett](https://twitter.com/bensmithett) ----- We're hiring awesome developers! [envato.com/careers](http://www.envato.com/careers) ----- [Server-rendered React components in Rails](http://bensmithett.com/server-rendered-react-components-in-rails/) [React server-rendering examples](https://github.com/facebook/react/tree/master/examples/server-rendering) [Airbnb post introducing Rendr](http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/)