Treinamento React Native

Transcript

1. Vizir: Treinamento React Native
2. Antes de tudo… • Instalar o Yarn • Instalar a app do Expo
3. Conceitos • JavaScript hoje • React • React Native • Fluxo Git recomendado • Estrutura do projeto • Separação de conceitos e isomorfismo • Navegação • Tópicos avançados Agenda Prática • Setup do ambiente • Refatoração: separando os conceitos • Testes automatizados
4. JavaScript Hoje
5. Após os 10 dias • jQuery (2006) • Node.js (2009) • React (2013) • Electron (2013) • React Native (2015) JavaScript Hoje
6. Fonte: https://medium.com/frontendshortcut/why-javascript-should-be-your-first-programming-language-cdf1d7108f86 JavaScript Hoje
7. Como começar hoje • Usar ES6 aka (ECMAScript 2015) ◦ ES6 é o padrão em React/React Native ◦ Ótimas adições ▪ const const API_URL = process.env.REACT_APP_API_URL; ▪ arrow function const sum = ( a, b ) => a+b; ▪ default parameter const fooFunction = (foo = 'foo') => { } ▪ destructuring const { attr1, attr2 } = this.props; ▪ spread operator <Component {...props} /> ▪ class syntax class MyComponent { constructur() {} myfunction() {} } • Editores a escolha: Atom, Sublime 3, VS Code, etc JavaScript Hoje
8. Como começar hoje • Usar Babel ◦ Na Web ▪ Se precisar dar suporte ao IE11, usar Babel ◦ No back-end ▪ Com Node a partir do 8, não há necessidade do Babel ◦ No Mobile ▪ React Native já vem com Babel JavaScript Hoje
9. O caminho para JavaScript 1. You Don't Know JS: ES6 & Beyond 2. CS50's Mobile App Development with React Native JavaScript Hoje
10. React
11. O que é? • O V do MVC • Utiliza o conceito de virtual DOM • Atualização do DOM de forma reativa • Força o desenvolvimento orientado a componentes • HTML JSX e JavaScript juntos React
12. Conceitos principais • JSX ◦ https://jsfiddle.net/FabricioFFC/a017wger/ • Stateless component ◦ https://jsfiddle.net/FabricioFFC/zkdjasxm/ • Statefull component ◦ https://jsfiddle.net/FabricioFFC/pyzt7uw1/ React
13. Conceitos principais • Props ◦ Atributos e dependências recebidos de fora ◦ Quando mudados causam o re-render do componente ◦ PropTypes • State ◦ Representação a nível de componente do estado dele ◦ Pode ser alterado apenas via this.setState, que roda de forma assíncrona ◦ Mudanças no state, causam o re-render React
14. Conceitos principais: Lifecycle • Mounting ◦ constructor ◦ getDerivedStateFromProps ◦ render ◦ componentDidMount React • Updating ◦ getDerivedStateFromProps ◦ shouldComponentUpdate ◦ render ◦ getSnapshotBeforeUpdate ◦ componentDidUpdate • Unmounting ◦ componentWillUnmount
15. O caminho para o React 1. React Tutorial 2. CS50's Mobile App Development with React Native React
16. React Native
17. O que é? • Um conjunto de componentes para Mobile • Prover acesso a API nativa (iOS e Android) • Fornece uma Bridge com a parte nativa React Native
18. Como funciona? React Native Fonte: http://chain-react-bridging.surge.sh/#/14
19. Conceitos principais • Os mesmos do React • Estilizar com JS ◦ Posicionamento e layout com Flexbox ◦ Ex: StyleSheet.create( { bigGreen: { fontSize: 20, color: ‘green’ } ); • Não temos mais HTML, no lugar temos os componentes fornecidos pelo React Native, ex: View • Hello World: https://snack.expo.io/r1xHxH-Q7 React
20. O caminho para React Native 1. React Native Docs 2. CS50's Mobile App Development with React Native 3. Yoga React Native
21. Fluxo Git recomendado
22. Simplicidade: feature branch • O master sempre está num estado deployable, ou seja, pode ir para produção • Todas as mudanças são feitas através de pull requests + merge, através da criação de features branches. Os commits direto na master estão desabilitados • Para resolver conflitos e atualizar com a master, use rebase na sua feature branch Fluxo Git recomendado
23. Cenários: nova feat Fluxo Git recomendado
24. Cenários: hotfix Fluxo Git recomendado
25. Estrutura do projeto
26. Estrutura do projeto
27. Separação de conceitos e isomorfismo
28. Conceitos por trás da organização • Separação de responsabilidade ◦ Ex: toda comunicação com serviços externos (ex: API), fica dentro da pasta api ◦ Lógicas de view da aplicação (ex: mostrar modal de alerta) ficam dentro de scenes e na common, ficam componentes com lógicas mais triviais (ex: desabilitar botão após o click) ◦ Componentes com lógicas, contém um arquivo [componente].container.js, com a sua lógica (ex: controle de estado), e um arquivo [componente].js, com a declaração da view em si ◦ Detalhes de implementação de estilo ficam no nível mais baixo de componentes (ex: common/Button/Button.js) - e devem ser os menores possível Separação de conceitos e isomorfismo
29. Conceitos por trás da organização • Separação por módulos ◦ Ex: em scenes/Dashboard, ficará tudo que é necessário para o dashboard, podendo haver reuso de outros componentes que estão em common ◦ Não pode ter import para outros módulos Separação de conceitos e isomorfismo
30. Isomorfismo • Utilizando o maior benefício do React Native, ao máximo: reuso de código Demais camadas reuso de código Views/Services código específico Separação de conceitos e isomorfismo
31. Isomorfismo • Nossa experiência ◦ Para a parte JS, funciona bem ◦ Para a parte de CSS, pouco reuso realmente ocorre, separar acabou sendo melhor Separação de conceitos e isomorfismo
32. Reforçando os conceitos base • Separação de responsabilidade ◦ Container: como funciona ◦ Component: como parece • Desacoplar das libs e do React em si ◦ O que é acoplado: Components & Container ◦ Todo o resto não deve ser, portanto ▪ Container: apenas a cola dos componentes com a lógica da aplicação ▪ Components: apenas como o componente parece Separação de conceitos e isomorfismo
33. Navegação
34. Recomendações • Abstrair o uso de bibliotecas de navegação ◦ Lib recomendada, pela melhor performance: react-native-navigation ◦ Para Web usar o React Router • Manter o uso da navegação nas scenes Navegação
35. Tópicos avançados
36. Estratégias de Storage • Auxilia em vários pontos da aplicação ◦ Cache de dados ◦ Recuperação de estado em fluxos ◦ Funcionamento offline • Libs recomendadas ◦ Web: localForage ◦ Nativo: redux-persist ◦ Cenários complexos mobile: Realm Tópicos avançados
37. Animações • O React Native fornece duas APIs: ◦ LayoutAnimation ◦ Animated API • React Native Animatable para animações simples • Atenção para a performance ◦ Usar a flag useNativeDriver ◦ Usar a forma declarativa do React Native Animatable ◦ Testar em smartphones, para o feedback real do impacto das animações Tópicos avançados
38. Módulos Nativos • Quando criar? ◦ Já existe a implementação nativa da funcionalidade ◦ Não existe um componente que expõe as API nativas ◦ A performance JavaScript está ruim • Recomendações ◦ Criar dentro da pasta native_modules ◦ Usar a CLI react-native-create-bridge para criar o “scaffold” do módulo nativo ◦ Vale testar: Electrode Native Tópicos avançados
39. Segurança • Faça autenticação e autorização apenas no back-end • Toda comunicação HTTP, deve ser feita via HTTPS • Ao salvar dados sensíveis use o KeyChain (iOS)/Android Keystore • Faça cache apenas de informações não sensíveis • Não permita a app rodar em jailbroken devices (usando libs como o Jail Monkey) • Mantenha as dependências atualizadas Tópicos avançados
40. Especificidades de plataforma (Android & iOS) • Deve ser uma exceção • O React Native já provê duas formas: ◦ Com o módulo Platform ◦ Com extensões diferentes Tópicos avançados
41. Prática
42. #01 - Setup do ambiente Prática
43. O que iremos fazer • Instalar o Yarn • Instalar a app do Expo • yarn global add create-react-native-app • create-react-native-app vizir-rn • cd vizir-rn && yarn start #01 - Setup do ambiente
44. #02 - Refatoração: separando os conceitos Prática
45. #03 - Testes automatizados Prática
46. Obrigado