Building a Production-Ready React Native App

Transcript

1. BUILDING A PRODUCTION-READY REACT NATIVE APP
2. TOMMY GRAVES MEET ME Email: tommy@joinroot.com Twitter: @TAGraves GitHub: https://github.com/tagraves Root Insurance: https://joinroot.com
3. ABOUT THIS WORKSHOP • Hybrid lecture/lab format • Designed to give you enough to feel comfortable starting on your own • Familiarity with modern JavaScript will be helpful • Please help your neighbors if you are able • Ask questions!
4. WHO ARE YOU? // WHY ARE YOU HERE?
5. INSTALLING THE PREREQUISITES https://bit.ly/2RfPPL4
6. TODAY’S ITINERARY • Introduction to React and React Native • Testing React Native applications • Navigation in React Native • React Native Architecture • Animations in React Native • Bridging to native code in React Native
7. REACT NATIVE
8. WHAT IS REACT NATIVE? Native Application Frameworks • Platform-specific languages and frameworks • Java, Swift, Kotlin, Objective-C… • Platform-specific UI elements • Action sheets, modals, tab bars, etc. • Slow iteration cycles • Make changes, compile changes, check changes…
9. WHAT IS REACT NATIVE? “Hybrid” Application Frameworks • (Usually) JavaScript-only • Generally supports the entire JavaScript ecosystem • First-class support for web UIs • Use the DOM, CSS, etc., rather than native components • Fast iteration cycles • Often can run directly in a browser with no compilation • “Write once, run anywhere”
10. WHAT IS REACT NATIVE? React Native strikes the balance • JavaScript • Native views and components • Fast iteration cycles • Support for easily jumping into native • “Learn once, write anywhere
11. WHY USE REACT NATIVE? • One language, many platforms? • All the advantages of React • Low ramp-up time • A healthy ecosystem
12. WHEN NOT TO USE REACT NATIVE • You already have many mobile developers and it works well • Your app is almost entirely reliant on native components (focused on camera, maps, etc.) • You don’t want to learn or manage any native code at all
13. DIFFICULTIES WITH REACT NATIVE • Testing • Navigation • Performance • Upgrading • Debugging
14. QUESTIONS?
15. EXERCISE 1
16. BUILDING UI WITH REACT
17. WHAT IS REACT? A tool that enables developers to create data-driven, declarative user interfaces with relative ease. It’s a way of describing how you want your application to look and work.
18. CORE CONCEPTS IN REACT • Component • Props • State • Events
19. COMPONENTS UI BUILDING BLOCKS
20. PROPS COMPONENT PARAMETERS
21. STATE COMPONENT DATA
22. EVENTS COMPONENT CHANGES
23. QUESTIONS?
24. EXERCISE 2
25. TESTING REACT NATIVE APPLICATIONS
26. UNIT TESTING IN REACT NATIVE A problematic approach: • Test against a DOM, like regular React • Mock out all native dependencies • Test details of the state, the props of children, etc. • The main tool: Enzyme
27. UNIT TESTING IN REACT NATIVE • Test against a DOM, like regular React • Your tests aren’t representative of the real environment your code is running in. Oh, and you lose all the behavior • Test details of the state, the props of children, etc. • These are brittle implementation details
28. UNIT TESTING IN REACT NATIVE A new approach • Test against a barebones rendering environment • Mock out native dependencies only at the JS/ native intersection • Test behavior from a user’s perspective
29. The old approach: • Find the button component with some testID • Call the onClick prop for that component • Check that the state in the parent is updated The new approach: • Find the button with the text “Click me!” • Click the button • Check that the page contains the text “The button has been clicked”
30. REACT (NATIVE) TESTING LIBRARY
31. OTHER TESTING OPTIONS • Appium • Detox • Cavy Integration Testing
32. QUESTIONS?
33. EXERCISE 3
34. REACT NATIVE & NAVIGATION
35. NAVIGATION IN REACT NATIVE The “big three” • react-native-navigation • react-navigation • react-router-native
36. NAVIGATION IN REACT NATIVE react-native-navigation • All navigation components are native • Animations are exactly the ones native apps have • Stack & tab bar support • Fix elements on-screen across transitions • API: Every screen must be registered as a navigatable component
37. NAVIGATION IN REACT NATIVE react-navigation • All navigation components are in JavaScript • Navigation primitives are native • Stack & tab bar support • Fairly large public API • API: Imperative creation of navigation components
38. NAVIGATION IN REACT NATIVE react-router-native • Entirely in JavaScript - no native component at all • Very narrow API • Highlight composable routing behavior • No built in animations or tab components • API: Dynamic routing
39. NAVIGATION IN REACT NATIVE react-native-navigation: disadvantages • Everything is native • Global data must be stored outside of component state • You have to keep a single list of all of your screens and their navigation IDs
40. NAVIGATION IN REACT NATIVE react-navigation: disadvantages • Some things are native. • The API is clunky • Since it’s in JavaScript, there are some performance concerns
41. NAVIGATION IN REACT NATIVE react-router-native: disadvantages • You’ll have to roll most things on your own • Some features are impossible to implement without native code • Performance is even more of a liability with no native components
42. NAVIGATION IN REACT NATIVE Which should I choose?
43. QUESTIONS?
44. EXERCISE 4
45. REACT NATIVE ARCHITECTURE
46. A DISCLAIMER
47. REACT NATIVE ARCHITECTURE What do different parts of the system know about each other? • How does A know how to navigate to B? • How does A ensure B’s (network) dependencies are available? • How can you build B in such a way that both A and C can consume it?
48. REACT NATIVE ARCHITECTURE How does data flow through the system? • What do you do if A and B both need the same data? • How does B inform A that data has changed, or how does C inform both B and A? • How do you invalidate stale data?
49. REACT NATIVE ARCHITECTURE How do I gain confidence that the system still works after changes? • How do you run 10000 unit tests efficiently? • How do you run 100 integration tests efficiently? • How do you avoid manually testing dozens of changes each week when the app is released?
50. REACT NATIVE ARCHITECTURE Redux? • Redux solves the problems here by causing everything to know about everything and letting anything change anything. • Redux answers questions about how to share common things, but it doesn’t answer how to keep different things separate
51. REACT NATIVE ARCHITECTURE Our solution: the modular application • Build “sub-applications” that can run (and be tested) independently of one another • Be explicit about data flows and mutations: always follow React’s “golden rule” (data flows down) • Expose the minimum public interface between sub applications
52. QUESTIONS?
53. EXERCISE 5
54. REACT NATIVE ANIMATIONS
55. REACT NATIVE ANIMATIONS The Animated API • Useful for animating individual components within a larger component • Allows for extremely fine-grained control of animations, even to the point of describing the exact behavior per frame • Provides reasonable presets for easing, bouncing, etc.
56. REACT NATIVE ANIMATIONS The Animated API • Core concepts: animated components and animated values • Changes to animated values are animated on the native side • Values can be changed by tracking a gesture or firing a preconfigured series of changes • Values are interpolated into styling properties
58. REACT NATIVE ANIMATIONS The Layout Animation API • Declarative • Reasonably configurable, including many useful presets • Easy to automatically animate creative or destructive actions
59. REACT NATIVE ANIMATIONS The Layout Animation API • Configure a LayoutAnimation before a state change or other React update • Separate configuration for update, create, destroy • That’s it!?
61. REACT NATIVE ANIMATIONS Lottie • A third-party library for rendering After Effects animations • Used by many purely native applications • Great for single animated elements, like loading spinners or icons • Allows designers to design their animations
62. QUESTIONS?
63. EXERCISE 6
64. BRIDGING TO NATIVE
65. BRIDGING TO NATIVE Render native components inside a React component • Treats a native UI element just like any other React component • Great for small integrations that need to be native, like maps, partial screen camera views,
66. BRIDGING TO NATIVE Render React components inside a native component • Rather than rendering an entire React Native application, this strategy renders single components inside a native application. • Great for slowly integrating React Native into an existing native application
67. BRIDGING TO NATIVE Calling Native Modules • React Native can import modules from native code that expose arbitrary methods • Great for exposing native functionality, like geolocation, or opening the native share sheet
68. BRIDGING TO NATIVE Subscribing to Native Events • Components can subscribe to events emitted by native code • This allows straightforward updating in response to Native events, like significant location changes
69. THANKS! TOMMY@JOINROOT.COM