Como aproveitar a stack completa do
“Create React Native App” usando Redux
React Native - Testável e organizado
Dev IoT, Web Fullstack (mais front-end), Mobile
André Antunes Vieira
Mais de 300.000 aulas/dia
Média de 4 aulas/s
Um pouco de história
01
- Técnico em eletrônica / Engenharia elétrica
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- Web - Fullstack
- IoT - Robôs + P&D
- Tentativa mobile
- Crescimento Me Salva! + Especialização front-end
01 O mundo encantado do JavaScript
mesalva.com
O mundo encantado do JavaScript
01
- Tentativa mobile 2
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- Redescoberta do React e do React Native
- De volta ao front
01 Um pouco sobre mim
mesalva.com
Como fui parar na WEB
01
- Porque redescoberta?
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- História do front-end
02
- Sites baseados em SERVER SIDE ONLY
WEB até os anos 2000
mesalva.com
WEB da idade das pedras
- Javascript era o patinho feio
- Quase nada rolava em Client Side
- Era lento
- Incompatível
- Não confiável (Single Thread)
02
- A lentidão já não era mais tão grande
2000 - 2010
mesalva.com
Javascript = comportamento
- Surgiram bibliotecas (muitas)
- Se confiava o suficiente para deixar o JS cuidar do “comportamento”
- jQuery
- Se brincava com AJAX
03
- AJAX > Reload
2005-2013
mesalva.com
WEB Applications
- Agora client gerenciava:
- Maior complexidade
- Router
- Requests (API)
- Comportamento
- Backbone, Ember, Angular JS ( 1 )
04
- Cultura de reusabilidade
2013 - 2015
mesalva.com
WEB Components
- Virtual DOM
- Componentização
- NodeJS, React, Angular, VueJS, CycleJS...
- Javascript em todas as áreas
- Ambiente de desenvolvimento Front-end
- Atomic Design
- Programação reativa
05
- Mais Smartphones, menos PCs
2015 - Hoje
mesalva.com
Mundo virando Mobile First
- Reusabilidade
- Componentização
- Multiplataforma
- Atomic Design
- Programação reativa
- Flexbox
06
- HTML5 (Cordova)
Tecnologias Multi-plataforma
mesalva.com
Lado bom e ruim
- Compilados (Xamarim)
- Ideia boa, execução terrível
- Coda em uma linguagem, gera 2
- Interpretados (React Native)
- Processa JS em tempo real dentro do APP
07
- NodeJS
Ambiente de desenvolvimento
mesalva.com
Todo desenvolvedor deve ter um
- Yarn
- Bibliotecas!
Composer
Bundle
Cocoapods
...
08 Preciso saber tudo isso?
mesalva.com
Sim e não
Criando um APP do Zero
01
- react-native-cli
Por onde eu começo?
mesalva.com
Por algum gerador de stack completo
- expo
- create-react-native-app
02
- Instalar NodeJs
Preparando seu computador
mesalva.com
Acredite, funciona até no Windows
- Instalar create-react-native-app
- npm install -g create-react-native-app
- macOS: brew install node
- linux: sudo apt-get install node
- windows: http://nodejs.org
03
- É só rodar o comando
Criando um projeto
mesalva.com
Não tem como ser mais fácil
- create-react-native-app {nome-do-app}
- Vai instalar:
- Expo (Simulador + servidor local + bibliotecas expo)
- Jest (Testes unitários + coverage)
- Gerador de build
- Simulador iOS e Android interligado as IDEs
- Babel (Traspilador javascript)
Construindo um APP simples
01 Tá criei o projeto, e agora?
mesalva.com
É, naquela tela preta
mesalva.com
02 Ta e nas pastas
mesalva.com
O que vem na pasta?
03 Já dá pra ver algo funcionando?
mesalva.com
Claro que dá!
- npm start
- Roda um servidor expo local
- npm run ios (só no mac)
- Roda um servidor expo local e abre o simulador do Xcode
já no expo
- npm run android (qualquer pc com android studio instalado)
- Roda um servidor expo local e abre o simulador do
Android já no expo
04 npm start
mesalva.com
Só isso?
- npm start
04 npm start
mesalva.com
Só isso?
04 npm start
mesalva.com
Só isso?
05 npm run ios
mesalva.com
Só isso, mesmo?
- npm run ios
- Apenas em macOS
05
mesalva.com
Olá mundo
01 Live coding: Olá mundo
mesalva.com
Pelo menos um olá mundo não deve ser complicado
02 E a estilização
mesalva.com
Tipo um CSS
03 O que são flexbox
mesalva.com
O encantado mundo das flexbox
- Organização entre elementos pais e elementos filhos
- https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35
- http://flexboxfroggy.com
- https://codepen.io/osublake/full/dMLQJr
04 E os tais componentes?
mesalva.com
Como reutilizar código
- Forma de agrupar muito código num único lugar
- Recebem e exportam propriedades (parâmetros e funções)
- Trabalham com o conceito de “estado”
Organização e testes
01 Separação de código
mesalva.com
Pq tudo junto e misturado é bagunça
02 Qual a melhor forma de separar?
mesalva.com
Cada um tem a sua
- Organização por estrutura
- Organização por responsabilidade
03 E os testes?
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test
03 E os testes?
mesalva.com
Testo na mão, não dá nada, e confiável...
03 Testando snapshots
mesalva.com
O que, testar view? Sério?
- npm test
03 Testando snapshots
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test
03 Testando snapshots
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test
04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage
04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage
04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage
05 Quero publicar, como
faz?
mesalva.com
- npm run eject
- Vai transformar o projeto em um projeto:
- react-native-cli
ou
- expo
05 Quero publicar, como
faz?
mesalva.com
- npm run eject
André Antunes Vieira
github.com/AndreAntunesVieira
andreantunesv@gmail.com

React native - testável e organizado

  • 1.
    Como aproveitar astack completa do “Create React Native App” usando Redux React Native - Testável e organizado
  • 2.
    Dev IoT, WebFullstack (mais front-end), Mobile André Antunes Vieira
  • 3.
    Mais de 300.000aulas/dia Média de 4 aulas/s
  • 4.
    Um pouco dehistória
  • 5.
    01 - Técnico emeletrônica / Engenharia elétrica Um pouco sobre mim mesalva.com Como fui parar na WEB - Web - Fullstack - IoT - Robôs + P&D - Tentativa mobile - Crescimento Me Salva! + Especialização front-end
  • 6.
    01 O mundoencantado do JavaScript mesalva.com O mundo encantado do JavaScript
  • 7.
    01 - Tentativa mobile2 Um pouco sobre mim mesalva.com Como fui parar na WEB - Redescoberta do React e do React Native - De volta ao front
  • 8.
    01 Um poucosobre mim mesalva.com Como fui parar na WEB
  • 9.
    01 - Porque redescoberta? Umpouco sobre mim mesalva.com Como fui parar na WEB - História do front-end
  • 10.
    02 - Sites baseadosem SERVER SIDE ONLY WEB até os anos 2000 mesalva.com WEB da idade das pedras - Javascript era o patinho feio - Quase nada rolava em Client Side - Era lento - Incompatível - Não confiável (Single Thread)
  • 11.
    02 - A lentidãojá não era mais tão grande 2000 - 2010 mesalva.com Javascript = comportamento - Surgiram bibliotecas (muitas) - Se confiava o suficiente para deixar o JS cuidar do “comportamento” - jQuery - Se brincava com AJAX
  • 12.
    03 - AJAX >Reload 2005-2013 mesalva.com WEB Applications - Agora client gerenciava: - Maior complexidade - Router - Requests (API) - Comportamento - Backbone, Ember, Angular JS ( 1 )
  • 13.
    04 - Cultura dereusabilidade 2013 - 2015 mesalva.com WEB Components - Virtual DOM - Componentização - NodeJS, React, Angular, VueJS, CycleJS... - Javascript em todas as áreas - Ambiente de desenvolvimento Front-end - Atomic Design - Programação reativa
  • 14.
    05 - Mais Smartphones,menos PCs 2015 - Hoje mesalva.com Mundo virando Mobile First - Reusabilidade - Componentização - Multiplataforma - Atomic Design - Programação reativa - Flexbox
  • 15.
    06 - HTML5 (Cordova) TecnologiasMulti-plataforma mesalva.com Lado bom e ruim - Compilados (Xamarim) - Ideia boa, execução terrível - Coda em uma linguagem, gera 2 - Interpretados (React Native) - Processa JS em tempo real dentro do APP
  • 16.
    07 - NodeJS Ambiente dedesenvolvimento mesalva.com Todo desenvolvedor deve ter um - Yarn - Bibliotecas! Composer Bundle Cocoapods ...
  • 17.
    08 Preciso sabertudo isso? mesalva.com Sim e não
  • 18.
  • 19.
    01 - react-native-cli Por ondeeu começo? mesalva.com Por algum gerador de stack completo - expo - create-react-native-app
  • 20.
    02 - Instalar NodeJs Preparandoseu computador mesalva.com Acredite, funciona até no Windows - Instalar create-react-native-app - npm install -g create-react-native-app - macOS: brew install node - linux: sudo apt-get install node - windows: http://nodejs.org
  • 21.
    03 - É sórodar o comando Criando um projeto mesalva.com Não tem como ser mais fácil - create-react-native-app {nome-do-app} - Vai instalar: - Expo (Simulador + servidor local + bibliotecas expo) - Jest (Testes unitários + coverage) - Gerador de build - Simulador iOS e Android interligado as IDEs - Babel (Traspilador javascript)
  • 22.
  • 23.
    01 Tá crieio projeto, e agora? mesalva.com É, naquela tela preta
  • 24.
  • 25.
    02 Ta enas pastas mesalva.com O que vem na pasta?
  • 26.
    03 Já dápra ver algo funcionando? mesalva.com Claro que dá! - npm start - Roda um servidor expo local - npm run ios (só no mac) - Roda um servidor expo local e abre o simulador do Xcode já no expo - npm run android (qualquer pc com android studio instalado) - Roda um servidor expo local e abre o simulador do Android já no expo
  • 27.
  • 28.
  • 29.
  • 30.
    05 npm runios mesalva.com Só isso, mesmo? - npm run ios - Apenas em macOS
  • 31.
  • 32.
  • 33.
    01 Live coding:Olá mundo mesalva.com Pelo menos um olá mundo não deve ser complicado
  • 34.
    02 E aestilização mesalva.com Tipo um CSS
  • 35.
    03 O quesão flexbox mesalva.com O encantado mundo das flexbox - Organização entre elementos pais e elementos filhos - https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35 - http://flexboxfroggy.com - https://codepen.io/osublake/full/dMLQJr
  • 36.
    04 E ostais componentes? mesalva.com Como reutilizar código - Forma de agrupar muito código num único lugar - Recebem e exportam propriedades (parâmetros e funções) - Trabalham com o conceito de “estado”
  • 37.
  • 38.
    01 Separação decódigo mesalva.com Pq tudo junto e misturado é bagunça
  • 39.
    02 Qual amelhor forma de separar? mesalva.com Cada um tem a sua - Organização por estrutura - Organização por responsabilidade
  • 40.
    03 E ostestes? mesalva.com Testo na mão, não dá nada, e confiável... - npm test
  • 41.
    03 E ostestes? mesalva.com Testo na mão, não dá nada, e confiável...
  • 42.
    03 Testando snapshots mesalva.com Oque, testar view? Sério? - npm test
  • 43.
    03 Testando snapshots mesalva.com Testona mão, não dá nada, e confiável... - npm test
  • 44.
    03 Testando snapshots mesalva.com Testona mão, não dá nada, e confiável... - npm test
  • 45.
    04 Tem coberturade código? mesalva.com Claro que tem - npm test -- --coverage
  • 46.
    04 Tem coberturade código? mesalva.com Claro que tem - npm test -- --coverage
  • 47.
    04 Tem coberturade código? mesalva.com Claro que tem - npm test -- --coverage
  • 48.
    05 Quero publicar,como faz? mesalva.com - npm run eject - Vai transformar o projeto em um projeto: - react-native-cli ou - expo
  • 49.
    05 Quero publicar,como faz? mesalva.com - npm run eject
  • 50.