Experiences building apps with React Native @DomCode 2016
30
REACT NATIVE DomCode, November 2016, Adrian Philipp
-
Upload
adrian-philipp -
Category
Technology
-
view
111 -
download
0
Transcript of Experiences building apps with React Native @DomCode 2016
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
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: [email protected]
Joind.in: https://legacy.joind.in/19687
THANK YOU
