1. Best Practice
React.js
SEA.YANG @ Jun 2016

3. data => view

4. Keynote Speakers
Tom Occhino Nick SchrockPete Hunt

5. React is much more than a JS library
React is an ecosystem
A fundamental advance for
web and mobile development
— Nick Schrock, React.js Conf 2016

6. Best Practice
React
ES6
Redux (Flux)
Immutable-JS
React-redux
GraphQL
Relay
Normalizr
Babel
React-router
……

7. Facebook is investing in javascript

8. React.js

9. Jun 2013 Mar 2015
Facebook
Inner Project
Public
Release v15.1.0
May 2016
May 2015
Initial Version
for iOS v0.26.2
May 2016Sep 2015
Initial Version
for Android
Evolution
Native
Oct 2015
v0.14.0
v0.13.0
ES6 support
Windows and Tizen are coming (Microsoft & Samsung)
Instagram

10. React Features
• Declarative APIs
• Immutable Data
• Virtual DOM
• JSX
• Component-Based
• Server Rendering (isomorphic)
• Learn Once, Write Anywhere

11. Imperative vs Declarative
How What

12. Imperative vs Declarative
• Go to kitchen
• Open fridge
• Remove chicken from fridge
• ***
• Bring food to table
• I want a dinner with chicken
Dinner

13. Imperative vs Declarative

14. React Component
HTML in javascript

15. CSS in javascript
Inline Style

16. Immutability

17. Shared mutable state is
the root of all evil
- Pete Hunt, React.js Conf 2015

18. 7 Types in Javascript
Type Immutable
null Yes
undefined Yes
Boolean Yes
Number Yes
String Yes
Symbol Yes
Object No

19. 7 Types in Javascript

20. shouldComponentUpdate
• PureRenderMixin
• Shallow Compare

21. Solutions
• Deep Clone
• Immutability Helpers
• Immutable.js

22. Immutable.js

23. Immutable.js

24. Redux

25. Dan Abramov
A predictable state container for javascript apps.
Redux

26. • Flux May 2014
• Re-frame Dec 2014
• Relay Feb 2015
• Redux May 2015
• Om/next July 2015
Current Solutions

27. Principle
• Single source for whole application
• State is Immutable (read-only)
• Changes are made with Pure Functions
(previousState, action) => newState

28. Pure Function
• Simplicity
• Fewer bugs
• Code re-use
• Easier to test
• High performance
https://en.wikipedia.org/wiki/Pure_function
e.g.
• sin(x)
• e => e * 2

29. Basic Concept
• Action
• Reducer
• Store

30. Redux Flow
React
Components
Store
Action
Creators
Reducers
e.g. onClick
dispatch(action) (previousState, action)
(newState)(state)
Strict unidirectional data flow

31. React + Redux

32. Action Creator

33. Reducer

34. GraphQL

35. A query language and execution engine
tied to any backend service.
GraphQL
GraphQL challenges REST

36. REST Issues
• Custom endpoint
• Over-fetching
• Multi versions for client

37. GraphQL Query
Query Response

38. Relay

39. Relay
Using GraphQL in React
A javascript framework for
building data-driven React Application

40. Relay Flow
React
Components
Relay
Store
Action
Server
GraphQl
Response Props
GraphQl
Write
GraphQl Query
Update

41. + +
Is the future?

43. Thanks

44. Perfection is achieved
not when there is nothing more to add,
but when there is nothing left to take away.
- Tom Occhino