React Native

Talk presented at GDG Juiz de Fora on 2015/10/07.

I presented the key concepts on React and React Native. Also did some live coding to create some components.

Sample code created during talk at https://github.com/marlonandrade/HearthstoneCompendium

Transcript

1. React Native Native iOS and Android apps using JavaScript
2. Marlon Andrade dev iOS ~ 5 years
3. React Native
4. React Native but… what is React?
5. React 101
6. var HelloMessage = React.createClass({ render: function() { return <span>Hello {this.props.name}</span>; } }); React.render(<HelloMessage name="John" />, mountNode);
7. View framework created by Facebook
8. Just the V on a MVC
9. It doesn’t care about how your application is architectured
10. – Facebook team “We built React to solve one problem: building large applications with data that changes over time.”
11. Simple • Express how the app should look at any given point in time • React will manage all the UI updates when your data changes
12. Declarative • When data changes, React knows to only update the changed parts • You doesn’t care how those changes are made
13. Composable Components • Encapsulated and reusable components • Easy to reuse, test and separate concerns
14. Key concepts
15. Virtual DOM • Abstracts the DOM and give a simpler programming model and better performance • Minimizes the repaints focusing only on what has changed
16. Data Flow • One-way reactive data flow • Much simpler then traditional data binding • Declarative
17. Thinking in React
18. • Start with a mock • Break the UI into a Component hierarchy • Build a static version in React • Identify the minimal representation of UI State • Identify where the state should live • Add inverse data flow
19. Start with a mock
21. [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}, {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}, {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} ];
22. { category: "Sporting Goods”, price: “$49.99”, stocked: true, name: “Football" }
23. Break the UI into a Component hierarchy
26. ProductRow
27. ProductCategoryRow
28. ProductTable
29. SearchBar
30. FilterableProductTable
31. Build a static version in React
32. Build a static version in React • ignore API data, state and just render what you need • state vs props
33. Identify the minimal representation of UI State
34. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
35. Identify the minimal representation of UI State • Questions to help find out which one is state • Passed from a parent via props? • Change over time? • Can be computed on any other state or prop?
36. Identify the minimal representation of UI State • Questions to help find out which one is state • Passed from a parent via props? • Change over time? • Can be computed on any other state or prop?
37. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
38. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
39. Identify the minimal representation of UI State • Questions to help find out which one is state • Passed from a parent via props? • Change over time? • Can be computed on any other state or prop?
40. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
41. Identify the minimal representation of UI State • Questions to help find out which one is state • Passed from a parent via props? • Change over time? • Can be computed on any other state or prop?
42. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
43. Identify the minimal representation of UI State • original product list • search text the user has entered • value of the checkbox • filtered list of products
44. Identify where the state should live
45. Identify where the state should live • identify every component that renders something based on that state • find a common owner component (single component above all the other in the hierarchy) • either the common owner or another component higher up should own the state • if you can’t find a component where it makes sense to own the state, create a new one simply for holding the state
46. Add inverse data flow
47. Add inverse data flow • create the inverse flow that allow the inner components to update the state • normally, implemented as props callbacks that allow the children to update the parent’s state
48. React Native
49. var HelloMessage = React.createClass({ render: function() { return <span>Hello {this.props.name}</span>; } }); React.render(<HelloMessage name="John" />, mountNode);
50. var HelloMessage = React.createClass({ render: function() { return <Text>Hello {this.props.name}</Text>; } }); React.render(<HelloMessage name="John" />, mountNode);
51. Deliver world-class application experiences on native platforms
52. Consistent developer workflow based on JavaScript and React
53. Write once, run anywhere
54. Write once, run anywhere
55. Learn once, write anywhere
56. Native components • standard platform components such as UITabBar on iOS or Navigation Drawer on Android • consistent look and feel with the rest of the platform ecosystem
57. Asynchronous execution • bridge between JS and native platform is async • JS runs on the background • it makes apps fluid and responsive
58. Flexbox and Styling • styling based on CSS, with a few properties allowed for each component • layout easily with Flexbox
59. Extensible • easy to create app without writing a single line of native code • but, very ease to create your own modules or views and bridge / import into JS
60. Let’s code
61. Questions?
62. Thank you! @emiemia marlonmandrade@gmail.com github.com/marlonandrade