Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The future of React with Universal web applicat...

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.

Bruno Genaro

October 21, 2016
Tweet

More Decks by Bruno Genaro

Other Decks in Technology

Transcript

  1. WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC

    JAVASCRIPT REACTJS WHY? HOW? WHEN? WHERE?
  2. 1995 Brendan eich • hired by netscape • creator of

    javascript • javascript was written in 10 days!!!
  3. 2009 ryan dahl • creator of nodejs • Google’s V8

    JavaScript runtime • javascript on the server
  4. THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE

    INVALIDATION AND NAMING THINGS. - PHIL KARLTON
  5. 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
  6. why? - usually jAVascript frameworks render on dom load (which

    can be really slow) - bad for user experience - SEO BENEfits
  7. EVERY TIME YOU RELEASE A CLIENT-SIDE ONLY WEBSITE TO THE

    INTERNET SOMEONE WRITES A FRUSTRATED BLOG POST
  8. WAIT! YOU SAID WE CAN RUN JAVASCRIPT ALSO ON THE

    SERVER SIDE, RIGHT? I THINK IT’S CALLED NODEJS
  9. 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
  10. 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