Downloaded 13 times
Uploaded byAdrian Philipp
Experiences building apps with React Native @DomCode 2016
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.
More Related Content
Similar to Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
- 1. REACT NATIVE DomCode, November2016, Adrian Philipp
- 2. 1. Web developerscan make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 3. Guess the LiiperiOS app https://github.com/liip/guess-the-liiper-ios
- 4. QAPP Question andAnswer iOS app - beta Developed at
- 5. • Made byFacebook, 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 NativeExample See README on github how to build and run the app
- 7. • Easy wayfor web developers to get started on mobile REACT NATIVE
- 8. • Easy wayfor web developers to get started on mobile • Styling is similar to CSS REACT NATIVE
- 9. • Easy wayfor web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model REACT NATIVE
- 10. • Easy wayfor 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 productionready NOT MATURE
- 12. Show me code… hackernewssearch app made by algolia REACT NATIVE
- 13.
- 14.
- 15.
- 16.
- 17. 1. Web developerscan make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 18. • Inspector • Hotreloading • Profiling using systrace • Debugger • Editor integration TOOLING
- 19.
- 20.
- 21.
- 22.
- 23. EDITOR INTEGRATION • WebStorm/PHPStorm:JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace: REACT_EDITOR=pstorm npm start
- 24.
- 25.
- 26. 1. Web developerscan make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
- 27. • Learn howmobile 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 developerscan 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