Vue.js: Construa aplicações incríveis

Sumário

ISBN

Agradecimentos

Sobre o autor

Sobre este livro

1. Sobre o Vue.js

2. Seu primeiro componente com Vue.js

3. Construindo nossa aplicação

4. Comunicação entre componentes

5. Renderização condicional

6. Testes unitários

7. Testes avançados e refatoração

8. Rotas

9. Requisições assíncronas

10. Diretivas customizadas

11. Distribuindo conteúdo com Slots

12. Vuex

13. Conclusão

ISBN

Impresso e PDF: 978-85-5519-267-8

EPUB: 978-85-5519-268-5

MOBI: 978-85-5519-269-2

Você pode discutir sobre este livro no Fórum da Casa do Código: http://forum.casadocodigo.com.br/.

Caso você deseje submeter alguma errata ou sugestão, acesse http://erratas.casadocodigo.com.br.

Agradecimentos

Gostaria de agradecer aos meus pais por sempre estarem ao meu lado, e também por me incentivarem a sempre dar o melhor de mim. Vocês são demais.

Gostaria de agradecer à Marina, por ser essa pessoa tão especial e por aguentar meus altos e baixos durante a escrita deste livro.

Por fim, gostaria de agradecer a todos da Casa do Código, por me proporcionarem a oportunidade de publicar este livro.

Sobre o autor

Meu nome é Caio Incau, e trabalho com desenvolvimento de software. Comecei aos 16 anos estudando por conta em casa, na época com Delphi.

Aos 17 anos, entrei na faculdade para cursar Sistemas de Informação. Também nessa idade, tomei uma das melhores decisões que já tive: decidi estudar Java pela Caelum. Com 18, comecei a trabalhar na Caelum, empresa na qual trabalhei até 2016.

Durante minha estadia no mercado de TI, tive a oportunidade de trabalhar com Java, Ruby, JavaScript e Objective-C. Busco sempre me atualizar e aprender sobre novas tecnologias, pois acredito fortemente que este é o segredo para o sucesso em nossa área de trabalho.

A maior parte da minha carreira trabalhei como FullStack, mas nos últimos anos decidi me focar totalmente em front-end. Hoje, atuo em uma empresa chamada Moip, na qual utilizo Vue.js no meu dia a dia. Além disto, sou viciado em café, apaixonado por tecnologia e entusiasta Open Source.

Sobre este livro

O modo com desenvolvemos código front-end mudou muito ao longo dos últimos anos. As SPAs (Single Page Applications) vieram para mostrar ao mundo o potencial da Web moderna, com seus inúmeros recursos.

Mais do que dar as ferramentas necessárias para desenvolver, os frameworks de componentes reativos para interfaces web modernas vieram nos ajudar com padrões e reaproveitamento de código. Este livro destina-se a pessoas que já têm conhecimento com JavaScript, de preferência com os padrões do ECMAScript 2016, e que desejam aprender a usar uma biblioteca moderna de desenvolvimento front-end, o Vue.js.

Abordaremos desde a instalação até algumas bibliotecas úteis. A ideia é que, após ler este livro, você consiga desenvolver sua primeira aplicação em Vue.js, com um alto padrão de código.

Capítulo 1

Sobre o Vue.js

1.1 O que é o Vue.js?

Vue.JS, ou simplesmente Vue (pronuncia-se View), para os mais íntimos é uma lib JavaScript para o desenvolvimento de componentes reativos para web. Ele ganhou muita visibilidade no mercado após ser adotado como padrão pelo Laravel (famoso framework PHP).

Você provavelmente já ouviu falar de alguns de seus concorrentes, como o Angular, React ou até mesmo o grande antepassado dos frameworks, Backbone. Mas se não ouviu, deve estar se perguntando: o que são esses componentes reativos? Calma, vamos nos aprofundar neles durante o livro.

1.2 Onde posso aplicar o Vue.js?

Uma característica do JavaScript, e por consequência também do Vue.js, é a possibilidade de ser utilizado em qualquer projeto que possua front-end. Independente da linguagem de programação escolhida, é possível usar o Vue.js.

Gigantes da tecnologia, como Xiaomi e Alibaba (maior site de compra e venda do mundo, considero o eBay da China), utilizam o Vue.js. Podemos ver por estes cases que é possível aplicar o Vue em projetos de todos os tamanhos.

1.3 O que este livro vai abordar?

Neste livro, você vai aprender a sintaxe do Vue.js, como funcionam seus componentes e métodos, como integrar com APIs externas e criar rotas, e muito mais! Para isto, ao decorrer do livro, após aprendermos o básico, desenvolveremos um projeto de uma To-Do list.

Claro que ele será com menos funcionalidades, pois contaremos apenas com o front-end, mas ainda sim será o suficiente para aprendermos muito sobre a biblioteca. Assim, você terá exemplos e prática para poder começar a aplicar em seus próprios projetos.

1.4 O que são os componentes reativos?

Componentes reativos nada mais são do que fragmentos de código que possuem sua marcação (HTML), seu estilo (CSS) e seu próprio comportamento (JavaScript). Nada muito diferente do que você já está acostumado a ver em páginas web, certo? Mais ou menos.

Os componentes são fragmentos menores que as páginas. Na verdade, eles servem para compor as páginas. Desse modo, temos um modo fácil e elegante de se reaproveitar código. Isto é o que temos de mais moderno para o desenvolvimento front-end hoje em dia.

Legal, já definimos o que são componentes, mas e a parte da reatividade? Pois bem, reatividade é tão simples quanto a definição de componentes. A ideia é que, quando a informação de um componente mudar (através do JavaScript), sua marcação (HTML) saiba reagir e se adaptar a isto.

Um dos exemplos mais básicos é a adição de um item em uma lista no seu JavaScript. Neste momento, algo ocorre, um evento, então o seu HTML deve saber reagir a isto e adicionar também para a visualização do usuário.

1.5 Qual o diferencial do Vue.js?

O Vue se diferencia por ser uma biblioteca não intrusiva, ou seja, ele não tem um código que o force a seguir o padrão dele, como é o caso do Angular 2 com TypeScript. A maioria do código para Vue é escrito em JavaScript puro. Ele possui uma sintaxe muita clara e limpa.

Outro grande diferencial é sua flexibilidade. Veja que nos referenciamos ao Vue como uma biblioteca (lib) e não um framework, pois ele trabalha com outras bibliotecas que, juntas, formam um framework.

Vue.js é performático! O Vue.js, em sua versão 2.0, utiliza o conceito de Virtual DOM, assim como seu principal concorrente, o React.

1.6 A história do Vue.js

Evan You, o criador do Vue.js (http://evanyou.me/), trabalhava no Google Creative Labs, e ele sentia a necessidade de prototipar o mais rápido possível em vez de se preocupar com uma grande interface visual. A consequência era que ele repetia muito código HTML, o que fazia com que ele se sentisse improdutivo, pois consumia muito de seu tempo.

Vendo isto, Evan começou a olhar para as ferramentas que existiam no momento, para que ele pudesse resolver este problema. Quando ele começou a pesquisar a fundo, percebeu que não existia uma biblioteca que lhe permitisse trabalhar livre e com menos repetição. O Reacts.js estava apenas começando e frameworks como Backbone.js eram muito mais do que ele precisava para prototipar, pois este trabalhava com toda a arquitetura MVC.

Para o tipo de projeto que ele trabalhava, as prioridades eram algo flexível e leve. Quando ele viu que isto ainda não existia no mercado, e por ser um ótimo programador como é, decidiu então ele mesmo resolver este problema, criando o Vue.js. Apesar de o Vue.js ter nascido como uma ferramenta de prototipação rápida, agora ele já pode ser usado para criação de grandes e escaláveis aplicações reativas.

Como toda boa biblioteca, o Vue.js foi crescendo e evoluindo, dando-nos muito mais funcionalidades do que as oferecidas no começo. Hoje ele é fácil de escalar e estender, e existem inúmeros projetos open source com as mais diversas