Abstract

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.
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.

Outline

Time - 4 hours Content can be adjested based on audience

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]

  • Start react-native init and 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.

• 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.

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]

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

Requirements

Skills

• Basic knowledge of Web Development, CSS and JavaScript
• Familiarity with React props, state, etc.

Software

• An IDE (recommended: VSCode)
• NodeJS 8.11 or above
• Android Studio, with android emulator
• iOS development tools including XCode, XCode command line tools and

Hardware

• Mac Laptop preferred
• iPhone, or Android Phone. If no Mac, prefer to bring a iOS device

Optional Skills

• 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.

Speaker bio

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.