REACT NATIVE
DomCode, 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
RE...
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...
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 Rea...
Product Pains
But production ready
NOT MATURE
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
RE...
• 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_EDI...
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
RE...
• Learn how mobile platforms work and look
• Split smart and dumb components from the
start
• Use redux when the app gets ...
• Components: JS.coach
• React Native Playground rnplay
• ESLint style from airbnb
• NPM script to build
"build-ios": "rea...
1. Web developers can make apps
2. Know and use tooling to be more
productive
3. Learn platform concepts and dev tricks
RE...
Twitter: @adrian_philipp
Github: adri
Website: adrian-philipp.com
Mail: mail@adrian-philipp.com
Joind.in: https://legacy.j...
Próxima SlideShare
Cargando en…5
×

Experiences building apps with React Native @DomCode 2016

227 visualizaciones

Publicado el

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.

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
227
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×