Basic React Intro - Speaker Deck

Slide 1

Slide 1 text

A REALLY BASIC INTRO TO REACT & REACT ON RAILS HSIN HSIAO TASTING COLLECTIVE

Slide 2

Slide 2 text

REACT IS THE “V” IN MVC • View library (render markup & handle UI) • Created, used and open-sourced by Facebook • Designed to handle evolving multi-state events • Frameworkless - easy to plug in • FAST! Really!

Slide 3

Slide 3 text

HELLO JOHN • https://facebook.github.io/react

Slide 4

Slide 4 text

HELLO JOHN WITH JSX

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

REACT FEATURES • Components: Javascript functions, no special syntax or rules • Reusability • Composability • Uni-directional ﬂow of data

Slide 7

Slide 7 text

THINKING IN REACT COMPOSITION OF COMPONENTS STATE & PROPS DATA FLOW

Slide 8

Slide 8 text

DATA FLOW • Data (model) change event • State & props change • DOM RE-RENDER

Slide 9

Slide 9 text

DOM RE-RENDER? • React re-renders your app on every update • ISN’T THAT SUPER SLOW?

Slide 10

Slide 10 text

VIRTUAL DOM • Representation of DOM in memory • On data update, new (virtual) DOM diffs with old DOM • Only the difference is re-rendered • “Re-render, not mutate your DOM”

Slide 11

Slide 11 text

DOM OPERATIONS ARE EXPENSIVE! • JQuery way: $(‘#ticket-number’).html(), $(‘#plus’).on(‘click’) … • DOM traversing and manipulations are costly • React way: compute diff in memory & touch minimal set of DOM nodes

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

APP STRUCTURE: MVC

Slide 14

Slide 14 text

GAME OF TRACING ARROWS

Slide 15

Slide 15 text

FB BUDDY LIST Source: Pete Hunt’s Talk on FutureJS 2014

Slide 16

Slide 16 text

• Alice went ofﬂine • Bob went ofﬂine • Steve went online • Bob went online • Charles is idle • Charles is on mobile

Slide 17

Slide 17 text

Slide 18

Slide 18 text

–some developer “Data change over time is the root of all evil.”

Slide 19

Slide 19 text

FLUX • React: best if only handles UI logic • Outsource tasks to FLUX • Task #1: Talk to server & fetch data • Task #2: Track user actions • Task #3: Track states and mutate states

Slide 20

Slide 20 text

FLUX ACHITECTURE • Components/server send actions to Dispatcher • Dispatcher signal server to update model & dispatch payload (data) to Store • Store updates “state” & emit change signal for React to re-render

Slide 21

Slide 21 text

TIME FOR AN EXAMPLE https://github.com/hsin421/react4nycda

Slide 22

Slide 22 text

REACT ON RAILS: 3 WAYS TO INTEGRATE • 1) Rails-React Gem: light, drop in components anywhere in Rails view • 2) Separate entire front-end in React, bundled by Webpack and injected into Rails asset pipeline • 3) Stand-alone front-end in Node/React, and use Rails-API for back-end only

Slide 23

Slide 23 text

#1 RAILS-REACT GEM • PROS: Easy to plug in. Use only when needed. • CONS: Manage external React extensions (Think writing Rails without “bundle install” and install gems by hand)

Slide 24

Slide 24 text

#2 WEBPACK -> ASSET PIPELINE #3 NODE/REACT + RAILS-API • PROS: complete separation of front-end & NPM install dependencies • CONS: labor-intensive setup & need to maintain 2 sets of apps

Slide 25

Slide 25 text

REACT ON RAILS PERK ISOMORPHIC RENDERING • Server-side: Fast initial load + SEO but low interactivity + slow page refresh • Client-side: Fast page refresh + instant response but long initial load + no SEO (?)

Slide 26

Slide 26 text

REACT ON RAILS PERK ISOMORPHIC RENDERING • Server-side: Rails & Client-side: React • Rails -> static markup • React -> checks markup in place  attaches JS without re-render

Slide 27

Slide 27 text

STILL ON THE FENCE?

Slide 28

Slide 28 text

REACT NATIVE   WRITE NATIVE MOBILE APPS IN JS • Magic of virtual DOM - abstract representation of DOM elements in memory • Render to HTML markup • Render to canvas (FLIP mobile   web app) • Render to iOS (or Android)  elements