Building Isomorphic JavaScript Apps - NDC 2015
1 like1,895 views
This document discusses isomorphic JavaScript applications. Isomorphic apps allow developers to write code that runs both on the server and client using the same JavaScript. This avoids maintaining separate codebases and allows search engines to index content rendered on the server. The document outlines how isomorphic apps handle rendering, routing, data fetching and modules in a consistent way across server and client. It provides an example of building a simple isomorphic app and demonstrates core concepts like rendering, routing and data fetching.
Building Isomorphic JavaScript Apps - NDC 2015
- 2. ABOUT ME Scandinavia Online JavaScript / node.js <3 github @eiriklv twitter @eiriklv
- 3. + =
- 4. ISOMORPHIC JAVASCRIPT Yes, fancy words - but why should I care..?
- 5. ISOMORPHIC wtf do you even mean bro?
- 6. JAVASCRIPT days since last framework?
- 7. JAVASCRIPT 0
- 9. WEB DEVELOPMENT HTML5 CSS3 Isomorphic Async CDNAJAX JSON Minification WebSockets TranspilingSEO ES6
- 10. kamelåså.js
- 11. ISOMORPHIC JS Turns out: Not that scary after all
- 13. ISOMORPHIC JS An abstraction on top of your environments
- 14. THE GOOD OL’ DAYS When everything was easy(?)
- 15. SERVER-SIDE Just ship it all from scratch every time
- 17. SERVER-SIDE But poor user experience if you interact a lot
- 18. NOT GOOD ENOUGH Gimme some dynamic web pages already!
- 19. CLIENT-SIDE (SPA) Look ma’ I can do all the things without reloading now!
- 21. CLIENT-SIDE (SPA) Don’t you dare press the back button
- 23. SERVER-SIDE •Easy to reason about •SEO out of the box
- 24. SERVER-SIDE •Every action is a refresh •Poor user experience for dynamic apps
- 25. CLIENT-SIDE (SPA) •Actions without refresh •Less redundancy •Better user experience
- 26. CLIENT-SIDE (SPA) •No content before the js loads •SEO can be a PITA
- 27. BUT I WANT IT ALL!
- 28. SERVER + CLIENT •Gets your stuff done
- 29. •Two separate codebases for the same application SERVER + CLIENT
- 30. Well that turned into a mess pretty quickly.. anecdotal - YMMV
- 33. •None of the above! (yeah,right…) ISOMORPHIC
- 35. No more conceptual divide between the server and the client ISOMORPHISM
- 37. ISOMORPHISM Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript
- 38. ISOMORPHISM Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript
- 39. ISOMORPHISM Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript
- 40. ISOMORPHISM Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript
- 41. ISOMORPHISM Request from user (HTTP) Load the same JavaScript on client «Hook» into the rendered app Respond with HTML Render on server with JavaScript
- 42. We need to use abstractions that are environment agnostic ISOMORPHISM
- 43. HOW CAN I DO THIS? So many options..
- 49. LETS BUILD ONE The simplest isomorphic JavaScript app?
- 50. +
- 55. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 56. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 58. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 60. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 62. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 70. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 74. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 79. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 84. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js |——/public | |—— bundle.js | |——app.js |——webpack.config.js
- 86. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
- 87. > webpack
- 88. > node app.js
- 100. We have an isomorphic JavaScript app!
- 101. THE POINT OF IT ALL To be fancy? (yes, but no)
- 102. Maintainability (single codebase) THE POINT OF IT ALL
- 103. SEO THE POINT OF IT ALL
- 104. •Progressive Enhancement •Graceful degradation THE POINT OF IT ALL
- 105. Abstracting away the gap betweet server and client THE POINT OF IT ALL
- 106. ISOMORPHISM There’s more to it
- 107. RENDERING
- 109. ROUTING - router
- 111. ROUTING Different inputs - same API - router
- 115. DATA FETCHING Different implementations - same API
- 116. MODULES All abstractions must be isomorphic (i.e - work on both the client and server)
- 117. MODULES If a module does not depend on the environment it is isomorphic by default
- 118. DEMO Let’s look at fully isomorphic application in action
- 120. RECAP Why should we use this did you say..?
- 121. WHY YOU SHOULD BE EXITED •Less context switching •Maintainability •Best of both worlds
- 122. WHY YOU SHOULD BE EXITED •We push features faster(*) (*) anecdotal - YMMV
- 125. THANKS! Scandinavia Online JavaScript / node.js <3 github @eiriklv twitter @eiriklv