React Native: Modern web techniques for mobile

Transcript

1. REACT NATIVE
4. “I think the biggest mistake we made as a company is betting too much on HTML5 as opposed to native”
7. NATIVE APPS ARE GREAT
8. NATIVE APPS ARE FAST NATIVE APPS ARE SMOOTH NATIVE APPS ARE CONSISTENT
11. NATIVE APPS ARE HARD Different stack Hard to scale No code sharing Low iteration speed
12. JS HTML CSS JS libraries Instant live WEB DEVELOPMENT IS EASIER ⌘R
13. AWESOME APP DEVELOPMENT EXPERIENCE
14. REACT NATIVE
16. REACT NATIVE = NATIVE COMPONENTS
17. FORGET
18. JS REACT ⌘R JS libraries REACT NATIVE
20. DEMO TIME
21. REACT
23. Items in your cart Products 1 QTY Product title $50,00 Product title $50,00 Product title $50,00 1 1 Remove Remove Remove $ 150 Checkout
24. Items in your cart Products 1 QTY Product title $50,00 Product title $50,00 Product title $50,00 1 1 Remove Remove Remove $ 150 Checkout CartComponent
25. Items in your cart Products 1 QTY Product title $50,00 Product title $50,00 Product title $50,00 1 1 Remove Remove Remove $ 150 Checkout CartComponent CartListComponent
26. Items in your cart Products 1 QTY Product title $50,00 Product title $50,00 Product title $50,00 1 1 Remove Remove Remove $ 150 Checkout CartComponent CartListComponent CartItemComponent
28. DOM VIRTUAL DOM
30. UIKIT REACT NATIVE (IOS)
31. STANDARDIZED API'S
32. <div> <img> inline text <View> <Image> <Text> <ScrollView> <DatePickerIOS> <MapView>
33. SUPPORT FOR NATIVE COMPONENTS
34. HOT LOADING
36. WRITE ONCE, USE EVERYWHERE
37. WRITE ONCE, USE EVERYWHERE
38. LEARN ONCE, USE EVERYWHERE
39. Martin Konicek Facebook, React Native mkonicek martinkonicek Reactive conf
 Bratislava, Slovakia
 November 4, 2015 Under the hood of
 React Native
40. Here are some screenshots from the Ads Manager on iOS.
41. And here’s what the Android version looks like.
 Both apps have native look and feel, I encourage you to try them out. You’ll need to have ads on Facebook to have the full experience but you can play with it even without having ads.
42. 3 month iOS release→Android release Same dev team 85%+ code shared What was the experience for the Ads Manager team like?
 
 It only took them 3 months to build the Android app once the iOS version was finished. It was one team of people building for both platforms. Most people on the team had mainly JS experience, some iOS and some Android experience.
 
 It turned out they could even share most of the code between platforms. Note that code sharing wasn’t an explicit goal - React Native is learn once write anywhere, not write once run anywhere.
43. And here is how the Ads Manager team felt about that.
44. ANDROID IOS
46. RefreshScrollView.ios.js
48. SIMPLE VIEWS LITTLE ANIMATIONS SIMPLE GESTURES ✓
50. KEEP LEARNING THE FUTURE IS GREAT
51. THANKS