Clonando o Trello com VueJS

Image for post
Image for post

Fala devs, beleza?

No artigo de hoje vamos re-criar o quadro principal do Trello para aprender diversos conceitos do ecossistema do VueJs como services, components, props, custom events e slots.

O primeiro passo é escolher quais funcionalidades do Trello iremos reproduzi-las no VueJs.

Como o Trello faz parte do meu dia-a-dia de trabalho, fico confortável em recriar uma de suas principais funcionalidades, o drag & drop de cartões entre listas.

Com uma comunidade muito aquecida, a cada ano que passa o Vuejs ganha ainda mais força.

Existem muitos componentes prontos, restando apenas procurá-los na web, assim não precisamos re-inventar a roda criando componentes que já existem, como por exemplo o próprio drag & drop.

Chega de conversa, é hora de colocar a mão na massa! O resultado do nosso “Trellu” ficou assim:

Image for post
Image for post
Main Board Trellu

Criando um projeto VueJs

Para criarmos um projeto utilizando o Vuejs, temos dois métodos um via CDN onde criamos uma página HTML e referenciamos o script, ou utilizando o VUE CLI.

Estrutura

O projeto foi dividido na seguinte estrutura, Componentes, Core,Store e Views.

Image for post
Image for post
Estrutura do projeto Trellu

Overview dos components

Board:

Board é o principal componente do Trellu que funciona como o dashboard em si, ou seja, a partir dele são usados mais três componentes, o Header, Navbar e o List.

Image for post
Image for post

Header:

É componente responsável por essa parte do nosso projeto, dentro desse nosso componente ainda temos um slot, onde podemos renderizar um outro componente dentro do nosso componente Header. No caso do nosso Trellu estamos renderizamos o componente Navbar.

Image for post
Image for post

Navbar:

É o componente responsável por renderizar esse conteúdo, onde exibimos o nome do usuário que consultamos através de seu github, e temos um botão onde podemos limpar o quadro.

Image for post
Image for post

List:

É o componente principal da nossa aplicação, pois dentro desse componente temos um outro componente o Card.

Image for post
Image for post
Componente List -> Component Card

Bibliotecas utilizadas

Axios - Utilizada para fazer requições http exemplo: consumir a api do github para exibir nome/foto do usuário.

bulma - Framework Css para estilização do nosso Trellu.

vue-smooth-dnd / vuedraggable - Responsável pelo drag & drop.

vuex-persistedstate / vuex - Responsável por gerenciar o estado da aplicação.

Fonte

Você pode baixar o font direito do github clicando aqui

Veja também

Caso queira mais exemplos de aplicações utilizando VueJS, veja o meu último artigo em parceria com o Fabio Silva Lima onde criamos um gerenciador de arquivos utilizando .NET Core + VueJS.

Agradecimentos

Quero agradecer em especial o Fabio Silva Lima por revisar o artigo, e por toda a parceria de sempre :)

Considerações Finais

Com VueJS é muito simples criar uma aplicação web desde a mais simples até a mais complexa. Você pode clonar esse projeto do meu github e verificar como foi desenvolvido, adicionar features novas, como por exemplo ao adicionar um card abrir um dialog para o usuário incluir um nome etc..

Achou algum erro? Curtiu? Não curtiu?

Por favor comente e compartilhe!

Obrigado e até a próxima.

Written by

Desenvolvedor .NET, apaixonado por JS, fifa e um bom e velho rock n roll .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store