Experiences building apps with React Native @UtrechtJS May 2016
1 like1,074 views
The document discusses React Native, emphasizing its benefits for web developers transitioning to mobile app development, such as using familiar tooling and styling. Key features highlighted include platform concepts, the efficiency of code sharing, and various development tools like hot reloading and debugging utilities. It also notes the evolving nature of React Native, indicating it is production-ready despite not being fully mature.
Experiences building apps with React Native @UtrechtJS May 2016
- 1. REACT NATIVE UtrechtJS, May 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” • High traction: 31k 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. REACT NATIVE • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model • Feels like React (web)
- 8. NOT MATURE Product Pains But production ready
- 9. Show me code… hackernews search app made by algolia REACT NATIVE
- 10. BASICS
- 11. CODE
- 12. APP
- 13. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 14. • Inspector • Hot reloading • Profiling using systrace • Debugger • Editor integration TOOLING
- 15. INSPECTOR
- 16. HOT RELOADING
- 17. PROFILING
- 18. DEBUGGER
- 19. EDITOR INTEGRATION • WebStorm/PHPStorm: JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace: REACT_EDITOR=pstorm npm start
- 21. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 22. • 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
- 23. • 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
- 24. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 25. Twitter: @adrian_philipp Github: adri Website: adrian-philipp.com Mail: [email protected] THANK YOU
- 26. • Redux DevTools • Inspect state changes • Replay actions • Synchronise app states across simulators • Redux Storage: offline storage BONUS