Abstract

The Workshop focuses on how to build native iOS and android app using React Native such that it can easily be extended to any platform such as Windows Phone, Web, Desktop, Electron and even VR*.

In short, the workshop will focus on how to write/structure your React Native apps such that they share 80% of the source code (all the Business logic) across all platforms and only rewrite the view or layout layer (rest 20%) differently for different platforms. We will do live setup of a single platform (iOS) React Native app and we will be adding each platform step by step extending out app to multiple platforms. The talk will introduce code conventions and tools that can accelerate development with React Native.

Thus allowing teams to:

• Launch across multiple platforms faster by reducing the development time exponentially.
• Extend to any new platform (mixed reality .. who knows?) that arrives in future.
• Do minimal code duplication.
• Reduce cost by having a single team managing all the platforms.
• Faster bug fixes due to shared business logic code.

The knowledge is based on the experience of working with React Native apps for around 1.5 years and helping clients launch their apps quicker than ever before.

This talk is for: developers who have worked with React and are looking into jumping/ already working with React Native.

This talk will help:

• React developers who are planning to start with react-native applications.
• react-native developers extend their codebase to support other platforms by just following some code conventions

Prerequisites

• Install node, react-native-cli, Android studio and Xcode,(click on “Building Projects with Native Code” tab): https://facebook.github.io/react-native/docs/getting-started.html
• Yarn: npm install -g yarn
• An ESLint supported IDE, preferably Atom: https://atom.io
• Clone this repo: https://github.com/react-native-workshop/note-taker

Note: Android SDK setup is a mandate for linux/windows users. Please install the android sdk by following steps in the README file of out repo.⁠⁠

Date and Time

29th October, from 9:00AM to 1:15PM (4 hours)

Course Content

The workshop will consist of 4 interactive sessions lasting about 4 hrs. There will be break of 5 to 10 minutes after each session. This is the tentative list of session topics that we have come up with.

Session 1 - What is react native ? (55 min)

• Intro to React Native and how is it different from React + Cordova/Ionic (10 mins)
• Build your first hello world app in react-native. (10min)
• Intro to the development environment of RN (packager, debugging, and scripts setup) (15min)
• Understanding how to structure the code to write platform specific code. (10min)
• Debugging RN apps (10mins)

Session 2 - Implementing functionalities in RN (55min)

• Testing - What is Jest and how it makes testing easier (10min)
• Redux for easier state management (15min)
• Async store - Storing data for offline usage (10min)
• SVG Icon support - How to add vector icons support to React Native ? (10min)
• Navigation - How to setup multipage navigation in react native (10min)

Session 3 - DevOps + Custom Native components (70 min)

• Setting build scripts for ios and android. (20min)
• Setting up automated build and deployment using CI (CircleCI or Travis). (20 min)
• Setting up Testfairy for deployment. (15min)
• Building a simple custom native module for react native.(15min)

Session 4 - Conventions and best practices (55 min)

• Components vs page pattern for React Native (10min)
• Styling conventions - Writing maintainable style code for RN Apps (5min)
• Eslint setup - Keep the code clean with automatic static code check (10min)
• Adding web support for existing RN project (30min)

We will be preparing a gitbook document that we will use for the talk. We will distribute this document to the participants for their reference.

We will also have a git repository with topic/section wise branches to be in sync with the participants before each session.