Build mobile app with React Nativejohn@mingle

Agenda

What is React NativeChallenges when build niche appsDemo: Market AppQ&A

React Native

React Native

Challenges when build niche apps

● Dynamic UI without lose performances ● App size● Complicated code-base

TRIED OUT A LOT (Navtive vs Hybrid)

React Native

Android2012

iOS2013

IONIC 12015

IONIC 22016

React Native2016

React Native

IONIC 1 (2015–2016)

● Missing piece of Cordova ● Super fast for prototyping ● UI elements are not native ● Problems with native components● Performance on Android ● Angula

React Native

IONIC 2 (2016)

● Component oriented (like RN) ● Add Electron support, Android Material,

Windows UI ● Improved structure and Navigation● Long waiting for stable version, breaking

changes ● Painful debugging ● Performance limitations

React Native

REACT NATIVE (2016 and later)

● Native experience● Multi-platform

○ iOS, Android (WUP, Desktop, web) ● Used by AirBNB, Facebook, Instagram, Vogue● Functional programming ● Easy to debug ● Huge community (+/-)

https://goo.gl/QMh3jK

React Native

LIVE RELOAD

React Native

CODE PUSH

● OTA updates● Hot fixes ● Experimentation● Continuous Deployment

React Native

MISCONCEPTIONS

React Native

DOES THE JS COMPILE TO NATIVE CODE?

NO

React Native

DOES THE JS RUNS IN A WEB VIEW?

NO

React Native

What if i want to use the platform’s latest API’s?

Just do it

React Native

How does it work

React Native

How does it work

Main

JSC

Shadow

Gesture/ Interaction

React Render Diff

Layout

Render

16 ms

React Native

REACT JS

● Just is View (Library)● Declarative● Component-Based● Learn Once, Write Anywhere

A Simple Component

React Native

Redux

● Evolves the ideas of Flux● Redux is a predictable state container

for JavaScript apps.● It is tiny (2kB, including dependencies).● Reactjs, AngularJS, Swift

React Native

HUGE COMMUNITY

● You have to choose components wisely● Find components on JS.coach● Choose by stars, issues, docs, demos, PR● No complete UI framework like Ionic:

○ Native Base ○ Material Kit

● Lot of interesting libraries:○ Lottie, Airbnb Maps

React Native

EXAMPLES:

AirBnB Map Lottie

React Native

MORE SOURCES TO SEE

● Articles:○ ReactJS x React Native http://bit.ly/2oywqGg○ RN @ Instagram (http://bit.ly/2oVmkf4) ○ iOS dev toolset (http://bit.ly/2oEOc86)

● Newsletter: React Native Newsletter (http://reactnative.cc) ● Platform: Expo (https://expo.io) ● Stack: Ignite (https://github.com/infinitered/ignite) ● Presentation: RN @ Airbnb (http://bit.ly/2oxEzek)

Demo

React Native

React Native

Market RN

● Marketplace● Stack: ES6,Redux, Native-base, Eslint Reactotron● CI/CD: Fastlane, Bitrise, Hockeyapp

React Native

PROPBLEM:

● First time explores● 20* screens● Redux is hard● Android build● Performance

Thanks for listeningQ&A