Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Single Page Application (SPA)

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.

Adriano Vieira

January 22, 2019
Tweet

More Decks by Adriano Vieira

Other Decks in Technology

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. 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
  9. 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”
  10. Carga no back-end API - trata tráfego de dados somente

    Throughput - capacidade de entrega Stateless - microserviços, service-mesh Escalabilidade
  11. 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
  12. 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á.
  13. 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