SlideShare uma empresa Scribd logo
@lucasferreira
Desenvolvimento Mobile Multiplataforma:
Uma abordagem ágil e de alto desempenho
com o framework React Native
Lucas Ferreira
http://blog.lucasferreira.com
@lucasferreira
https://github.com/lucasferreira
Diretor de Desenvolvimento e Co-founder da
React… who?
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
React Native
React Native
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
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
Como funciona
Quem faz a força é a engine JavaScriptCore do WebKit -
disponível em iOS e portada para Android
Como funciona
E com a aplicação rodando….
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
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
Getting Started
$ react-native init CriDevApp
Código
JSX x ES5 x ES6
CSS ?
Run!
$ react-native run-ios
$ react-native run-android
* Ligar o emulador antes ou ter um dispostivo disponível na porta USB
Run!
Debug
$ react-native log-ios
$ react-native log-android
+ Debug remoto com o Google Chrome
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
Quem está usando?
Facebook
Instagram
Walmart
airbnb
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempenho com o framework React Native
DEMO =D
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
Perguntas?
Muito Obrigado!

Mais conteúdo relacionado

Mais procurados

Testes com xUnit + Coding Dojo
Testes com xUnit + Coding DojoTestes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
Letticia Nicoli
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
Laís Lima
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
Douglas Matoso
 
Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
Gregorio Melo
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
Fernando Henriques
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
Denis Velrino
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
Dan Vitoriano
 
Blazor #SnetTalks3
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3
André Agostinho
 
Comparando as Hypes - React & Vue
Comparando as Hypes - React & VueComparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
Herbert Henrique
 
Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021
Erik Cruz
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
Ruben Marcus Luz Paschoarelli
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Thiago Ferreira
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
Vinicius Quaiato
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsIntrodução ao Github actions - TDC Connections
Introdução ao Github actions - TDC Connections
Guillaume Falourd
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp net
Anderson Wernek
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!
Isaac de Souza
 
ASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e AzureASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e Azure
Giovanni Bassi
 
Jenkins e a Integração Contínua
Jenkins e a Integração ContínuaJenkins e a Integração Contínua
Jenkins e a Integração Contínua
Denis Vieira
 
Sobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis UberlândiaSobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis Uberlândia
Rogerio Fontes
 
Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
Gustavo Lopes
 

Mais procurados (20)

Testes com xUnit + Coding Dojo
Testes com xUnit + Coding DojoTestes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
 
Blazor #SnetTalks3
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3
 
Comparando as Hypes - React & Vue
Comparando as Hypes - React & VueComparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
 
Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
 
Desvendando ASP.NET MVC
Desvendando ASP.NET MVCDesvendando ASP.NET MVC
Desvendando ASP.NET MVC
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsIntrodução ao Github actions - TDC Connections
Introdução ao Github actions - TDC Connections
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp net
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!
 
ASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e AzureASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e Azure
 
Jenkins e a Integração Contínua
Jenkins e a Integração ContínuaJenkins e a Integração Contínua
Jenkins e a Integração Contínua
 
Sobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis UberlândiaSobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis Uberlândia
 
Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
 

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

Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
Stefan Horochovec
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3D
Renato Puccini
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
William S. Rodriguez
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
Rodrigo Peleias
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
Hugo Iuri
 
Conhecendo Java
Conhecendo JavaConhecendo Java
Conhecendo Java
TI Infnet
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
javamanrj
 
TDC2018SP | Trilha Mobile - Learn once, code anywhere
TDC2018SP | Trilha Mobile - Learn once, code anywhereTDC2018SP | Trilha Mobile - Learn once, code anywhere
TDC2018SP | Trilha Mobile - Learn once, code anywhere
tdc-globalcode
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
Renato Puccini
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
LeonardoPrange
 
Java e Software Livre
Java e Software LivreJava e Software Livre
Java e Software Livre
Glaucio Scheibel
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
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
 
Meteor - TechParty 2015
Meteor - TechParty 2015Meteor - TechParty 2015
Meteor - TechParty 2015
Rodrigo Krummenauer do Nascimento
 
Phonegap - self RJ
Phonegap - self RJPhonegap - self RJ
Phonegap - self RJ
javamanrj
 
Titanium appacelerator
Titanium appaceleratorTitanium appacelerator
Titanium appacelerator
Davi Felipe Russi
 
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
 
React Native
React NativeReact Native
React Native
Dan Vitoriano
 
As vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NETAs vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NET
Joel Rodrigues
 
Javafx
JavafxJavafx

Semelhante a Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempenho com o framework React Native (20)

Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3D
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
 
Netbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 PortuguesNetbeans Slides Fy2009 Portugues
Netbeans Slides Fy2009 Portugues
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Conhecendo Java
Conhecendo JavaConhecendo Java
Conhecendo Java
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
 
TDC2018SP | Trilha Mobile - Learn once, code anywhere
TDC2018SP | Trilha Mobile - Learn once, code anywhereTDC2018SP | Trilha Mobile - Learn once, code anywhere
TDC2018SP | Trilha Mobile - Learn once, code anywhere
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
 
Java e Software Livre
Java e Software LivreJava e Software Livre
Java e Software Livre
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
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...
 
Meteor - TechParty 2015
Meteor - TechParty 2015Meteor - TechParty 2015
Meteor - TechParty 2015
 
Phonegap - self RJ
Phonegap - self RJPhonegap - self RJ
Phonegap - self RJ
 
Titanium appacelerator
Titanium appaceleratorTitanium appacelerator
Titanium appacelerator
 
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
 
React Native
React NativeReact Native
React Native
 
As vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NETAs vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NET
 
Javafx
JavafxJavafx
Javafx
 

Mais de Criciúma Dev

Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
Criciúma Dev
 
Como ser um bom dev FrontEnd em 2017
Como ser um bom dev FrontEnd em 2017Como ser um bom dev FrontEnd em 2017
Como ser um bom dev FrontEnd em 2017
Criciúma Dev
 
UX Design para desenvolvedores
UX Design para desenvolvedoresUX Design para desenvolvedores
UX Design para desenvolvedores
Criciúma Dev
 
Escalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJSEscalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJS
Criciúma Dev
 
Reduzindo complexidade
Reduzindo complexidadeReduzindo complexidade
Reduzindo complexidade
Criciúma Dev
 
Javascript, porque?
Javascript, porque?Javascript, porque?
Javascript, porque?
Criciúma Dev
 
Aspectos de segurança em bancos de dados para web
Aspectos de segurança em bancos de dados para webAspectos de segurança em bancos de dados para web
Aspectos de segurança em bancos de dados para web
Criciúma Dev
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
Criciúma Dev
 
Microserviços na vida real
Microserviços na vida realMicroserviços na vida real
Microserviços na vida real
Criciúma Dev
 
DevOps Culture: Como implementar métodos ágeis em infraestrutura como código
DevOps Culture: Como implementar métodos ágeis em infraestrutura como códigoDevOps Culture: Como implementar métodos ágeis em infraestrutura como código
DevOps Culture: Como implementar métodos ágeis em infraestrutura como código
Criciúma Dev
 
CSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution baby
Criciúma Dev
 
Simplificando UX e Códigos para Conteúdos Complexos
Simplificando UX e Códigos para Conteúdos ComplexosSimplificando UX e Códigos para Conteúdos Complexos
Simplificando UX e Códigos para Conteúdos Complexos
Criciúma Dev
 
Metodologias interativas
Metodologias interativasMetodologias interativas
Metodologias interativas
Criciúma Dev
 
Venha para o lado livre da força. O que você pode fazer pelo software livre e...
Venha para o lado livre da força. O que você pode fazer pelo software livre e...Venha para o lado livre da força. O que você pode fazer pelo software livre e...
Venha para o lado livre da força. O que você pode fazer pelo software livre e...
Criciúma Dev
 
Começando na área de desenvolvimento mobile. O que preciso saber?
Começando na área de desenvolvimento mobile. O que preciso saber?Começando na área de desenvolvimento mobile. O que preciso saber?
Começando na área de desenvolvimento mobile. O que preciso saber?
Criciúma Dev
 

Mais de Criciúma Dev (15)

Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
Gustavo Pantuza / Automatizando deploys de ACLs no datacenter da Globo.com - ...
 
Como ser um bom dev FrontEnd em 2017
Como ser um bom dev FrontEnd em 2017Como ser um bom dev FrontEnd em 2017
Como ser um bom dev FrontEnd em 2017
 
UX Design para desenvolvedores
UX Design para desenvolvedoresUX Design para desenvolvedores
UX Design para desenvolvedores
 
Escalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJSEscalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJS
 
Reduzindo complexidade
Reduzindo complexidadeReduzindo complexidade
Reduzindo complexidade
 
Javascript, porque?
Javascript, porque?Javascript, porque?
Javascript, porque?
 
Aspectos de segurança em bancos de dados para web
Aspectos de segurança em bancos de dados para webAspectos de segurança em bancos de dados para web
Aspectos de segurança em bancos de dados para web
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Microserviços na vida real
Microserviços na vida realMicroserviços na vida real
Microserviços na vida real
 
DevOps Culture: Como implementar métodos ágeis em infraestrutura como código
DevOps Culture: Como implementar métodos ágeis em infraestrutura como códigoDevOps Culture: Como implementar métodos ágeis em infraestrutura como código
DevOps Culture: Como implementar métodos ágeis em infraestrutura como código
 
CSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution baby
 
Simplificando UX e Códigos para Conteúdos Complexos
Simplificando UX e Códigos para Conteúdos ComplexosSimplificando UX e Códigos para Conteúdos Complexos
Simplificando UX e Códigos para Conteúdos Complexos
 
Metodologias interativas
Metodologias interativasMetodologias interativas
Metodologias interativas
 
Venha para o lado livre da força. O que você pode fazer pelo software livre e...
Venha para o lado livre da força. O que você pode fazer pelo software livre e...Venha para o lado livre da força. O que você pode fazer pelo software livre e...
Venha para o lado livre da força. O que você pode fazer pelo software livre e...
 
Começando na área de desenvolvimento mobile. O que preciso saber?
Começando na área de desenvolvimento mobile. O que preciso saber?Começando na área de desenvolvimento mobile. O que preciso saber?
Começando na área de desenvolvimento mobile. O que preciso saber?
 

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