Este documento apresenta os organizadores e apoiadores de um meetup sobre Vue.js. Apresenta também conceitos de single page applications e características principais do framework Vue.js, como ciclo de vida, router, armazenamento e vantagens no uso de frameworks.

1. Meetup Vue.js

2. ORGANIZAÇÃO

3. Patrick Monteiro
● Engenheiro da Computação
● Especialista em Desenvolvimento Web
● Arquiteto de Software Distribuído com foco em Front-end
● Certificado UX-PM level 1
Iago Cavalcante
● Engenheiro da Computação
● Especialista em Desenvolvimento Web
● Arquiteto de Software Distribuído
Amir Zahlan
● Engenheiro da Computação
● Especialista em Desenvolvimento Web
● Mestre em Neurociências

4. APOIO

5. Rômulo Pinheiro
● Coordenador dos cursos de Graduação em Informática na Unama
● Bacharel em Ciência da Computação
● Mestrado em Ciência da Computação
● Gerente dos Laboratórios de Informática
● Membro fundador do laboratório de Aplicações Computacionais
da Amazônia

6. INTRODUÇÃO

7. Single Page Applications
É uma abordagem moderna de construção de aplicações Web.
A aplicação interage com o servidor por requisições AJAX trocando
dados em JSON ou XML.

8. Single Page Applications
Cuidado! Não leve ao pé da letra....

9. Ciclo de vida de páginas tradicionais

10. Ciclo de vida de Single Page Application

11. Características Principais
● Cliente-side
○ Todos os processos são executados no lado do cliente;
○ A comunicação com o back-end é feita através de chamadas
AJAX para end-points de uma API
○ Funciona independente do back-end, seja ele desenvolvido
em java, node, php, ruby, python, go, .NET

12. SPA - Características Principais
● Load
○ geralmente é feito apenas no primeiro acesso
○ carregamento de assets como css, javascript, imagens, etc
○ em grandes aplicações é aconselhável aplicar técnicas de
carregamento preguiçoso

13. SPA - Características Principais
● Router
○ peça importantíssima nas SPA’s
○ é quem define/constrói a tela para o usuário
○ mesmo após um refresh permite que a página volte(quase)
ao seu estado anterior
○ geralmente ele muda e analise valores após o # na barra de
endereços(com o HTML5 não é mais necessário)

14. SPA - Características Principais
● Armazenamento
○ em SPA’s é comum salvar dados localmente no navegador
do usuário
○ geralmente é armazenado um token

15. SPA - Estratégias Importantes
● Otimização do conteúdo e redução de requisições
○ Minificação e ofuscação(CSS, Javascript)

16. SPA - Dificuldades
● Histórico de navegação(back and forward)
● Alterações pendentes de salvamento
● Impede o Search Engine Optimization(SEO)
● Estatísticas do site
● Sobrecarga do cliente
● Problemas de segurança

17. SPA - Vantagens no uso de Frameworks
● Eficiência
○ projetos que costumavam levar meses e centenas de linhas
de código, agora são alcançados muito mais rápido com
padrões e funções bem estruturadas
● Segurança
○ as principais estruturas de javascript tem acordos de
segurança firme e são suportadas por grandes comunidades

18. SPA - Vantagens no uso de Frameworks
● Custo
○ a maior parte dos frameworks são de código aberto e
gratuitos

19. O Vue.js

20. Criador
Evan You
Trabalhou como Prototipador UX/UI na Google e
fez parte de projetos como Google IOS, Google Glass…
Desenvolvedor no projeto Meteor

21. O que é Vue.js ?
Segundo a documentação oficial:
“É um framework progressivo para a construção de interfaces de
usuário.”

22. Framework x Biblioteca

23. O que é Vue.js ?
● A biblioteca principal é focada exclusivamente na camada visual,
facilitando a integração com outras bibliotecas ou projetos
existentes
● Por outro lado, Vue também é perfeitamente capaz de dar poder
a sofisticadas Single-Page Applications quando usado em
conjunto com ferramentas modernas de bibliotecas de apoio

24. Como usar o Vue.js ?
https://jsfiddle.net/ErickPetru/39ocp6er/
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

25. Como usar o Vue.js ?
Última versão estável: 2.5.16
Vue-Cli - conjunto de funcionalidades e configurações prontas
Necessário Node e NPM

26. Empresas usando Vue.js
Xiaomi, Alibaba, WizzAir, Euronews, Grammarly, Gitlab e Laracasts,
Adobe, Behance, Codeship, Reuters.