FATEC DEV DAY - Desenvolvendo com React Native

Introdução de como começar no React Native, palestra realizada no FATEC DEV DAY DE 2021

Transcript

1. DESENVOLVENDO COM REACT NATIVE "Learn once, write anywhere" Aprenda uma vez, escreva em qualquer lugar
2. CONTEÚDO PROGRAMADO 01 Quem sou eu? 02 - Diferenças entre aplicativo híbrido, nativo e webapp/pwa - Nem tudo precisa ser um aplicativo! COODAR ! - Hands-on rápido Coffee Shop 04 - Vantagens e desvantagens, comparativos com outros frameworks - Como começar no React Native? 03 - Por que foi criado o React Native? - Quem utiliza o React Native?
3. QUEM SOU EU? Eduardo Augusto Ramos ❏ Formado na ETEC de Mogi ❏ Desenvolvedor Full Stack há + 4 anos ❏ Atualmente trabalho na W2Gether.tech - Mogi Mirim ❏ Faço cafés maneiros, além de curtir filmes, séries e livros. ❏ E apaixonado desde os 8 anos por tecnologia. https://github.com/eduduardo https://www.instagram.com/eduramos__/ https://www.linkedin.com/in/edu-ramos/
4. DIFERENÇAS ENTRE TIPOS DE APPs APLICATIVO NATIVO Utilizam a linguagem exclusiva daquele sistema: Java e Kotlin no Android e Objective-C e Swift no iOS 01.
5. DIFERENÇAS ENTRE TIPOS DE APPs APLICATIVO NATIVO Utilizam a linguagem exclusiva daquele sistema: Java e Kotlin no Android e Objective-C e Swift no iOS 01. APLICATIVO PWA / WEBVIEW 02. PWA - página web comum, porém o usuário pode colocar o ícone na tela inicial de seu celular Webview - Um app com casca de navegador e dentro tem HTML/CSS e JAVASCRIPT
6. DIFERENÇAS ENTRE TIPOS DE APPs APLICATIVO NATIVO Utilizam a linguagem exclusiva daquele sistema: Java e Kotlin no Android e Objective-C e Swift no iOS 01. APLICATIVO PWA / WEBVIEW PWA - página web comum, porém o usuário pode colocar o ícone na tela inicial de seu celular Webview - Um app com casca de navegador e dentro tem HTML/CSS e JAVASCRIPT 02. APLICATIVO HÍBRIDO NATIVO React Native, Flutter, Xamarin... 03.
7. NEM TUDO PRECISA SER UM APP! Entenda a dor do cliente! ❏ Aplicativos precisa que o usuário baixe ❏ Manutenção das lojas (App Store e Play Store) ❏ Opções mais baratas como um PWA ou apenas uma website responsivo
8. POR QUE FOI CRIADO O REACT NATIVE?
9. POR QUE FOI CRIADO O REACT NATIVE? ❏ Facebook queria ser uma companhia mobile first. ❏ Tentaram utilizar HTML5 com WebView no mobile e falharam. ❏ Não tinha bom suporte a API de Keyboard, touch events e gestos. ❏ Péssimo suporte ao gerenciamento de cache de imagem Fonte: https://www.techaheadcorp.com/blog/history-of-react-native/
10. POR QUE FOI CRIADO O REACT NATIVE? ❏ Uma equipe interna do Facebook conseguiram criar um protótipo que utilizava javascript para gerar nativamente UI elements no iOS ❏ Após um hackthon interno eles decidiram por criar um framework que virá a ser chamado de React Native ❏ Em Março de 2015, o React Native vira open source com suporte a iOS ❏ Em Setembro de 2015 recebe suporte para Android Fonte: https://www.techaheadcorp.com/blog/history-of-react-native/
11. – Adaptação do PRÓLOGO DO SENHOR DOS ANÉIS “Um CÓDIGO para todos governar, Um CÓDIGO para encontrá-los, Um CÓDIGO para todos trazer [...]”
12. PLATAFORMAS QUE RODAM CÓDIGO REACT NATIVE ❏ Android - suporte oficial do facebook ❏ iOS - suporte oficial do facebook ❏ React Native Windows - rodando no Microsoft's Universal Windows Platform (UWP). ❏ React Native macOS - React Native fork direcionado para macOS e Cocoa. ❏ React Native tvOS - adaptação do React Native para Apple tvOS ❏ React Everywhere - tem como objetivo trazer um código para todas as plataformas: Android, iOS, Web, Windows[UWP] e Electron[macOS, Linux, Windows] ❏ React Renative - tem como objetivo trazer um código para todas as plataformas: iOS, tvOS, Android, Android TV, FireTV, Web, Tizen TV, Tizen Watch, LG webOS, macOS/OSX, Windows, KaiOS, Firefox OS e Firefox TV ❏ E muitos outros.. Fonte: https://reactnative.dev/docs/out-of-tree-platforms https://reactnative.dev/docs/building-for-tv
13. ALÉM DO FACEBOOK, QUEM MAIS USA O RN ? TESLA DISCORD SHOPIFY SKYPE UBER EATS WALMART Lista completa: https://reactnative.dev/showcase
14. RÁPIDO 01 Desenvolvimento rápido para múltiplas plataformas PERFORMÁTICO 02 Rápido e possui Hot Reload de código NATIVO 04 Caso necessário é possível escrever código nativo para suprir certas necessidades AMIGÁVEL 05 É feito com base no feedback da comunidade de desenvolvimento ROBUSTO 03 Possui grandes número de pacotes no NPM DE CONFIANÇA 06 Facebook e grande comunidade por trás Fonte: https://trio.dev/blog/companies-use-react-native VANTAGENS DO REACT NATIVE
15. DESVANTAGENS DO REACT NATIVE
16. DESVANTAGENS DO REACT NATIVE ATUALIZAÇÕES Um pouco complicado de atualizar e migrar versões antigas NOVIDADES Novidades recentes do iOS e Android podem não estar disponíveis de imediato REACT.JS É necessário aprender React.JS, lifecycle, conceitos BRIDGE Preso a single thread do Javascript
17. E ESSE TAL DE EXPO?
18. CONCORRENTES DO REACT NATIVE
19. COMO COMEÇAR NO REACT NATIVE? ❏ Conhecer Javascript Moderno ❏ Conhecer um pouco de React.JS ou utilizar RN para aprender ❏ Noções de UX/UI
20. BORA PRO CÓDIGO!
21. APP DE CARDÁPIO DE UMA CAFETERIA ❏ Já deixei pré preparado um app básico de cardápio para uma cafeteria! ❏ Vamos ter umas noções gerais de como funciona o React Native e seus conceitos.
22. LINKS ÚTEIS • https://github.com/eduduardo/coffee-shop • https://reactnative.dev/ • https://expo.io/ • https://trio.dev/blog/companies-use-react-native • https://www.techaheadcorp.com/blog/history-of-react-native/ • https://reactnavigation.org/docs/getting-started/ • https://ethercreative.github.io/react-native-shadow-generator/ • https://feathericons.com/ • https://github.com/oblador/react-native-vector-icons
23. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik OBRIGADO PELOS PEIXES! Perguntas? Pode me chamar: https://github.com/eduduardo https://www.instagram.com/eduramos__/ https://www.linkedin.com/in/edu-ramos/