React Native for Android

Right now, as a mobile developer you must choose between your own efficiency and providing the user with the best native experience. React Native aims to give you the power to develop these great experiences with web-like velocity. React, a powerful js framework that rethinks UI development, can now be used to write real mobile apps for Android and iOS. This talk will explore why React Native matters for Android developers.

Transcript

1. React Native for Android Olivia Bishop Engineering Manager, Facebook
2. What is React Native for? Why it might be useful to an Android developer How it works Agenda React basics
3. What is React Native for?
4. Native apps can be great experiences • Snappy gestures and animations • Look good on Android • Integrate well with the OS
5. But they come with challenges 1. Slow to iterate (build & install) 2. Hard to learn (different environments for each platform) 3. Imperative APIs
6. Mobile web is not the answer
7. React can be used to describe native components No DOM No WebView
8. React Native http://facebook.github.io/react-native/
9. SOLUTIONS CHALLENGES INSTANT RELOAD BUILD & INSTALL 
 ON EVERY CHANGE 1 DECLARATIVE APIS IMPERATIVE APIS 3 SINGLE ENVIRONMENT FOR MULTIPLE PLATFORMS DIFFERENT ENVIRONMENTS FOR EACH PLATFORM 2
10. Write Once Run Anywhere NOT
11. Learn Once Write Anywhere (but share code when you can)
12. React basics
13. React A declarative way to build UI
14. 8 99+
15. Imperative UI = Define Transitions
16. 8 99+ ADD BADGE! SET BADGE TO 8!
17. 8 99+ ADD BADGE! ADD FIRE! SET BADGE TO 99+!
18. if (count > 99) { if (!hasFire()) {
 addFire();
 } } else { if (hasFire()) {
 removeFire();
 }
 } if (count === 0) { if (hasBadge()) {
 removeBadge();
 } return;
 } if (!hasBadge()) {
 addBadge();
 } var countText = count > 99 ? '99+' : count.toString(); getBadge().setText(countText); Imperative
19. 8 99+ 8 99+ 8 8 8 8 99+ 99+ 99+ 99+ 3 states 9 transitions
20. Declarative UI = Define States
21. Declarative if (count === 0) { return <div class="bell"></div>; 8 } else if(count <= 99) { return ( <div class="bell"> <badge count={count} /> </div> ); 99+ } else { return ( <div class="bell onFire”> <badge count=“99+” /> </div> ); }
22. How Does React Transition BETWEEN STATES?
23. Comment Like Share Comment Like Share You like this.
24. React CALCULATES THE SMALLEST SET OF CHANGES TO MAKE TO THE UI.
25. “LIKE” -> “LIKE” INSERT “YOU LIKE THIS” Comment Share You like this. Like Like
26. Some React Native Code
27. var Toggle = React.createClass({ getInitialState: function() { return {on: false}; }, handlePress: function(event) { this.setState({on: !this.state.on}); }, render: function() { var text = this.state.on ? 'Toggle on' : 'Toggle off'; return ( <TouchableWithoutFeedback onPress={this.handlePress}> <View> <Text> {text} </Text> </View> </TouchableWithoutFeedback> ); } });
28. <View/> <Text/> <Image/> new ViewGroup(getContext()) new TextView(getContext()) new ImageView(getContext())
29. How it works (Thanks Andy)
30. Architecture • A set of native modules (java) and a set of JS modules call methods on each other over a bridge • module: an object with some state and a collection of methods that can be called • bridge: the glue that facilitates these calls back and forth
31. • Async • Batched • Serialized method calls Native sends a single JS call… …JS executes it and responds with a list of native calls Native JS Executor JSC via C++ bindings (shipped in APK) Java/C++ via JNI BRIDGE (C++/Java)
32. Serialized communication 1. UIManager   1. createView   2. updateProperties   2. Networking   1. sendRequest   3. Storage   1. get   2. set   3. delete UIManager.createView(‘Text’,  {‘foo’:  ‘bar’});   [1,  1,  [‘Text’,  {‘foo’:  ‘bar’}]] Storage.set(‘key’,  ‘value’);   [3,  2,  [‘key’,  ‘value’]]
33. AppRegistry.runApplication(   ‘MyApp’,   new  WritableMap()); require(‘AppRegistry’).runApplication(‘MyApp’,  {}); UIManager.createView(2,  ’View’,  {…}); UIManager.createView(3,  ’Text’,  {…}); UIManager.createView(4,  ’View’,  {…}); … UIManagerModule#createView(2,  ‘View’,  …)   View  newView  =  new  View();   UIManagerModule#createView(3,  ‘Text’,  …)   TextView  newView  =  new  TextView();   UIManagerModule#createView(4,  ‘View’,  …)   View  newView  =  new  View();   … BRIDGE [1, 1, [‘MyApp’, {}]] [[2, 3, [2, ‘View’, {…}]], [2, 3, [3, ‘Text’, {…}]], [2, 3, [4, ‘View’, {…}]]] Java JS
34. Threading Model • Three threads: UI (app main thread), native modules, JS • Each runs an Android Looper (event loop) and processes a queue of Runnable events • Runnables execute within an error boundary so that native Exceptions redbox instead of hard crashing
35. Handle Timer Handle Timer Timer Fires Timer Fires UI Event Queue Native Modules Event Queue JS Event Queue Unrelated JS Operation 1 Unrelated JS Operation 2 Unrelated Native Operation 1 Unrelated Native Operation 2 Unrelated Native Operation 3 Dispatch View Updates Update UI Unrelated Native Operation 1 Unrelated Native Operation 2 Unrelated Native Operation 3 Unrelated JS Operation 1 Unrelated JS Operation 2 Dispatch View Updates Update UI
36. Why it might be useful to an Android developer
37. Iterating is fast
38. Instant Reload
39. Now for images too!
40. Write for iOS with the same tools
41. 85% of code shared Ads Manager App
42. Standard tools for debugging too
43. Access built-in Android components
44. 1 RIPPLE 2 OVERSCROLL 3 PULL TO REFRESH 4 DRAWER
45. Create custom modules
46. Example: Toast
47. public class ToastModule extends ReactContextBaseJavaModule { public ToastModule(ReactApplicationContext reactContext) { super(reactContext); } }
48. public class ToastModule extends ReactContextBaseJavaModule { public ToastModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "ToastAndroid"; } }
49. public class ToastModule extends ReactContextBaseJavaModule { public ToastModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "ToastAndroid"; } @ReactMethod public void show(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); } }
50. public class ToastModule extends ReactContextBaseJavaModule { private static final String DURATION_SHORT_KEY = "SHORT"; private static final String DURATION_LONG_KEY = "LONG"; public ToastModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "ToastAndroid"; } @Override public Map<String, Object> getConstants() { final Map<String, Object> constants = MapBuilder.newHashMap(); constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT); constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG); return constants; } @ReactMethod public void show(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); } }
51. var { NativeModules } = require('react-native'); var ToastAndroid = NativeModules.ToastAndroid; ToastAndroid.show('Awesome', ToastAndroid.SHORT); From JS…
52. And custom UI components
53. Example: Image
54. public class ReactImageManager extends SimpleViewManager<ReactImageView> { @Override public String getName() { return "RCTImageView"; } }
55. public class ReactImageManager extends SimpleViewManager<ReactImageView> { @Override public String getName() { return "RCTImageView"; } @Override public ReactImageView createViewInstance(ThemedReactContext context) { return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext); } }
56. public class ReactImageManager extends SimpleViewManager<ReactImageView> { @Override public String getName() { return "RCTImageView"; } @Override public ReactImageView createViewInstance(ThemedReactContext context) { return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext); } @ReactProp(name = "src") public void setSrc(ReactImageView view, @Nullable String src) { view.setSource(src); } @ReactProp(name = "borderRadius", defaultFloat = 0f) public void setBorderRadius(ReactImageView view, float borderRadius) { view.setBorderRadius(borderRadius); } @ReactProp(name = ViewProps.RESIZE_MODE) public void setResizeMode(ReactImageView view, @Nullable String resizeMode) { view.setScaleType(ImageResizeMode.toScaleType(resizeMode)); } }
57. Write simple, easy to maintain code!
58. 816 lines, 20 files 241 lines, 4 files
59. So…
60. React Native • Try it out • Build an app • Submit issues and pull requests
61. Thank you! http://facebook.github.io/react-native/