Vue.js: O poder das Render Functions

Render Functions são uma feature ainda pouco explorada por muitos devs. Nesta palestra vamos explorar um pouco do seu potencial e por que deveríamos usa-las com mais frequência.

Transcript

1. Vue.js O poder das Render Functions render: h => h(App)
2. Vinicius Reis @vinicius73 @LuizVinicius73 Gravo aulas sobre Vue.js, JavaScript e Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
3. Vue.js, um framework progressivo
4. Vue.js, um framework progressivo Nascido no final de 2013, Vue.js é classificado como um Framework Progressivo para a criação de interfaces baseadas em componentes. Com Vue.js construímos aplicações altamente escaláveis independente do tipo e nível do projeto.
5. Vue.js, um framework progressivo Progressivo pois ele não é monolítico, seu core é pequeno e especializado. Em seu guarda-chuva estão pacotes e projetos para ajudar ajudar o desenvolvedor e seu projeto. - Vue CLI - Vue Router - Vuex - Vue Test Utils - Vários outros em https://github.com/vuejs
6. Vue.js, um framework progressivo A cereja do bolo são os Single File Components (SFC) São arquivos com extensão .vue onde são declarados - Template (Visual) - JavaScript (Comportamento) - CSS (Estilo) Neles é possível usar Babel, TypeScript, PUG, Sass, Stylus, JSX e inúmeras outras possibilidades de pré-processamento.
7. PUG/Jade Render Function JSX
8. Virtual-DOM
9. Virtual-DOM A sintaxe de template do Vue.js é (pré-)processada gerando código JavaScript. Ele gera a função render e devolve um objeto JavaScript. Este objeto é o V-DOM, que é analisado para determinar como e quando os nós reais de DOM vão ser atualizados.
10. Declarativo X Imperativo
11. Declarativo Declarativo descreve como algo é, não como ele faz para ser. É uma forma extremamente amigável para a criação de interfaces, html ou não. Ao utilizar template, nosso código automaticamente recebe tratamento contra XSS.
12. Imperativo Descreve como algo será construído, passo a passo. Esta abordagem apesar de ser mais complexa em alguns aspectos, é mais poderosa e flexível, pois não se limita a uma sintaxe paralela. Ao usar essa abordagem, você possa a ter controle refinado sobre a estrutura e comportamento do componente.
13. Existem situações onde usar Render Functions é a melhor opção
14. Componentes Funcionais
15. Componentes funcionais Vue.js permite criar componentes especiais, conhecidos como componentes funcionais. Eles são componentes que não possuem instância, logo não ocupam memória após serem criados. São extremamente úteis para o encapsulamento de decisão ou grandes porções de código que não possuem uma grande regra de negócio, porém seu uso não se limita a isso.
16. Componentes funcionais Criação de elementos ricos e extremamente reutilizáveis. O lado negativo é não ter acesso a esses componentes pelo vue-dev-tools, afinal eles não possuem instância.
17. Componentes funcionais Criação de regras mais elaboradas que filtros ou diretivas. Pense em uma porção de elemento ou regra de negócio que possa ser centralizada e será fácil criar componentes funcionais.
18. Componentes funcionais Outro uso prático é simplificar a declaração de outros componentes, como um QSelect do Quasar. As opções aqui são estáticas, não há motivação para manter uma instância para este componente. No vue-dev-tools ficará visível apenas QSelect.
19. Composição com Render Function
20. Composição com Render Function Vue.js permite várias formas de composição e o JavaScript também. É possível criar uma função que retorna um componente válido, mudando apenas o que desejamos mudar. Neste exemplo recebemos um componente, seu nome e algumas opções extras.
22. Composição com Render Function Sobrescrever props padrão, e gerar componentes menores e mais assertivos é muito fácil. Também é possível criar funções render customizadas, para receber mais argumentos.
23. Obrigado
24. Referências - https://vuejs.org/v2/guide/render-function.html - https://blog.codecasts.com.br/por-que-vue-js-e-nao-react-d5b58c09d193 - https://blog.codecasts.com.br/heranca-e-composicao-com-vue-js-c74177f37e36 - https://alligator.io/vuejs/introduction-render-functions/ - https://vuejs-brasil.com.br/render-functions-no-vue-js-2-0/ - https://www.youtube.com/watch?v=KS4eizPXRCQ