React.JS Conf & F8

KKbOX

React.JS Conf & F8Randy Lien

KKbOX

Agenda

• Introduce React.js Conf

• Highlight

• Conclusion

• FAQ

KKbOX

Introduce React.js Conf

KKbOX

KKbOX

KKbOX

KKbOX

KKbOX

KKbOX

KKbOX

KKbOX

KKbOX

Introduction

• 2015/1/28 ~ 1/29 @Facebook HQ, CA

• 160~

• 18 sessions + 2 panels

• Tickets sold out in 1 minutes (3 waves)

KKbOX

Highlight

KKbOX

Highlight

• Performance

• Flux & Relay

• Component Communication

• React Native

KKbOX

Performance

KKbOX

The Keys to React Performance

• How to render

• When to render

KKbOX

Solutions

• Virtual DOM

• Optimistic re-rendering

KKbOX

Optimistic re-rendering• Pure Component (prop, state)

• Immutable data

• shouldComponentUpdate

• Only re-render when value is changed

• PureRenderMixin

KKbOX

Why Immutable?

• Immutable data is no side effect!

• Shared mutable state is the root of all evil - Pete Hunt

KKbOX

KKbOX

Why Immutable? (cont.)

• The reason why Om is faster than React

• Data or Value is immutable in Clojure

• Immutable + PureRenderMixin

KKbOX

facebook.github.io/immutable-js

KKbOX

Immutable.js

• It Implements immutable data structure in JavaScript

• Use the same algorithm with Clojure

KKbOX

PureRenderMixin implementationSimple but efficient

KKbOX

Flux & Relay

KKbOX

Flux & Relay

• Flux is an architecture

• Relay is designed for solving data fetching problem

KKbOX

Flux

• Unidirectional data flow

• Easy to debug

• It’s more of a pattern rather than a formal framework

KKbOX

Flux

KKbOX

Relay

• Relay is designed for solving data fetching problem

• Efficient

• Cache

• GraphQL

KKbOX

Relay Architecture

KKbOX

RelayContainer & Relay Store

KKbOX

Props coupling

KKbOX

KKbOX

Only modify 1 component

KKbOX

KKbOX

Component Communication

KKbOX

Component Communication

• It is a general problem

• Two scenarios

• Parent & Child

• No relationship

KKbOX

Parent & Child

• Pass props

• Use Callbacks

KKbOX

No Relationship• Global event system

• Flux

• Codecademy

• Adapter (broadcast)

• Channel (JS-CSP)

KKbOX

Adaptor

KKbOX

React Native

KKbOX

When ?

KKbOX

The reason to go native

KKbOX

React Native• No WebView, it uses JavaScript to control native UI.

• JavaScriptCore

• 3 pillars

• Touch Handling

• Native Components

• Style & Layout

• Reimplement Flex Box.

KKbOX

Benefits

KKbOX

Access to Platform ComponentsDifferent platforms have their own behaviours and styles

KKbOX

Instant UI change

KKbOX

Show errors on your face

KKbOX

Hard to figure out

KKbOX

Get benefits from existing solution

KKbOX

ComponentKit

KKbOX

Declarative

KKbOX

Same idea

KKbOX

The same conceptideally…

KKbOX

facebook Ads ManagerReact Native + Flux + Relay

KKbOX

facebook GroupsReact Native + Native Objective-C

KKbOX

native.reactjs.com

KKbOX

nuclide.ioImplement on top of Atom

KKbOX

Conclusion

KKbOX

Conclusion• Learn once, write anywhere

• React makes reusable components possible

• Look forward to Flux & Relay + GraphQL

• Tooling

• nuclide

• Jest

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

KKbOX

Trending

• React-inspired View - ComponentKit

• Flux architecture in Server side or App

• Functional Programming

KKbOX

Functional Programming• Operates on streaming and abstracts your behaviours

• Clojure

• LISP

• Immutable data structure

• ClojureScript

• #clojure

KKbOX

FAQ