Building Isomorphic Web Apps with React

Is an isomorphic web app right for you? React and the Virtual DOM make it possible to write code once that will run on the server and the browser. This has many potential benefits from SEO to performance to code maintainability. We will discuss the benefits and challenges present in building an isomorphic web application. Some of the challenges we will discuss will include how to handle asynchronous data with React's render cycle, synchronizing data and state between the server and browser and knowing when to write browser or server specific code. We will cover how to use React with Node and webpack to solve these problems.

Transcript

1. Building Isomorphic Web Apps with React @sfdrummerjs drummerjs.com github.com/elyseko/iso-react-demo
2. Of equal forms
3. Practical Isomorphic
4. Why Isomorphic? • SEO Crawlers • Performance • Dev Benefits
5. Syntax Overview of Isomorphic Concepts Code walkthrough Pros/Cons of Isomorphic Apps
6. Syntax
7. Apps and Libraries With React Non React
8. • Pellet (Vevo) • React Nexus • Relay (Facebook) React Isomorphic frameworks
9. • Virtual DOM • Functional View • renderToString React makes isomorphic possible
10. • Single Page Application (SPA) • React (vs .14) • React Router (vs 1.0) • Browser Sync to serve/update the file In the Browser
12. Folder structure - server - app.js (server entry) - routes.js - client - main.js (client entry) - routes.js - shared - routes.js - components - app.jsx - home.jsx
13. Build tools
14. Webpack lets you: • Build for each environment • Include environment specific code • Chunk code into smaller downloadable files
16. Abstract server/browser differences
17. Defining environments
18. Gulp + Browser Sync • Replaced webpack dev server • Gulp makes it easy to run browser sync
19. Shared routes
21. Client Router
22. Server Router
23. Render the view
24. Building the view
26. Child Views
27. Render the cards
29. Detail page code
30. Declaring our data needs
31. Getting the data
32. Higher Order Component
33. Server render is for bots and crawlers On the Server
34. Serving the page
35. Render on the server
36. Getting the data
37. Server Initial Browser Load SPA
38. Getting the data to the client
39. Reading the data on the client
40. Handling node vs browser
41. Pros of building an isomorphic App • Serve crawlers and bots • Initial load times are very fast • Code reuse between server and client
42. Cons of building an isomorphic app • Server render performance • Multiple environments = complications
43. The future of isomorphic • Relay • Virtual dom starting to appear more places - Ember • Virtual DOM optimizations • Meteor works with react
44. Recommendations • React • React Router • Webpack • Gulp & Browser Sync • Entry points not abstraction • Relay
45. Questions? github.com/elyseko/iso-react-demo elyse1213@gmail.com @sfdrummerjs drummerjs.com
46. References • [React](https://facebook.github.io/react/) • [React Router](https://github.com/rackt/react-router) • [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) • [Webpack](https://webpack.github.io/) • [Browser Sync](http://www.browsersync.io/) • [List of Isomorphic Apps](http://isomorphic.net/)