SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
Criando apps nativos com React
e Javascript
Quem sou eu
Rodolfo Bueno
30 anos
Cientista da Computação - UNIP GO
Esp. Gestão e Qualidade de Software
Desenvolvedor: 9+ anos
Líder Técnico: 4+ anos
Atualmente trabalho na TOTVS Goiânia.
Corredor de rua: 2+ anos
Futuro maratonista ! =]
Casado “por um acaso do destino” com uma
fisioterapeuta: 2+ anos
React Native
O React Native é um projeto criado pelos engenheiros do
Facebook, que consiste em uma série de ferramentas que
viabilizam a criação de aplicações móveis nativas para a
plataforma iOS e Android utilizando Javascript.
React Native
Código aberto e mantido por várias pessoas
e empresas.
https://github.com/facebook/react-native
Benefícios
Escrito em Javascript e renderizado nativamente
Um grande diferencial comparado com tecnologias híbridas (Ionic):
- Não existe um browser rodando sua aplicação (webview).
- Você poderá ter ganhos na performance do app.
Possibilidade de combinar os componentes React com os nativos.
Componentização
Escreveu, salvou, visualizou. (Hot reloading)
É a mesma coisa do React ?
Não.
O código produzido é muito semelhante ao React para web, ou seja toda a
experiência adquirida em um poderá ser compartilhada com o outro. Mundo
Front-end Web e Mobile de mãos dadas. Maior produtividade garantida.
Quem está usando ?
https://facebook.github.io/react-native/showcase
In 2018, React Native had the 2nd highest number of contributors for any repository in GitHub.
Mãos na massa
- Criar um projeto novo utilizando o Expo
- Rodando o projeto em um emulador
- Alterações em tempo real
- Entregando código sem publicação na loja com codepush
Novo projeto
https://facebook.github.io/react-native/docs/getting-started
Tela inicial
Criando input com estilização
Guardando valor do input e criando botão para visualizar o digitado
Transformando o input em um componente
Transformando o input em um componente
Codepush
É uma solução criada pela Microsoft que permite a atualização de pedaços de código
feitos em Javascript sem que seja necessária uma nova publicação na loja.
Obs:
- Alterações em códigos nativos tem que passar pelo processo tradicional de atualização.
- As lojas permitem o uso de ferramenta desde que suas alterações não sejam muito drásticas. Ex: Mudar toda a forma de
navegação do aplicativo.
Para exemplo de utilização consultar minha palestra realizada na Campus Party GO 2019:
https://pt.slideshare.net/rodolfox109/realizando-entregas-contnuas-para-seu-app-com-continuas-codepush
Obrigado.
Vamos manter o contato ? Me adicionem no IG, Linkedin ou me envie um e-mail =]
E-mail: rodolfo.bueno13@gmail.com
Instagram: @buenorodolfo
Linkedin: https://www.linkedin.com/in/rodolfobueno/

Mais conteúdo relacionado

Semelhante a Criando apps nativos com react e javascript. Hands-on

Realizando entregas contínuas para seu app com codepush
Realizando entregas contínuas para seu app com codepushRealizando entregas contínuas para seu app com codepush
Realizando entregas contínuas para seu app com codepushRodolfo Bueno
 
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
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2Ricardo Netto - MCP, MSP
 
Meteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobileMeteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobileFrederico Maia Arantes
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFGiordano Bruno Vieira
 
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
 
Selenium renato groffe + milton camara - mvp conf latam 2019
Selenium  renato groffe + milton camara - mvp conf latam 2019Selenium  renato groffe + milton camara - mvp conf latam 2019
Selenium renato groffe + milton camara - mvp conf latam 2019Milton Camara Gomes
 
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019Renato Groff
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao androidMessias Batista
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
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
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Henrique Dezani
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdfJulia469065
 

Semelhante a Criando apps nativos com react e javascript. Hands-on (20)

Front7 React Native
Front7 React NativeFront7 React Native
Front7 React Native
 
Realizando entregas contínuas para seu app com codepush
Realizando entregas contínuas para seu app com codepushRealizando entregas contínuas para seu app com codepush
Realizando entregas contínuas para seu app com codepush
 
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...
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 
Meteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobileMeteor - Nunca foi tão fácil desenvolver pra web e mobile
Meteor - Nunca foi tão fácil desenvolver pra web e mobile
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JF
 
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...
 
Selenium renato groffe + milton camara - mvp conf latam 2019
Selenium  renato groffe + milton camara - mvp conf latam 2019Selenium  renato groffe + milton camara - mvp conf latam 2019
Selenium renato groffe + milton camara - mvp conf latam 2019
 
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
Aplicando Testes Automatizados com Selenium e Azure DevOps - MVPConf LATAM 2019
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
React Native
React NativeReact Native
React Native
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
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...
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Worklight exemplo
Worklight exemploWorklight exemplo
Worklight exemplo
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 

Criando apps nativos com react e javascript. Hands-on

  • 1. Criando apps nativos com React e Javascript
  • 2. Quem sou eu Rodolfo Bueno 30 anos Cientista da Computação - UNIP GO Esp. Gestão e Qualidade de Software Desenvolvedor: 9+ anos Líder Técnico: 4+ anos Atualmente trabalho na TOTVS Goiânia. Corredor de rua: 2+ anos Futuro maratonista ! =] Casado “por um acaso do destino” com uma fisioterapeuta: 2+ anos
  • 3. React Native O React Native é um projeto criado pelos engenheiros do Facebook, que consiste em uma série de ferramentas que viabilizam a criação de aplicações móveis nativas para a plataforma iOS e Android utilizando Javascript.
  • 4. React Native Código aberto e mantido por várias pessoas e empresas. https://github.com/facebook/react-native
  • 5. Benefícios Escrito em Javascript e renderizado nativamente Um grande diferencial comparado com tecnologias híbridas (Ionic): - Não existe um browser rodando sua aplicação (webview). - Você poderá ter ganhos na performance do app. Possibilidade de combinar os componentes React com os nativos. Componentização Escreveu, salvou, visualizou. (Hot reloading)
  • 6. É a mesma coisa do React ? Não. O código produzido é muito semelhante ao React para web, ou seja toda a experiência adquirida em um poderá ser compartilhada com o outro. Mundo Front-end Web e Mobile de mãos dadas. Maior produtividade garantida.
  • 7. Quem está usando ? https://facebook.github.io/react-native/showcase In 2018, React Native had the 2nd highest number of contributors for any repository in GitHub.
  • 8. Mãos na massa - Criar um projeto novo utilizando o Expo - Rodando o projeto em um emulador - Alterações em tempo real - Entregando código sem publicação na loja com codepush
  • 11. Criando input com estilização
  • 12. Guardando valor do input e criando botão para visualizar o digitado
  • 13. Transformando o input em um componente
  • 14. Transformando o input em um componente
  • 15. Codepush É uma solução criada pela Microsoft que permite a atualização de pedaços de código feitos em Javascript sem que seja necessária uma nova publicação na loja. Obs: - Alterações em códigos nativos tem que passar pelo processo tradicional de atualização. - As lojas permitem o uso de ferramenta desde que suas alterações não sejam muito drásticas. Ex: Mudar toda a forma de navegação do aplicativo. Para exemplo de utilização consultar minha palestra realizada na Campus Party GO 2019: https://pt.slideshare.net/rodolfox109/realizando-entregas-contnuas-para-seu-app-com-continuas-codepush
  • 16. Obrigado. Vamos manter o contato ? Me adicionem no IG, Linkedin ou me envie um e-mail =] E-mail: rodolfo.bueno13@gmail.com Instagram: @buenorodolfo Linkedin: https://www.linkedin.com/in/rodolfobueno/