29

Una Single Page Application no es tu mejor opción

40226Puntos

hace 4 meses

Curso de Progressive Web Apps con React.js
Curso de Progressive Web Apps con React.js

Curso de Progressive Web Apps con React.js

Aprende a crear interfaces dinámicas, manejar datos, diseñar e incrementar el rendimiento de una aplicación web con React.js. Construye interfaces de usuario escalables y de alta calidad con una de las librerías más utilizadas de JavaScript. Programa tu primera Progressive Web App con React.js.

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.

Curso de Progressive Web Apps con React.js
Curso de Progressive Web Apps con React.js

Curso de Progressive Web Apps con React.js

Aprende a crear interfaces dinámicas, manejar datos, diseñar e incrementar el rendimiento de una aplicación web con React.js. Construye interfaces de usuario escalables y de alta calidad con una de las librerías más utilizadas de JavaScript. Programa tu primera Progressive Web App con React.js.
Demian
Demian
@demian

40226Puntos

hace 4 meses

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

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
6852Puntos
4 meses

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

1
13347Puntos
4 meses

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

1
2199Puntos
4 meses

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
6852Puntos
4 meses

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

1
13347Puntos
4 meses

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

1
13347Puntos
4 meses

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.

Ver todas las respuestas

3
6637Puntos

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

3
6325Puntos

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

3
13347Puntos

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.

4
11038Puntos
4 meses

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
16043Puntos

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
5839Puntos

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 💪.

1
11038Puntos

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