O documento discute o framework Vue.js, descrevendo-o como progressivo e capaz de criar aplicações escaláveis independente do projeto. Apresenta recursos como Single File Components e Render Functions, explicando que estas geram código JavaScript a partir de templates declarativos, permitindo composição de componentes de forma flexível.

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