sexta-feira, 28 de dezembro de 2018

Vue Parte 5 - Watch e a diretiva v-model

No post anterior dessa série, parte 4, vimos as computed properties e a diretiva v-if. Neste artigo veremos outra propriedade da instância de Vue, que inclusive tem um comportamento bem parecido com o da Computed Property, chamada de watch. Continuando nossos estudos das diretivas, veremos a diretiva v-model, bastante útil quando construímos formulários web.

Diretiva v-model


A diretiva v-model serve para fazer o binding (ligação) entre elementos html (input, textarea e select) e seus dados. Vue forncece também alguns modificadores para v-model como: lazy, number e trim. Lazy faz com que a sincronização com o modelo aconteça apenas após um evento de change. Number permite a conversão automática do valor para number (só lembrando que, por padrão, o valor retornado por um elemento html é sempre string). Por último, trim remove os espaços do início e do fim da string. No exemplo podemos ver todas funcionalidades de v-model. 



Observe que o binding é bidirecional (two-way binding). Usamos os modificadores em login (lazy), em endereco (trim) e em idade (number).

Watch

Um watcher (observador) permite que você seja notificado sempre que uma mudança em uma propriedade (data) aconteça. Watchers são semelhantes às computed properties, porém são usados para casos bem específicos. Uma diferença do watcher é que ele fornece o valor anterior e o modificado da propriedade.

Para criar um watcher é preciso, basicamente, declarar o nome da propriedade que se deseja escutar e definir um método para capturar o evento. O método handler define dois parâmetros: o primeiro é o valor anterior e o outro é o valor atual da propriedade. Vejamos um exemplo de um watcher.


Vale a pena destacar dois pontos sobre watchers. O primeiro, é que não devemos usar arrow functions como handler de um watch, pois o contexto de this não será associado a ela, ou seja,  this.mensagem não apontaria corretamente para a propriedade definida em data. O segundo, e talvez mais óbvio, é que o nome do watcher deve ser exatamente igual ao nome da propriedade que se deseja observar, no exemplo acima estamos observando mudanças na propriedade resposta.

Immediate e Deep


Watchers possuem ainda duas propriedades: immediate e deep. Quando immediate é configurada como true, ela faz com que o método handler de watch seja chamado assim que o valor da propriedade observada mudar. Quando estamos observado objetos complexos, com propriedades aninhadas, precisamos utilizar a propriedade deep para dizer ao Vue que queremos observar mudanças nos valores aninhados do objeto.

Para mostrar o funcionamento de Immediate e Deep vamos retomar o exemplo que vimos na seção de v-model e adicionar um watcher para o objeto usuario.

Se você alterar o valor de deep para false o watcher não será chamado. Assim, sempre que for preciso observar mudanças em objetos é precisar setar o valor de deep para true. Immediate é notado quando a página é carregada. Quando seu valor é true o método do watch será chamado após a inicialização do objeto em data().

É possível também observar apenas uma propriedade específica de um objeto. Nesse caso, a expressão deve estar entre aspas, como no trecho abaixo.

O uso de watchers é bem restrito. Na maioria dos casos uma computed property resolve o problema, mas o watch tem seu valor, e quando estudarmos (em algum dia no futuro..rs) sobre mudanças de rotas, os watchers voltarão à cena. Mas por enquanto é isso! Até o próximo artigo.

domingo, 2 de dezembro de 2018

Vue Parte 4 - Computed Properties e a Diretiva v-if

No post anterior dessa série, parte 3, vimos a diretiva v-on e como usar methods para tratar eventos disparados por elementos html. Neste post, vamos continuar explorando as propriedades da instância de Vue, dessa vez estudaremos as computed properties. Veremos, também, mais uma diretiva: v-if.

Diretiva v-if


A diretiva v-if deve ser utilizada quando precisarmos fazer renderização condicional de elementos. Ela pode ser usada em qualquer elemento html e recebe como parâmetro uma expressão, variável ou valor booleano. Caso o parâmetro seja um valor javascript truthy, então o elemento será renderizado. Também é possível adicionar um bloco "senão" usando v-else. As versões mais recentes de Vue permitem ainda o uso da diretiva v-else-if, que permite encadear condições.


As diretivas em vue tem acesso a todas as propriedades definidas em data. No exemplo acima, a propriedade valido está sendo usada para exibir condicionalmente o valor Válido ou Inválido na página. Para fins de exemplo, o trecho a seguir mostra como usar as três diretivas em conjunto: v-if, v-else-if e v-else.

Computed Properties

As diretivas v-if/else nos permitem exibir dados baseado em certas condições, mas apesar de sua facilidade de uso, o código no template começa a ficar difícil de manter, principalmente se precisarmos usar lógicas mais complexas. O ideal é que esse tipo de código fique no Javascript, onde pode inclusive ser reutilizado, caso necessário. É aí onde entram as Computed Properties.

Uma computed property é bem parecida com um method em sua forma de escrita, porém ela difere deste em alguns aspectos. O primeiro é que embora seja escrita como um método, uma computed property é usada como se fosse na verdade uma property (ou uma variável). O nome computed não é à toa, vem do fato de ela ser computada a partir de outras propriedades. Uma computed property geralmente é somente leitura, mas pode ser de escrita (veremos isso em outro momento). Por último, mas não menos importante, o valor retornado por uma computed property é cacheado, de forma que ela só será computada novamente caso alguma propriedade que ela usa seja alterada. Vamos refatorar o exemplo anterior trocando as diretivas v-if/else por computed properties.


Veja como o template ficou bem mais simples sem a lógica condicional. Você pode observar que a computed property foi usada como se fosse uma variável e não um método. Para observamos as outras duas características das computed properties: dependência e caching, vamos fazer uma pequena mudança nesse exemplo. 


O método gerarIdade atribui à propriedade idade um valor aleatório entre 1 e 3. Usamos um range baixo apenas para ficar mais fácil de gerarmos valores repetidos com frequencia. Como idade é uma dependência da computed property tipoEntrada, esta será executada sempre que o valor de idade mudar. Ao executar o exemplo você irá notar que a mensagem 'tipoEntrada chamado' só irá aparecer no console quando o valor de idade for diferente. Isso acontece porque computed properties são cacheadas.

Talvez devido à simplicidade desse exemplo você não dê tanta importância a isso. Porém, imagine que uma lógica mais demorada fosse executada. Computed Properties são bastante utilizadas em Vue. Quando estudarmos vue-router e vuex você verá melhor quão úteis elas são. A tabela a seguir mostra um resmo das diferenças entre computed properties e methods.



Computed Properties Methods
Roda somente se as dependências mudarem Roda sempre que ocorre um update
cacheado sem cache
usado como uma property usado para tratar eventos (v-on)
por padrão somente leitura por padrão é leitura/escrita


Até o próximo artigo galera!

domingo, 25 de novembro de 2018

Vue Parte 3 - Methods e a Diretiva v-on

No post anterior dessa série, parte 2, vimos mais detalhes sobre a instância de Vue. Utilizamos três propriedades: el, data e template. Neste post estudaremos a diretiva v-on e o uso de métodos na manipulação de eventos.

Diretivas


Diretivas são atributos especiais que adicionamos ao código html para estendê-lo (leia-se fazer algo a mais com ele). Se você vem do Angular, certamente isso soará bem familiar pra você. Assim como em Angular, Vue possui um conjunto de diretivas built-in (iniciadas com v- ), e permite que você defina suas próprias diretivas (custom directives).

Resolvi juntar o estudo das diretivas com alguma outra propriedade da instância de Vue, pois acredito que o entendimento fica melhor dessa forma. Neste artigo iremos ver a diretiva v-on e como usá-lo em conjunto com methods.

Diretiva v-on


A diretiva v-on permite que se vincule um event listener (leia-se um método) a um evento do DOM. A sintaxe de v-on é a seguinte: v-on:evento="methodHandler". O evento pode ser qualquer evento DOM válido como: click, mouseover, keypress, input, etc. Vue passará automaticamente para o methodHandler o evento DOM original e uma propriedade extra: target, que aponta para o elemento que gerou o evento.

Vue methods


Vue possui uma propriedade especial onde definimos o conjunto de métodos que podem ser invocados pela aplicação. Vejamos um primeiro exemplo.


Usamos uma expressão de interpolação para invocar o método gerarMensagem. Embora possível, não é muito comum executar métodos dessa maneira. Os métodos normalmente são usados como event handlers. Vejamos então como combinar a diretiva v-on com methods para manipulação de eventos.

Vue passou o objeto event para o método e usamos a propriedade target.value para recuperar o valor do elemento input. É possível passar uma expressão inline como parâmetro de v-on, para algumas situações mais simples pode ser bastante útil.

Vue permite a utilização de uma versão simplificada de v-on. Você pode trocar v-on por @. É apenas açúcar sintático, mas é bastante popular entre os desenvolvedores. Assim, no lugar de v-on:click você pode usar @click.

Modificadores de Evento


Em uma aplicação SPA apenas um documento HTML é carregado. Todas as requisições de conteúdo seguintes são feitas via Javascript. É muito comum, por exemplo, desabilitar o comportamento padrão do submit dos formulários HTML, já que por padrão eles requisitam o recarregamento da página, o que é algo indesejado em uma SPA.

Vejamos passo a passo como alterar o comportamento padrão de um evento. Primeiro, vejamos um exemplo de um formulário bem simples, ele tem apenas um botão de submit que incrementa um contador.


Ao abrir essa página e apertar o botão Incrementar, você notará que o contador é incrementado e logo em seguida volta para o estado inicial. Isso ocorre justamente porque a página é completamente recarregada, fazendo com que a aplicação seja reiniciada. Agora vamos alterar esse comportamento usando o evento que é passado como parâmetro para o método increment.

Agora o formulário está funcionando. Porém, tivemos que alterar a assinatura do método para receber o evento. Como falei anteriormente, essa é uma tarefa corriqueira em SPA, então Vue disponibiliza uma maneira mais simples de fazer isso. São os Modificadores de Eventos. Vamos ver apenas o .prevent nesse artigo, mas você pode clicar aqui pra ver todos os modificadores suportados.


Nosso método ficou mais limpo e sem o acoplamento com o evento DOM. Além dos modificadores de evento, Vue possui também Modificadores de Teclado, facilitando a criação de métodos listeners para eventos de pressionamento de teclas específicas (delete, tab, space, etc). Com isso encerramos essa 3ª parte. É interessante que você consulte a documentação para ver mais detalhes sobre os modificadores. Até o próximo artigo!

sexta-feira, 16 de novembro de 2018

Vue - Parte 2 - Vue Instance e Reatividade

Na parte 1 dessa série fizemos uma breve introdução sobre o Vue, e também uma breve comparação com seus dois grandes concorrentes: React e Angular. Nessa segunda parte vamos olhar mais de perto para o objeto Vue que usamos em nosso primeiro exemplo no artigo anterior. Vamos retomar aquela aplicação (se é que dá pra chamá-la assim) e aprender conceitos importantes como data binding, reatividade e a propriedade template.

Vamos dar uma olhada novamente no código que fizemos na parte anterior.

O objeto Vue que instanciamos recebe como parâmetro um objeto, chamado de options, que deve conter algumas propriedades mínimas para, digamos, ser útil. A primeira é a propriedade el. Ela serve para informar ao Vue em qual elemento html ele deve montar a sua aplicação. O conteúdo do elemento selecionado será controlado pela instância do Vue quando a página for carregada. Você pode passar qualquer seletor css válido para el: id, classe, tipo, atributo, etc.

Outra propriedade que utilizamos foi data. O nome é bem sugestivo não é mesmo? Nela você irá declarar o modelo de dados da sua aplicação. No código acima criamos uma propriedade chamada msg e exibimos o seu valor dentro da tag h1. Lembra que falamos que o Vue gerencia tudo que está dentro do elemento que selecionamos em el? Pois bem, ao carregar a página, Vue irá trocar a marcação {{ msg }} pelo valor da propriedade msg de data. Não apenas isso! A propriedade msg passa a ser Reativa a partir de agora.

Reativa?! Calma, não vamos falar de Química ou de Física aqui. Reatividade nesse contexto quer dizer que essa propriedade irá reagir a mudanças, de forma que se o seu valor for modificado a página irá refletir automaticamente esse mudança. Sem recarregar, sem precisar de Ajax, sem precisar fazer nada. Vue irá fazer isso pra você. A mudança é feita no Virtual DOM e somente a parte que mudou será renderizada novamente. Vamos fazer uma pequena alteração em nosso exemplo para que possamos testar essa reatividade na prática.

Nota: Preste bastante atenção à sintaxe da propriedade data. Ela precisa obrigatoriamente retornar um objeto com as propriedades que queremos definir. Na verdade, data pode ser uma função que retorna um objeto, mais adiante, quando estudarmos Components, teremos que obrigatoriamente usar dessa maneira.


Extraímos o conteúdo de data para uma variável externa, pois assim conseguiremos alterar seu valor no console do navegador. Abra o devtools do navgador (normalmente ctrl + shift + i) e no console altere o valor de msg: data.msg = 'Outro valor'. Você irá notar que o conteúdo de h1 irá mudar assim que o valor de msg for alterado no console. 


A figura acima mostra em alto nível como Vue reage às mudanças das propriedades definidas em data. Vale lembrar que as propriedades de data só são reativas caso sejam definidas antes da criação do objeto Vue. Se você adicionar uma propriedade após a instanciação do objeto vue, por exemplo: data.valor = 10, valor, embora associado a data, não entrará no sistema de reatividade. Vue irá inclusive gerar um alerta para você. Para terminarmos essa 2ª parte, vamos falar sobre a template syntax usada em Vue.

Template Syntax

Vue escolheu a sintaxe de templates baseada em HTML para renderizar suas views. A tag template é uma das novidades do HTML 5. Ela suporta qualquer conteúdo HTML válido, porém não é renderizada diretamente pelo navegador, é preciso usar Javascript para renderizar seu conteúdo (não se preocupe, Vue faz isso automaticamente para você).

Além de código HTML, os templates suportam expressões javascript através de interpolações como a sintaxe Mustache (chaves duplas), bastante popularizada pela biblioteca handlebars. Quem veio do Angular não deve estranhar a sintaxe, já que ele também a utiliza em seus templates html.

É possível referenciar qualquer propriedade definida em data diretamente em um template. Chamamos isso de data binding. Note que não é preciso usar this antes da propriedade. Isso é possível porque o Vue faz essa ligação pra nós. Quando estudarmos outras propriedades como methods, você verá que é preciso usar this, mas isso fica pra outra hora.

Como já falamos antes, é possível usar expressões dentro dos templates. Uma expressão precisa retornar um valor, então as expressões abaixo são válidas nos templates:
  • {{ 1 + 1 }}
  • {{ ok : 'sim' : 'não' }}
  • {{ msg.toUpperCase() }}
Uma outra propriedade disponível na instância de Vue é template. Nela é possível passar o conteúdo de um template diretamente para o objeto vue no momento da sua criação. Vejamos um exemplo de como fazer isso.

O conteúdo a ser renderizado agora está dentro da propriedade template. Você também pode usar o recurso de template strings do ES6 para escrever conteúdo em várias linhas.

É possível referenciar um template definido na sua página html.

Quando estudarmos sobre a criação de componentes Vue, iremos usar bastante os templates, mais especificamente SFC (Single File Components). Vamos parar por aqui por enquanto. No próximo artigo veremos como deixar nossas aplicações mais dinâmicas e interativas com methods. Até o próximo artigo!

sábado, 10 de novembro de 2018

Vue - Parte 1 - Introdução

Fala pessoal! Tudo beleza?! Depois de algum tempo sem postar conteúdo por aqui, resolvi iniciar uma série de artigos sobre o Vue.js. Talvez vocês não saibam, mas eu sempre curti o Angular, desde o tempo em que ele ainda era AngularJS. Resisti um pouco ao React, mas como tava no hype eu fui junto. Mas daí este ano finalmente eu resolvi dar uma olhada no Vue. Vou confessar, esse framework me surpreendeu pra caramba, e eu só me arrependo de não ter olhado pra ele antes. 

Dizem por aí que uma das melhores maneiras de aprender ou fixar algum assunto é ensinando, então espero poder repassar um pouco do que aprendi até aqui e ampliar meu conhecimento sobre Vue durante o desenvolvimento dessa série. Espero que gostem e peço que se sintam à vontade pra fazer perguntas ou correções. Sem mais delongas vamos à primeira parte da série!

Vue: The Progressive Javascript Framework

Se você visitar o site oficial do Vue verá que ele se define como um Progressive JS Framework. Mas o que isso de fato significa e por que eu deveria escolher o Vue em detrimento ao Angular ou React? 

Se você olhar para um framework javascript verá que cada um traz consigo um apelo porque você deve escolhê-lo. O Angular, além do legado do AngularJS, trouxe um certo ar de enterprise em sua nova versão. A escolha do Typescript como linguagem 'padrão' atraiu muitos desenvolvedores que já vinham de linguagens tipadas e que não se sentiam confortáveis com a falta disso em Javascript. Em compensação, o boilerplate necessário para criar um projeto Angular acabou espantando alguns. Isso melhorou após a introdução e evolução do angular-cli, um utilitário de linha de comando que livra você de toda essa configuração inicial e traz uma série de outras funcionalidades. Outra 'vantagem' do Angular está no fato de ter uma grande empresa cuidando do framework, no caso a gigante Google.

React impressionou pelo seu foco e simplicidade. Pra começar ele nem se considera um framework, mas sim uma library. Embora não tenha adotado o Typescript como fez o Angular, React usa fortemente o Babel.js, uma espécie de transpiler Javascript, que permite o uso das features mais novas de Javascript e também facilita bastante a escrita de código com JSX (linguagem de template usada pelo React). Outro ponto positivo é ecosistema de bibliotecas em torno do React. Diferente do Angular, o core do React é bem pequeno, não há nem mesmo, por exemplo, o suporte para roteamento, e portanto você precisará de uma lib à parte para tal. Não custa lembrar que assim como o Angular, React tem uma grande empresa como sua guardiã, o Facebook.

O fato de ser o caçula dos três deu alguns benefícios ao Vue. Você vai notar muitas similaridades entre ele e os seus concorrentes, além de claro, algumas mudanças no que eram consideradas fraquezas nos outros dois. Pra começar a desenvolver uma SPA com Vue é preciso apenas carregar um script de 20KB (min+gziped). Como no React, o núcleo do Vue é bem pequeno.

A simplicidade é notada também ao ler a definição do framework no site oficial. O termo 'progressive' é o diferencial do framework! Você pode começar a desenvolver carregando apenas o script core do vue e à medida que o projeto precisar, você pode adicionar plugins/library facilmente no seu projeto. Outro diferencial é que muitas dessas libs adicionais são mantidas pelo próprio time do Vue, como é o caso do vue-router (roteamento) e do vuex (gerenciamento de estado). Você irá notar que, de fato, na maioria dos projetos você irá precisar somente desse trio.

Você pode ainda usar Typescript ou mesmo JSX. Vue fornece também um excelente utilitário de linha de comando para criação de projetos, o vue-cli (atualmente na versão 3). Uma coisa que o Vue difere dos seus concorrentes é no fato de não ter uma grande empresa por trás do dele, mas isso é compensado com uma comunidade enorme e bastante ativa que tem ajudado a transformar o framework em um dos queridinhos da atualidade, com mais estrelas no github que React e Angular (imagino que isso seja importante hehe).

Nosso propósito aqui não é esgotar as comparações entre Vue x React x Angular, você irá encontrar muitos bons artigos sobre isso pela internet, recomendo inclusive o comparativo feito pelo site oficial do Vue, é só clicar aqui. À medida que avançarmos no estudo das funcionalidades do Vue você irá notar as semelhanças e diferenças com seus concorrentes. Para finalizar essa primeira parte vamos criar nosso primeiro projeto com Vue.

Hello Vue


Como falamos anteriormente é bastante simples criar uma SPA com Vue. A primeira coisa que você precisa é importar o script com o vue-core (linha 4). Em seguida, é preciso definir um elemento html onde o Vue irá montar a aplicação (linhas 7 a 9). Por fim, basta criar uma instância de vue e associá-la ao elemento html criado anteriormente, atributo el (linha 13).

A propriedade data faz parte da instância vue e é serve para definir os dados que serão usados pela aplicação, no exemplo criamos uma variável chamada msg e exibimos o seu valor no html através da expressão {{ msg }}, isso é chamado de data binding. Ao abrir a página no navegador você irá visualizar o conteúdo da variável msg.

Nos artigos seguintes iremos explorar em detalhes a instância do Vue usada neste exemplo. Por enquanto, o importante é que você entenda os passos necessários para escrever uma app simples usando Vue. Até o próximo artigo!

segunda-feira, 25 de junho de 2018

Quick Tip: Marcando um link do Bootstrap como ativo usando Thymeleaf

Uma funcionalidade muito comum ao construirmos um menu de navegação com Bootstrap é marcarmos em qual item do menu o usuário está atualmente. Para isso basta adicionarmos a classe active no item e o Bootstrap irá aplicar um estilo diferenciado para ele.

Os menus de um site ou sistema geralmente são construídos dinamicamente. Dessa forma, precisamos marcar o item ativo de forma programática, afinal de contas não queremos ter que repetir o código do menu em todas as páginas.

Nesse Quick Tip veremos como fazer isso usando o Thymeleaf, um template engine java comumente usado com o Spring, e que é uma ótima alternativa ao JSP. É esperado que você conheça o Thymeleaf para tirar algum proveito desse post, então vejamos como fica o código um menu de navegação.


O código é bem simples. Comparamos a url da requisição com o caminho do link e caso sejam iguais adicionamos a classe active no item. Vale observar que essa verificação não vai funcionar para alguns casos particulares, como no caso de submenus, mas aí é só alterar o predicado usado para verificação (de repente usar o contains ou coisa do tipo).