REACT NATIVEDomCode, November 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”

• Platforms: iOS, Android, Windows, macOS, tvOS

• High traction: 39.8k 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

• Easy way for web developers to get started on mobile

REACT NATIVE

• Easy way for web developers to get started on mobile

• Styling is similar to CSS

REACT NATIVE

• Easy way for web developers to get started on mobile

• Styling is similar to CSS

• Flexbox layout model

REACT NATIVE

• Easy way for web developers to get started on mobile

• Styling is similar to CSS

• Flexbox layout model

• Feels like React (web)

REACT NATIVE

Product PainsBut production ready

NOT MATURE

Show me code…

hackernews search app made by algolia

REACT NATIVE

BASICS

CODE

APP

CODE

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

ANDROID

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

• React Native Playground rnplay

• ESLint style from airbnb

• NPM script to build "build-ios": "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

Joind.in: https://legacy.joind.in/19687

THANK YOU