REACT NATIVEUtrechtJS, May 2016, Adrian Philipp

1. Web developers can make apps

2. Know and use tooling to be more productive

3. Learn platform concepts and dev tricks

REACT NATIVE

Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios

QAPP Question and Answer iOS app - beta Developed at

• Made by Facebook, efficiency across platforms

• “Learn once, write anywhere” vs “cross platform”

• High traction: 31k stars, releases every 2-3 weeks

• Not mature yet

REACT NATIVE

UI Explorer React Native Example See README on github how to build

and run the app

REACT NATIVE

• Easy way for web developers to get started on mobile

• Styling is similar to CSS

• Flexbox layout model

• Feels like React (web)

NOT MATUREProduct Pains

But production ready

Show me code…

hackernews search app made by algolia

REACT NATIVE

BASICS

CODE

APP

1. Web developers can make apps

2. Know and use tooling to be more productive

3. Learn platform concepts and dev tricks

REACT NATIVE

• Inspector

• Hot reloading

• Profiling using systrace

• Debugger

• Editor integration

TOOLING

INSPECTOR

HOT RELOADING

PROFILING

DEBUGGER

EDITOR INTEGRATION

• WebStorm/PHPStorm: JS/JSX/ES6 support

• Microsoft VSCode, Nuclide

• Clickable stack trace:REACT_EDITOR=pstorm npm start

EDITOR INTEGRATION

1. Web developers can make apps

2. Know and use tooling to be more productive

3. Learn platform concepts and dev tricks

REACT NATIVE

• Learn how mobile platforms work and look

• Split smart and dumb components from the start

• Use redux when the app gets more complex

PLATFORM / ARCHITECTURE

• Components: JS.coach

• Store-ip script

• React Native Playground rnplay

• ESLint style from airbnb

• NPM script to build "build-ios": "$NVM_BIN/react-native bundle --platform=ios --entry-file=index.ios.js --bundle-output=ios/main.jsbundle --assets-dest=ios/assets --dev false",

DEV TRICKS

1. Web developers can make apps

2. Know and use tooling to be more productive

3. Learn platform concepts and dev tricks

REACT NATIVE

Twitter: @adrian_philipp

Github: adri

Website: adrian-philipp.com

Mail: mail@adrian-philipp.com

THANK YOU

• Redux DevTools

• Inspect state changes

• Replay actions

• Synchronise app states across simulators

• Redux Storage: offline storage

BONUS