9 Padrões de Componentes Vue para escalar suas aplicações

- Componentes puros/funcionais (functional component);
- Componentes parciais (partial componentes);
- Componentes de apresentação (presentational/dumb components);
- Componentes inteligentes (container/smart components);
- Componentes de alta ordem (HOC);
- Componentes provedores (provider components);
- Componentes consumidores (consumer components);
- Componentes lógicos (logical components);
- Componentes assíncronos (async components).

Transcript

1. 9 PADRÕES DE COMPONENTES PARA ESCALAR SUAS APLICAÇÕES
2. Vitor Luiz Cavalcanti @VitorLuizC (em todas as redes) Segue lá!
3. 1. Wrapper Components (Componentes Encapsuladores) • Encapsulam outros componentes (geralmente componentes de terceiros); • Adaptam props, CSS e eventos para o contexto do seu App; • Mantém o resto da sua aplicação desacoplada do componente encapsulado.
4. CalendarField é um Wrapper Component que encapsula um componente de calendário de um terceiro e adapta as props e eventos no contexto da aplicação.
5. 2. Compound Components (Componentes Compostos) • Componentes que possuem relação parental e/ou interdependência; • Compartilham um contexto de aplicação; • Solução para UIs muito complexas e/ou customizáveis.
6. VMenu é um Compound Component que implementa o container do menu com seus estilos. VMenuItem é um Compound Component que implementa o item do menu com seus estilos.
7. PATHs demonstrando formas de organizar Compound Components.
8. 3. Async Components (Componentes Assíncronos) • Promise que resolve em um componente Vue; • Com o dynamic import o Vue-CLI/Webpack os transforma em novos chunks (code-splitting); • Reduz tamanho dos chunks e ganha performance e fluidez; • Possui estados de carregando, erro e controla o tempo até exibi-los
9. É uma função que pode retornar: - uma promessa que resolve em um componente; - um objeto cuja propriedade component é uma promessa que resolve em um componente; () => import('@/components/Home/HomeSlider'); () => ({ component: import('@/components/Home/HomeSlider') });
10. LayoutContainer é responsável pela estrutura da aplicação e usa um cabeçalho assíncrono/dinâmico. Enquanto o componente é carregado, o VSpinnerContainer é exibido e caso ocorra um erro ou a requisição leve mais de 3 segundos o componente ErrorContainer é exibido no lugar.
11. Módulo onde é declarado o roteador da aplicação. Carregar os componentes pela demanda reduz muito o tamanho total dos chunks e ajuda a entregar aplicações mais leves. Por isso usar componentes assíncronos no roteador da aplicação é bastante recomendado.
12. 4. Switcher Components (Componentes Alternadores/Comutadores) • Alterna entre elementos e/ou componentes; • Repassa props e eventos; • Resolve o problema de grandes templates usando v-if/v-else-if/v-else.
13. VLink é um Switcher Component que alterna entre um elemento de âncora e o componente RouterLink do vue-router. É importante notar a computed property attributes que faz o merge dos atributos com as propriedades da âncora ou do RouterLink.
14. Escrevi a mesma funcionalidade usando JSX. Ficar mais fácil escrever o Switcher entre os elementos e/ou componentes, mas as props, listeners e funcionalidades dos componentes complicam bastante.
15. 5. Logical Components (Componentes Alternadores/Comutadores) • Representam keywords, estruturas de dados e funcionalidades da linguagem ou plataforma; • Expressões para representar código imperativo; • Geralmente é um componente renderless.
16. É a evolução da abstração do Switcher para um componente que recebe um valor pra resolver entre os casos e renderizar o resultado. Ele também controla os estados de carregamento e erro, caso o componente seja assíncrono.
17. O uso dele é extremamente simples e o resultado é muito bom! Um componente que alterna entre componentes assíncronos e lida com os estados de carregamento e erro deles. // No exemplo ele não está sendo importado, por favor relevem rs
18. vue-promised também é um componente lógico e renderless porque somente. Ele usa um componente que representa os estados de uma Promise.
19. 6. Functional/Stateless Components (Componentes Funcionais/Sem Estados) • Transparência referencial <3 • Sem nenhum estado, somente props (inject também); • São mais performáticos.
20. O segundo argumento do render em um componente funcional é o contexto com os argumentos passados pelo pai.
21. O Vue expõe as propriedades data, props, listeners que são justamente os argumentos inseridos pelo pai.
22. 7.Container & Presentational Components (Componentes de Apresentação e Containers) • Também conhecido como Dumb & Smart Components ou Stateful & Stateless Components; • DRY: Reforça o reuso de Presentational Components e abstração dos Containers em mixins e HOCs;
23. Esse é o componente de bloco de comentários que ao mesmo tempo que lida com os estilos e elementos, precisa também buscar e manusear os dados dos comentários.
24. Aqui temos componente de apresentação do bloco de comentários. A única responsabilidade dele é a apresentação dos dados.
25. O container, no entanto precisa lidar com a obtenção dos dados e controle dos estados que serão passados para a camada de apresentação.
26. HomeHeader é um Presentational Component cuja única responsabilidade é montar um cabeçalho usando outros componentes genéricos e definir as regras de estilo. Todos os dados que ele usa são enviados usando props e os eventos são emitidos novamente.
27. O HomeHeaderContainer é o Container Component responsável pela obtenção dos dados e tratamento dos eventos emitidos pelo HomeHeader.
28. 8.Provider & Consumer Components (Componentes Provedores e Consumidores) • Similar ao padrão Presentational & Container Components; • Lida com transporte e abstração de estados; • Alto acoplamento*.
29. FormContainer é o provider dos estados usados para os campos e mensagens de erro e o componente que inicializa e consome esses estados fica totalmente acoplado a ele.
30. FinalForm provê com o slot-scope os handlers das suas ações e utilizando API provide/inject os estados são injetados no FinalField.
31. 9. Higher-Order Components (Componentes de Alta Ordem) • Componente que opera sobre outros componentes; • Substituíram as heranças e os mixins do React na abstração e reuso de componentes.
32. VBox é um componente estúpido que recebe um objeto size com altura e largura e usa eles nos estilos de uma <div>. Aqui o VBox implementado com o Higher-Order Component de tamanho da tela.
33. withWindowSize adiciona o uma propriedade size com o tamanho da tela e a atualiza quando a tela é redimensionada.
34. DÚVIDAS? Design by: Renan Martins