Afinal, o que são Single Page Applications
- 1. Afinal, o que são Single Page Applications Patrick Monteiro
- 2. Formação ● Engenharia da Computação pelo IESAM ● Especialização em Desenvolvimento de Sistemas Web pelo IESAM ● Especialização em Arquitetura de Software Distribuído pela PUC Minas
- 3. Experiência ● Analista em Desenvolvimento de Sistemas na W3AS ● Desenvolvedor Web na SOLUX TI ● Desenvolvedor Web no Consórcio Troncal Belém ● Estagiário na W3AS
- 5. A World Wide Web ● Significa “rede de alcance mundial”, também conhecida como Web ou WWW; ● é um sistema de documentos em hipermídia que são executados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras;
- 6. A World Wide Web ● Criada pelo britânico Tim Berners-Lee, com 3 ferramentas importantes: ○ um protocolo de transmissão de dados - HTTP; ○ um sistema de endereçamento próprio - URL; ○ uma linguagem de marcação, para transmitir documentos formatador através da rede - HTML;
- 7. A Evolução ● 1.0 - Basicamente uma plataforma para Leitura(HTML);
- 8. A Evolução ● 2.0 - Tanto Leitura quanto escrita eram características.
- 9. A Evolução 3.0 - Web Semântica
- 10. O crescimento
- 11. O crescimento
- 13. Linha do Tempo das Arquiteturas Fonte: https://www.slideshare.net/flashplatform/next-generation-of-frontend-architectures
- 15. MVC - Model-View-Controller Padrão arquitetural que divide a aplicação em três camadas com tipos de componentes distintos: ● Model ● View ● Controller
- 17. MVC - Model-View-Controller Algumas vantagens: ● Baixo acoplamento e alta coesão entre componentes; ● Reaproveitamento de código; ● Separação de responsabilidades; ● Facilita a divisão da equipe/tarefas ● Facilita na manutenção da aplicação; ● Escalabilidade;
- 18. MVC - Alguns Frameworks
- 19. MVP - Model-View-Presenter ● Criado nos anos 90 pela Taligent (IBM); ● Derivação do MVC ; ● Tem foco na apresentação; Características: ● Separação forte entre Apresentação e Gerenciamento de Dados; ● Simplificação dos testes unitários;
- 20. MVP - Model-View-Presenter ● Presenter ○ intermedia comunicação entre View e Model; ○ trata os dados apresentados na View; ● View ○ é passiva e se comunica apenas com o Presenter; ○ manipula eventos na interface e dispara o Presenter; ● Model ○ funciona apenas como um modelo de domínio;
- 22. MVVM - Model-View-ViewModel ● Criado por arquitetos de software da Microsoft; ● Derivado do MVP; Características: ● Conceitualmente idêntico ao MVP; ● Foco na implementação de aplicações para plataforma Windows Presentations Foundation(WPF) e Microsoft Silverlight;
- 23. MVVM - Model-View-ViewModel ● ViewModel ○ Atua como Model da View, mantendo o estado dos dados; ○ Não conhece a estrutura da View a qual está associada; ● View ○ Se comunica ao ViewModel por uma propriedade DataContext ● Model ○ Encapsula a lógica de negócios e os dados; ○ Não faz referência diretas à View ou à ViewModel;
- 25. MVVM - Model-View-ViewModel Fonte: http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx
- 27. Single Page Application ● É 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;
- 28. Single Page Application Não leve ao pé da letra !
- 29. Ciclo de vida de páginas tradicionais
- 30. Ciclo de vida de SPA
- 31. SPA - Características Principais ● CLIENT-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, pytho, go, .NET, ○ Facilita a migração de tecnologias;
- 32. SPA - Características Principais ● LOAD ○ muitas vezes é feito apenas 1 vez; ○ carregamento de assets como css, javascript, imagens, bootstrap; ○ em grandes aplicações é aconselhável aplicar a técnica de Lazy Loading;
- 33. SPA - Características Principais ● ROUTER ○ peça importantíssima no desenvolvimento de SPA’s; ○ é quem define/constrói tela para o usuário; ○ mesmo após um refresh permite que a página volte(quase) ao seu estado anterior; ○ não confundir com o router do back-end; ○ geralmente ele muda e analisa valores após o # na barra de enderreços(com o HTML5 não é mais necessário);
- 34. SPA - Características Principais ● ARMAZENAMENTO ○ nas SPA’s é comum salvar dados localmente no navegador do usuário; ○ geralmente é armazenado um token e outras informações de identificação do usuário; ○ é incomum usar cookies ou sessions para essas tarefas, sendo mais comum usar o localStorage;
- 35. SPA - Estratégias Importantes ● Otimização do conteúdo e redução de requisições; ○ Minificação e ofuscação (CSS, JavaScript); ● Manipulação do DOM(Virtual DOM);
- 36. SPA - Problemas na arquitetura ● 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;
- 37. SPA - Frameworks
- 38. SPA - Vantagens no uso de Frameworks ● Eficiência ○ projetos que costumavam levar meses e centenas de linhas de código agora podem ser 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 firmes e são suportadas por grandes comunidades;
- 39. SPA - Vantagens no uso de Frameworks ● Custo ○ a maior parte dos frameworks são de código aberto e gratuitos.
- 40. SPA - Complementos para um bom WorkFlow ● Custo ○ Babel, Browserify, Gulp, Grunt, WebPack, ESLint; ○ Ferramentas CLI agilizam um pouco o WorkFlow, mas não se deve depender totalmente delas;