51

Una Single Page Application no es tu mejor opción

49905Puntos

hace 5 años

El tiempo promedio que se tarda en cargar una landing page promedio en dispositivos móviles es 15 segundos. El 53% de los visitantes de sitios web móviles abandonan una página si demora más de 3 segundos en cargar. Mobile Page Speed Benchmarks

Últimamente se ha vuelto muy popular elegir una Single Page Application para empezar a desarrollar la mayoría de tus proyectos web. Y no es en vano. Construir SPAs tiene muchos beneficios:

  • Son fáciles de desarrollar y desplegar.
  • Son fáciles de depurar.
  • Presentan el contenido de una manera fácil, elegante y efectiva debido a que cargan todo el contenido en una sola página.
  • Al ejecutar la lógica del lado del navegador, todas las interacciones del usuario se ejecutan más rápido.

Pero esta cantidad de beneficios incluye algunas desventajas:

  • El SEO del sitio no está optimizado.
  • En sitios muy grandes se empieza a complicar el mantenimiento del código.
  • Si no seguimos buenas prácticas, la seguridad del sitio se puede ver expuesta, ya que el código fuente se encuentra directamente en el navegador.
  • La carga inicial de nuestro sitio es muy demorada, esto puede alejar posibles clientes.

Parece que todos los beneficios de una SPA no serán de gran utilidad si queremos captar nuevos usuarios, ya que la primera carga del sitio puede demorar mucho más de 3 segundos. Y solo por eso es muy probable que el futuro cliente decida no volver nunca más.

Dando velocidad con SSR

Las SPA envían un HTML muy sencillo al navegador Al recibirlo, debemos descargar un archivo de JavaScript muy pesado y ejecutar el archivo que posteriormente mostrará la página al usuario. Esto es conocido como Client Side Rendering (CSR) y como puedes ver es un proceso muy demorado. El usuario debe esperar todo este tiempo para poder empezar a usar nuestra aplicación.

Por otro lado, Server Side Rendering (SSR) envía el HTML, CSS y un poco de JavaScript al navegador para que los usuarios puedan ver la página desde el inicio. Esto trae consigo dos grandes mejoras:

  1. Mejora drásticamente el performance de nuestra página y con ello la experiencia del usuario. Se acabaron los tiempos de carga mayores a 3 segundos.
  2. Aunque los spiders de los buscadores que indexan los sitios web ya pueden leer JavaScript, el SEO de tu página mejora bastante, ya que obtienen el contenido desde el primer momento.

Eleva la velocidad y experiencia del usuario de tu sitio con PWAs

Una Progressive Web App (PWA) es un sitio web que sigue utilizando JavaScript, CSS y HTML, pero busca mejorar la experiencia del usuario según las funcionalidades que le permita cada navegador, todo esto con el fin de acercarse más al funcionamiento de una aplicación móvil nativa.

El propósito principal de las PWAs es que tu aplicación web pueda brindar una experiencia casi nativa a los usuarios para aumentar tu número de usuarios y sus conversiones. Si quieres conocer múltiples historias de éxito entra a PWA Stats.

Un sitio web debe cumplir 3 requisitos técnicos para ser una PWA:

  1. Utilizar HTTPS.
  2. Contar con un archivo Web Manifest y un conjunto mínimo de iconos.
  3. Dar soporte offline a través de un service worker.

¡Eso no es todo! Gracias al Web Manifest podemos instalar nuestra PWA. Es decir, guardar la aplicación en la pantalla de inicio de nuestro celular, así como cualquier aplicación nativa. Esta funcionalidad es soportada por:

  • Android
  • iOS
  • Windows 10
  • macOS
  • Linux
  • ChomeOS

Conclusión

El desarrollo web cambia de manera rápida y constante. Cada vez más usuarios utilizan un dispositivo móvil para acceder a internet y la conexión a través de estos dispositivos no es la mejor, mucho menos en paises de latinoamerica.

En lugar de precipitar el desarrollo de tu próximo proyecto y hacer una SPA, date el tiempo para aprender sobre SSR y PWA. Te invito a tomar los cursos de React Router y Progressive Web Apps con React.js, vas a ver que tu próximo proyecto tendrá un gran nivel de performance y experiencia del usuario muy superior al que estás acostumbrado.

Si estás interesado en aprender otras técnicas y métodos, te recomendamos la carrera dedesarrollador web de Platzi.

Demian
Demian
demian

49905Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
28582Puntos

Hola, anteriormente las SPA no eran buena opcion, hasta hace unos meses, resulta y pasa que Google BOT Ahora trabaja con Chromium, esto quiere decir que ahora google entiende ES6, ServiceWorkers, Javascript

4
16464Puntos

Hola soy mas orientado al backend pero he interactuado con react y angular, alguien sabe si para VueJS tambien se pueden realizar pwas? Yo xq se lleva muy bien con Laravel que es mi stack principal con lamp

3
29340Puntos
5 años

Hola, no tengo experiencia con vue pero en platzi hay un apartado en pwa con vue

1
23352Puntos
5 años

Hola Adreanzoe. ¿Donde exáctamente?. Gracias.

2
5024Puntos
5 años

Claro que si se puede, lo que tienes que hacer es definir el mínimo necesario de tu html, css y js para que tu web funcione, y lo demás lo vas cargando a medida que lo vayas ocupando.

2
29340Puntos
5 años

A no, era webpack con react y vue xD, retiro lo dicho porque no se puede borrar

1
23352Puntos
5 años

No te preocupes, jaja. Me habías ilusionado.

1
23352Puntos
5 años

Para Fernandophp7, como he dicho antes, yo estoy haciendo una PWA en Vue.js con backend en Laravel. Pero debes separar Frontend de Laravel y tirar de Axios. No puedes insertar (al menos hasta donde yo he leído) una PWA Vue.js en Laravel.

3
6688Puntos

Cual es la diferencia entre tecnologias como Nuxt.js y Next.js, con una PWA?

1
4585Puntos
4 años

Nuxt.js es un framework de javascript basado en vue.js y next.js es un framework de javascript que da soporte a aplicacion para ser de tipo SSR O PWA.
La diferencia que existe es principalmente la forma en como se termina de complicar los archivos y te los entrega, a vos desarrollado para que hagas el deploy

3
23352Puntos

Hola! Estoy de lleno en el desarrollo de una PWA con Vue.js. En Platzi existen cursos para Angular y React, e incluso me atrevería a decir de que se enfocan mucho en este último.
Me gusta desarrollar en VUE.js, pero no encuentro la suficiente documentación y cursos para PWA en este framework.
¿Me podrían recomendar alguno? Por casualidad, Platzi o Bedu no estarán pensando en sacar algún curso de estas características, ¿no?

Muchas gracias.

5
21893Puntos
5 años

Hola compañero, estoy de acuerdo contigo Vue es un framework que me encanta y en las estadísticas se ve como va creciendo cada año.

Por otra parte la demanda laboral aumenta cada vez más y las empresas se interesan en esta tecnología.

Platzi cuenta desde mi punto de vista con un curso fantástico de Vue (Vue profesional con Ignacio Anaya) pero si que es cierto que ahora mismo la oferta de cursos de Vue que actualmente ofrece Platzi (3 cursos) se antoja un poco “justo” en comparación con otras tecnologías similares (React / Angular).

Estoy seguro que tendrán en mente nuevos cursos para el bueno de Vue porque las posibilidades son bastantes amplias, por poner algún ejemplo creo que estos cursos podrían ser interesantes:

  • SSR con NuxtJS (un curso separado)
  • Vuex (curso separado)
  • Desarrollo Móvil en Vue con Native Script (ahora lo permite)
  • PWA con Vue
  • Full Stack con: Vue Node Express Mongo / MySql + Laravel + Vue

Espero que el maravilloso equipo de Platzi de un poco más de mimo a los desarrolladores que nos encanta Vue. Un saludo !

2
24864Puntos

Muy buen post Demian, solo para aclarar un poco, existen opciones como Svelte o PReact que hacen que la carga del sitio sea más rápida sin necesidad de depender de SRR, ya que son más livianos que React, Vue o Angular. Además, Svelte trabaja sin necesidad de depender de un Virtual DOM, lo cual lo hace más eficiente. Otra cosa más, estas librerías o frameworks ya vienen por defecto con muchos parámetros o reglas de seguridad, rara vez te preocupas de ataques XSS trabajando con React, por ejemplo.

1
7409Puntos

Interesante artículo, me hizo investigar y quería agregar que existe una diferencia entre lo que es una SPA y una PWA, aunque actualmente pareciera que se usan indistintamente, una PWA no necesariamente tiene que ser una SPA (o sea por ejemplo no necesitaria utilizar un solo archivo HTML como lo hacen las SPA) aunque es comun actualmente desarrollar SPAs que son también PWAs. No sé si estoy en lo cierto me equivoco en algo?

1
21893Puntos

Cuando creamos una PWA actúa como si fuera una SPA para navegar por la aplicación pero de forma nativa ?

1
25291Puntos

Gracias Demian fue de mucha ayuda esta información, estoy por empezar a crear sitios estaticos para terceros de manera privada y este articulo lo estaba posponiendo, que bueno que lo lei antes de empezar. 😁 👌
Nunca pares de aprender 💪.

0
34532Puntos

2 años y aún no hay un curso de NUXT JS 😦