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

Vue.JS Awesome

By hamiltongabriel

Vue.JS Awesome

  • 77
Loading comments...

More from hamiltongabriel