The future of React with Universal web applications

Everything started when Brendan Eich wrote a language to run Scheme on the Netscape Navigator. Then, Ryan Dahl got the Google's V8 JavaScript runtime and developers would write JavaScript on the server side.

Nowadays people write JavaScript everywhere (web servers, to fly drones, tablets, mobile phones, refrigerators etc). Isomorphic JavaScript is used to describe JavaScript code that “can be executed on the client and the server”.

React has a powerful ability to render also on the server side. This is huge for perfomance and SEO. Also, sharing the same code between client and server makes maintenance much easier.

Transcript

1. THE FUTURE OF REACT WITH UNIVERSAL APPLICATIONS PRESENTED BY: BRUNO GENARO @BFGENARO
2. WHO IS THIS GUY? BRUNO GENARO FRONT-END ENGINEER
5. WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC JAVASCRIPT REACTJS WHY? HOW? WHEN? WHERE?
7. 1995 Brendan eich • hired by netscape • creator of javascript • javascript was written in 10 days!!!
8. 2009 ryan dahl • creator of nodejs • Google’s V8 JavaScript runtime • javascript on the server
9. 2011 Jordan Walke • creator of reactjs • one-way data flow • virtual dom • JSX
10. 2011 still… Charlie Robbins • Isomorphic Javascript • JAVASCRIPT on the Client and the server
12. 2014 michael jackson • universal Javascript • JAVASCRIPT on the Client and the server
14. LET THE FIGHT BEGIN THEY ARE THE SAME THING
15. THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE INVALIDATION AND NAMING THINGS. - PHIL KARLTON
16. let’s go back in time! being a JavaScript developer wasn’t a thing to be proud of
18. “real coding" was done in the backend
19. and now… even on the server (and client at the same time)
20. OK, LET’S TALK ABOUT REACT
21. UNIVERSAL REACT REACT CODE THAT RUNS ON CLIENT SIDE (BROWSER) AND SERVER SIDE
22. 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
23. why? - usually jAVascript frameworks render on dom load (which can be really slow) - bad for user experience - SEO BENEfits
24. EVERY TIME YOU RELEASE A CLIENT-SIDE ONLY WEBSITE TO THE INTERNET SOMEONE WRITES A FRUSTRATED BLOG POST
26. how? ABILITY TO RENDER A REACT COMPONENT TO A STRING
27. react component
28. returns this string
29. WAIT! YOU SAID WE CAN RUN JAVASCRIPT ALSO ON THE SERVER SIDE, RIGHT? I THINK IT’S CALLED NODEJS
30. THAT’S RIGHT! SO… SO WE CAN RENDER REACT COMPONENTS ON THE SERVER!
31. where?
32. then…
34. when? ELIMINATE THE FOUC (flash of unstyled content) Better overall user experience
35. when? SHARED CODE Easier code maintenance
36. when? PROGRESSIVE ENHANCEMENt
37. when? Improve search engine optimization
39. 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
40. 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
41. THANK YOU! @BFGENARO