React - The importance of “isomorphic” SPA

Transcript

1. React The importance of “isomorphic” Single Page Apps
2. It’s a great time to be building web apps
3. Browser Performance
8. So why are websites are getting slower?
9. Top Ecommerce Sites Load Times
10. Website Bloat? Source: httparchive.org 2011 2014 increase CSS 29kb 55kb 1.9x Images 499kb 1190kb 2.4x Fonts 7kb 67kb 9.6x JS 147kb 295kb 2.0x Total 0.83mb 1.86mb 2.2x 1st Sept 2011 — 1st Sept 2014
11. memkite.com/solutions/telcos/ Mobile internet (not as fast as you think)
12. Persistence Application Logic View Layer Routing/Controller Server Client Rise of the Single Page App Form Validation DOM Manipulation Animations
13. Persistence Application Logic View Layer Routing/Controller Server Client Form Validation DOM Manipulation Animations
14. Single Page Apps ‘native app’ like Quick ‘next’ page load times Transient/off-line connections Front-End friendly Photo © Sarah Reid
15. But how slow is too slow? Photo © 2010 J. Ronald Lee
16. 1st Hand Example
17. Persistence Application Logic View Layer Routing/Controller Server Client Form Validation DOM Manipulation Animations
18. Shared Persistence Application Logic View Layer Routing/Controller Server Client Form Validation DOM Manipulation Animations
19. client + server isomorphic nerds.airbnb.com/isomorphic-javascript-future-web-apps/
20. Naming Things One of computer science’s harder problems http://deviq.com/naming-things
21. Using precise mathematical words in contexts that make vague sense to a layperson ruin their original usage. Make up a new word, repurpose a shitty English word But leave our damn maths words alone! news.ycombinator.com/item?id=7990191 “ isomorphic
23. Virtual DOM Components What is
24. Virtual DOM Components JSX (optional) What is
25. Components
26. Components
27. Components
28. Subcomponents
29. JSX Components
30. ES6
31. CoffeeScript
32. ClojureScript/Om
33. Event Handling
34. Change of State
35. Optimistic Rendering
36. .text .author Virtual DOM .CommentBox .CommentForm submit .Conversation h2 .Comment text h2 .Comment text
37. .text .author Virtual DOM h2 .Comment text .CommentBox .CommentForm submit .Conversation h2 .Comment text h2 .Comment text
38. Virtual DOM h2 .Comment text appendChild(…) Render Loop .text .author h2 .Comment text .CommentBox .CommentForm submit .Conversation h2 .Comment text h2 .Comment text
39. h2 .Comment text h2 .Comment text appendChild(…) h2 .Comment text h2 .Comment text removeChild(…) Virtual DOM h2 .Comment text appendChild(…) Render Loop .text .author h2 .Comment text .CommentBox .CommentForm submit .Conversation h2 .Comment text
40. h2 .Comment text h2 .Comment text .text .author h2 .Comment text .CommentBox .CommentForm submit .Conversation h2 .Comment text Virtual DOM
41. Isomorphic by Default
42. Example Client/Server Routing
43. Demo Time
44. abebooks.com bhphotovideo.com cduniverse.com Barnesandnoble.com nordstrom.com net-a-porter.com amazon.com fineartamerica.com 6pm.com wiley.com urbanoutfitters.com shopbop.com 2.9s 2.7s 2.7s 2.5s 2.3s 2.1s 2s 2s 2s 1.8s 1.7s 1.3s
45. net-a-porter.com amazon.com 2.1s 2s amazon.com 2.1s
47. Native Connection
48. Progress Indicators http://usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/
49. Async JavaScript Loading $.ready() anti-pattern http://www.theasta.net/blog/2012/06/23/three-key-moments-web-performance/
50. Browsers are faster than ever Photo © Carlo Borlenghi let’s not waste the performance
51. client + server Isomorphic
52. Code Reuse SEO Performance client + server Isomorphic
53. Better Than Native client + server Isomorphic
55. Thanks! @markuskobler cohesive.io