Building Mobile apps with React Native
In this workshop, we will create a mobile application for iOS and Android from scratch using React Native. We will look at the various pieces of React Native architecture and leverage tools and core components of the framework. We will look at animations, images, HTTP requests, IDEs, navigation, styling and storage.
We will then dive deeper into converting the app to provide a smooth user experience and investigate performance implications and tooling. Finally, we will round up the app with CI tools and discuss various best practices and get a glimpse into the future of the framework.
Time - 4 hours
Content can be adjested based on audience
Hour 1 - Introduction
- Introduction to React and React Native__[10 mins]__
- Basics about ReactJS: Props, State, New features in React - Bridge, Suspense, Error Boundaries
- Differences between React and React Native
- Discussion about React Native architecture
When is React Native the right choice
Exercise: React Native - environment setup and getting started [10 mins]
react-native initand create a simple timer
- Setup Expo for experimenting
- Hot load and seeing changes instantly
- Add basic flexbox styles
Understand View Managers and Native Modules
Debugging [15 mins]
- Understanding the internals of the React Native debugger
- Using Chrome Debugger, and the VS Code debugger
- Fixing layout issues with React DevTools
- Investigating native layouts using Flipper.
Understanding sourcemaps during debugging.
Break [10 mins]
Will help with troubleshooting setup
Navigation [15 mins]
- Discussion about existing navigation libraries in React Native
- Using React Navigation to set up a multi page app
- Discuss native navigation vs JS based navigation stack, look at layers.
Hour 2 - React Native Deep Dive
- Deep Dive into React Native internals [30 mins]
- Trace a path from JS calls to Java/ObjC code
- Use of bridge spy to investigate bridge traffic
- Understand the role of the bridge, and C++ modules in React Native
Understand JSI and how it replaces the bridge
Discuss integrating React Native into existing apps [15 mins]
- Use an app’s existing UI controls in RN screens
Reusing UI components from existing app
Deep Dive into Fabric, TurboModules [15 mins]
Break [15 mins]
Hour 4 - Performance and CI
- Performance [15 mins]
- Discuss various tooling available for performance
- Adding instrumentation into existing apps
- Discuss various points to get real time information
- Using systrace, instruments and ReactMarkers
- Lazy class loading, and other optimization techniques
Common performance improvements - unbundle, code splitting, inline requires, etc.
Exercise: Add instrumentation to existing app [15 mins]
CI integration and ecosystem [10 mins]
- Discuss CI systems for build and distribution
- Code Push and over the air updates
- Architecture of CodePush, and deploying a similar system inhouse
A/B testing using CodePush.
Open Time and discussion
- Familiarity with React props, state, etc.
- An IDE (recommended: VSCode)
- NodeJS 8.11 or above
- Android Studio, with android emulator
- iOS development tools including XCode, XCode command line tools and
- Mac Laptop preferred
- iPhone, or Android Phone. If no Mac, prefer to bring a iOS device
- An idea of how Flexbox works
- Java or ObjC and how iOS/Android apps work.
P.S: A few days before the class, we will run
react-native init to create a simple React Native project, to ensure that all attendees are able to install the require tools before the workshop.
Parashuram is a Software Engineer at Facebook, working on React Native. He has been working on React Native for around 3 years now and an active member of the community. He is currently working on parts of the new architecture of React Native include the lean core and TurboModules. Before Facebook, he helped build CodePush, the VSCode extension for React Native and App Center, a Continuous Integration solution for mobile apps.
He has been working on building frameworks for Hybrid apps and is also a committer in the Apache Cordova project.