O documento discute o desenvolvimento mobile multiplataforma utilizando o framework React Native, que permite aos desenvolvedores criarem aplicativos nativos para iOS e Android com uma única base de código em JavaScript. Destaca as vantagens do React Native, como a comunidade ativa, facilidade de depuração e a capacidade de reutilização de código. Além disso, apresenta requisitos para início de desenvolvimento e exemplos de empresas que utilizam a tecnologia.

1. @lucasferreira

2. Desenvolvimento Mobile Multiplataforma:
Uma abordagem ágil e de alto desempenho
com o framework React Native

3. Lucas Ferreira
http://blog.lucasferreira.com
@lucasferreira
https://github.com/lucasferreira
Diretor de Desenvolvimento e Co-founder da

4. React… who?

5. React Native
Um framework mobile open-source que possibilita ao
desenvolvedor a manutenção de uma única base de
código multiplataforma, escrita com uma linguagem
universal e de popularidade crescente:
o JavaScript

6. React Native

7. React Native

8. React Native
• Desenvolvimento Nativo Multiplataforma (iOS e Android)
• Open Source
• Feito pelo Facebook (mar/2015) guiados pelos conceitos do
React
• Diferente de PhoneGap ou Cordova
• Aplicativos rodam dentro do limite máximo de desempenho na
relação JS x Nativo
• Extensível

9. Como funciona
• Permite desenvolver apps usando apenas JavaScript
• Mesmo conceito do React: foco na UI + componentes
• Aplicações "Reais" - nada de "mobile web app" ou "HTML5
app" ou "aplicativos híbridos"
• A idéia é criar aplicações impossíveis de distinguir de aplicações
feitas em Obj-C ou Java

10. Como funciona
Quem faz a força é a engine JavaScriptCore do WebKit -
disponível em iOS e portada para Android

11. Como funciona
E com a aplicação rodando….

12. Vantagens + Recursos
• Open Source
• Comunidade Gigante
• Facilidade para quem já sabe JavaScript
• "Empurrãozinho" para quem é front-end e quer iniciar no dev.
Mobile
• Reaproveitamento de código -> multiplataforma
• Fácil debug / testes
• Hot Reloading (UBBER COOL!)
• Facilidade de acesso a maioria dos components nativos de UI

13. Getting Started
Requisitos de Plataforma:
• XCode para desenvolvimento iOS (e ter um Mac)
• Android Studio + Java para desenvolvimento Android
(Windows, Mac ou Linux)
$ npm install -g react-native-cli
Outros Detalhes:
https://facebook.github.io/react-native/releases/next/docs/getting-started.html

14. Getting Started
$ react-native init CriDevApp

15. Código

16. JSX x ES5 x ES6

17. CSS ?

18. Run!
$ react-native run-ios
$ react-native run-android
* Ligar o emulador antes ou ter um dispostivo disponível na porta USB

19. Run!

20. Debug
$ react-native log-ios
$ react-native log-android
+ Debug remoto com o Google Chrome

21. Testes
Se "somos" JavaScript, "podemos" ser testados:
• JEST
• MOCHA
• Android Unit Tests e Integration Tests
• iOS Integration Tests
• iOS Screenshot/Snapshot Tests
Outros Detalhes:
https://facebook.github.io/react-native/docs/testing.html

22. Quem está usando?

23. Facebook

24. Instagram

25. Walmart

26. airbnb

28. DEMO =D

29. Fontes Bacanas
• https://facebook.github.io/react-native
• https://code.facebook.com/posts/895897210527114/dive-into-react-native-
performance/
• https://www.youtube.com/watch?v=tUfgQtmG3R0
• https://medium.com/walmartlabs/react-native-at-walmartlabs-
cdd140589560#.ueonqqloc
• http://www.slideshare.net/sambhu7/introduction-to-react-native-71847255
• http://www.slideshare.net/MaartenMulders2/building-cross-platform-mobile-apps-with-
react-native-jfokus-2017
• http://www.slideshare.net/TadeuZagallo/a-tour-of-react-native
• https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7

30. Perguntas?

31. Muito Obrigado!