Hamilton Gabriel

/Gabriel19016958

/hamiltongabriel

/@gabrielzinho.gabriel2

Desenvolvedor de Aplicações Front End @ TDR Informática

Graduando Ciência da Computação

Participo do grupo Vue.JS
Telegram: t.me/vuejsbrasil

Postagem de documentos

Medium @ phpzm.rocks/about

Vue.js, um framework progressivo

Nascido no final de 2013, Vue.js é classificado

Como um Framework Progressivo para a

criação de interfaces baseadas em

Componentes e desenvolvimento de SPA`s.

Com Vue.js construímos aplicações altamente escaláveis independente do tipo e nível do projeto.

O que preciso saber sobre o Vue?

• Biblioteca que tem como Objetivo auxiliar na construção de interfaces na WEB
  • ​
• Implementa conceitos avançados de reatividade.
  • ​
• Trabalha com DOM VIRTUAL. Acessar a memória se torna mais rápido que acessar o DOM REAL.

Por que usar o VueJS ?

• Criar Components com VueJS é muito mais simples, tudo possui seu lugar de maneira clara.
• VueJS é extremamente flexível, você está livre pra criar seu projeto da maneira que quiser.
  Pode ser usado desde projetos pequenos a projetos maiores e mais complexos.
• VueJS possui uma performance excelente e se apresenta como uma das melhores opções do mercado.
• VueJS tem boas práticas estabelecidas e amplamente aceitas dentro da comunidade.

• VueJs juntamente com o Quasar disponibiliza uma plataforma tripla, podendo trabalhar com o mesmo código em 3 ambientes, sendo ele Web, Mobile e Desktop com Electron.
• Documentação mantida pela Comunidade do Vue, bem detalhada, abrangente e bem clara.
• VueJS pode ser utilizado em qualquer tipo de projeto e Tecnologia.
  ... Python, Ruby, PHP, Node, Java Go ou qualquer outra linguagem.

Continuação....

O Vue.js Framework trabalha com:

• Ligação de Dados bidirecional (two-way-data-binding)

• Programação Reativa
• Eventos
• Criação de Componentes

Também podemos utiliza-lo com outras tecnologias:

• JSX
• TypeScript

Algumas das bibliotecas mais usadas:

• Vue-Router:  Mapeamento de Rotas
•  Vuex: Gerenciamento de estado
•  Vue-CLI: Criação de Projetos Rápidos
•  Axios: Gerenciador de requests

O que é um Componente.

• É um código independente, com tamanho pequeno ou grande.

• Pequeno como um botão
• Grande como um formulário

O que contem dentro de um componente?

• Estrutura de um Componente.
• Dados
• Seu próprio JavaScript
• As vezes seus próprios estilos.
• Pode conter outros componentes.

• Se comunica entre componentes

• Pai e Filho (Props)
• Filho e Pai ($emit)

O que são Diretivas?

É uma maneira de exibir dados na página. O HTML normal é embelezado usando atributos especiais - conhecidos como diretivas - que usamos para dizer ao Vue o que queremos que aconteça e o que deve acontecer com os dados que fornecemos.

Tipos de diretivas.

• V-HTML
• V-SHOW
• V-IF
• V-ELSE
• V-ELSE-IF
• V-FOR
• V-ON
• V-BIND
• V-MODEL
• V-ONCE

• Não recomendado devido a vulnerabilidade
• Mostrar ou não o Elemento
• Gerador de Listas, percorre arrays.
• Ouve eventos de filho pra pai.
• Ligação de atributo JavaScript a um Html.
• Liga os dados de entrada a propriedade correta.
• Altera os dados apenas uma vez.

V-IF  Versus V-SHOW

V-IF

V-SHOW

V-IF: Ocultar coisas que ainda não foram carregadas. Porém perde no desempenho por gerar a árvore DOM por baixo.

V-SHOW: Alterar algo com frequência.

Primeira experiencia desenvolvendo um componente

• Componente Hello World!

Primeiro problema encontrado

• Atribuir um Dado dentro de outro Dado
• Não atribui valor e não emite erro no console.

Solução do Primeiro problema.

• Primeiro Passo
  • Fazer o erro ser emitido no console.
    • Usar Arrow Function (não reconhece o this no data)

• Segundo passo.
  • ​Ciclo de Vida

Adicionando interatividade com Diretivas Básicas

• O que é VUE-DEV-TOOLS e VUE-REMOTE-DEVTOOLS
  • Depurador Oficial da ferramenta. auxiliando na Depuração do Código.
    • ​Para instalar.
      • ​Mozilla: https:/​/​addons.​mozilla.​org/​en-​US/firefox/​addon/​vue-​js-​devtools/​?​src=​ss
      • Chrome: https:/​/​chrome.​google.​com/​webstore/search/​vue.js devtools

VUE-DEV-TOOLS em ação.

Problemas com comunicações entre componentes.

 Disparando o Evento

Recebendo o Evento.

Continuação ...

Ex: Você tem um megafone gritando em uma multidão o nome "Hamilton"

Quantos "Hamilton" podem ouvir e olhar para o eventbus? Varias.

Solução

• Vuex ou Comunicação entre componente Pai e Filho
  • ​Vuex - Gerenciamento de Estado​
  • Pai e Filho (props. $emit)

Vuex

• Store
  • Onde os dados ficam armazenados
• ​Ação
  • Faz uma mutação para alterar os dados da Store
• ​Mutação
  • ​Evento que altera os dados da Store
• ​Getters
  • ​Observa os dados da Store para fornece-los​

Fluxo Vuex

Comunicação entre pai e filho

Filho enviando dados

Pai recebendo dados

Pai enviando props

Filho recebendo

Single Page Application

Aplicativos de Página única

O que são

• Aplicação 100% Browser.

  • Servidor

    • Necessário apenas para acessar uma URL

    • Não necessita mais enviar HTML

• Único arquivo HTML

• Os dados são obtidos pelo Ajax

• Depende de um Web Service

• Dependem totalmente do JavaScript por viver no browser

• Reatividade

O que precisa pra desenvolver um SPA ?

• Grande conhecimento com JavaScript
• Conhecimento Ambiente Browser
  • Implementação de recursos JS
  • Polyfills - Transforma o JavaScript para suporte de navegador antigo
  • Debugger
• Gerenciamento de Estado
  • Manter o Estado da tela.

Por onde iniciar o desenvolvimento do SPA?

• Iniciaremos com um ecossistema de Andaime
  • VUE-CLI (VUE-CLIENTE)
• Necessita do NODE.JS => V-8  

Por que iniciar pelo VUE-CLI?

• Rico em recursos
  • Babel
  • TypeScript
  • ESLint
  • Pwa
  • Teste Unitários

• Roda em WebPack ou Browserify
  • Converte .vue para JS
  • Navegador passa a entender
• Atualização do projeto após alterações
• Não precisa configurar o ambiente