Renderizando Componentes React no Servidor

Slide 1

Slide 1 text

RENDERIZANDO COMPONENTES REACT NO SERVIDOR BRUNO GENARO @BFGENARO

Slide 2

Slide 2 text

WHO IS THIS GUY? BRUNO GENARO FRONT-END ENGINEER

Slide 3

Slide 3 text

SAN FRANCISCO'S OFFICE

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

PIRACICABA/SP

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

WHAT IS THIS TALK ABOUT? JAVASCRIPT NODEJS UNIVERSAL VS ISOMORPHIC JAVASCRIPT REACTJS WHY? HOW? WHEN? WHERE?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

1995

Slide 14

Slide 14 text

1995 Brendan eich • hired by netscape • creator of javascript • javascript was written in 10 days!!!

Slide 15

Slide 15 text

2009 ryan dahl • creator of nodejs • Google’s V8 JavaScript runtime • javascript on the server

Slide 16

Slide 16 text

2011 Jordan Walke • creator of reactjs • one-way data flow • virtual dom • JSX

Slide 17

Slide 17 text

2011 still… Charlie Robbins • Isomorphic Javascript • JAVASCRIPT on the Client and the server

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

2014 michael jackson • universal Javascript • JAVASCRIPT on the Client and the server

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

LET THE FIGHT BEGIN THEY ARE THE SAME THING

Slide 22

Slide 22 text

THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE INVALIDATION AND NAMING THINGS. - PHIL KARLTON

Slide 23

Slide 23 text

let’s go back in time! being a JavaScript developer wasn’t a thing to be proud of

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

“real coding" was done in the backend

Slide 26

Slide 26 text

and now… even on the server (and client at the same time)

Slide 27

Slide 27 text

OK, LET’S TALK ABOUT REACT

Slide 28

Slide 28 text

UNIVERSAL REACT REACT CODE THAT RUNS ON CLIENT SIDE (BROWSER) AND SERVER SIDE

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

why? - usually jAVascript frameworks render on dom load (which can be really slow) - bad for user experience - SEO BENEfits

Slide 31

Slide 31 text

EVERY TIME YOU RELEASE A CLIENT-SIDE ONLY WEBSITE TO THE INTERNET SOMEONE WRITES A FRUSTRATED BLOG POST

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

how? ABILITY TO RENDER A REACT COMPONENT TO A STRING

Slide 34

Slide 34 text

react component

Slide 35

Slide 35 text

returns this string

Slide 36

Slide 36 text

WAIT! WE CAN RUN JAVASCRIPT ALSO ON THE SERVER SIDE, RIGHT?

Slide 37

Slide 37 text

THAT’S RIGHT! SO… SO WE CAN RENDER REACT COMPONENTS ON THE SERVER!

Slide 38

Slide 38 text

where?

Slide 39

Slide 39 text

then…

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

when? ELIMINATE THE FOUC (flash of unstyled content) Better overall user experience

Slide 42

Slide 42 text

when? SHARED CODE Easier code maintenance

Slide 43

Slide 43 text

when? PROGRESSIVE ENHANCEMENt

Slide 44

Slide 44 text

when? Improve search engine optimization

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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