Mas afinal, do que se trata esse tal SPA?

Palestra aprensentada na trilha web no The Developers Conference (TDC) 2017 em Porto Alegre.

Transcript

1. Mas afinal, do que se trata esse tal SPA? Vinícius Bail Alonso
2. Quem sou eu • Desenvolvedor Full Stack • Formado em Sistemas para Internet (UTFPR) • Membro das comunidades PHP-PR, GURU-PR e Pato Livre
3. Contato @viniciusalonso @alonsoemacao vba321@hotmail.com
4. Nós somos Softfocus!
5. Adivinha de onde somos?
7. Comunidades
9. Motivação
10. Discutir problemas antes de tecnologias
12. Multi-Page Application
14. Single Page Application
16. Single Page Application • Funciona em uma página única • Divide as responsabilidades entre: ◦ Cliente ◦ Servidor • Tenta tornar a experiência do usuário mais parecida com o uso de um programa desktop
17. Características
18. Tudo começa com uma página HTML
20. Comunicação em Ajax
21. Padronização http://jsonapi.org/
22. Não temos refresh
25. Desacoplamento backend e frontend
26. • Frontend ◦ Organizar componentes do JS ◦ Cuidar da apresentação dos dados • Backend ◦ Regras de negócios ◦ Ações no banco de dados ◦ API
27. Roteamento no client-side
29. SEO
30. SEO http://www.blog.com/#/2017-29-10/meu-post-no-blog
31. SEO http://www.blog.com/#/2017-29-10/meu-post-no-blog
32. Comparando
33. SPA MPA Desacoplamento Frontend SEO é simples SEO é um problema A página sempre recarrega Usabilidade
34. Quando devo usar SPA?
35. SPA O usuário passará muito tempo? (ex: sistema de contabilidade) A aplicação depende de SEO? (blog, e-commerce) Possui muito Javascript? (frameworks ajudam na organização) O servidor deverá se comunicar da mesma forma com diferentes tipos de clientes? (brower, app mobile)
36. Preciso de SPA para não fazer refresh da página?
37. https://github.com/turbolinks/turbolinks
38. Conclusão
39. Dúvidas?
41. Referências • https://www.codeschool.com/beginners-guide-to-web-development/single- page-applications • https://www.youtube.com/watch?v=F_BYg2QGsC0&list=LLd_50AreJiQvwoh SFlvH99w&index=6 • https://medium.com/@NeotericEU/single-page-application-vs-multiple-page -application-2591588efe58 • https://blog.codecasts.com.br/single-page-applications-onde-vivem-e-o-que -comem-4fc9a44f3de • SPA Design and Architecture: Understanding Single Page Web Applications