Single Page Applications (SPAs) são uma abordagem moderna para construção de aplicações web que interagem com servidores através de requisições AJAX, permitindo que todas as operações sejam executadas no lado do cliente. Elas apresentam características como carregamento eficiente, utilização de roteadores para navegação e armazenamento de dados localmente no navegador. Embora ofereçam vantagens em termos de eficiência e segurança, SPAs também enfrentam desafios arquiteturais, como SEO e histórico de navegação.

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

4. A evolução da
Web

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

12. Padrões de
Arquiteturas

13. Linha do Tempo das Arquiteturas
Fonte: https://www.slideshare.net/flashplatform/next-generation-of-frontend-architectures

14. Framework X Biblioteca

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

16. MVC - 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;

21. MVP - Model-View-Presenter

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;

24. MVVM - Model-View-ViewModel

25. MVVM - Model-View-ViewModel
Fonte: http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx

26. Single Page
Applications

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;