Experiences building apps with React Native @DomCode 2016

114 views

Published on

React Native is all about combining great user experience on native platforms with the developer experience of React on the web. Since it’s start 1.5 years ago, React Native continuously enjoys a tremendous traction. In 2015 React got popular, I believe 2017 will be the year of React Native. I followed the development since the start and now built several React Native apps. During my talk I like to introduce the library, show useful tooling and give practical advice for building React Native apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
114
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Experiences building apps with React Native @DomCode 2016

  1. 1. REACT NATIVE DomCode, November 2016, Adrian Philipp
  2. 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. 3. Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios
  4. 4. QAPP Question and Answer iOS app - beta Developed at
  5. 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. 6. UI Explorer React Native Example See README on github how to build and run the app
  7. 7. • Easy way for web developers to get started on mobile REACT NATIVE
  8. 8. • Easy way for web developers to get started on mobile • Styling is similar to CSS REACT NATIVE
  9. 9. • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model REACT NATIVE
  10. 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. 11. Product Pains But production ready NOT MATURE
  12. 12. Show me code… hackernews search app made by algolia REACT NATIVE
  13. 13. BASICS
  14. 14. CODE
  15. 15. APP
  16. 16. CODE
  17. 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. 18. • Inspector • Hot reloading • Profiling using systrace • Debugger • Editor integration TOOLING
  19. 19. INSPECTOR
  20. 20. HOT RELOADING
  21. 21. PROFILING
  22. 22. DEBUGGER
  23. 23. EDITOR INTEGRATION • WebStorm/PHPStorm: JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace:
 REACT_EDITOR=pstorm npm start
  24. 24. EDITOR INTEGRATION
  25. 25. ANDROID
  26. 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. 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. 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. 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. 30. Twitter: @adrian_philipp Github: adri Website: adrian-philipp.com Mail: mail@adrian-philipp.com Joind.in: https://legacy.joind.in/19687 THANK YOU

×