Tweet
Tweet

Slide 1

Slide 1 text

Mas afinal, do que se trata esse tal SPA? Vinícius Bail Alonso

Slide 2

Slide 2 text

Quem sou eu ● Desenvolvedor Full Stack ● Formado em Sistemas para Internet (UTFPR) ● Membro das comunidades PHP-PR, GURU-PR e Pato Livre

Slide 3

Slide 3 text

Contato @viniciusalonso @alonsoemacao [email protected]

Slide 4

Slide 4 text

Nós somos Softfocus!

Slide 5

Slide 5 text

Adivinha de onde somos?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Comunidades

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Motivação

Slide 10

Slide 10 text

Discutir problemas antes de tecnologias

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Multi-Page Application

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Single Page Application

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Características

Slide 18

Slide 18 text

Tudo começa com uma página HTML

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Comunicação em Ajax

Slide 21

Slide 21 text

Padronização http://jsonapi.org/

Slide 22

Slide 22 text

Não temos refresh

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Desacoplamento backend e frontend

Slide 26

Slide 26 text

● Frontend ○ Organizar componentes do JS ○ Cuidar da apresentação dos dados ● Backend ○ Regras de negócios ○ Ações no banco de dados ○ API

Slide 27

Slide 27 text

Roteamento no client-side

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

SEO

Slide 30

Slide 30 text

SEO http://www.blog.com/#/2017-29-10/meu-post-no-blog

Slide 31

Slide 31 text

SEO http://www.blog.com/#/2017-29-10/meu-post-no-blog

Slide 32

Slide 32 text

Comparando

Slide 33

Slide 33 text

SPA MPA Desacoplamento Frontend SEO é simples SEO é um problema A página sempre recarrega Usabilidade

Slide 34

Slide 34 text

Quando devo usar SPA?

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

Preciso de SPA para não fazer refresh da página?

Slide 37

Slide 37 text

https://github.com/turbolinks/turbolinks

Slide 38

Slide 38 text

Conclusão

Slide 39

Slide 39 text

Dúvidas?

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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