pela PUC Minas; ‣ Pós-graduado em Arquitetura de Software Distribuído na PUC Minas; ‣ Professor de pós-graduação na PUC Minas no curso de Desenvolvimento web Fullstack; SAMUEL MARTINS
conteúdo principal da página aparecer pela primeira vez; ‣ Time to Interactive: mede quanto tempo leva para a aplicação responder de maneira confiável à interação do usuário.
objetivos propostos; ‣ Dentre todos os comparados, possuía o menor tamanho; ‣ Curva de aprendizado baixa; ‣ Ótimo benchmark; ‣ Funcionou exatamente como esperado nas POCs (provas de conceito).
cujas soluções não foram encontradas no StackOverflow; ‣ Mantenedores do projeto não corrigiam as issues abertas, sendo necessário um fork do projeto no GitHub e resolução dos problemas pelo próprio time; ‣ Comunidade pequena, apenas 333 stars no GitHub. Responsáveis pelo projeto não evoluíram mais o produto; ‣ Necessário traçar um caminho para refatorar o que foi feito e utilizar algo que fosse mantido pela comunidade.
de ponta-a-ponta; ▸ Setup inicial com tudo que é necessário para desenvolver uma aplicação moderna: ▸ Sistema de rotas; ▸ Arquitetura e organização de pastas bem definidas; ▸ Sugere o uso dos Services para consultas a APIs externas.
(typescript); ▸ Permite uma boa escalabilidade. Linguagem tipada tem se tornada essencial em grandes projetos; ▸ Desenvolvido para permitir o desenvolvedor focar na lógica de negócio.
de back-end mais conhecidas (C#, Java…); ▸ Utilização do conceito conhecido de orientação a objetos. Ex.: um mesmo modelo definido na aplicação de back-end pode servir de base para um mesmo domínio no front-end; ▸ Boa opção para desenvolvimento de aplicações híbridas ou aplicações que possuem uma versão mobile devido a similaridade com o IONIC.
para criação de partes da aplicação; ▸ Permite criar componentes, serviços, módulos e diretivas. ng generate component my-component ng g c my-component
Conferência oficial anual para apresentação de novidades e evoluções do framework (NG-Conf); ▸ Possui bibliotecas de componentes para agilizar ainda mais o desenvolvimento das aplicações: ▸ Angular-material: https://material.angular.io/;
para escrita de uma aplicação; ▸ Curva de aprendizado pode ser alta para pessoas com backgrounds 100% front-end: ▸ Necessário aprender conceitos de orientação a objetos (Tipos, Heranças, Interfaces, Generics, Annotations/ Decorators); ▸ Necessário aprender a utilizar o angular-cli.
Dashboards…); ▸ Aplicações de grande porte em geral; ▸ Utilizada por times com mais conhecimento em linguagens server-side tipadas (Java, C#) e sem nenhum conhecimento em JavaScript.
framework para criação de componentes web; ‣ Vue não é um framework para desenvolvimento de SPAs (Single Page Applications); ‣ É possível desenvolver SPAs instalando bibliotecas externas: ‣ Vue-router: possibilita o gerenciamento de rotas; ‣ Vuex: possibilita o gerenciamento de estados;
(.vue); ‣ Configuração inicial utiliza JavaScript “puro”; ‣ Permite a escrita de CSS com escopo de forma nativa; ‣ Permite a configuração da aplicação para aceitar a escrita dos componentes em TypeScript.
Possui um bibliotecas de componentes para agilizar o desenvolvimento das aplicações (ex.: https:// vuematerial.io/); ‣ Lista de projetos da comunidade para o Vue: https:// github.com/vuejs/awesome-vue; ‣ Eventos conhecidos: https://events.vuejs.org/conferences/;
arquitetura da aplicação (organização de pastas, por exemplo); ‣ Deixa sempre a cargo do desenvolvedor definir o seu próprio padrão de desenvolvimento; ‣ Arquivos dos componentes podem crescer exponencialmente. Por isso a necessidade de separar os componentes em partes mais pequenas o possível.
componentes cross- framework (Design systems, bibliotecas UI); ‣ Exemplo: https://github.com/takenet/blip-cards-vue- components. ‣ Componentização de aplicações já existentes; ‣ Criação de aplicações de pequeno porte.
TUDO é um componente); ‣ Biblioteca concebida inicialmente para desenvolvimento de interfaces de usuário; ‣ Utiliza uma linguagem diferente, o JSX; ‣ Primeiro framework implementar o conceito de Virtual DOM; ‣ Nasceu focado em performance.
Permite a criação de aplicações SPA por meio de bibliotecas da comunidade (react-router, por exemplo); ‣ Permite a adoção incremental em projetos já existentes; ‣ Utiliza um paradigma de escrita de componentes diferente dos demais.
estados da aplicação; ‣ Possui como forte aliado o Redux, biblioteca da comunidade amplamente utilizada para gerenciamento de estados; ‣ Não possui conceitos além dos componentes. Não existe serviço, diretiva nem módulos.
“reconciliação” de elementos DOM; ‣ Boa integração com outra linguagem tipada, o FlowTyped; ‣ Possui diversos caminhos para resolver o mesmo problema; ‣ Um componente pode ser escrito: ‣ Com funções; ‣ Com classes; ‣ Com funções + react hooks.
‣ Componentes escritos como funções; ‣ Componentes não alteram valores fora do seu escopo (funções puras); ‣ Estados do componente são modificados atribuindo um novo valor, e nunca alterando diretamente (imutabilidade); ‣ Efeitos colaterais (chamadas em APIs, por exemplo), podem ser tratados de forma separa do restante do ciclo de vida (tratamento adequado de efeitos colaterais).
composição de funções nos componentes; ‣ Por ter os componentes escritos em funções, permite utilizar qualquer conceito conhecido relacionado a funções: ‣ Funções que retornam outros componentes; ‣ Funções que recebem parâmetros que e retornam componentes dinâmicos.
comunidade; ‣ 139k stars no GitHub; ‣ Constantemente em evolução; ‣ Evoluções, até então, foram tratadas de forma a manter uma maior retrocompatibilidade; ‣ Eventos conhecidos: https://reactconf.com.br/; ‣ TUDO já foi feito por alguém no StackOverflow.
e arquivos definidos; ‣ Mudança de mindset na criação dos componentes por conta da linguagem (jsx); ‣ Necessidade de instalação de pacotes adicionais para funcionar como um SPA.
componentes (Design Systems, componentização de projetos existentes); ‣ Criação de aplicações de grande porte; ‣ Boa forma de manutenção de estados de aplicação através do Redux; ‣ Vários casos de sucesso para inspirar; ‣ Criação de aplicações que possuem uma versão Mobile; ‣ React Native utiliza o mesmo conceito do React para desenvolvimento de aplicações mobile nativas.
com SEO; ‣ Frameworks SPA sempre possuem uma página estática e o restante dinâmica de acordo com as rotas e o estado de cada componente; ‣ Mecanismos de busca não conseguem prever qual tela o cliente irá renderizar para fazer o Rankeamento.
‣ Servidor envia na requisição o resultado esperado da página; ‣ Navegação entre as páginas continua fluida como em um SPA; ‣ Menor TTI (time to interactive);
precisa de um baixo TTI (time to interact); ‣ Tela de Cadastro foi feita em MVC, mas possui os mesmos aspectos visuais da tela de Editar Conta; ‣ Módulo de Produtos precisa ser confiável e manter a mesma consistência de tipos de seus endpoints no backend;
‣ Não deve assumir responsabilidades de outro micro frontend; ‣ Não deve interferir ou ser interferido por outro micro frontend; ‣ Base de código independente; ‣ Stack (frameworks, linguagens..) diferentes para cada aplicação; ‣ Pipeline de build, test e deploys separados e independentes;
rendering); ‣ Utilização de recursos para criação de um PWA (progressive web application); ‣ Sugestão: workbox: https://developers.google.com/web/ tools/workbox; ‣ Cache de requisições e/ou cache de assets (arquivos .css e .js).
Samuel Martins
samwx
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
cherdarchuk
![[REACT] SERVER-SIDE RENDERING https://nextjs.org/](https://files.speakerdeck.com/presentations/78991547a4224b9291af26c0c97bc9be/slide_81.jpg){kind=link}
![[VUE] SERVER-SIDE RENDERING https://nuxtjs.org/](https://files.speakerdeck.com/presentations/78991547a4224b9291af26c0c97bc9be/slide_82.jpg){kind=link}
![[ANGULAR] SERVER-SIDE RENDERING](https://files.speakerdeck.com/presentations/78991547a4224b9291af26c0c97bc9be/slide_83.jpg){kind=link}
