Isomorphic JavaScript, What? Why? How?

A hands on introduction on isomorphic applications and how to make client and server rendered single page web apps using Express and React.
Demo code: http://bit.ly/isoninja

Transcript

1. Danial Khosravi Isomorphic JS What? Why? How? @danial_kh danialk
2. Agenda • What is Isomorphic Javascript and similarities and differences from SPAs and MPAs • Why do we need it and and what makes it special ! • How to build Isomorphic apps and what tools to use • Express + React + …
3. TL;DR • Isomorphic Javascript is a broad topic • Use React as the view layer on both client and server • Syncing the state of client and server rendered app • Lots of resources and sample codes at the end
4. What ? Isomorphic JS
5. JavaScrips code that runs on both the client and server
6. Multi-Page Applications Routing Logics Views HTML Validation Animation Client Server
7. Multi-Page Applications • Duplicate logic, different languages • Full reload on each rout, slow • I can’t even … • Server rendered content, fast initial load • SEO friendly, Crawlable !
8. Single-Page Applications API Static Files index.html Views Logic Client Server Routing Validation Animation DOM JS
9. Single-Page Applications • Not SEO friendly, need to pre-render pages for crawlers • Users see a blank page or a spinner for few second until application is loaded • Client rendered, faster • More complicated applications • More interactive
10. Isomorphic Applications API Static Files Shared! Views Logic Client Server Routing Validation Services Data I18n
11. What if I told you you could have the best of both worlds?
12. Why ? Isomorphic JS
13. • High Performance • Fast initial load (like MPAs) • Ajax and delivering data instead of html (SPAs) • Maintainable • SEO Friendly Best of both worlds
14. • Facebook • Instagram • Asana • RisingStack Isomorphic Apps in Production
15. How ? Isomorphic JS
16. ReactJS Official Website
19. Demo Isomorphic JS
20. A complete routing solution for React.js
21. React.Rocks Place to find lots of cool sample react apps
22. react-components.com Place to find lots of cool react components
23. Isomorphic JS Demo Codes http://bit.ly/isoninja Additional and Resources
24. Danial Khosravi Thanks! @danial_kh