10 things the media hasn't told you about React Native

Let's examine 10 advanced topics you have to deal with when using React Native. Based from my experience at M6 Web and Osedea.

Co-created with Marvin Frachet https://twitter.com/mfrachet

Transcript

1. 10 THINGS THE MEDIA HASN’T TOLD YOU ABOUT REACT NATIVE. React Native MTL 26/10/2017
2. Nicolas CUILLERY @ncuillery ME
3. CONTEXT
4. THE POWER OF IMPERFECTION Cheng Lou - React Europe 2017
5. Prototyping Native APIs Image Layout Animations Navigation Performance Unit tests E2E tests Contributing
6. REACT DOM VS REACT NATIVE const Avatar = (props) => ( <div> <img src={props.url} /> <span>{props.name}</span> </div> ); const Avatar = (props) => ( <View> <Image source={{uri: props.url}} /> <Text>{props.name}</Text> </View> );
7. QUICK REMINDER JS Thread Native Threads Bridge REACT NATIVE
8. 1. HOW TO POC WITH REACT NATIVE ?
9. CONTEXT ▸ Show / Prove something ▸ Quick to create ▸ Easy to show
10. CREATE REACT NATIVE APP CLI based on create-react-app providing minimal configurations for React project, including Expo npm install -g create-react-native-app create-react-native-app my-app cd my-app && npm start
11. EXPO Set of tools and services that allow easy mobile development while abstracting usual tools Make livereload possible through network, app testable on real device...
12. SNACK Online code editor with remote livereload based on Expo
13. EXPO SNACK DEMO EXPO SNACK
14. 2. HOW TO USE NATIVE API ?
15. 3 LEVELS OF NATIVE INTEGRATIONS UI components or simple API (i.e. native module) ▸ Provided by React Native (StatusBar, Dimensions, …) ▸ Provided by the community (react-native-*) ▸ Home-made
16. REACT NATIVE APIS ~70 APIs Try to standardize things between platforms: ▸ AsyncStorage ▸ Alert
17. 3RD-PARTY LIBRARIES Multiples modules maintained by the community (more or less...) ▸ react-native-camera ▸ react-native-video ▸ react-native-vector-icons ▸ … The “link” command handles the changes in the native apps
18. DO YOUR OWN BRIDGE Expose a native API... ▸ Call method from JS ▸ Callback support ▸ Listen from event … or a component ▸ Expose UIView (iOS) or ViewManager (Android) events to the bridge
19. DO YOUR OWN BRIDGE ▸ iOS: RCTBridgeModule RCT_EXPORT_MODULE RCT_EXPORT_METHOD RCT_EXPORT_VIEW_PROPERTY ▸ Android: ReactContextBaseJavaModule @ReactMethod @ReactProp Simple examples: ▸ iOS component: RCTProgressViewManager.m ▸ Android native module: VibrationModule.java
20. 3. HOW TO LOAD IMAGES ?
21. Place your screenshot here IMAGES IN REACT NATIVE <Image style={{ width: 350, height: 500 }} source={require('./path.gif')} />
22. REACT NATIVE & FRESCO ▸ Display of Gifs and WebP ▸ Advanced caching and loading system ▹ Bitmap caching ▹ Encoded memory cache (compressed) ▹ Disk cache
23. Place your screenshot here RN forces explicit dimensions to avoid cascading rendering DIMENSION MANDATORY
24. 4. HOW TO LAYOUT ?
25. INLINE STYLES INSPIRED BY CSS CSS Way .primary { background-color: red; } .secondary { background-color: blue; } <div className="primary"> Inline Styles const styles = { primary: { backgroundColor: 'red', }, secondary: { backgroundColor: 'blue', }, }; <View style={styles.primary}>
26. FLEXBOX WITH YOGA Flexbox attributes Yoga X, Y, Height, Width
27. EXPO SNACK DEMO YOGA
28. 5. HOW TO ANIMATE ?
29. REACT NATIVE ANIMATED ▸ High level declarative API ▸ Describes how to process an animation ▸ Use style properties to make animations ▸ Messages sent over the bridge on every frames
30. Place your screenshot here this.state = { anim: new Animated.Value(-200) }; ____________________________________________________ Animated .timing( this.state.anim, { toValue: 0, duration: 200 } ).start(); ____________________________________________________ const style = { marginTop: this.state.anim }; return <Animated.View style={style}>{this.props.children}</Animated.View>; ANIMATED API
32. ANIMATED & OFFLOADING ▸ Defining an animation before sending it to the native part ▸ The native part is responsible for the transitions ▸ No useless bridge exchange ▸ Only few properties supported...
33. REACT NATIVE LOTTIE Project powered by AirBnb, provides a way to use Adobe After Effects animations inside of mobile applications using a part of Animated for transitions
34. Place your screenshot here https://github.com/airbnb/lottie-ios https://github.com/airbnb/lottie-android https://github.com/airbnb/lottie-react-native https://www.lottiefiles.com/ REACT NATIVE LOTTIE
35. 6. HOW TO NAVIGATE ?
36. JAVASCRIPT VS NATIVE DILEMMA ▸ NavigatorIOS (Native) ▸ NavigatorExperimental (JS) ▸ react-navigation (JS) ▸ react-native-navigation (Native & JS)
37. REACT-NAVIGATION const options = { headerMode: 'screen', headerComponent: Header }; const config = { [SCENE_HOME]: { screen: HomeScene }, [SCENE_FAVORITE]: { screen: FavoriteScene }, [SCENE_TAG]: { screen: TagScene, path: 'tag/:tagCode' } }; const AppNavigator = StackNavigator(config, options);
38. REACT- NATIVE- NAVIGATION
39. REACT-NATIVE-NAVIGATION Loading on the JS thread Animation on the UI thread Heavy configuration :(
40. 7. HOW TO OPTIMIZE PERFS ?
41. CONTEXT ▸ Mobile are less powerful than computer ▸ Mobile battery is important ▸ UX on mobile is the main key
42. REMEMBER BEST PRACTICES ▸ Avoid complex functions (Big O) ▸ Extract properties from the state ▸ Limit rendering lifecycles ▸ Lightweight data fetching ▸ Limit bridge exchanges
43. SPYING ON THE MESSAGE QUEUE Listen to what happens between the JS thread and the native threads import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'; MessageQueue.spy(true);
44. Place your screenshot here
45. SNOOPY Profiling tool that allows to use RxJS operator to manage output log from the message queue. Possibility to filter, map, reduce etc…
46. SNOOPY import Snoopy from 'rn-snoopy'; import EventEmitter from 'react-native/Libraries/EventEmitter/EventEmitter'; import filter from 'rn-snoopy/stream/filter'; /* Create a react Event Emitter */ const emitter = new EventEmitter(); /* Create an events stream from the emitter */ const events = Snoopy.stream(emitter);
47. SNOOPY /* Display only message TO the native side */ filter({ type: Snoopy.TO_NATIVE }, true)(events).subscribe() /* Display only the message that aims to create view */ filter({ method:'createView' }, true)(events).subscribe() /* Display only the message that aims to create a view with an arg */ filter({ method:'createView', {args: {foo: {bar:1}}}}, true)(events).subscribe()
48. MONITORING FROM NATIVE SIDE Android Studio provides a built in monitoring tool that can be used to check the device health while running a React Native
50. 8. HOW TO UNIT TEST ?
51. REACT SHALLOW RENDERING Shallow rendering is already detached from the platform. Made easy with Enzyme { type: Title, props: { color: 'red', children: 'Hello LyonJS', } } <Title color="red"> Hello LyonJS </Title>
52. ENJOY ENZYME API ! it('should call showOptions', () => { const showOptions = jest.fn(); const wrapper = shallow(<GameButton showOptions={showOptions} />); wrapper.find(TouchableOpacity).simulate('press'); expect(showOptions) .toHaveBeenCalledWith({ options: ['Switch Sides', 'Cancel'] }); });
53. MOCKS PROVIDED BY RN Sooner or later RN components require native code. Jest “react-native” preset Use the same mocks as Facebook
54. 9. HOW TO E2E TEST ?
55. CONTEXT ▸ Mobile teams need QA teams to make functional tests ▸ E2E Testing exists on the web from some years ▸ Really used tool : Appium
56. DRAWBACKS OF APPIUM ▸ Too hard to configure both on Android & IOS ▸ Weird unexpected errors ▸ Need to “sleep” for UI synchronization ▸ Slow ▸ Poor documentation
57. WIX DETOX Open source project that aims to provide an abstraction layer for E2E testing on React Native Equivalent to Wdio or Protractor on the web
58. WIX DETOX ▸ Tests are easy to write ▸ Protractor like API ▸ Based on EarlGrey & Espresso ▸ UI synchronized, no need to sleep ▸ No weird failures ▸ 5-10 time faster than Appium
59. EXPO SNACK DEMO DETOX
60. 10. HOW TO CONTRIBUTE ?
61. DUAL REPO The open-source repository is the copy of the internal repository used in production. Master is stable.
62. PULL REQUEST WORKFLOW 1. A contributor opens a Pull Request, 2. The approved Pull Request is… closed, 3. The changes are battle-tested in the internal repo 4. Once the changes are approved, the commit is cherry-picked on master
63. PULL REQUEST WORKFLOW
64. RELEASE WORKFLOW ▸ One release per month (0.xx) ▸ One branch for each release (0.xx-stable) The master branch is published after a 1-month delay. Hot commits can be cherry-picked. At least one RC during the month.
65. THANKS! Any questions? You can find me on Twitter @ncuillery & nicolas.cuillery@gmail.com