Slide 1

Slide 1 text

THE FUTURE OF REACT WITH UNIVERSAL APPLICATIONS

Slide 2

Slide 2 text

WHO IS THIS GUY?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

QUICK STORY - Netscape - JavaScript 1995 2009 - Google’s V8 - JavaScript on the browser - node.js - npm 2011 - JavaScript Isomorphic - JavaScript on the server and client 2014 - JavaScript Universal Brendan eich Ryan dahl charlie robbins MICHAEL JACKSON

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

“real coding" was done in the backend

Slide 8

Slide 8 text

and now… even on the backend (and client together…)

Slide 9

Slide 9 text

LET’S THE FIGHT BEGIN THEY ARE THE SAME THING

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

OK, LET’S TALK ABOUT REACT

Slide 13

Slide 13 text

UNIVERSAL JAVASCRIPT SHARED JAVASCRIPT THAT RUNS ON CLIENT SIDE (BROWSER) AND SERVER SIDE

Slide 14

Slide 14 text

what does that mean? - On first page load, serve real server- rendered HTML - Client-side JS app bootstraps on top of server-rendered HTML - From that point on, it's a client-side JS app

Slide 15

Slide 15 text

react component:

Slide 16

Slide 16 text

returns this string:

Slide 17

Slide 17 text

ABILITY TO RENDER A REACT COMPONENT TO A HTML STRING

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

how?

Slide 22

Slide 22 text

LET’S TALK ABOUT VIEWS

Slide 23

Slide 23 text

Client-rendered view (Backbone) Handlebars template | | Server-rendered view (Rails) ERB template

Slide 24

Slide 24 text

ERB template:

Slide 25

Slide 25 text

HOLD ON… WHAT IS A TEMPLATE?

Slide 26

Slide 26 text

WE GIVE A TEMPLATE (FUNCTIONS) SOME DATA IT GIVES US BACK A STRING

Slide 27

Slide 27 text

SOURCE: W3SCHOOLS SPAGHETTI TEMPLATES

Slide 28

Slide 28 text

A better server-rendered View React components

Slide 29

Slide 29 text

WHY? ELIMINATE THE FOUC (flash of unstyled content)

Slide 30

Slide 30 text

WHY? SHARED CODE maintainable code

Slide 31

Slide 31 text

WHY? PROGRESSIVE ENHANCEMENT

Slide 32

Slide 32 text

WHY? SEO (search engine optimization)

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

THANK YOU! @BFGENARO