React.JS Conf & f8

It is my React.JS conference and f8 sharing.

Transcript

1. KKbOX React.JS Conf & F8 Randy Lien
2. KKbOX Agenda • Introduce React.js Conf • Highlight • Conclusion • FAQ
3. KKbOX Introduce 
 React.js Conf
4. KKbOX
5. KKbOX
6. KKbOX
7. KKbOX
8. KKbOX
9. KKbOX
10. KKbOX
11. KKbOX
12. KKbOX Introduction • 2015/1/28 ~ 1/29 @Facebook HQ, CA • 160~ • 18 sessions + 2 panels • Tickets sold out in 1 minutes (3 waves)
13. KKbOX Highlight
14. KKbOX Highlight • Performance • Flux & Relay • Component Communication • React Native
15. KKbOX Performance
16. KKbOX The Keys to React Performance • How to render • When to render
17. KKbOX Solutions • Virtual DOM • Optimistic re-rendering
18. KKbOX Optimistic re-rendering • Pure Component (prop, state) • Immutable data • shouldComponentUpdate • Only re-render when value is changed • PureRenderMixin
19. KKbOX Why Immutable? • Immutable data is no side effect! • Shared mutable state is the root of all evil 
 - Pete Hunt
20. KKbOX
21. KKbOX Why Immutable? (cont.) • The reason why Om is faster than React • Data or Value is immutable in Clojure • Immutable + PureRenderMixin
22. KKbOX facebook.github.io/immutable-js
23. KKbOX Immutable.js • It Implements immutable data structure in JavaScript • Use the same algorithm with Clojure
24. KKbOX PureRenderMixin implementation Simple but efficient
25. KKbOX Flux & Relay
26. KKbOX Flux & Relay • Flux is an architecture • Relay is designed for solving data fetching problem
27. KKbOX Flux • Unidirectional data flow • Easy to debug • It’s more of a pattern rather than a formal framework
28. KKbOX Flux
29. KKbOX Relay • Relay is designed for solving data fetching problem • Efficient • Cache • GraphQL
30. KKbOX Relay Architecture
31. KKbOX RelayContainer & Relay Store
32. KKbOX Props coupling
33. KKbOX
34. KKbOX Only modify 1 component
35. KKbOX
36. KKbOX Component Communication
37. KKbOX Component Communication • It is a general problem • Two scenarios • Parent & Child • No relationship
38. KKbOX Parent & Child • Pass props • Use Callbacks
39. KKbOX No Relationship • Global event system • Flux • Codecademy • Adapter (broadcast) • Channel (JS-CSP)
40. KKbOX Adaptor
41. KKbOX React Native
42. KKbOX When ?
43. KKbOX The reason to go native
44. KKbOX React Native • No WebView, it uses JavaScript to control native UI. • JavaScriptCore • 3 pillars • Touch Handling • Native Components • Style & Layout • Reimplement Flex Box.
45. KKbOX Benefits
46. KKbOX Access to Platform Components Different platforms have their own behaviours and styles
47. KKbOX Instant UI change
48. KKbOX Show errors on your face
49. KKbOX Hard to figure out
50. KKbOX Get benefits from existing solution
51. KKbOX ComponentKit
52. KKbOX Declarative
53. KKbOX Same idea
54. KKbOX The same concept ideally…
55. KKbOX facebook Ads Manager React Native + Flux + Relay
56. KKbOX facebook Groups React Native + Native Objective-C
57. KKbOX native.reactjs.com
58. KKbOX nuclide.io Implement on top of Atom
59. KKbOX Conclusion
60. KKbOX Conclusion • Learn once, write anywhere • React makes reusable components possible • Look forward to Flux & Relay + GraphQL • Tooling • nuclide • Jest
61. 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
62. KKbOX Trending • React-inspired View - ComponentKit • Flux architecture in Server side or App • Functional Programming
63. KKbOX Functional Programming • Operates on streaming and abstracts your behaviours • Clojure • LISP • Immutable data structure • ClojureScript • #clojure
64. KKbOX FAQ