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

Renderizando Componentes React no Servidor

E3a73555aea1ff3c2c3d68921b2b77a1?s=47 Bruno Genaro
July 01, 2017
Technology
1
180

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

See All by Bruno Genaro
The future of React with Universal web applications
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
74
The future of React with Universal web applications
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
72
Understand Front-End Roles
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
1
86
Why did I build my website using ReactJS?
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
26
Essential JavaScript libraries to improve your workflow
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
38
Consuming Third Party Data With JSONP
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
48
Improving your code with Linter tools
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
42
Improving your Sublime Text 3 workflow
E3a73555aea1ff3c2c3d68921b2b77a1?s=48 brunogenaro
0
160

Other Decks in Technology

See All in Technology
チームとチームのチーム
1a679952cdf455ecd6a15cbde7ae80d5?s=48 eiel
1
910
機械学習システムアーキテクチャ入門 #1
8fa31051503b09846584c49cd53d2f80?s=48 asei
3
1.2k
2022年度新卒技術研修「Docker」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
360
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
2
410
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.5k
Internet Explorer は Microsoft Edge へ - IE の歩みとこれから -
B8a848a5d23adf51f4f5373da52c2804?s=48 yuhara0928
1
3.5k
2022年度新卒技術研修「 ソフトウェアテスト」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
350
20220622_FinJAWS_あのときにAWSがあったらこうできた
Feb135945a82ac9c12e91ba5f7e8bce2?s=48 taketakekaho
0
100
Data in Google I/O - IO Extended GDG Seoul
3bd69093dbe39b14603242b96cfbd7c6?s=48 kennethanceyer
0
150
リファインメントは楽しいかね？
F4ea0f5f6211de72f79576d020308de5?s=48 kitamu_mu
1
350
マネージャーからみたスクラムと自己管理化
D14332b39b012820d44d362a3e2a8d98?s=48 shibe23
0
960
noteの品質課題に立ち上げ直後のQAチームが挑んだ軌跡
963393f2d643a54c41db3812c679f361?s=48 hiroki_tanaka
1
200

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
27
6.5k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
60k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
597
210k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k

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