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:
Pero esta cantidad de beneficios incluye algunas desventajas:
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.
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:
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:
¡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:
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.
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
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
Hola, no tengo experiencia con vue pero en platzi hay un apartado en pwa con vue
Hola Adreanzoe. ¿Donde exáctamente?. Gracias.
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.
A no, era webpack con react y vue xD, retiro lo dicho porque no se puede borrar
No te preocupes, jaja. Me habías ilusionado.
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.
Cual es la diferencia entre tecnologias como Nuxt.js y Next.js, con una PWA?
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
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.
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:
Espero que el maravilloso equipo de Platzi de un poco más de mimo a los desarrolladores que nos encanta Vue. Un saludo !
Muy buen post Demian, solo para aclarar un poco, existen opciones como
SvelteoPReactque 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,Sveltetrabaja sin necesidad de depender de unVirtual 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.SSR*
Cuando creamos una PWA actúa como si fuera una SPA para navegar por la aplicación pero de forma nativa ?
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 💪.
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?
2 años y aún no hay un curso de NUXT JS 😦