React - Arquitetura Front-End Da Google

Curso React Pro: https://www.reactdevpro.com/ Doc da Arquitetura: https://developer.android.com/topic/architecture Neste vídeo, desvendamos a arquitetura front-end ideal para seus projetos, elaborada pela Google! 1° No exemplo do AuthRepository no vídeo, quem setaria a token e a refreshToken no "localStorage" seria o próprio método "login" dentro do repositório e não a ViewModel. O "localStorage" também é uma fonte de dados, logo, a ViewModel não deve se comunicar diretamente com ele. 2° Os repositório já retornam as respostas mais prontas possíveis para o ViewModel. Supomos que você quer mostrar um error na tela de uma resposta de uma API que está retornando tudo em inglês. O repositório poderia já traduzir o error e retornar tudo bonitinho pra ViewModel. 3° A camada de UI se comunica com a camada de dados através do repositório. 4° Se eu adicionar a camada de domínio que é opcional, a camada de UI ainda pode se comunicar diretamente com a camada de dados ou apenas com a camada de domínio? Essa decisão é escolha sua segunda a própria doc do Android! Eu acho mais interessante ser flexível, ou seja, a camada de UI pode continuar se comunicando diretamente tanto com a camada de dados, quanto com a camada de domínio. Se não, você acabará criando muitos e muitos UseCases na camada de domínio. Esse é um dos pontos negativos de adicionar a camada de domínio. 5° No Android o cacheamento dos dados fica por conta do repositório (camada de dados), no entanto, no React possivelmente ficará na ViewModel, pois você usará algo como o react-query que usa de custom hooks. Ficaria algo como no código abaixo. const { data, isLoading, isError } = useQuery('products', function() { return productsRepository.findAll().value }) Você tem que chamar value do objeto Result porque em caso de error ele vai lançar a exceção. Essa exceção vai ser o valor de "isError" do react-query. 6° Esse é um pensamento meu. Eu acho que no front, devemos ter a quantidade mínima de regras de negócio. Se eu tiver que processar algumas regras de negócio no front, então, que essa quantidade seja mínima. As regras de negócio eu deixo pro back. #javascript #reactjs #programming #arquitetura #google 0:00 Camada de UI 20:10 Camada de Dados 1:02:14 Camada de Domínio (opcional) Redes Sociais linkedin: in/caio-nobre-b429b5206 instragram: @caio.nobre.m github: caionobrex