React Native: criando apps nativas com javascript

Qual a diferença pro Ionic, Cordova e Phonegap? Quais as diferenças pro ReactJS? React Native gera código nativo?
Nessa talk respondo algumas perguntas frequentes sobre React Native e conto um pouco sobre a minha experiência em trabalhar com essa tecnologia.

Transcript

1. React Native criando apps nativas com javascript
2. Desenvolvedora de Software Darlene Medeiros
4. talentos.globo.com estag.globo.com
6. React Native Native Mobile Apps using JavaScript and React
8. A React Native App is a Real Mobile App React Native
10. ReactJS Javascript library for building user interfaces
11. Arquitetura
12. <Text>Hello World</Text>
15. http://moduscreate.com/leverage-existing-ios-views-react-native-app/ Módulos Nativos (Bridges) Write real native code and have access to the full power of the platform
16. React Native
17. produtos plataformas globo.com
18. App como plataforma
19. App como plataforma Cabeçalho (NavBar)
20. App como plataforma Régua (TabBar)
21. App como plataforma Conteúdo (Webview)
22. Cabeçalho (NavBar) Conteúdo (Webview) Régua (TabBar) App como plataforma
23. http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps Ponto de partida
24. http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps Ponto de partida
25. http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps Ponto de partida
27. • Melhorar a versão browser Provas de Conceito (POCs)
28. • Melhorar a versão browser • Desenvolver uma versão nativa (iOS) Provas de conceito (POCs)
29. • Melhorar a versão browser • Desenvolver uma versão nativa (iOS) • Desenvolver uma versão multiplataforma (React Native) Provas de conceito (POCs)
34. • Experiência do Usuário (App Nativa) Vantagens
35. 392 × 690 392 × 690 React Native Web view Comparativo
36. • Experiência do Usuário (App Nativa) • Conhecimento de Javascript dos times Vantagens
37. • Experiência do Usuário (App Nativa) • Conhecimento de Javascript dos times • Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative) Vantagens
38. • Experiência do Usuário (App Nativa) • Conhecimento de Javascript dos times • Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative) • Reaproveitamento de código Vantagens
39. https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.5j6pr3228 Reaproveitamento Post Promote: 99% SMS Captcha Checkpoint: 97% Comment Moderation: 85% Lead Gen Ads: 87% Push Notification Settings: 92%
40. • Experiência do Usuário (App Nativa) • Conhecimento de Javascript dos times • Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative) • Reaproveitamento de código • Usar React Native em uma app nativa Vantagens
41. • Experiência do Usuário (App Nativa) • Conhecimento de Javascript dos times • Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative) • Reaproveitamento de código • Usar React Native em uma app nativa • Hot Reload Vantagens
43. https://github.com/Microsoft/react-native-code-push npm install -g code-push-cli code-push register code-push app add <appName> code-push release-react <appName> <platform> CodePush
45. Desvantagens • Depender de projetos open source experimentais
46. Desvantagens • Depender de projetos open source experimentais • Erros que a sua especialidade não está acostumada
47. Desvantagens • Depender de projetos open source experimentais • Erros que a sua especialidade não está acostumada • Atualizações constantes e quebras de contrato
48. Desvantagens • Depender de projetos open source experimentais • Erros que a sua especialidade não está acostumada • Atualizações constantes e quebras de contrato • Ler muito código e estudar muito (relativamente pouca documentação)
49. • Depender de projetos open source experimentais • Erros que a sua especialidade não está acostumada • Atualizações constantes e quebras de contrato • Ler muito código e estudar muito (relativamente pouca documentação) • Estigma de alternativas multiplataforma Desvantagens
51. npm install -g react-native react-native-cli react-native init minhaAppLindona
53. • linkedin.com/in/darlene-medeiros • speakerdeck.com/darlene • github.com/darlenedms Contato
54. Tadeu Zagallo: React Native Architecture Overview
 https://www.youtube.com/watch?v=Ah2qNbI40vE React.js Conf 2015 Keynote - Introducing React Native
 https://www.youtube.com/watch?v=KVZ-P-ZI6W4 React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
 https://www.youtube.com/watch?v=7rDsRXj9-cU React Native Training
 https://medium.com/react-native-training Referências
55. React Native - Desenvolvendo aplicações nativas com JavaScript
 https://www.infoq.com/br/news/2015/04/facebook- announces-react-native React Native Player
 http://dabbott.github.io/react-native-web-player/ Who's using React Native?
 http://facebook.github.io/react-native/showcase.html How to Create a React Native iOS Native Module
 http://blog.tylerbuchea.com/how-to-create-a-react- native-ios-native-module/ Referências
56. Is React Native next choice for mobile apps?
 http://flexwork.io/blog/react-native-next-choice-for- mobile-apps/ Dive into React Native performance
 https://code.facebook.com/posts/895897210527114/ dive-into-react-native-performance/ React Native, Native
 https://medium.com/swift-fox/react-native- native-28e37f7de1ae#.hbfbmouem Writing Cross-Platform Apps with React Native
 https://www.infoq.com/articles/react-native-introduction Referências
57. Write once use everywhere with React Native
 https://medium.com/@amoghbanta/write-once-use- everywhere-with-react-native- d6e575efe58e#.owexk5vbp Facebook’s React Native now supports Android
 http://webscripts.softpedia.com/blog/facebook-s- react-native-framework-now-supports- android-491734.shtml#sgal_0 Introducing React Native on Ubuntu
 https://insights.ubuntu.com/2016/08/09/introducing- react-native-on-ubuntu/ Referências