Upgrade to Pro — share decks privately, control downloads, hide ads and more …

9 Padrões de Componentes Vue para escalar suas ...

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).

Avatar for Vitor Luiz Cavalcanti

Vitor Luiz Cavalcanti

October 30, 2018
Tweet

More Decks by Vitor Luiz Cavalcanti

Other Decks in Programming

Transcript

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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
  6. É 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') });
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. É 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.
  14. 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
  15. vue-promised também é um componente lógico e renderless porque somente.

    Ele usa um componente que representa os estados de uma Promise.
  16. 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.
  17. O segundo argumento do render em um componente funcional é

    o contexto com os argumentos passados pelo pai.
  18. O Vue expõe as propriedades data, props, listeners que são

    justamente os argumentos inseridos pelo pai.
  19. 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;
  20. 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.
  21. Aqui temos componente de apresentação do bloco de comentários. A

    única responsabilidade dele é a apresentação dos dados.
  22. 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.
  23. 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.
  24. O HomeHeaderContainer é o Container Component responsável pela obtenção dos

    dados e tratamento dos eventos emitidos pelo HomeHeader.
  25. 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*.
  26. 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.
  27. FinalForm provê com o slot-scope os handlers das suas ações

    e utilizando API provide/inject os estados são injetados no FinalField.
  28. 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.
  29. 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.
  30. withWindowSize adiciona o uma propriedade size com o tamanho da

    tela e a atualiza quando a tela é redimensionada.