React Tech

Little preview about what we can do with React + React Native at Facebook Developer Circles: Surabaya

Transcript

1. React Tech Facebook Developer Circle: Surabaya Sub CO, March 25 2017
2. Mochammad Firdaus Fatchur Rozi Front End Engineer at Pinjam.co.id @firdausious
3. A brief of basic knowledge Some Fundamental
4. #1 – Everything is a Component
5. #1 – Everything is a Component React has no …
6. - …controllers - …directives - …templates - …global event listener - …models - …no view models #1 – Everything is a Component React has no …
7. - …controllers - …directives - …templates - …global event listener - …models - …no view models #1 – Everything is a Component React has no … Just Component
8. #1 – Everything is a Component And Components must be composable, reusable, maintainable, and testable (If Components are truly self-contained )
9. - No Framework: Any Component can communicate with any other component #2 – Single Source of Truth
10. - No Framework: Any Component can communicate with any other component - Backbone: Pub-sub #2 – Single Source of Truth
11. - No Framework: Any Component can communicate with any other component - Backbone: Pub-sub - Angular: 2-way data binding #2 – Single Source of Truth
12. - No Framework: Any Component can communicate with any other component - Backbone: Pub-sub - Angular: 2-way data binding - React: 1-way data flow #2 – Single Source of Truth
13. - A pure javascript, in-memory representation of the DOM #3 – Virtual DOM
14. - A pure javascript, in-memory representation of the DOM - render() fires whenever something changes #3 – Virtual DOM
15. - A pure javascript, in-memory representation of the DOM - render() fires whenever something changes - It’s Fast #3 – Virtual DOM
16. - A pure javascript, in-memory representation of the DOM - render() fires whenever something changes - It’s Fast - Touching the dom is Evil, and Having state in the DOM… it’s nightmare #3 – Virtual DOM
17. - State (Mutable) Things you’ll face with React
18. - State (Mutable) - Props (Immutable) Things you’ll face with React
19. - State (Mutable) - Props (Immutable) - Components Coupling Things you’ll face with React
20. - State (Mutable) - Props (Immutable) - Components Coupling - Components Lifecycle Things you’ll face with React
21. - State (Mutable) - Props (Immutable) - Components Coupling - Components Lifecycle - JSX (JavaScript XML, a prepocessor that makes React a lot more elegant) Things you’ll face with React
22. Simple Component Example
23. Production
24. “In case, we have existing API in API-Centric Application Architecture…”
25. “Actually, We can’t go to production with React alone…”
26. “Actually, We can’t go to production with React alone…” “So … We need his Gang!”
27. Stacks
28. React Native Another CrossPlatform solutions
29. - It’s Framework, while ReactJs is Library About React Native
30. - It’s Framework, while ReactJs is Library - Same codestyle with ReactJs About React Native
31. - It’s Framework, while ReactJs is Library - Same codestyle with ReactJs - Truly Native Mobile Apps for iOS and Android (Windows ?) About React Native
32. - It’s Framework, while ReactJs is Library - Same codestyle with ReactJs - Truly Native Mobile Apps for iOS and Android (Windows ?) - Faster than Hybrid Tech (Cordova) About React Native
33. - It’s Framework, while ReactJs is Library - Same codestyle with ReactJs - Truly Native Mobile Apps for iOS and Android (Windows ?) - Faster than Hybrid Tech (Cordova) - Shared codebase (ex: validation, utils, internationalization, etc) About React Native
34. ReactJs
35. React Native ReactJs
36. On Production
37. - Backing with Big Companies Promising Future
38. - Backing with Big Companies - Big Community Promising Future
39. - Backing with Big Companies - Big Community - Not impressed with Mobile Apps ? What about : - Desktop (https://github.com/ptmt/react-native-macos) - TV (https://github.com/douglowder/react-native-appletv) - SmartWatch ? Or any gadget maybe ? Promising Future
40. Conclusion
41. Conclusion 1 Learn Once, Write Everywhere
42. Conclusion 1 Learn Once, Write Everywhere 2 No more Civil War, Choose based on your needs
43. Conclusion 1 Learn Once, Write Everywhere 2 No more Civil War, Choose based on your needs 3 Cost Efficiency
44. Conclusion 1 Learn Once, Write Everywhere 2 4 No more Civil War, Choose based on your needs Do it First Do it Right Do it Better 3 Cost Efficiency
45. T. HANKS Headquarter 13 Ave. Ballarta Barcelona, Spain EUROPE OFFICE 45 Calle Norte Argentina SOUTH AMERICA OFFICE 1243 Barker Cypress San Francisco, California UNITED STATES OFFICE