Vue.js: O que é, estrutura e por que você deve aprender sobre ele AGORA!

O que é Vue.js? Apelidado de framework “progressivo”, o Vue.js (site oficial aqui) é mais notável por sua filosofia de design particular, que centraliza a adoção incremental em relação ao processo de desenvolvimento de software. Apesar de seu apelido, o Vue.js não é exatamente preenchido com recursos após recursos. Na verdade, o Vue.js oferece o mínimo do que você esperaria de uma estrutura JavaScript.

Em um mundo cheio de complexidades e avanços tecnológicos além da sua imaginação, às vezes ser básico é uma coisa boa. Projetado por um ex-funcionário do Google. Evan You, o Vue.js é um framework apenas para esse propósito.

Leia Também:
Melhores plugins de WhatsApp
O que são os MegaMenus em WordPress
Melhores práticas para trabalhar com WordPress
Plugins Obrigatórios para WordPress
Como melhorar a segurança do seu site
Melhores Plugins para Woocommerce
Woocommerce: melhores temas

Os aplicativos Vue.js podem começar pequenos e crescer progressivamente, maiores e melhores, enquanto outro framework tornaria essa tarefa cada vez mais complexa por padrão. Vamos falar mais sobre o Vue.js e como ele funciona, e, se você tiver alguma dúvida, é só deixar aí nos comentários.

O que é Vue.js?

O Vue.js é uma estrutura JavaScript para criar interfaces de usuário (UIs) e aplicativos de página única (SPAs). E assim como os melhores deles, o Vue.js é de código aberto. Ele utiliza um padrão de arquitetura model-view-viewmodel (MVVM). Projetado por Evan You e lançado em 2014, o framework é uma resposta direta ao tempo que Evan passou trabalhando com AngularJS no Google. Ele pegou os pedaços que ele gostava do AngularJS para criar uma estrutura totalmente nova, mas notavelmente leve.

A arquitetura MVVM permite que a lógica de negócios, ou modelo, seja diferenciada da interface gráfica do usuário, ou visualização. Na verdade, a distinção fornece um padrão intencionalmente intuitivo para desenvolvedores front-end e back-end trabalharem com ele. O view model é a estrutura que mantém essas duas partes separadas, agindo como uma ligação.

Além disso, o Vue.js possui uma biblioteca principal que se concentra apenas na camada de visualização. Qualquer funcionalidade adicional deve ser obtida usando as bibliotecas de suporte do Vue.js. Mas essa ferramenta não é embutido, daí o adjetivo “progressivo”. Mas a característica mais marcante do Vue.js são suas diretivas. As diretivas são atributos HTML que permitem aos desenvolvedores estender o HTML, uma tecnologia fundamental de páginas da Web que determina a estrutura do conteúdo da página da Web.

As vantagens do Vue.js

Mas, o que é exatamente o Vue.js? O Vue.js é mais do que apenas a soma de suas partes. Embora seja leve e intuitivo com a vantagem adicional de extensa funcionalidade HTML, há ainda mais vantagens que descrevem o que é o Vue.js e como ele pode ser usado efetivamente em seus projetos e no seu aprendizado de programação e codificação (se quiser saber mais sobre isso, temos uma dica especial aqui).

1. Simples para começar

Além de progressivo, o Vue.js também é chamado de “incrementalmente adotável”. Isso significa que o Vue.js e os aplicativos que o utilizam são projetados com simplicidade desde o início. A vantagem aqui é que é fácil começar, mas pode ficar complexo se você sentir necessidade. A biblioteca principal do Vue.js também é baseada em CSS, HTML e JavaScript — os ingredientes essenciais para qualquer grande projeto de desenvolvimento web.

2. Grandes Bibliotecas Oficiais

Os recursos que você desejará ter para funcionalidades adicionais no Vue.js são cobertos pelas bibliotecas oficiais do framework. Depois de configurar o básico, é provável que o roteamento e o gerenciamento de estado sejam suas maiores preocupações. O roteamento é o mecanismo que orienta as solicitações HTTP para o código que as trata. O gerenciamento de estado é a manipulação de controles de interface do usuário, como campos de texto e botões OK, de um estado para outro. Vue Router e Vuex são as respectivas bibliotecas Vue.js para roteamento e gerenciamento de estado.

3. Renderização rápida

A natureza leve do Vue.js — seu tamanho de pacote sendo de apenas 21 KBs — o torna mais rápido que seus concorrentes. Seu DOM virtual, em particular, acelera a renderização. Para referência, um modelo de objeto de documento (DOM) é uma interface de programação de aplicativos (API) para HTML e XML, modelando como o texto é estruturado. Um DOM virtual é uma representação da coisa real, permitindo que as alterações sejam sincronizadas. Sincronizar o DOM virtual é muito mais eficiente do que atualizar o DOM real, o que diminui o desempenho.

4. Curva de Aprendizagem Fácil

Aprender Vue.js não requer muita experiência quando se trata de bibliotecas e variações de JavaScript. Não. O CSS clássico, HTML e JavaScript funcionam bem aqui. Confie em editores de código populares como Visual Studio e Atom se você quiser tornar a codificação em Vue.js ainda mais fácil do que já é. Se você quiser aprender de verdade como trabalhar com essas linguagens de programação, basta clicar no link e começar a desenvolver agora.

5. Comunidade Colaborativa

Como a maioria das linguagens e frameworks de código aberto, o Vue.js tem uma grande comunidade dedicada e de suporte. Junto com um bate-papo e fórum do Discord, há mais de 72.000 perguntas marcadas como ‘vue.js’ no Stack Overflow. Existem mais de 132.000 membros do Github usando Vue.js.

Quais são os contras do Vue.js?

Por todas as suas vantagens, existem razões para não usar o Vue.js. Isso é de se esperar, mas ainda é importante fazer um balanço dos bons e dos ruins ao escolher novas tecnologias para o seu negócio.

1. Muito flexível

Curiosamente, a reclamação mais comum sobre o Vue.js é que ele é muito flexível, ou, pelo menos, mais flexível do que o necessário. Como o Vue.js oferece aos desenvolvedores a oportunidade de realmente começar do zero, o ganho imediato é mais flexibilidade para a implementação de novos recursos. A desvantagem, por outro lado, é que as coisas podem ficar mais complicadas à medida que erros e irregularidades começam a evoluir com projetos maiores.

2. Muito limitado

Mesmo que o ecossistema para Vue.js seja decentemente expansivo, incluindo suas bibliotecas e comunidades oficiais, comparando o Vue.js com React, por exemplo ou AngularJS, você notará algumas diferenças gritantes. A diferença mais preocupante é que o Vue.js simplesmente não possui tantos plugins ou componentes quanto outros frameworks do gênero. Sem dúvida, esta é uma grande desvantagem para o Vue.js.

3. Muito novo

Por muitas razões, a modernidade do Vue.js não é tão vantajosa quanto parece. A comunidade, por exemplo, ainda é pequena. O Vue.js também foi desenvolvido por autores chineses, portanto, muitos de seus projetos relacionados são difíceis de entender para falantes de inglês. E levará algum tempo até que almas de bom coração estejam dispostas a contribuir para uma tradução completa.

Para que serve o Vue.js?

O JavaScript, em geral, é melhor usado para desenvolvimento web, mas o Vue.js é aplicado apropriadamente para muitos propósitos. Abaixo estão alguns exemplos de Vue.js mostrando exatamente como o framework pode ser usado.

1. Protótipos

Um protótipo em desenvolvimento web é uma maquete do seu design web que pode demonstrar como o site funcionará antes de você realmente construí-lo e lançá-lo. Vue.js foi projetado para prototipagem. Na verdade, a inspiração inicial de Evan You veio de trabalhar em protótipos dentro de um navegador no Google. Frustrado com o AngularJS, ele criou uma alternativa.

2. Projetos de IU

Como o Vue.js pode ser utilizado apenas com HTML, CSS e JavaScript padrão, criar um projeto de UI de estoque no Vue.js é muito fácil. Outros recursos do Vue.js, como sua pequena curva de aprendizado e renderização rápida, também ajudam muito.

3. Aplicativos existentes

O Vue.js pode até ser um ótimo recurso para adicionar funcionalidade a aplicativos existentes. Ele é pequeno e depende de JavaScript, portanto deve ser bastante fácil integrá-lo a qualquer projeto JavaScript pré-existente. Sem mencionar que o Vue.js é compatível com muitas tecnologias de back-end, como Laravel do PHP, Express.js, Django do Python e Ruby on Rails.

4. Desenvolvimento de aplicativos móveis

Não há suporte nativo para o desenvolvimento de aplicativos móveis Vue.js. Mas existem vários projetos que facilitarão seu uso independentemente. Capacitor é um projeto creditado ao Ionic, um kit de desenvolvimento de software (SDK) para desenvolvimento móvel multiplataforma. Use isso com o Vue.js para criar aplicativos iOS e Android nativos ou aplicativos da Web progressivos (PWAs).

Ou você pode optar por usar o Native Script, que alimenta aplicativos nativos de plataforma cruzada. Você pode usar isso com o Vue.js e depender da linguagem Java Script em todo o seu projeto de desenvolvimento.

5. Aplicativos de página única (SPAs)

A maneira mais fácil de explicar aplicativos de página única é visualizá-los como páginas da Web que não precisam ser atualizadas. Por isso, eles se parecem muito com aplicativos móveis. O pano de fundo desse fenômeno envolve reescrever dinamicamente a página da Web permanente com novos dados do servidor da Web, em vez de recarregar páginas inteiramente novas. De certa forma, este é o melhor uso para Vue.js. Os SPAs simplificam as coisas, assim como o Vue.js.

Como estruturar meu projeto Vue.js

Embora o vue.js seja, por definição, algo muito simples e fácil de aprender e progride rapidamente, você ter uma boa estrutura para o seu projeto facilita muito a sua vida e a vida e quem for mexer no seu projeto. Mas, qual é a melhor prática para fazê-lo? Onde e como devo colocar meus arquivos para evitar confusão no projeto? Esta é a vida de muita gente que trabalha com o vue.js. Vamos falar com os desenvolvedores que começaram a aprender Vue.js ou também com os veteranos que podem ter uma boa ideia de como organizar ou melhorar a organização de suas pastas. Vamos começar de novo instalando um novo projeto usando Vue CLI.

vue create meu-primeiro-app

Após a instalação você pode ver a próxima estrutura de pastas. Essa estrutura varia dependendo das opções que você selecionou no Vue CLI, neste projeto todas as opções possíveis foram escolhidas.

public
|-img
  |--icons
|-favicon.ico
|-index.html
|-robots.txt
src
|-assets
  |-logo.png
|-components
  |-HelloWorld.vue
|-router
  |-index.ts
|-store
  |-index.ts
|-views
  |-About.vue
  |-Home.vue
|-App.vue
|-main.ts
|-registerServiceWorkers.ts
|-shims-vue.d.ts
tests
|-e2e
|-unit
.browserslistrc
.eslintrc.js
.gitignore
babel.config.js
cypress.json
jest.config.js
package.json
package-lock.json
README.md
tsconfig.json

É uma estrutura bastante padrão, mas não é adequada para aplicações médias ou grandes. Vamos nos concentrar na pasta src, mas antes de continuarmos, vamos dar uma olhada rápida em outras pastas. A pasta public será usada se você precisar:

• Um file com um nome especial na saída da compilação
• Uma reference dinâmica para imagens
• if a biblioteca for incompatível com o Webpack

Mais informações sobre como usar a pasta public você pode encontrar aqui.

• A pasta tests/e2e é para testes de ponta a ponta.
• A pasta tests/unit é para testes unitários.

Estrutura de pastas de origem

Como vamos começar a estruturar nosso novo projeto e a pasta src. Aqui uma estrutura base que pode ser usada em praticamente qualquer projeto:

src
--assets
--common
--layouts
--middlewares
--modules
--plugins
--router
--services
--static
--store
--views

Vamos detalhar todas as pastas uma a uma e entender por que precisamos dela.

Assets

Neste diretório, vamos armazenar todos os arquivos de ativos. Aqui queremos salvar fontes, ícones, imagens, estilos etc.

Common

Esta pasta será usada para salvar arquivos comuns. Normalmente, ela pode ser separado em várias pastas internas (components, mixins, directives e etc) ou arquivos únicos (functions.ts, helpers.ts, constants.ts e config.tse) e outros. A principal razão para colocar um arquivo nesta pasta é usá-lo em vários lugares. Por exemplo: dentro de src/common/components você pode armazenar Button.vue – o componente compartilhado, usado em todo o aplicativo. Em helpers.ts você pode escrever uma função comum para usá-la em vários lugares.

Layouts

Você pode salvar seus layouts de aplicativo neste diretório. Por exemplo: AppLayout.vue.

Middlewares

Este diretório funciona de perto com o router.vue. Você pode armazenar seus protetores de navegação dentro dessa pasta. Aqui está um pequeno exemplo de um único middleware:

//
export default function checkAuth(next, isAuthenticated) {
if (isAuthenticated) {
next('/')
} else {
next('/login');
}}

e use-o dentro do router vue

//
import Router from 'vue-router'
import checkAuth from '../middlewares/checkAuth.js'
const isAuthenticated = true
const router = new Router({
routes: [],
mode: 'history'
})
router.beforeEach((to, from, next) => {
checkAuth(next, isAuthenticated)
});

Modules

Este é o núcleo da nossa aplicação. Aqui armazenamos todos os nossos módulos — partes separadas logicamente de nosso aplicativo. Dentro de cada módulo é recomendado criar:

• uma pasta de componentes internos onde você pode salvar seus componentes vue;
• pasta de testes;
• store.ts ou store directory, onde você mantém seu módulo store;

Por exemplo, este é o exemplo de um módulo orders, onde você armazena todos os componentes relacionados a pedidos em seu aplicativo: lista de pedidos, detalhes do pedido, etc. Módulo de loja de pedidos vuex. Arquivos relacionados adicionais. Poderia parecer:

src
--modules
----orders
------__tests__
------components
--------OrdersList.vue
--------OrderDetails.vue
------store
--------actions.ts
--------getters.ts
--------mutations.ts
--------state.ts
------helpers.ts
------types.ts

Plugins

Nesta pasta você pode criar e conectar todos os seus plugins. Aqui está um exemplo de conexão de plugin no Vue 2

//
import MyPlugin from './myPlugin.ts'
Vue.use(MyPlugin, { someOption: true })

No Vue 3 você conectará seu plugin em main.ts. Mas você ainda pode criar seus plugins dentro da pasta de plugins. Leia mais sobre plugins aqui.

Services

Esta pasta é necessária para armazenar seus serviços. Por exemplo, você pode criar e salvar um serviço de conexões de API, serviço de gerenciamento local Storage, etc.

Static

Normalmente, você não precisa dessa pasta. Ele pode ser usado para salvar alguns dados fictícios.

Router

Dentro deste diretório você pode armazenar todos os arquivos relacionados ao vue-router. Pode ser apenas index.ts com o router e routes em um só lugar (neste caso, provavelmente é uma boa ideia armazenar esse arquivo na src root).

Store

Este é o diretório de armazenamento do vuex onde você pode salvar todos os arquivos relacionados ao vuex. Como você deseja separar seus módulos vuex, nesta pasta você deve armazenar o estado root, actions, mutations e getters e conectar automaticamente todos os módulos vuex do diretório modules.

Views

Esta é a segunda pasta mais importante em nosso aplicativo. Aqui armazenamos todos os pontos de entrada para rotas de aplicativos. Por exemplo, em seu aplicativo você pode ter /home/about/ordersrotas. Respectivamente, na pasta views você deve ter Home.vue, About.vue e Orders.vue.

Vejo alguns prós para separá-los:

• estruturas de arquivos mais claras
• permitem que você entenda rapidamente quais rotas você tem no aplicativo
• fácil de entender qual arquivo é root na página e onde ele começa a funcionar

Então aqui temos algumas formas de se separar e organizar em pastas. Claro, são apenas sugestões, e você pode usar todas elas, apenas uma parte ou não.

Quais empresas estão usando o Vue.js?

De acordo com o Stack Share, um recurso online em ascensão que compartilha as ferramentas de software de milhares de empresas, o Vue.js é um recurso confiável nas pilhas de tecnologia de várias grandes empresas. Das mais de 3.000 empresas listadas como parte desses dados para o Vue.js, aqui estão algumas das empresas mais populares que usam o Vue.js:

Trustpilot

O site de reviews Trustpilot é um pouco como o Yelp, mas mais diversificado na execução. Você pode ir ao Yelp para ver a classificação de um restaurante local, mas o Trustpilot lhe dirá se um negócio é mesmo autêntico em primeiro lugar. Para ser claro, o Trustpilot é bastante investigativo.

Embora a plataforma venha com um preço, a empresa faz um grande esforço para garantir que as avaliações dos usuários – sejam elas de uma loja de varejo ou de uma concessionária de carros – sejam sinceras e, da mesma forma, as empresas devem atender ao mesmo padrão.

Observe que a Trustpilot também tem alcance global. E apesar de sua popularidade, o Trustpilot ainda usa Vue.js para a interface do usuário das páginas de seus usuários, demonstrando como o Vue.js pode realmente ser escalável.

Trivago

O Trivago é um site de viagens para planejamento de viagens. Por meio da plataforma, os usuários podem reservar hotéis por meio de uma interface interativa e responsiva.

Embora o Trivago use principalmente React, a equipe de desenvolvedores do Trivago confirmou que eles também usam Vue.js!

Accenture

Você pode nunca ter ouvido falar da Accenture, mas está indo muito bem da mesma forma. A Accenture é uma empresa multinacional da Fortune 500 que oferece serviços de consultoria na área de negócios e tecnologia. A empresa parece usar um grande conjunto de tecnologias de front-end – AngularJS, React e, naturalmente, a Accenture é uma das principais empresas que usam Vue.js.

Statista

Statista torna mais fácil para o usuário comum da Internet encontrar dados de consumidores e mercado sem navegar em uma dúzia de artigos de pesquisa diferentes que parecem nunca ter a resposta que você está procurando. Com efeito, o Statista pode ser um trunfo utilitário para curiosos ou para pesquisadores de nível profissional. O site é basicamente um vasto banco de dados online, e você pode acessar o front-end de todos esses dados graças ao uso do Vue.js pelo Statista.

Devo usar o Vue.js no meu site?

Em termos leigos, o Vue.js é um framework minúsculo com um impacto poderoso. Para aqueles que acham mais fácil trabalhar do zero, o Vue.js oferece essa conveniência. As outras vantagens do framework são sua velocidade, simplicidade e suporte tanto de suas bibliotecas quanto de sua comunidade.

A visualização é a parte mais essencial de tudo o que ocorre dentro do sistema, e todas as informações só são validadas se interagirem com as visualizações corretamente. Criar apenas uma única visualização é bastante básico, e aqui reside a principal vantagem e desejo de usar o VueJS – a simplicidade e a baixa barreira de entrada. Tudo o que você precisa fazer é carregar a interface e adicionar Java Script para começar.

Os dados são então enviados diretamente para a visualização usando uma sintaxe simples, onde o VueJS renderiza automaticamente os elementos sem codificação – uma instância do sistema pode então ser usada para a renderização do elemento. A ferramenta permite a modificação de partes do código mantendo as informações no objeto de dados enquanto as atualizações afetam outras partes vinculadas em tempo real.

Analisar a variedade de aplicativos Vue.js em vários sites deve aprimorar sua compreensão da estrutura. Mas implementar o Vue.js em sua própria tecnologia exigirá uma compreensão ainda mais profunda dele, então usar ou não o framework no seu site ou projeto depende principalmente do quanto você conhece de linguagens e códigos de programação.

Aprender sobre desenvolvimento web e aplicar isso no seu projeto pode ser a melhor alternativa para que você escolha como ou onde usar um recurso. Se você quiser saber exatamente como descobrir isso, então o melhor é começar a se especializar. Temos dicas que vão ajudar você a fazer isso no site ou neste link que poderá ajudá-lo a tornar-se um programador profissional rapidamente.

FAQ Rápido

Agora, fale conosco: Você usa o Vue.js? Já conhecia esse framework? Tem alguma sugestão para os leitores? Aproveite também e fale conosco nos comentários e aproveite para ler mais sobre desenvolvimento no nosso site.