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

Renderizando Componentes React no Servidor

Renderizando Componentes React no Servidor

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

E3a73555aea1ff3c2c3d68921b2b77a1?s=128

Bruno Genaro

July 01, 2017
Tweet

More Decks by Bruno Genaro

Other Decks in Technology

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. PIRACICABA/SP

  10. None
  11. WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC

    JAVASCRIPT REACTJS WHY? HOW? WHEN? WHERE?
  12. None
  13. 1995

  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
  18. None
  19. 2014 michael jackson • universal Javascript • JAVASCRIPT on the

    Client and the server
  20. None
  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
  24. None
  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
  32. None
  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…

  40. None
  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

  45. None
  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?

  49. None
  50. None
  51. orlandoJS

  52. None
  53. REACT WEBPACK UNIVERSAL REACT REDUX REACT INTL

  54. THANK YOU! @BFGENARO