[IMD0148] React Overview

Visão global sobre React (ReactJs e React Native) e exemplo do uso do AsyncStorage.

Exemplo: https://codesandbox.io/embed/mystifying-galileo-t56be?fontsize=14&hidenavigation=1&theme=dark
Exemplo prático: https://github.com/raquel-oliveira/react-example/

Transcript

1. Desenvolvimento para Dispositivos Móveis: Introdução ao React Diogo Pocrifka dos Santos Raquel Lopes de Oliveira
2. Como surgiu... • Facebook desenvolveu o React para atender necessidades de UI; • Equipe liderada por Jordan Walke lançou o ReactJS em 2013; • Em 2015, o React Native foi lançado.
3. ReactJS ou React Native?
4. ReactJS é uma biblioteca open-source JavaScript para criação de interfaces de usuário dinâmicas e de alta performance em desenvolvimento web; ReactJS ou React Native?
5. ReactJS ou React Native? React Native é um framework open-source para aplicativos móveis que utiliza o ReactJS junto a funcionalidades nativas da plataforma.
6. Características
7. Características Declarativo Cria views simples para cada estado da aplicação e apenas os componentes afetados com uma mudança nos dados serão atualizados.
8. Características Virtual DOM Segundo seus criadores, em vez de atualizar o DOM quando o estado do aplicativo muda, cria-se uma árvore virtual (VTree) semelhante ao estado desejado para o DOM — em outras palavras, um DOM virtual. O DOM virtual deve descobrir como fazer o DOM se assemelhar a sua árvore virtual sem recriar todos os nós do DOM original.
9. Características Event Handling Disponibiliza interface cross-browser para eventos nativos, evitando problemas com nomes e campos incompatíveis. O sistema de eventos é implementado através de delegação e possui pool de objetos de evento para reduzir sobrecarga de memória
10. Características JSX (JavaScript XML) Uma sintaxe de markup combinando JavaScript e XML que se assemelha ao HTML. Usada para programar a UI dos componentes do React.
11. Características Componentização No React, tudo é feito usando componentes. Dessa forma, uma página web será dividida em vários componentes menores para criar sua view. Cada componente pode ser visto como um módulo independente, encapsulando o estado, aparência (layout) e interações daquele pedaço da aplicação;
12. Arquitetura
13. Arquitetura FLUX Actions são métodos chamados pela View para mandar ações (e o payload) para o Dispatcher.
14. Arquitetura FLUX Dispatcher gerencia todo o processo como um hub central, recebendo ações / dados e encaminhando-os para os callbacks registrados.
15. Arquitetura FLUX Store gerencia o estado da aplicação para um dado domínio.
16. Arquitetura FLUX Controller views são os componentes que escutam por eventos e buscam dados nos Stores.
17. Arquitetura Mobile Nativa vs. React Native
18. Exemplos
19. Exemplos class HelloMessage extends React.Component { render() { return ( <div> Olá, {this.props.name}! </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById ('hello-example' ) );
20. IDEs e Editores
21. IDEs ReactIDE
22. IDEs Nuclide
23. IDEs Visual Studio Code
24. IDEs Atom
25. Armazenamento
26. Armazenamento Local ou Offline • Realm • SQLite • PouchDB • AsyncStorage class • Watermelon DB • Vasern
27. Armazenamento Local ou Offline Realm • BD orientado a objeto; • Customizado para iOS, Android e JavaScript, possuindo suporte para tipos de dado complexos para aplicações offline e em tempo real; • Interações com o usuário são salvas offline e sincronizadas quando o dispositivo fica online; • Protocolos de segurança customizados para cada plataforma.
28. Armazenamento Local ou Offline SQLite • Versão do SQL criado especificamente para as constrições do ambiente mobile; • Por ser um banco relacional básico, ir além de um CRUD padrão exige mais trabalho para projetar protocolos de acesso ao banco; • O plugin react-native-sqlite-storage é usado para persistência offline; • Segurança implementada através de SQLite Encryption Extension (SEE) ou plugins como SQLiteCrypt e SQLCipher.
29. Armazenamento Server Side • MongoDB ◦ Compatível com Realm, SQLite, AsyncStorage + Core Data ou SQLite, PouchDB. • MySQL ◦ AsyncStorage, Realm, SQLite.
30. Armazenamento Firebase • BD na nuvem que sincroniza dados de dispositivos em tempo real; • Ideal para apps com elevada colaboratividade e disponibilidade; • API cross-platform com setup simples para criar apps serverless; • Transporta dados através de SSL (Secure Socket Layer) semelhante ao uso de HTTPS no desenvolvimento web.
31. App na Prática https://github.com/raquel-oliveira/react-example/ releases/tag/handsOn
32. Expo Características (vantagens e desvantagens) • Abstração ◦ Ótimo para criar apps simples e entender como React Native funciona ◦ Ruim para quem deseja publicar e manter aplicações • Limitação para atualização e build das aplicações (já que pula a etapa da instalação da SDK) “O Expo é uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API’s nativas do dispositivo sem precisar instalar qualquer dependência ou alterar código nativo.”
33. Referências Site oficial React What is the Difference Between ReactJS and React Native? Principais Características do React React - Getting to Know Flux React Crash Course Mobile App Architecture -React Native VS Native Getting To Know Flux, the React.js Architecture
34. Referências Choosing the right database for your React Native app How To Choose The Right Database For Your React Native Application https://blog.rocketseat.com.br/expo-react-native/ https://www.youtube.com/watch?v=aCe0h50hyCc
35. Gratidão!