Reacting to the Isomorphic Buzz
1 like652 views
The document discusses isomorphic JavaScript rendering, emphasizing the ease of server-side rendering with tools like React and Flux. It outlines the differences between asynchronous browser operations and synchronous server requirements, detailing the data fetching and rendering processes. Additionally, it includes references to various resources and personal notes about development practices, particularly with Vim.
Reacting to the Isomorphic Buzz
- 1. ISOMORPHIC JAVASCRIPT RENDERING ON THE SERVER IS FUN AGAIN
- 4. UNIVERSAL JAVASCRIPT HURRY UP AND DO THE TALK BEFORE IT CHANGES AGAIN
- 5. I’m totally not missing the point of server-side rendered Javascript
- 8. If I wanted to drink the Universal Kool-Aid, is there something that can make it as easy as CSS?
- 9. React • Javascript library for building user interfaces • Simple components using JSX • Can be rendered on the server (more to come)
- 11. CONGRATULATIONS, YOU MADE A VIEW. You should see Nick’s .vimrc file on Github.
- 12. FLUX • Unidirectional Data Flow • Stores - ActionCreators - Dispatcher -Components • Event Based Architecture
- 13. –Alex G. H. Reed “So it’s basically a pub-sub system?”
- 18. 2 Entry Points into Application • Server: Index Route handler • Browser: app.js
- 19. Major Challenge • Browser application is asynchronous • Server needs to be synchronous
- 20. But I don’t want my Javascript to be synchronous!!!
- 21. Differences • Browser components communicate with Stores via Actions. (asynchronous) • Server components call the Store directly within a static method. (synchronous)
- 22. Server • Render the “route” or view • Pre-Fetch the data • Create the HTML as a String • Store the data where it can be accessed by the client application. • Return the response
- 24. Server Side Render • Determine what routes/components are active • Determine what data is needed • Get the data • Render the HTML
- 25. Have you tried Vim yet? you should try vim. I use vim.
- 26. Hapi Index Route Respond with index.html for every request.
- 27. • The router’s run() method is called with a routes configuration and the current location.
- 28. • Routes configuration matches a path to a component in your application. • When a path is active, the router stores a reference to all of the active components in its state.
- 29. • Notice we fetch the data (resolve all promises) and THEN call the callback with: • Null (no error) • The rendered HTML as a String • The merged data object from the fetches
- 31. Static Blocks • The statics object allows you to define static methods that can be called on the component class. • Can be run before any component instances are created.
- 35. • Notice we fetch the data (resolve all promises) and THEN call the callback with: • Null (no error) • The rendered html as a String • The merged data object from the fetches
- 36. Now the app has been rendered and the initial state data has been fetched. Hapi Index Route
- 42. It would have been readable on vim … Just Sayin
- 44. TSHIRTS!!!
- 45. TSHIRTS!!!
- 46. Browser • Bootstrap the application normally. • Determine which routes/components are active • Use the ‘seeded’ data instead of making API calls during bootstrap process. • When bootstrap is complete, app behaves as a normal SPA.
- 47. Browser entry
- 48. I like turtles.
- 49. Initialize the Rehydrator Somewhere in your app that runs before anything else:
- 50. Inside the TimesheetStore constructor Rehydrator instance method
- 51. In our Stores’ methods that retrieve data, we need to check for staged data.
- 53. Seriously, VIM is so Cool. jjjjjjjjjjkkkkkkkllkkjjjjjjjjklll
- 54. Me • @brucecoddington • https://github.com/brucecoddington • blue moon ghetto on Spotify
- 55. Project Code
- 56. You’re Missing the Point of Server-Side Rendered JS - Tom Dale react-router-mega-demo Universal Javascript - Michael Jackson check these out Ryan Florence’s React Conf Talk Axios - Matt Zabriske
- 57. Congrats Zach and Traci