Renderizando Componentes React no Servidor

Talk presented at FrontInSampa 2017 (07/01/2017) in Sao Paulo (Brazil)

Transcript

1. RENDERIZANDO COMPONENTES REACT NO SERVIDOR BRUNO GENARO @BFGENARO
2. WHO IS THIS GUY? BRUNO GENARO FRONT-END ENGINEER
3. SAN FRANCISCO'S OFFICE
9. PIRACICABA/SP
11. WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC JAVASCRIPT REACTJS WHY? HOW? WHEN? WHERE?
14. 1995 Brendan eich • hired by netscape • creator of javascript • javascript was written in 10 days!!!
15. 2009 ryan dahl • creator of nodejs • Google’s V8 JavaScript runtime • javascript on the server
16. 2011 Jordan Walke • creator of reactjs • one-way data flow • virtual dom • JSX
17. 2011 still… Charlie Robbins • Isomorphic Javascript • JAVASCRIPT on the Client and the server
19. 2014 michael jackson • universal Javascript • JAVASCRIPT on the Client and the server
21. LET THE FIGHT BEGIN THEY ARE THE SAME THING
22. THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE INVALIDATION AND NAMING THINGS. - PHIL KARLTON
23. let’s go back in time! being a JavaScript developer wasn’t a thing to be proud of
25. “real coding" was done in the backend
26. and now… even on the server (and client at the same time)
27. OK, LET’S TALK ABOUT REACT
28. UNIVERSAL REACT REACT CODE THAT RUNS ON CLIENT SIDE (BROWSER) AND SERVER SIDE
29. what does that mean? - On first page load, SERVER returns pre- rendered HTML STRING - Client-side JS app bootstraps on top of server-rendered HTML - From that point on, it's a client-side JS app
30. why? - usually jAVascript frameworks render on dom load (which can be really slow) - bad for user experience - SEO BENEfits
31. EVERY TIME YOU RELEASE A CLIENT-SIDE ONLY WEBSITE TO THE INTERNET SOMEONE WRITES A FRUSTRATED BLOG POST
33. how? ABILITY TO RENDER A REACT COMPONENT TO A STRING
34. react component
35. returns this string
36. WAIT! WE CAN RUN JAVASCRIPT ALSO ON THE SERVER SIDE, RIGHT?
37. THAT’S RIGHT! SO… SO WE CAN RENDER REACT COMPONENTS ON THE SERVER!
38. where?
39. then…
41. when? ELIMINATE THE FOUC (flash of unstyled content) Better overall user experience
42. when? SHARED CODE Easier code maintenance
43. when? PROGRESSIVE ENHANCEMENt
44. when? Improve search engine optimization
46. final thoughts •UNIVERSAL apps do NOT replace the server •instead it Is a way to PRE-initialize the client •after the page loads, it becomes a client-side JS app
47. QUICK RECAP • On first page load, SERVER returns pre-rendered HTML STRING • From that point on, it's a client-side JS app • ELIMINATE "FOUC" GIVING A BETTER USER EXPERIENCE • EASIER CODE MAINTENANCE • PROGRESSIVE ENHANCEMENt • IMPROVE SEARCH ENGINE OPTIMIZATION
48. what next?
51. orlandoJS
53. REACT WEBPACK UNIVERSAL REACT REDUX REACT INTL
54. THANK YOU! @BFGENARO