Single Page Application (SPA)

É fato que o negócio é cada vez dependente de TI. Organizações de alta performance incessantemente buscam agilidade para o seu negócio. Para atender a esta necessidade a TI inova, renova, inventa e reinventa - atualmente com práticas DevOps, métodos Ágeis de desenvolvimento, CI/CD, infraestruturas como código e "deploy contínuo". Para tanto, também pode ser preciso desenhar e aplicar arquituras de software também ágeis - de alto desempenho.

Nesta sessão vamos conversar sobre Arquitetura de Página única (Single-Page Application) para alto desempenho de sistemas e serviços que busca otimizar o uso de back-end e traz uma melhor experiência de uso flúido para o usuário.

Single Page Application ou "Aplicações de uma Página Só" são aplicações que carregam a página apenas uma vez e a partir disso passa a trabalhar com substituição dinâmica do fluxo de dados. Esse tipo de arquitetura atua na camada de visualização (view no modelo MVC) facilitando e auxiliando na separação de responsabilidade entre camadas de front-end e banck-end, facilita a criação de páginas dinâmicas e ajuda a aumentar o reaproveitamento das implementações de front-end usando Angular, Vue.JS, ReactJS entre outros.

Transcript

1. SPA Aplicação de Página Única Otimização de uso de recursos no back-end com uma fluída experiência de usuário
2. adriano_vieira adrianovieira adrianovieira adriano-svieira WAI? - Mineiro da Gema. - Desenvolvedor Líder de projetos open-source - TI com MSDOS/Turbo Pascal/Basic a AngularJS/Bootstrap, infraestrutura de grande porte a clusters em plataforma baixa, Desenvolvedor a gestão de equipes
3. agenda • Histography • SPA? • Arquitetura e tecnologias • Pontos fortes • Nem tudo é bônus • Demo?
4. Histography* Client-Server app Javascript 1995 JSON Standard ECMA-262 3rd Edition, 1999 AJAX XMLHttpRequest +98, 2002 SPA 2002 *Wikipedia Imagem: histography.io
5. SPA? “An SPA is an application delivered to the browser that doesn’t reload the page during use” Michael S. Mikowski and Josh C. Powell, 2013 “SPA is a web application or website that fits on a single web page with the goal of providing a more fluid user experience and a rich interface”. Fernando Monteiro, 2014
6. Arquitetura ”tradicional” Renderização de HTML, JS cosméticos Validações (auth*), Lógica de negócios, geração de HTML, MVC server-side Armazenagem e Busca de dados, Lógica de negócios front-end back-end database Adaptado de “Single Page Web Applications: JavaScript end-to-end”
7. Arquitetura SPA Renderização de HTML, JS cosméticos, Lógica de negócios JS, geração de HTML, MVC client-side Validações (auth*), API Armazenagem e Busca de dados front-end back-end database Adaptado de “Single Page Web Applications: JavaScript end-to-end”
8. SPA? imagens: SPA Design and Architecture: Understanding single-page web applications
9. SPA? json
10. Pontos fortes
11. Experiência do Usuário Fluidez - sem recarga de página - reduzido tráfego de dados Facilidade de uso em UI rica - frameworks client-side maduros Usabilidade - facilidade - satisfação - eficiência
12. Desempenho Apenas pequenas partes sofrem alterações Dados trafegados em menor quantidade Navegador web Menor quantidade de dados a renderizar Lógica de negócios - front-end trata “mesmo off-line”
13. Carga no back-end API - trata tráfego de dados somente Throughput - capacidade de entrega Stateless - microserviços, service-mesh Escalabilidade
14. Ferramentas para análise no front-end Firefox WebDeveloper tools
15. Ferramentas para análise no front-end Chrome/Chromium WebDeveloper tools
16. Ferramentas para análise no front-end extensão chrome/chromium
17. Facilidade de manutenção Deployment - Blue/Green - Canary API & cliente
18. Nem tudo são bônus
19. API generalistas x especialistas
20. MVx framework • Curva de aprendizado • Afinidade da equipe * Top Libraries + Tech to Learn in 2019 for Full Stack Developers http://link.oreilly.com/SM0S0r0MW0t0QFw0c003N7O • Front-end * – AngularJS – Ember.js – ExtJS – Knockout.js – Vue.js – React – Backbone.js Escolha o seu MVx: Journey Through The JavaScript MVC Jungle https://www.smashingmagazine.com/2012/07/journey-through-the-javascript-mvc-jungle
21. Testes Testes de integração complexos (CI)
22. Demonstração (ou exemplos)
23. exemplos Histography.io Google* Docs, Maps Tine20 Groupware System Submarino Azul
24. Fazer o menor esforço ou o suficiente potencialmente lhe leva a algum lugar. O melhor esforço vai lhe colocar em lugar que só você sentirá o prazer de estar lá.
25. exemplo Manami Ito https://youtu.be/DdY5FNMzq0Q
26. Perguntas?
27. Referências Livros • SPA Design and Architecture: Understanding single-page web applications, Emmit A. Scott Jr., 2015. • Single Page Web Applications: JavaScript end-to-end, Michael S. Mikowski and Josh C. Powell, 2013. • Learning Single-page Web Application Development, Fernando Monteiro, 2014 WWW - Single-page application https://en.wikipedia.org/wiki/Single-page_application - Top libraries and tech to learn in 2019 for full stack developers http://link.oreilly.com/SM0S0r0MW0t0QFw0c003N7O - Journey Through The JavaScript MVC Jungle https://www.smashingmagazine.com/2012/07/journey-through-th e-javascript-mvc-jungle
28. Contato Adriano Vieria adrianovieira.gitlab.io adriano_vieira adrianovieira adrianovieira adriano-svieira Keep C.A.L.M.S. and have fun