$30 off During Our Annual Pro Sale. View Details »

Vue.js: O poder das Render Functions

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.

Vinicius Reis

June 09, 2018
Tweet

More Decks by Vinicius Reis

Other Decks in Programming

Transcript

  1. Vue.js
    O poder das Render Functions
    render: h => h(App)

    View Slide

  2. Vinicius Reis
    @vinicius73
    @LuizVinicius73
    Gravo aulas sobre Vue.js, JavaScript e Laravel para codecasts.com.br
    Engenheiro de Aplicações @ Decision6

    View Slide

  3. Vue.js, um framework progressivo

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  7. PUG/Jade Render Function JSX

    View Slide

  8. Virtual-DOM

    View Slide

  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.

    View Slide

  10. Declarativo X Imperativo

    View Slide

  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.

    View Slide

  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.

    View Slide

  13. Existem situações onde usar Render
    Functions é a melhor opção

    View Slide

  14. Componentes Funcionais

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  19. Composição com Render Function

    View Slide

  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.

    View Slide

  21. View Slide

  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.

    View Slide

  23. Obrigado

    View Slide

  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

    View Slide