The future of React with Universal web applications

In this talk I show how React has a powerful ability to render on the server side. This technique helps improve performance, SEO and makes maintenance much easier.

Transcript

1. THE FUTURE OF REACT WITH UNIVERSAL APPLICATIONS
2. WHO IS THIS GUY?
3. WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC JAVASCRIPT REACTJS HOW? WHEN? WHERE? WHY?
4. QUICK STORY - Netscape - JavaScript 1995 2009 - Google’s V8 - JavaScript on the browser - node.js - npm 2011 - JavaScript Isomorphic - JavaScript on the server and client 2014 - JavaScript Universal Brendan eich Ryan dahl charlie robbins MICHAEL JACKSON
5. let’s go back! being a JavaScript developer wasn’t a thing to be proud of
7. “real coding" was done in the backend
8. and now… even on the backend (and client together…)
9. LET’S THE FIGHT BEGIN THEY ARE THE SAME THING
10. THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE INVALIDATION AND NAMING THINGS. - PHIL KARLTON
12. OK, LET’S TALK ABOUT REACT
13. UNIVERSAL JAVASCRIPT SHARED JAVASCRIPT THAT RUNS ON CLIENT SIDE (BROWSER) AND SERVER SIDE
14. what does that mean? - On first page load, serve real server- rendered HTML - Client-side JS app bootstraps on top of server-rendered HTML - From that point on, it's a client-side JS app
15. react component:
16. returns this string:
17. ABILITY TO RENDER A REACT COMPONENT TO A HTML STRING
18. WAIT! YOU SAID WE CAN RUN JAVASCRIPT ALSO ON THE SERVER SIDE, RIGHT? I THINK IT’S CALLED NODEJS
19. THAT’S RIGHT! SO… SO WE CAN RENDER REACT COMPONENTS ON THE SERVER!
21. how?
22. LET’S TALK ABOUT VIEWS
23. Client-rendered view (Backbone) Handlebars template | | Server-rendered view (Rails) ERB template
24. ERB template:
25. HOLD ON… WHAT IS A TEMPLATE?
26. WE GIVE A TEMPLATE (FUNCTIONS) SOME DATA IT GIVES US BACK A STRING
27. SOURCE: W3SCHOOLS SPAGHETTI TEMPLATES
28. A better server-rendered View React components
29. WHY? ELIMINATE THE FOUC (flash of unstyled content)
30. WHY? SHARED CODE maintainable code
31. WHY? PROGRESSIVE ENHANCEMENT
32. WHY? SEO (search engine optimization)
34. THANK YOU! @BFGENARO