Transferir como PDF, PPTX
Meetup vue.js
- 1.
- 2.
- 3. Patrick Monteiro ● Engenheiroda 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.
- 5. Rômulo Pinheiro ● Coordenadordos 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.
- 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 vidade páginas tradicionais
- 10. Ciclo de vidade 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ísticasPrincipais ● 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ísticasPrincipais ● 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ísticasPrincipais ● Armazenamento ○ em SPA’s é comum salvar dados localmente no navegador do usuário ○ geralmente é armazenado um token
- 15. SPA - EstratégiasImportantes ● 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 - Vantagensno 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 - Vantagensno uso de Frameworks ● Custo ○ a maior parte dos frameworks são de código aberto e gratuitos
- 19.
- 20. Criador Evan You Trabalhou comoPrototipador 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.
- 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 oVue.js ? https://jsfiddle.net/ErickPetru/39ocp6er/ <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 25. Como usar oVue.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.