• React Native is an open source framework by Facebook in 2015
   
• Cortana Mobile started to experiment with React Native in summer 2016

Introduction

Key challenges in

mobile UX development

• Cross platform capability
  • Goal: >85% of UX is reusable
• Developer velocity
  • Goal: No need to build and reinstall for every change
• Deployment flexibility
  • Goal: Apply hotfix without publishing a new app
• UI unit test scalability
  • Goal: >90% UT coverage of UX components

Comparison of cross platform solutions

 * Portable C++ is only used for non-UX logic.

React Native Key Concept

UI

React

js

Virtual DOM

• Imperative vs declarative paradigm
• Flexbox layout
• JSX
• Components
  • Props / State
  • LifeCycle
• Virtual DOM

How React Native works

Scenario: select a color to change theme of the App

Path to Reactive Native

Strategy

• Hybrid development model

Helplist                   InputBox              Profile page             Reminder 2.0

                                                                                                           Upcoming view

Home

View

Aug

2016

Now

Nov 2016

Dec 2016

Mar

2017

FY

2018

All

UI

Jul

2016

Key learning

• Project structure
• Dev environment
• Why TypeScript?
• Performance analysis
• CodePush
• Redux framework

Project structure

RN

CoA

CoI

Git submodule

Git subtree

Shared sub folder

Single repo

Why TypeScript?

• Superset of JavaScript
  • No steep learning cost
• Pure object oriented
  • Support strong types & other goodies
• More elegant code
  • Better maintainability
• Good IDE support
  • IntelliSense in VSCode
• Invented by Microsoft

Dev environment

• Ensure consistent version dependency
  • Yarn - manage NPM packages
• Streamline development task
  • Gulp - watch & compile TypeScript
• Improve UI test coverage
  • Jest - UI test framework (VP test)

.ts, .tsx

.js, .jsx

.jsbundle

Compile

Bundle

developer

debug

production

SourceMap

Performance analysis

Startup latency

Action plan:

• Separate one JS bundle into multiple smaller bundles.
• Import JS module on-demand rather than all at once during app launch.

Performance analysis

Footprint

• Memory consumption: varies (<20mb)

• Disk footprint increase: 700kb (RN runtime) + 1.5mb (JS bundle)

* Data was collected from Huawei P9 phone

Performance analysis

Rendering

• React Native can deliver native rendering  at 60 FPS.

• UX component design principles
  • Offload as much operations to native side as possible.
  • Minimize passes over across bridge .

CodePush

Check

install update

Immediate

Next restart

Next resume

• Support different platform / market
• Support A/B test
• Support deployment rollback

on app start

on app resume

manual

Push

Redux framework

Store

Action 

View

Action Creator

( App State )

Q & A

Thank you!