Experiences building apps with React Native @DomCode 2016
1 like786 views
The document discusses React Native, a framework that allows web developers to create mobile apps for various platforms using familiar tools and concepts. It emphasizes productivity through tooling and provides various resources and tricks for effective development, including styling and layout models. While it is not yet fully mature, React Native is gaining popularity with frequent updates and a growing community.
Experiences building apps with React Native @DomCode 2016
- 1. REACT NATIVE DomCode, November 2016, Adrian Philipp
- 2. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 3. Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios
- 4. QAPP Question and Answer iOS app - beta Developed at
- 5. • 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
- 6. UI Explorer React Native Example See README on github how to build and run the app
- 7. • Easy way for web developers to get started on mobile REACT NATIVE
- 8. • Easy way for web developers to get started on mobile • Styling is similar to CSS REACT NATIVE
- 9. • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model REACT NATIVE
- 10. • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model • Feels like React (web) REACT NATIVE
- 11. Product Pains But production ready NOT MATURE
- 12. Show me code… hackernews search app made by algolia REACT NATIVE
- 13. BASICS
- 14. CODE
- 15. APP
- 16. CODE
- 17. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 18. • Inspector • Hot reloading • Profiling using systrace • Debugger • Editor integration TOOLING
- 19. INSPECTOR
- 20. HOT RELOADING
- 21. PROFILING
- 22. DEBUGGER
- 23. EDITOR INTEGRATION • WebStorm/PHPStorm: JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace: REACT_EDITOR=pstorm npm start
- 25. ANDROID
- 26. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 27. • 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
- 28. • 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
- 29. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 30. Twitter: @adrian_philipp Github: adri Website: adrian-philipp.com Mail: mail@adrian-philipp.com Joind.in: https://legacy.joind.in/19687 THANK YOU