Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Isomorphic JavaScript Apps - NDC 2015

1,643 views

Published on

An introduction on how to build isomorphic JavaScript apps using React and node.js.

Published in: Software
  • Be the first to comment

Building Isomorphic JavaScript Apps - NDC 2015

  1. 1. ISOMORPHIC JAVASCRIPT APPLICATIONS (*yawn*…… wut?)
  2. 2. ABOUT ME Scandinavia Online JavaScript / node.js <3 github @eiriklv twitter @eiriklv
  3. 3. + =
  4. 4. ISOMORPHIC JAVASCRIPT Yes, fancy words - but why should I care..?
  5. 5. ISOMORPHIC wtf do you even mean bro?
  6. 6. JAVASCRIPT days since last framework?
  7. 7. JAVASCRIPT 0
  8. 8. JAVASCRIPT embularactymerbone.js (credits to @ryanflorence)
  9. 9. WEB DEVELOPMENT HTML5 CSS3 Isomorphic Async CDNAJAX JSON Minification WebSockets TranspilingSEO ES6
  10. 10. kamelåså.js
  11. 11. ISOMORPHIC JS Turns out: Not that scary after all
  12. 12. ISOMORPHIC JS server (node.js) client (browser) other (e.g iOS) JavaScript
  13. 13. ISOMORPHIC JS An abstraction on top of your environments
  14. 14. THE GOOD OL’ DAYS When everything was easy(?)
  15. 15. SERVER-SIDE Just ship it all from scratch every time
  16. 16. SERVER-SIDE So easy!
  17. 17. SERVER-SIDE But poor user experience if you interact a lot
  18. 18. NOT GOOD ENOUGH Gimme some dynamic web pages already!
  19. 19. CLIENT-SIDE (SPA) Look ma’ I can do all the things without reloading now!
  20. 20. CLIENT-SIDE (SPA)
  21. 21. CLIENT-SIDE (SPA) Don’t you dare press the back button
  22. 22. CLIENT-SIDE (SPA) SEO..?
  23. 23. SERVER-SIDE •Easy to reason about •SEO out of the box
  24. 24. SERVER-SIDE •Every action is a refresh •Poor user experience for dynamic apps
  25. 25. CLIENT-SIDE (SPA) •Actions without refresh •Less redundancy •Better user experience
  26. 26. CLIENT-SIDE (SPA) •No content before the js loads •SEO can be a PITA
  27. 27. BUT I WANT IT ALL!
  28. 28. SERVER + CLIENT •Gets your stuff done
  29. 29. •Two separate codebases for the same application SERVER + CLIENT
  30. 30. Well that turned into a mess pretty quickly.. anecdotal - YMMV
  31. 31. BOLD STATEMENTS Approaching..
  32. 32. ISOMORPHIC •All the above!
  33. 33. •None of the above!
 
 (yeah,right…) ISOMORPHIC
  34. 34. ISOMORPHISM Demystified
  35. 35. No more conceptual divide between the server and the client ISOMORPHISM
  36. 36. ISOMORPHISM server (node.js) client (browser) JavaScript (your app)
  37. 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. 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. 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. 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. 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. 42. We need to use abstractions that are environment agnostic ISOMORPHISM
  43. 43. HOW CAN I DO THIS? So many options..
  44. 44. REACT server (node.js) String (HTML) React.renderToString()
  45. 45. server (node.js) String client (browser) DOM (nodes) REACT React.render()
  46. 46. LETS BUILD ONE The simplest isomorphic JavaScript app?
  47. 47. +
  48. 48. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  49. 49. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  50. 50. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  51. 51. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  52. 52. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  53. 53. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  54. 54. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  55. 55. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  56. 56. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js |——/public | |—— bundle.js | |——app.js |——webpack.config.js
  57. 57. |——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js
  58. 58. > webpack
  59. 59. > node app.js
  60. 60. > open http://localhost:3000
  61. 61. We have an isomorphic JavaScript app!
  62. 62. THE POINT OF IT ALL To be fancy? (yes, but no)
  63. 63. Maintainability (single codebase) THE POINT OF IT ALL
  64. 64. SEO THE POINT OF IT ALL
  65. 65. •Progressive Enhancement •Graceful degradation THE POINT OF IT ALL
  66. 66. Abstracting away the gap betweet server and client THE POINT OF IT ALL
  67. 67. ISOMORPHISM There’s more to it
  68. 68. RENDERING
  69. 69. RENDERING render() vs. renderToString()
  70. 70. ROUTING - router
  71. 71. ROUTING req.url vs. window.location
  72. 72. ROUTING Different inputs - same API - router
  73. 73. DATA FETCHING superagent
  74. 74. DATA FETCHING XMLHttpRequest vs. http.request
  75. 75. DATA FETCHING superagent.get(‘/videos/12’)
  76. 76. DATA FETCHING Different implementations - same API
  77. 77. MODULES All abstractions must be isomorphic (i.e - work on both the client and server)
  78. 78. MODULES If a module does not depend on the environment it is isomorphic by default
  79. 79. DEMO Let’s look at fully isomorphic application in action
  80. 80. DEMO •rendering •routing •data fetching Isomorphic:
  81. 81. RECAP Why should we use this did you say..?
  82. 82. WHY YOU SHOULD BE EXITED •Less context switching •Maintainability •Best of both worlds
  83. 83. WHY YOU SHOULD BE EXITED •We push features faster(*) (*) anecdotal - YMMV
  84. 84. CODE github.com/eiriklv/ndc-isomorphic github.com/eiriklv/ndc-isomorphic-flux
  85. 85. QUESTIONS? github.com/eiriklv/ndc-isomorphic github.com/eiriklv/ndc-isomorphic-flux
  86. 86. THANKS! Scandinavia Online JavaScript / node.js <3 github @eiriklv twitter @eiriklv

×