React Native: Are we there yet? (Pokémon edition) @ VinnytsiaJS '16

Transcript

2. Native mobile development with JavaScript PhoneGap — WebView Tabris.js — native UI NativeScript — native UI, Angular 2, TypeScript React Native — native UI, React.js
3. React Native
4. React Native • Released in 2015 • Open source • Maintained by Facebook and community • Cross-platform mobile development (iOS, Android, UWP) • Based on React • New release every 2 weeks
5. Benefits for developers • Use language that you already know — JavaScript • Use UI library that you already know — React • Develop cross-platform applications • Interactive development, because JavaScript is dynamic language • Send instant updates to your users, no need to submit to App Store
6. How it works • Bridge between native code and JavaScript • 2 main threads ◦ Main thread — create and position views ◦ JavaScript thread — your code • Dispatch queues (more efficient at executing tasks) ◦ Shadow queue — layout calculation ◦ + one queue for every native module • React Native Architecture Overview
7. Getting started • React Native CLI npm i -g react-native-cli • MacBook, Xcode, iOS device/simulator, Apple Developer Program ($100) • Java, Android SDK, Android device/simulator • Chrome’s DevTools • Integrated development tools • React Native CodePush
8. There’s no... • No HTML • No CSS • No DOM APIs • No Web APIs There are no web technologies, it’s just JavaScript.
9. Views: JSX → VDOM → Native views <View> <Text style={styles.text}>Hello!</Text> <TextInput value={val} onChangeText={handleChange} /> <TouchableHighlight onPress={handlePress}> <Text>Submit</Text> </TouchableHighlight> </View>
10. Styles: Subset of CSS and Flexbox var styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center' } }); var styles = StyleSheet.create({ button: { backgroundColor: 'blue', borderColor: 'red', borderWidth: StyleSheet.hairlineWidth } });
11. Styling gotchas • Use StyleSheet.create to create performant style definitions • Cross-platform zIndex, kind of • There’s no cross-platform shadows, only for iOS • Dimensions are set in points, use StyleSheet.hairlineWidth to get size of 1px in points
12. UI Events • No generic click / onchange events • Use TouchableHighlight for buttons and “links” • Use onStartShouldSetResponder to capture touch events on View
13. Polyfilled Web APIs • Geolocation API • requestAnimationFrame • XMLHttpRequest • Fetch API • No localStorage, use AsyncStorage
14. Cross-platform React Native
15. Learn once, write anywhere
16. 100% shared code is not possible • Platform-specific components • Different Design Guidelines • Different behaviour • Different interactions iOS Human Interface Guidelines Android UI Guide
17. What can be shared? • Content UI (forms, news feed, ...) • Domain logic (data flow) • Data fetching
18. How to develop cross-platform app? • Separate domain logic and data fetching from UI • Use Flux / Redux / Relay • Use cross-platform native modules • Use ios and android suffixes in filenames (button.ios.js, button.android.js)
19. Native Modules
20. Native Modules • TabBarIOS, ToolbarAndroid, ViewPagerAndroid, … • Do not use pure JavaScript module if there’s a native one • Native modules works faster and they can do more • Use RNPM to install native modules • If there’s something missing you can always expose it to JavaScript
21. Declare a class with RCTBridgeModule protocol #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> @end
22. Implement it @implementation CalendarManager RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location) { RCTLogInfo(@"Pretending to create an event %@ at %@", name, location); } @end
23. Use in JavaScript import { NativeModules } from 'react-native'; var CalendarManager = NativeModules.CalendarManager; CalendarManager.addEvent( 'Birthday Party', '4 Privet Drive, Surrey');
24. Performance
25. Graphics • Do not use scaled down high-res images at runtime, it slows down scrolling perf • Use SVG is possible (ReactNativeART)
26. Slow initial rendering in ListView • Specify reasonable initialListSize • Same for pageSize <ListView initialListSize={15} pageSize={15} dataSource={dataSource} renderRow={renderRow} />
27. Frequent re-rendering Use setNativeProps to set data directly on native component this.refs.input.setNativeProps({ text });
28. Avoid expensive work during animations Use InteractionManager to schedule expensive work after animations / interactions InteractionManager.runAfterInteractions(() => { // long-running synchronous task... });
29. InteractionManager Expensive computation in componentDidMount Handled with InteractionManager
30. Animations Use LayoutAnimation for simple and uncontrolled animations. Layout animation happens on the main thread at next layout recalculation. componentWillUpdate() { LayoutAnimation.configureNext(config); }
31. LayoutAnimation Update position Setup LayoutAnimation in componentWillUpdate
32. Animations
33. Animated this.state = { opacity: new Animated.Value(0) }; Animated.timing(this.state.opacity, { toValue: 1 }).start(); <Animated.View style={{ opacity }} />
34. Animated • Use it for complex and controlled animations • Controlled from JS thread • Imperative API
35. Navigation
36. Navigation in typical app
37. Navigator <Navigator initialRoute={{ name: 'home', component: Home }} renderScene={(route, navigator) => { const SceneComponent = route.component; return ( <SceneComponent goTo={(name) => navigator.push({ ...routes[name] })} /> ) }} />
38. Navigator • No nested routes • Navigator maintains a stack of routes • Runs transition animation between screens • Imperative API • Use NavigationExperimental • When starting a new project think about how you would implement navigation
39. Development cycle
40. Prototyping React Native Playground
41. Development • Remember that application runs slower in Development mode • Don’t forget to enable hot-reloading • Debug in Chrome’s DevTools • Use integrated Inspector to find components, inspect styles and layout
42. Integrated development tools Cmd + D Layout inspector Highlight touchables
43. Tests • Separate domain logic domain from UI for better testability • Enzyme and Mocha for unit tests • Integration tests are more complex (appium.io)
44. Deployment Use React Native CodePush to deliver JavaScript and assets updates
45. So, are we there yet?
46. Current status of React Native • In active development • Documentation is pretty good • Quality of modules produced by community is questionable • Lots of issues • But already used to build many great apps
48. Future of development with React Native • Better development environment (Deco IDE) • Isolated UI development (react-storybook) • Better performance • More platforms support • We should learn from native mobile development
49. Reading list • Bridging in React Native • Dive into React Native performance • React Native Integration Tests • Performance Limitations of React Native and How to Overcome Them • Using React Native: One Year Later • Routing and Navigation in React Native • js.coach/react-native • facebook.github.io/react-native • jondot/awesome-react-native • react-native-code-push <Questions? /> @roman01la