{"id":21444,"date":"2018-06-08T11:00:00","date_gmt":"2018-06-08T14:00:00","guid":{"rendered":"https:\/\/blog.locaweb.com.br\/?p=21444"},"modified":"2022-08-31T16:43:27","modified_gmt":"2022-08-31T19:43:27","slug":"o-que-e-single-page-application","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-single-page-application\/","title":{"rendered":"O que \u00e9 Single Page Application?"},"content":{"rendered":"
\n

Voc\u00ea sabe o que \u00e9 uma SPA (Single Page Application)? Sabe diferenciar de um site comum? Entende as vantagens e desvantagens? Sabe qual o melhor momento de usar? Se voc\u00ea n\u00e3o sabe, agora \u00e9 o momento de aprender.<\/em><\/p>\n

Basicamente uma aplica\u00e7\u00e3o SPA significa voc\u00ea codificar menos no server-side e mais no client-side, mas como isso? A aplica\u00e7\u00e3o estar\u00e1 quase toda no cliente, sendo que assim que o usu\u00e1rio acesso o site a aplica\u00e7\u00e3o e seus templates s\u00e3o armazenados no lado cliente, muito diferente da forma tradicional, onde o usu\u00e1rio visita v\u00e1rias p\u00e1ginas diferentes.<\/p>\n

As aplica\u00e7\u00f5es e os sites SPA, fazem uma transi\u00e7\u00e3o entre os templates carregados, sem reload de p\u00e1gina e sem que o usu\u00e1rio viaje de uma p\u00e1gina para outra.<\/p>\n

Antes de prosseguir vale a pena entender e diferenciar outros conceitos que confundem com SPA.<\/p>\n

Parallax<\/h2>\n

O efeito parallax utilizando em alguns site one page n\u00e3o \u00e9 Single Page Application, por qu\u00ea? Porque no parallax todo o conte\u00fado \u00e9 est\u00e1tico em uma \u00fanica p\u00e1gina e voc\u00ea acessa ele apenas “scrollando”, \u00a0pode usar \u00e2ncoras tamb\u00e9m, mas n\u00e3o muda o fato da \u00e2ncora apenas descer a p\u00e1gina.<\/p>\n

Infinite scroll<\/h2>\n

Infinite scroll (Scroll infinito), necessariamente n\u00e3o \u00e9 SPA. O Infinite Scroll \u00e9 uma t\u00e9cnica usada para reduzir o tempo de carregamento de uma p\u00e1gina. Conforme voc\u00ea vai “scrollando” ele vai carregando o conte\u00fado, voc\u00ea pode ver isso em lojas virtuais que n\u00e3o tem PA (at\u00e9 hoje nunca vi uma loja virtual<\/a> SPA)<\/p>\n

Pra entender melhor o motivo de usar e quando usar o SPA, eu estudei o assunto nas tr\u00eas \u00faltimas semanas, por que a minha ideia \u00e9 criar uma aplica\u00e7\u00e3o pessoal para trabalhar com SPA.<\/p>\n

Desenvolvi um sistema que hoje h\u00e1 por volta de 160 mil acessos por m\u00eas. Em algumas partes do sistema, devido ao volume de informa\u00e7\u00f5es, h\u00e1 uma demora para que a p\u00e1gina seja carregada totalmente (quando eu digo que demora um pouco, entenda que sou bastante paciente nessa parte devido ao fato de nunca ter tido acesso a uma banda larga de qualidade at\u00e9 junho de 2013) e por isso pensei no SPA, por ser uma maneira diferente de estruturar a aplica\u00e7\u00e3o.<\/p>\n

Antes de realmente come\u00e7ar a estudar fui atr\u00e1s de saber se realmente \u00e9 uma tend\u00eancia aplica\u00e7\u00f5es SPA e descobri os seguintes dados no Google:<\/p>\n

>><\/strong> Gr\u00e1fico Google Trends que busca pelos termos Model View Control e Single Page Application.<\/p>\n

\"trends-spa2\"
\n<\/a>
\n>><\/strong> Gr\u00e1fico do Google Trends que mostra e evolu\u00e7\u00e3o das pesquisas entre frameworks MVC e SPA.<\/p>\n

\"trends-spa\"<\/a><\/p>\n<\/div>\n

\n

Os dados comprovaram que as aplica\u00e7\u00f5es SPA est\u00e3o crescendo e devido a esses dados passei a olhar mais atentamente e pude perceber que muitas aplica\u00e7\u00f5es que usamos no nosso dia a dia s\u00e3o SPA: Gmail \u00e9 o mais famoso, mas tamb\u00e9m tem o Trello, Foursquare, Code School e Document Cloud. Com esse estudo tirei algumas conclus\u00f5es sobre as vantagens e desvantagens das SPA:<\/p>\n

Vantagens da Single Page Application<\/b><\/h2>\n

1. Melhor experi\u00eancia do usu\u00e1rio<\/b><\/h2>\n

O usu\u00e1rio tem uma experi\u00eancia melhor navegando no sistema, dando a impress\u00e3o at\u00e9 de que \u00e9 um sistema desktop, j\u00e1 que n\u00e3o possui refreshs na p\u00e1gina. Dependendo do sistema ele \u00e9 capaz de funcionar mesmo se o usu\u00e1rio perder a conex\u00e3o com a Internet. Aqui podemos tamb\u00e9m fazer uma compara\u00e7\u00e3o com apps mobile, j\u00e1 que os apps h\u00edbridos s\u00e3o SPA. O que faz com que o usu\u00e1rio que acessa uma SPA pelo celular tem a impress\u00e3o de estar usando um app e n\u00e3o acessando um site no navegador.<\/p>\n

2. Performance<\/b><\/h2>\n

O sistema fica muito mais perform\u00e1tico, por que ele carrega o sistema completo na primeira requisi\u00e7\u00e3o de forma ass\u00edncrona que permite o usu\u00e1rio j\u00e1 consumir o \u00a0conte\u00fado sem esperar que tudo seja carregado por completo e as requisi\u00e7\u00f5es seguintes s\u00e3o respons\u00e1veis por trafegar apenas os dados brutos entre o cliente e o servidor, normalmente no formato JSON.<\/p>\n

3. Responsabilidade do client-side<\/b><\/h2>\n

Nas SPA o lado cliente ganha mais responsabilidade, j\u00e1 que delegamos l\u00f3gica ao seu lado e isso acaba ajudando a performance tamb\u00e9m, dado que o tempo de requisi\u00e7\u00e3o diminui bastante.<\/p>\n

4. Facilidade de manuten\u00e7\u00e3o<\/b><\/h2>\n

Quando trabalhamos com SPA deixamos \u00a0muito bem separado as partes do que \u00e9 front-end e o que \u00e9 back-end, j\u00e1 que todo o back costuma estar em uma API, assim podemos fazer mudan\u00e7as em back sem precisar mexer em nada de front e vice versa.<\/p>\n

Desvantagens da Single Page Application<\/b><\/h2>\n

1. Um novo framework<\/b><\/h2>\n

A principio aprender um novo framework (AngularJS, Ember) \u00e9 uma desvantagem por que para come\u00e7ar a trabalhar com ele requer estudo e h\u00e1 uma curva de aprendizagem isso acaba por tornar o processo de desenvolvimento mais lento at\u00e9 que a equipe aprenda e consiga aplicar um padr\u00e3o no desenvolvimento. Voc\u00ea pode usar SPA sem usar um framework, por\u00e9m o esfor\u00e7o de desenvolvimento ser\u00e1 triplicado usando JavaScript puro.<\/p>\n

2. JavaScript desabitado<\/b><\/h2>\n

Muito dif\u00edcil hoje em dia, mas pode ser que aconte\u00e7a casos que algum usu\u00e1rio desabilite o JavaScript do seu navegador e isso faria com que o sistema n\u00e3o funcione.<\/p>\n

3. SEO<\/b><\/h2>\n

Apesar do Google j\u00e1 ter um sistema que indexa o retorno das requisi\u00e7\u00f5es AJAX (eu nunca usei, mas pelo que eu li parecer complicado) h\u00e1 reclama\u00e7\u00f5es com rela\u00e7\u00e3o a sua efic\u00e1cia e que nem tudo ele indexa, caso opte por utilizar o AngularJS esse problema \u00e9 resolvido, pois ele usa por padr\u00e3o o Hashbang por padr\u00e3o (semantica na URL para abrir conte\u00fado AJAX atrav\u00e9s de uma \u00e2ncora) e basta voc\u00ea pode ativar o HTML5 Mode para que a indexa\u00e7\u00e3o ocorra naturalmente .<\/p>\n

Para concluir, vejam um exemplo de single page application.<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Voc\u00ea sabe o que \u00e9 uma SPA (Single Page Application)? Sabe diferenciar de um site comum? Entende as vantagens e desvantagens? Sabe qual o melhor momento de usar? Se voc\u00ea n\u00e3o sabe, agora \u00e9 o momento de aprender. Basicamente uma aplica\u00e7\u00e3o SPA significa voc\u00ea codificar menos no server-side e mais no client-side, mas como isso? […]<\/p>\n","protected":false},"author":1,"featured_media":34898,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-21444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/21444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=21444"}],"version-history":[{"count":1,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/21444\/revisions"}],"predecessor-version":[{"id":34899,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/21444\/revisions\/34899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/34898"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=21444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=21444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=21444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}