Los sitios web progresivos están creciendo rápidamente en popularidad como una forma de crear aplicaciones con JavaScript, CSS y HTML que tienen un nivel de rendimiento y usabilidad que es casi idéntico a las aplicaciones nativas.
Si bien hay muchos tutoriales de “Introducción a las aplicaciones web progresivas” en la web, quiero profundizar un poco más y ofrecer sugerencias de herramientas y bibliotecas de JavaScript que puede utilizar para comenzar a desarrollar PWA a un ritmo más rápido y con la mínima complejidad.
Existen capacidades críticas que separan un sitio web progresivo de un sitio web tradicional. Las aplicaciones web progresivas deben poder hacer lo siguiente:
- Trabaja con la mayoría de los navegadores y dispositivos (móviles y de escritorio) con una base de código progresiva.
- Ajuste todos los factores de pantalla y forma con un diseño receptivo.
- Aprovechar los trabajadores del servicio para habilitar la conectividad fuera de línea (se requiere HTTPS).
Proporcione una experiencia similar a la de una aplicación que aproveche las herramientas de reconexión, como las notificaciones automáticas. - Aproveche un manifiesto de aplicación web para describir los recursos utilizados
Un buen lugar para comenzar si eres nuevo en aplicaciones web progresivas es la guía de Google para construir tu primera aplicación web progresiva. El objetivo de este artículo, sin embargo, es suponer que ha experimentado o completado su primera aplicación web progresiva y está buscando herramientas que le permitan desarrollar aplicaciones más rápido. Aquí, entonces, están las mejores herramientas que mi equipo usa para crear aplicaciones web progresivas.
Desarrollar aplicaciones web progresivas con React
El primer paso para crear una aplicación web progresiva es elegir un marco central. Hay muchos marcos y los aliento a que miren las opciones, pero usamos Reaccionar, por dos razones:
Es administrado y respaldado por Facebook, que utiliza el marco en sus sitios y por lo tanto demuestra que el marco está rigurosamente probado con 1.18 mil millones de usuarios al día.
React es la base de React Native, que le permite portar fácilmente aplicaciones creadas con Reaccionar a aplicaciones nativas.
El atractivo de ReactJS es su enfoque centrado en los componentes para el desarrollo. Cada componente está construido con JavaScript, y puede reutilizarlo fácilmente. Usar JavaScript tiene sus ventajas:
Tenemos muchos desarrolladores que ya conocen JS, por lo que no necesitan aprender un nuevo idioma.
Los datos enriquecidos se pueden pasar rápidamente a través de la capa DOM.
ReactJS admite JavaScript sin procesar y JSX. JSX es una sintaxis similar a XML para escribir JavaScript.
La interfaz de usuario consta de componentes. Esos componentes se pueden representar en el navegador, en el servidor, usando Node.js y dentro de las aplicaciones, usando React Native. De esta forma, se resuelven los desafíos de administrar aplicaciones que deben entregarse a muchos sistemas operativos, navegadores y dispositivos diferentes.
Primeros pasos: uso de una plantilla de Polymer
Puede reducir significativamente el tiempo requerido para configurar una aplicación web progresiva usando Polymer como plantilla. Este proyecto de código abierto de Google se actualiza frecuentemente para mantenerlo sincronizado con los proyectos de código abierto que la plantilla aprovecha.
Las plantillas de Polymer usan el patrón PRPL para optimizar la entrega de la aplicación al dispositivo. Úselo para:
- Empuje recursos críticos para la ruta inicial
- Renderiza la ruta inicial
- Pre-caché de las rutas restantes
- Carga lenta y crea rutas restantes a pedido
Necesita usar un servidor HTTP2 para entregar recursos bajo demanda. Además, el servidor precacheará los recursos que proporcionan los trabajadores del servicio. En cuanto al diseño, la plantilla Polymer aplica el diseño de material popular de Google por defecto.
Mi equipo usa Polymer para construir rápidamente prototipos. Les permite comenzar inmediatamente con el trabajo importante (el código del proyecto) y eludir rápidamente la configuración personalizada.
Administrar dependencias con Webpack
Si bien Polymer es ideal para comenzar, hay ocasiones en que mi equipo necesitará desarrollar aplicaciones personalizadas. Para ello, utilizamos Webpack, un paquete de módulos para aplicaciones de JavaScript.
Hay dos razones por las que usamos Knockout para proyectos rápidos en lugar de Reaccionar. Primero, podemos utilizar Knockout para extender HTML, lo que a su vez hace que sea más fácil de aprender, y no requiere JSX. La segunda razón es la creación de plantillas. La creación de plantillas facilita la creación de aplicaciones complejas, ya que minimiza la duplicación de elementos DOM.
Knockout es lo suficientemente fácil para que un desarrollador junior aprenda rápidamente y viene con muchos atributos que, de otro modo, deberían estar escritos en marcos de competencia, como Backbone.js.
Revisa tu código con Lighthouse
La última parte de nuestra herramienta de herramientas de aplicaciones web progresivas es la herramienta de monitoreo de rendimiento PWA de Google, Lighthouse, que se instala como un complemento para Chrome. Vaya al sitio web progresivo con el que desea ejecutar las pruebas y haga clic en el botón Faro en la barra de herramientas de Chrome una vez que haya instalado el complemento. El informe que recibe tiene muchos detalles en el informe. La primera sección, “Progressive Web App”, devuelve los siguientes análisis:
- La aplicación puede cargar conexiones sin conexión / escamosas
- El rendimiento de la carga de la página es rápido
- El sitio se mejora progresivamente
- La conexión de red es segura
- Se puede pedir al usuario que agregue a la pantalla de inicio
- La aplicación web instalada se iniciará con una pantalla de presentación personalizada
- La barra de direcciones coincide con los colores de marca
- El diseño es amigable para dispositivos móviles
Cada una de estas subsecciones revela tecnologías específicas que puede agregar o modificar para mejorar el rendimiento de su aplicación web progresiva. Por ejemplo, el informe de “La aplicación puede cargar conexiones fuera de línea / escamosa” proporciona detalles sobre:
- Tiene un trabajador de servicio registrado (y describe lo que es un trabajador de servicio)
- La URL responde con un 200 cuando está fuera de línea
La segunda sección, “Mejores prácticas”, proporciona detalles sobre lo siguiente:
- Usar funciones modernas sin conexión
- Usando protocolos modernos
- Usando CSS moderno
- Usar funciones modernas de JavaScript
- Evitar API que dañan la experiencia del usuario
- Accesibilidad
La tercera sección, “Rendimiento”, enumera qué tan rápido se tarda en cargar una página desde una aplicación web receptiva y cuánto tiempo lleva cargar cada elemento en la página. También incluye herramientas para profundizar en cualquier problema que cause ralentizaciones.
La sección final, “Fancier Stuff”, examina si las últimas características de HTML5 / JS están en uso.
El objetivo con Lighthouse es probar su sitio y darle la dirección para solucionar los problemas.
Herramientas extra
Las herramientas anteriores son una selección de las diferentes herramientas progresivas de aplicación web que nuestro equipo ha revisado. Algunas herramientas adicionales que quizás desee considerar además de (o como reemplazo) de las herramientas anteriores incluyen:
- AMP (páginas móviles aceleradas): herramientas para guiar la compresión de imágenes / JS para acelerar su sitio web. Google es muy compatible con AMP (incluso yendo tan lejos como para resaltar la capacidad de los dispositivos móviles AMP en los resultados de búsqueda). Google admite AMP Cache en los elementos de AMP, que los desarrolladores pueden aprovechar sin ningún costo.
- El framework de JavaScript de Front-End de AngularJS es más pesado que React, pero también es altamente preferido entre los desarrolladores de Java y .NET de la empresa
- Ionic 2: el framework AngularJS 2 se lanzó a principios de 2017 y, a primera vista, parece una solución atractiva para aprovechar el éxito del framework Ionic original, lanzado en 2015. Ionic es una buena plataforma para desarrolladores que se mudan de Cordova / PhoneGap para soluciones de aplicaciones web modernas y receptivas.
La conclusión es que las herramientas para aplicaciones web progresivas aún están madurando y cambiando a un ritmo rápido. Muchos de los principales proveedores de navegadores, específicamente Apple (con Safari y Safari móvil), Google (con Chrome) y Microsoft (con Edge) brindan actualizaciones periódicas cada 1-3 meses. Siempre estamos atentos a las nuevas soluciones y evaluando cómo o si deberíamos utilizarlas en nuestros proyectos. El objetivo final es aumentar la experiencia de aplicación utilizando tecnologías web.
Descubre más en https://www.miwebmadrid.es/8-razones-desarrollar-una-aplicacion-web-progresiva/
