The future of React with Universal web applications

Slide 1

Slide 1 text

THE FUTURE OF REACT WITH UNIVERSAL APPLICATIONS PRESENTED BY: BRUNO GENARO @BFGENARO

Slide 2

Slide 2 text

WHO IS THIS GUY? BRUNO GENARO FRONT-END ENGINEER

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

1995

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

LET THE FIGHT BEGIN THEY ARE THE SAME THING

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

“real coding" was done in the backend

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

OK, LET’S TALK ABOUT REACT

Slide 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

how? ABILITY TO RENDER A REACT COMPONENT TO A STRING

Slide 27

Slide 27 text

react component

Slide 28

Slide 28 text

returns this string

Slide 29

Slide 29 text

WAIT! YOU SAID WE CAN RUN JAVASCRIPT ALSO ON THE SERVER SIDE, RIGHT? I THINK IT’S CALLED NODEJS

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

where?

Slide 32

Slide 32 text

then…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

when? SHARED CODE Easier code maintenance

Slide 36

Slide 36 text

when? PROGRESSIVE ENHANCEMENt

Slide 37

Slide 37 text

when? Improve search engine optimization

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 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 40

Slide 40 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

Slide 41

Slide 41 text

THANK YOU! @BFGENARO