React.JS Conf & f8 - Speaker Deck

Slide 1

Slide 1 text

KKbOX React.JS Conf & F8 Randy Lien

Slide 2

Slide 2 text

KKbOX Agenda • Introduce React.js Conf • Highlight • Conclusion • FAQ

Slide 3

Slide 3 text

KKbOX Introduce   React.js Conf

Slide 4

Slide 4 text

KKbOX

Slide 5

Slide 5 text

KKbOX

Slide 6

Slide 6 text

KKbOX

Slide 7

Slide 7 text

KKbOX

Slide 8

Slide 8 text

KKbOX

Slide 9

Slide 9 text

KKbOX

Slide 10

Slide 10 text

KKbOX

Slide 11

Slide 11 text

KKbOX

Slide 12

Slide 12 text

KKbOX Introduction • 2015/1/28 ~ 1/29 @Facebook HQ, CA • 160~ • 18 sessions + 2 panels • Tickets sold out in 1 minutes (3 waves)

Slide 13

Slide 13 text

KKbOX Highlight

Slide 14

Slide 14 text

KKbOX Highlight • Performance • Flux & Relay • Component Communication • React Native

Slide 15

Slide 15 text

KKbOX Performance

Slide 16

Slide 16 text

KKbOX The Keys to React Performance • How to render • When to render

Slide 17

Slide 17 text

KKbOX Solutions • Virtual DOM • Optimistic re-rendering

Slide 18

Slide 18 text

KKbOX Optimistic re-rendering • Pure Component (prop, state) • Immutable data • shouldComponentUpdate • Only re-render when value is changed • PureRenderMixin

Slide 19

Slide 19 text

KKbOX Why Immutable? • Immutable data is no side effect! • Shared mutable state is the root of all evil   - Pete Hunt

Slide 20

Slide 20 text

KKbOX

Slide 21

Slide 21 text

KKbOX Why Immutable? (cont.) • The reason why Om is faster than React • Data or Value is immutable in Clojure • Immutable + PureRenderMixin

Slide 22

Slide 22 text

KKbOX facebook.github.io/immutable-js

Slide 23

Slide 23 text

KKbOX Immutable.js • It Implements immutable data structure in JavaScript • Use the same algorithm with Clojure

Slide 24

Slide 24 text

KKbOX PureRenderMixin implementation Simple but efﬁcient

Slide 25

Slide 25 text

KKbOX Flux & Relay

Slide 26

Slide 26 text

KKbOX Flux & Relay • Flux is an architecture • Relay is designed for solving data fetching problem

Slide 27

Slide 27 text

KKbOX Flux • Unidirectional data ﬂow • Easy to debug • It’s more of a pattern rather than a formal framework

Slide 28

Slide 28 text

KKbOX Flux

Slide 29

Slide 29 text

KKbOX Relay • Relay is designed for solving data fetching problem • Efﬁcient • Cache • GraphQL

Slide 30

Slide 30 text

KKbOX Relay Architecture

Slide 31

Slide 31 text

KKbOX RelayContainer & Relay Store

Slide 32

Slide 32 text

KKbOX Props coupling

Slide 33

Slide 33 text

KKbOX

Slide 34

Slide 34 text

KKbOX Only modify 1 component

Slide 35

Slide 35 text

KKbOX

Slide 36

Slide 36 text

KKbOX Component Communication

Slide 37

Slide 37 text

KKbOX Component Communication • It is a general problem • Two scenarios • Parent & Child • No relationship

Slide 38

Slide 38 text

KKbOX Parent & Child • Pass props • Use Callbacks

Slide 39

Slide 39 text

KKbOX No Relationship • Global event system • Flux • Codecademy • Adapter (broadcast) • Channel (JS-CSP)

Slide 40

Slide 40 text

KKbOX Adaptor

Slide 41

Slide 41 text

KKbOX React Native

Slide 42

Slide 42 text

KKbOX When ?

Slide 43

Slide 43 text

KKbOX The reason to go native

Slide 44

Slide 44 text

KKbOX React Native • No WebView, it uses JavaScript to control native UI. • JavaScriptCore • 3 pillars • Touch Handling • Native Components • Style & Layout • Reimplement Flex Box.

Slide 45

Slide 45 text

KKbOX Beneﬁts

Slide 46

Slide 46 text

KKbOX Access to Platform Components Different platforms have their own behaviours and styles

Slide 47

Slide 47 text

KKbOX Instant UI change

Slide 48

Slide 48 text

KKbOX Show errors on your face

Slide 49

Slide 49 text

KKbOX Hard to ﬁgure out

Slide 50

Slide 50 text

KKbOX Get beneﬁts from existing solution

Slide 51

Slide 51 text

KKbOX ComponentKit

Slide 52

Slide 52 text

KKbOX Declarative

Slide 53

Slide 53 text

KKbOX Same idea

Slide 54

Slide 54 text

KKbOX The same concept ideally…

Slide 55

Slide 55 text

KKbOX facebook Ads Manager React Native + Flux + Relay

Slide 56

Slide 56 text

KKbOX facebook Groups React Native + Native Objective-C

Slide 57

Slide 57 text

KKbOX native.reactjs.com

Slide 58

Slide 58 text

KKbOX nuclide.io Implement on top of Atom

Slide 59

Slide 59 text

KKbOX Conclusion

Slide 60

Slide 60 text

KKbOX Conclusion • Learn once, write anywhere • React makes reusable components possible • Look forward to Flux & Relay + GraphQL • Tooling • nuclide • Jest

Slide 61

Slide 61 text

KKbOX Conclusion (cont.) • React Native is amazing but you still need to learn how native (Android/iOS) works • Embrace Immutable data structure to reduce complexity • It is time to use ES6 & ES2015 • Functional Programming is hot • immutable data structure & functions composition • #clojure

Slide 62

Slide 62 text

KKbOX Trending • React-inspired View - ComponentKit • Flux architecture in Server side or App • Functional Programming

Slide 63

Slide 63 text

KKbOX Functional Programming • Operates on streaming and abstracts your behaviours • Clojure • LISP • Immutable data structure • ClojureScript • #clojure

Slide 64

Slide 64 text

KKbOX FAQ