SlideShare uma empresa Scribd logo
Desenvolvendo
aplicativos nativos com
React Native
@luisfmsouz
Learn once,
write anywhere.
Luís
Felipe
Souza
@luisfmsouz
meetupdesigncampinas.com
Desenvolvendo aplicativos nativos com React Native
developer at
O que é React Native?
O que não é React
Native?
Não é Híbrido!
Desenvolvendo aplicativos nativos com React Native
RN vs Híbrido
● RN não usa WebView, a
renderização é nativa
● Performance do React
Native tende a ser melhor
● Os dois são open source e
tem um ecossistema bem
movimentado
Ionic, por exemplo
Não é transpiled!
JavaScript Native Code
RN vs Nativo
● Nativo não tem
portabilidade de código
● Desenvolvimento apenas
com linguagem nativa
● Nativo tem performance
um pouco melhor
Nativo iOS ou Android
Não é PWA!
Desenvolvendo aplicativos nativos com React Native
RN vs PWA
● PWA não está na App ou
Play Store
● Ainda não tem acesso a
todas as APIs em todos as
plataformas
● Sem nenhum tipo de
linguagem nativa, usa API
do browser
PWA for the win!
O que é React Native?
React Native
● Teve início em Hackathon
em meados de 2013
● Em março de 2015 se
tornou open source
● 4º repositório com mais
estrelas no GitHub. +55k
● Facebook e Microsoft
RN for the win!
React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.
React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.
Sim, é nativo!
React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.
"ah, JavaScript?"
JavaScript
Learn once,
write anywhere.
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
Como isso é possível?
Arquitetura do
React Native
UI Thread
● Shadow Queue
● Layout
Main Thread
● Objective-C
● Swift
● Java
JS Thread
● JS Core
Native Code
JavaScript Runtime
Environment
React
Native
iOS or Android Operating System
Bridge
Native Code
JavaScript Runtime
Environment
React Native
Button
iOS or Android Operating System
Bridge
Native Button
React Native
TextInput
Native
TextInput
Multiplataforma
Android
ReactNative
iOS
~85% de compartilhamento de
código
Como é o código?
http://slides.com/lnfnunes/react-native#/17
sem CSS
http://slides.com/lnfnunes/react-native#/19
sem HTML
http://slides.com/lnfnunes/react-native#/18
React Native é uma maneira de
renderizar componentes nativos
escritos em JavaScript
Experiência de
desenvolvimento
Praticidade
Desenvolvendo aplicativos nativos com React Native
Desenvolvendo aplicativos nativos com React Native
Debugging
Desenvolvendo aplicativos nativos com React Native
Redux
(avançado)
Desenvolvendo aplicativos nativos com React Native
Devo usar React
Native?
Desenvolvendo aplicativos nativos com React Native
Devo usar?
● Tempo limitado
● Precisa desenvolver para
Android e iOS
● O time não tem muita
experiência mobile
● Time com experiência web!
● Tempo ilimitado
● Desenvolver só para
Android
● Desenvolver só para iOS
● Time com experiência
mobile
Devo usar?
Devo usar React
Native?
Sim! Dê uma chance
ao React Native!
React Native, 2
Created by Facebook
There’s nothing to fear
about React Native!
Obrigado!
Dojo de React Native
Dúvidas?
twitter.com/@magnetisbkstage
medium.com/magnetis-backstage
https://medium.com/magnetis-backstage/5-things-that-youll-learn-when-you-start-to-use-react-native-1ed601e6eac
Links interessantes
● https://medium.com/magnetis-backstage/5-things-that-youll-learn-w
hen-you-start-to-use-react-native-1ed601e6eac
● https://www.logicroom.co/react-native-architecture-explained/
● https://julyrapid.com/hybrid-vs-native-mobile-app-decide-5-minutes/

Mais conteúdo relacionado

Mais procurados

Infowork 2015 - Introdução ao Phonegap
Infowork 2015 - Introdução ao PhonegapInfowork 2015 - Introdução ao Phonegap
Infowork 2015 - Introdução ao Phonegap
Edgar Muniz Berlinck
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Cássio Nandi Citadin
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
Campus Party Brasil
 
Desmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegapDesmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegap
Leonardo Marinho
 
Android DevConference - Firebase para desenvolvedores
Android DevConference - Firebase para desenvolvedoresAndroid DevConference - Firebase para desenvolvedores
Android DevConference - Firebase para desenvolvedores
iMasters
 
Laravel Api
Laravel ApiLaravel Api
Laravel Api
Gabriel Gonçalves
 
Android DevConference - Aumentando sua produtividade no Android Studio
Android DevConference - Aumentando sua produtividade no Android StudioAndroid DevConference - Aumentando sua produtividade no Android Studio
Android DevConference - Aumentando sua produtividade no Android Studio
iMasters
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Wennder Santos
 
Phonegap
PhonegapPhonegap
Phonegap
Lucas Aquiles
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
Rafael Neri
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
Cristiano Gomes
 
Scrum Gathering Rio 2014
Scrum Gathering Rio 2014Scrum Gathering Rio 2014
Scrum Gathering Rio 2014
Victor Pantoja
 
UFABC React Native
UFABC React NativeUFABC React Native
UFABC React Native
Newton Angelini
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
Groovy e Grails 2
Groovy e Grails 2Groovy e Grails 2
Groovy e Grails 2
Sérgio Neves Sacenti
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!
Luiz Gavinho
 
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
tdc-globalcode
 
Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.
Bryan Ollivie
 
#02 - Segundo Meetup React Goiânia
#02 - Segundo Meetup React Goiânia#02 - Segundo Meetup React Goiânia
#02 - Segundo Meetup React Goiânia
Gleidson Daniel
 
Curso Java Básico Aula 01: Introdução e Dicas para quem está Começando
Curso Java Básico Aula 01: Introdução e Dicas para quem está ComeçandoCurso Java Básico Aula 01: Introdução e Dicas para quem está Começando
Curso Java Básico Aula 01: Introdução e Dicas para quem está Começando
Loiane Groner
 

Mais procurados (20)

Infowork 2015 - Introdução ao Phonegap
Infowork 2015 - Introdução ao PhonegapInfowork 2015 - Introdução ao Phonegap
Infowork 2015 - Introdução ao Phonegap
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
 
Desmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegapDesmistificando o mobile híbrido com phonegap
Desmistificando o mobile híbrido com phonegap
 
Android DevConference - Firebase para desenvolvedores
Android DevConference - Firebase para desenvolvedoresAndroid DevConference - Firebase para desenvolvedores
Android DevConference - Firebase para desenvolvedores
 
Laravel Api
Laravel ApiLaravel Api
Laravel Api
 
Android DevConference - Aumentando sua produtividade no Android Studio
Android DevConference - Aumentando sua produtividade no Android StudioAndroid DevConference - Aumentando sua produtividade no Android Studio
Android DevConference - Aumentando sua produtividade no Android Studio
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Phonegap
PhonegapPhonegap
Phonegap
 
Introdução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha TouchIntrodução ao PhoneGap e Sencha Touch
Introdução ao PhoneGap e Sencha Touch
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
Scrum Gathering Rio 2014
Scrum Gathering Rio 2014Scrum Gathering Rio 2014
Scrum Gathering Rio 2014
 
UFABC React Native
UFABC React NativeUFABC React Native
UFABC React Native
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Groovy e Grails 2
Groovy e Grails 2Groovy e Grails 2
Groovy e Grails 2
 
Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!Phonegap, muito além dos nativos!
Phonegap, muito além dos nativos!
 
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
 
Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.
 
#02 - Segundo Meetup React Goiânia
#02 - Segundo Meetup React Goiânia#02 - Segundo Meetup React Goiânia
#02 - Segundo Meetup React Goiânia
 
Curso Java Básico Aula 01: Introdução e Dicas para quem está Começando
Curso Java Básico Aula 01: Introdução e Dicas para quem está ComeçandoCurso Java Básico Aula 01: Introdução e Dicas para quem está Começando
Curso Java Básico Aula 01: Introdução e Dicas para quem está Começando
 

Semelhante a Desenvolvendo aplicativos nativos com React Native

Front7 React Native
Front7 React NativeFront7 React Native
Front7 React Native
Newton Angelini
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
DevCamp Campinas
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Criciúma Dev
 
React Native - JSday
React Native - JSdayReact Native - JSday
React Native - JSday
Eric Cavalcanti
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
Breno Alves
 
NativeScript: "write once, run anywhere mobile" com Javascript?
 NativeScript: "write once, run anywhere mobile" com Javascript? NativeScript: "write once, run anywhere mobile" com Javascript?
NativeScript: "write once, run anywhere mobile" com Javascript?
José Yoshiriro
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
iMasters
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
Hugo Iuri
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
Jessica Zanelato Soares
 
Introdução a React Native
Introdução a React NativeIntrodução a React Native
Introdução a React Native
Nurielly Caroline Brizola
 
Web open source
Web open sourceWeb open source
Web open source
Carlos Maniero
 
Workshop - Introdução a linguagem C#
Workshop - Introdução a linguagem C#Workshop - Introdução a linguagem C#
Workshop - Introdução a linguagem C#
Cristiano Cunha
 
Apresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - GoiâniaApresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - Goiânia
Frederico Maia Arantes
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
Joelmir Ribacki
 
Criando apps nativos com react e javascript. Hands-on
Criando apps nativos com react e javascript. Hands-onCriando apps nativos com react e javascript. Hands-on
Criando apps nativos com react e javascript. Hands-on
Rodolfo Bueno
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
E-Commerce Brasil
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Marcelo Marques Gonçalves
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e KotlinO uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
David Robert Camargo de Campos
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Leonardo Melo Santos
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
drbatiston
 

Semelhante a Desenvolvendo aplicativos nativos com React Native (20)

Front7 React Native
Front7 React NativeFront7 React Native
Front7 React Native
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
React Native - JSday
React Native - JSdayReact Native - JSday
React Native - JSday
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
 
NativeScript: "write once, run anywhere mobile" com Javascript?
 NativeScript: "write once, run anywhere mobile" com Javascript? NativeScript: "write once, run anywhere mobile" com Javascript?
NativeScript: "write once, run anywhere mobile" com Javascript?
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
Introdução a React Native
Introdução a React NativeIntrodução a React Native
Introdução a React Native
 
Web open source
Web open sourceWeb open source
Web open source
 
Workshop - Introdução a linguagem C#
Workshop - Introdução a linguagem C#Workshop - Introdução a linguagem C#
Workshop - Introdução a linguagem C#
 
Apresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - GoiâniaApresentando meteor! Join Community - Goiânia
Apresentando meteor! Join Community - Goiânia
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Criando apps nativos com react e javascript. Hands-on
Criando apps nativos com react e javascript. Hands-onCriando apps nativos com react e javascript. Hands-on
Criando apps nativos com react e javascript. Hands-on
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e KotlinO uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
 

Mais de Luís Felipe Souza

PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
Luís Felipe Souza
 
Transformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWATransformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWA
Luís Felipe Souza
 
QDD - Qualidade depois do deploy
QDD - Qualidade depois do deployQDD - Qualidade depois do deploy
QDD - Qualidade depois do deploy
Luís Felipe Souza
 
Tratamento de erros no Vue.js
Tratamento de erros no Vue.jsTratamento de erros no Vue.js
Tratamento de erros no Vue.js
Luís Felipe Souza
 
Dojo vue.js
Dojo vue.jsDojo vue.js
Dojo vue.js
Luís Felipe Souza
 
Vue.js
Vue.jsVue.js
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
Luís Felipe Souza
 

Mais de Luís Felipe Souza (7)

PWA - Front in Floripa
PWA - Front in FloripaPWA - Front in Floripa
PWA - Front in Floripa
 
Transformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWATransformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWA
 
QDD - Qualidade depois do deploy
QDD - Qualidade depois do deployQDD - Qualidade depois do deploy
QDD - Qualidade depois do deploy
 
Tratamento de erros no Vue.js
Tratamento de erros no Vue.jsTratamento de erros no Vue.js
Tratamento de erros no Vue.js
 
Dojo vue.js
Dojo vue.jsDojo vue.js
Dojo vue.js
 
Vue.js
Vue.jsVue.js
Vue.js
 
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
 

Desenvolvendo aplicativos nativos com React Native