Introdução ao Building WebApps no Vue.js

Existem tantos frameworks JavaScript em existência atualmente, pode ser difícil manter o controle de todos eles, e certamente é improvável que alguém os domine em sua totalidade. O que isso significa para a maioria de nós é que precisamos ser seletivos sobre quais estruturas de desenvolvimento investiremos em aprendizado.

Neste artigo, vamos dar uma olhada rápida no Vue.js, para que você possa decidir por si mesmo se é provável que se adapte ao tipo de projetos em que você tende a trabalhar, e se isso parece ser uma boa opção para você.

O que é o Vue.js?

Embora convencionalmente não seja capitalizado, “Vue” é realmente um acrônimo para Visual Understanding Environment. Seu principal objetivo é facilitar o desenvolvimento de aplicativos da Web, reduzindo a complexidade do código. Ele tem muito em comum com o React.js, mas a versão atual do Vue é mais rápida do que React e parece ser mais eficiente.

Vue é difícil de aprender?

Se você já é um programador experiente, não deve ter muita dificuldade em começar a usar o Vue, mas não seria correto descrevê-lo como um idioma iniciante. Você precisa ter alguma experiência com HTML, CSS e JavaScript para construir algo prático com isso.

A curva de aprendizado com o Vue é um pouco menos acentuada do que com o React, e é muito menos acentuada do que com o Angular. Então, o que pode ser dito com precisão é que o Vue é relativamente fácil de aprender em comparação com outras estruturas de desenvolvimento populares.

Como a Vue ajuda a alcançar objetivos?

Isso varia um pouco dependendo de qual é o seu objetivo, mas, em geral, você vincula blocos de código a divs HTML. Essa metodologia facilita a introdução de interatividade e conteúdo dinâmico do que com HTML, CSS e JavaScript comuns.

Por outro lado, você não pode realmente fazer mais no Vue do que poderia usando as formas mais convencionais. Usar o Vue é simplesmente uma questão de tornar as coisas mais fáceis para você na fase de desenvolvimento, mas isso não tem muito efeito no resultado final, além do menor impacto no desempenho devido ao carregamento do código do framework.

Outra vantagem do Vue é que ele fornece modularidade, o que significa que você pode reutilizar componentes desenvolvidos em vários projetos.

O Vue tem algum truque legal na manga?

Certamente, e o melhor deles são os efeitos de transição incorporados, que permitem que você assuma o controle do que seriam estruturas CSS e JavaScript com uso intensivo de código usando apenas uma linha ou duas de código. Isso economiza tempo e esforço ao criar seus aplicativos.

Outro recurso útil é a renderização nativa para tipos de dispositivos específicos, como Android e iOS, para que você possa ajustar seus aplicativos para os dispositivos em que estão sendo executados sem muito trabalho extra.

Começando

Como dito anteriormente, o Vue é fácil de aprender, mas não é uma linguagem de principiante. Você ainda precisa saber o que fazer dentro de um bloco de código.

O problema é que, como a maioria dos frameworks, a documentação é muito preguiçosa e principalmente dedicada a convencê-lo a usá-lo. Muito menos atenção é dada na documentação para explicar como tudo funciona ou por que você faz as coisas de uma certa maneira. Praticamente todos os exemplos de frameworks oficiais criados deixam de fora informações vitais que você precisa pesquisar por horas para descobrir. Essa é uma falha compartilhada pela documentação e exemplos da Vue também.

Para facilitar o entendimento do que você realmente precisa fazer para recriar esse projeto, estas são as etapas necessárias:

1. Adicione um script que faça referência ao vue.js

Para otimização de velocidade, é melhor incluir isso depois de todo o conteúdo da sua página, mas logo antes da tag body de fechamento na origem HTML. Você também pode ter outros recursos de página carregando nesta seção também, e a ordem de prioridade de carregamento determina qual ordem você deve inserir em cada recurso.

Aqui está um exemplo de inclusão de vue.js a partir de um CDN:

E aqui está um exemplo de inclusão de vue.js a partir de um diretório em seu próprio servidor:

Sem essa referência ao vue.js, nada relacionado ao Vue pode acontecer.

2. Adicione os componentes do Vue ao seu corpo HTML

Isso é o que está acontecendo com este código:

Por enquanto, não faz muito sentido, mas a parte Vue é o elemento vazio "demo-grid", mais a adição de uma "diretiva-v" à entrada da consulta (neste caso, é "v-model" ”, Que é usado para vincular código Vue para formar entradas).

3. Se o projeto exigir um modelo de componente, adicione-o ao corpo do HTML

Esta seção de código é incomum porque se parece com o HTML normal dentro de uma tag de script, o que confundirá a maioria dos softwares de edição de HTML (note que as cores do indicador estão erradas em alguns lugares).

4. Adicione a instância do Vue

Esta deve ser uma das últimas coisas a aparecer na página, porque está executando uma tarefa de renderização dinâmica. Isso fornece alguns benefícios de otimização ao adicioná-lo anteriormente na página.

  • A linha 46 especifica que o navegador deve procurar um componente na página chamado “demo-grid”, e a linha 47 especifica que “# grid-template” deve ser usado como modelo para o componente (este é o código do modelo adicionado na etapa 3 da linha 9 para a linha 30).
  • Um bloco da linha 48 para a linha 52 define as propriedades do componente.
  • As linhas 53 para 62 definem uma função para classificar os dados na tabela.
  • As linhas 63 para 85 definem uma função para filtrar dados (de resultados na consulta de pesquisa).
  • As linhas 86 para 90 definem uma função para capitalizar as palavras em um conjunto de dados.
  • As linhas 91 para 97 definem o método para ordenar dados.

5. Adicione o código de lançamento antes da tag de script de fechamento

Se você concluiu as etapas 1 para 4 e abriu o arquivo no navegador, tudo o que você verá é a caixa de pesquisa e nada mais. Isso porque tudo o que é necessário para construir a tabela foi definido, mas não criado. Então, no passo 5, adicionamos o código que realmente cria a tabela que foi definida por todas as etapas anteriores.

  • A linha 100 cria um novo objeto Vue.
  • A linha 101 especifica para qual elemento ligar a ação.
  • As linhas 102 para 111 fornecem os dados do objeto que serão vinculados ao elemento.

ensaio

Tendo definido e criado o objeto necessário, você está pronto para testar o resultado. Prepare-se para ficar desapontado, porque é isso que você deve ver no navegador:

O que está acontecendo? Por que isso é tão chato? É porque não há estilo aplicado. Se usarmos o estilo padrão do exemplo JSFiddle, a tabela ficaria assim:

Digitar qualquer coisa na caixa de pesquisa (sem distinção entre maiúsculas e minúsculas) irá filtrar os resultados de acordo:

Clicar em um cabeçalho de coluna permitirá alterar a ordem de exibição. Por exemplo, clicar no cabeçalho da coluna “Power” mudará os resultados a serem exibidos na ordem do nível de potência.

Melhorando e adaptando

Outro problema com exemplos de frameworks é que eles geralmente não incluem muita informação para ajudar alguém não familiarizado com a base de código a descobrir como aplicar em campo o que eles vêem no exemplo. O Vue faz um trabalho magnífico comparado ao Bootstrap (que é notoriamente pouco informativo), mas ainda deixa muitas perguntas sem resposta.

Aqui estão algumas alterações que podemos fazer neste aplicativo para alterar sua aparência e o que faz:

  • Estilo da mesa como uma tabela listrada Bootstrap
  • Alterar o número de colunas
  • Altere os dados para algo completamente diferente

1. Adicionando Bootstrap

2. Envolvendo o elemento em uma tabela do Bootstrap

3. Ajustando o elemento raiz para usar o modelo de layout do Bootstrap

4. Restyling as setas

5. Modificando os dados

6. Testando

  • Não filtrado e não classificado

  • Ordenado por Directiva (ascendente)

  • Ordenado por Usado para (ascendente)

  • Filtrado por "condicional"

  • Filtrado por "condicional" e classificado por Directiva (ascendente)

Considerações finais

Esperemos que o que ficou evidente a partir desses exemplos foi que criamos dois aplicativos com aparência e conteúdo muito diferentes de uma fatia comum de código. Com o Vue, é muito fácil reutilizar seu código em vários projetos e, potencialmente, aproveitar uma economia de tempo considerável.

imagem de cabeçalho cortesia de Aleksandar Savic

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.