Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

Vue.js: Como criar sua primeira aplicação

Esse artigo explora os principais recursos que o framework Vue.js pode oferecer para um projeto de aplicação web, focado no front-end.

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)
Fique por dentro
Este artigo é útil por apresentar uma série de conceitos importantes acerca do framework JavaScript Vue.js, o qual fornece insumos para facilitar o desenvolvimento de aplicações escaláveis, reaproveitando código e estruturas similares. Veremos, através da construção de uma aplicação de listagem de livros, a instalação, configuração, os principais recursos, facilitadores, listeners e muito mais. O Vue.js se adéqua a diferentes cenários de programação e revelou-se um framework poderoso e extremamente útil no dia a dia dos programadores front.

Quando Evan You, criador do Vue.js, estava trabalhando em um dos projetos do Google Creative Labs, ele precisava de uma interface de protótipo para UIs bem grandes. Claramente, escrever uma grande quantidade de HTML repetido era consumir tempo e recursos, e é por isso que Evan começou a procurar alguma ferramenta já existente para essa finalidade.

Para sua surpresa, descobriu que não havia nenhuma ferramenta, biblioteca ou framework que se adequasse exatamente ao seu propósito de prototipagem rápida! Naquela época, o AngularJS era amplamente utilizado, o React.js estava apenas começando, e frameworks como Backbone.js eram usados ​​para aplicações em larga escala com arquitetura MVC. Para o tipo de projeto que precisava de algo realmente flexível e leve apenas para uma rápida prototipagem UI, nenhuma dessas estruturas complexas foram adequadas. Quando você percebe que algo adequado não existe e você é capaz de criá-lo, então essa é a hora de fazê-lo!

E foi assim que surgiu a ideia de criar um framework que ajudaria na prototipagem rápida, oferecendo uma maneira fácil e flexível de ligação de dados reativos e componentes reutilizáveis. Agora ele pode ser usado para construir complexos aplicativos escaláveis ​​e reativos na web.

Como todo bom framework, o Vue.js vem crescendo e evoluindo, proporcionando cada vez mais recursos em relação às suas primeiras versões. Atualmente, ele fornece uma maneira fácil de anexar e criar plugins, escrever e usar mixins, e adicionar comportamento personalizado. É possível, inclusive, usá-lo de uma forma tão flexível para a estruturação de aplicativos que ele definitivamente pode ser considerado um framework capaz de suportar a construção de aplicações web complexas.

O Vue.js permite que você vincule facilmente seus modelos de dados à camada de apresentação. Ele também permite reutilizar componentes em toda a aplicação, sem precisar criar modelos especiais ou coleções e registrar eventos no objeto. Você não precisa seguir nenhuma sintaxe especial, nem instalar nenhuma das intermináveis ​​dependências que frameworks convencionais exigem.

Seus modelos são objetos JavaScript simples, que podem ser vinculados a tudo o que você quer em suas Views (texto, input texts, classes, atributos, e assim por diante). Vale citar também que você pode separar a camada de View dos estilos e lógica JavaScript, ou pode colocá-los juntos no mesmo arquivo e construir a estrutura de seus componentes e lógica no mesmo lugar.

A usabilidade é mais simples ainda: basta adicionar o arquivo vue.js ao seu projeto e usá-lo. Alternativamente, você pode usar o vue-cli (a interface de linha de comando do Vue) com o Webpack e a família do Browserify, que não apenas constrói todo o projeto, mas também suporta hot reload (recarga automática das alterações no código em tempo real).

Há um suporte de plug-in para todos os IDEs modernos e comumente usados, logo fique à vontade para selecionar o que melhor se adéqua às suas preferências. Você pode usar qualquer pré-processador que quiser, além de poder usar o ES2015. Vale citar também que é possível usar o Vue.js em conjunto com seu framework favorito ou até mesmo com algum que venha a estar construindo. A escolha é sua, o Vue.js te dá todo o resto.

Para entender melhor como o framework funciona, trataremos de desenvolver um app de lista de livros que você deseja ler. O mesmo servirá de referência prática à aplicabilidade dos recursos disponibilizados pelo framework. Será uma implementação simples que permitirá a inclusão e remoção dos itens, de modo similar a uma lista de tarefas ou aplicações de mesma finalidade. E para linearizar melhor os conhecimentos, apresentaremos a implementação em três etapas: 1) desenvolvimento do exemplo usando apenas HTML, CSS, Bootstrap, JavaScript e jQuery; 2) migração do exemplo para o Vue.js; 3) criação de componentes Vue.js reaproveitáveis com base no exemplo.

Configurando ambiente

Como dito, nosso primeiro exemplo fará uso de tecnologias simples e já bem conhecidas no mundo de desenvolvimento web: HTML, CSS, Bootstrap, JavaScript e jQuery. O Bootstrap será usado para tornar a construção da estrutura e estilo da página mais simples, sem termos de nos preocupar com configurações que não fazem parte do escopo do artigo. Já o jQuery será usado para facilitar a codificação em JavaScript.

Comecemos então pela criação de uma estrutura mínima de organização dos diretórios e arquivos web, tal como:

+ /projeto
  +---- /css
  +     |----- index.css
  +---- /js
  +     |----- index.js
  +---- index.html

Isso será importante para identificar melhor cada parte de seu código. Agora, abra o arquivo index.html e inclua o conteúdo da Listagem 1 ao mesmo.

Listagem 1. Conteúdo inicial do index.html

01 <!DOCTYPE html>
02 <html lang="en">
03   <head>
04     <meta charset="utf-8">
05     <title>Lista de livros</title>
06     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
07     <link rel="stylesheet" href="css/index.css" />
08   </head>
09 
10   <body>
11     <div class="container">
12       <h2>Minha lista de livros</h2>
13       <div class="input-group">
14         <input placeholder="adicione um livro" type="text" class="js-novo-livro form-control">
15         <span class="input-group-btn">
16             <button  @click="addItem" class="js-add btn btn-default" type="button">Adicionar!</button>
17           </span>
18       </div>
19       <ul>
20         <li>
21           <div class="checkbox">
22             <label>
23                 <input class="js-livro" name="list" type="checkbox" />
24                 <big>Alice no País das Maravilhas</big> - <small>Lewis Carrol</small>
25        "
[...]

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

Carregando
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (3)  (0)
Confirmar voto
Compartilhe:
Ficou com alguma dúvida?