Si bien hay muchos tutoriales de “Introducci\u00f3n a las aplicaciones web progresivas” en la web, quiero profundizar un poco m\u00e1s y ofrecer sugerencias de herramientas y bibliotecas de JavaScript que puede utilizar para comenzar a desarrollar PWA a un ritmo m\u00e1s r\u00e1pido y con la m\u00ednima complejidad.<\/p>\n
Existen capacidades cr\u00edticas que separan un sitio web progresivo de un sitio web tradicional. Las aplicaciones web progresivas deben poder hacer lo siguiente:<\/p>\n
Un buen lugar para comenzar si eres nuevo en aplicaciones web progresivas es la gu\u00eda de Google para construir tu primera aplicaci\u00f3n web progresiva.<\/p>\n
El objetivo de este art\u00edculo, sin embargo, es suponer que ha experimentado o completado su primera aplicaci\u00f3n web progresiva y est\u00e1 buscando herramientas que le permitan desarrollar aplicaciones m\u00e1s r\u00e1pido.<\/p>\n
Aqu\u00ed, entonces, est\u00e1n las mejores herramientas que mi equipo usa para crear aplicaciones web progresivas.<\/p>\n
El primer paso para crear una aplicaci\u00f3n web progresiva es elegir un marco central. Hay muchos marcos y los aliento a que miren las opciones, pero usamos Reaccionar, por dos razones:<\/p>\n
Es administrado y respaldado por Facebook, que utiliza el marco en sus sitios y por lo tanto demuestra que el marco est\u00e1 rigurosamente probado con 1.18 mil millones de usuarios al d\u00eda.<\/p>\n
React es la base de React Native, que le permite portar f\u00e1cilmente aplicaciones creadas con Reaccionar a aplicaciones nativas.<\/p>\n
El atractivo de ReactJS es su enfoque centrado en los componentes para el desarrollo. Cada componente est\u00e1 construido con JavaScript, y puede reutilizarlo f\u00e1cilmente. Usar JavaScript tiene sus ventajas:<\/p>\n
Tenemos muchos desarrolladores que ya conocen JS, por lo que no necesitan aprender un nuevo idioma.<\/p>\n
Los datos enriquecidos se pueden pasar r\u00e1pidamente a trav\u00e9s de la capa DOM.<\/p>\n
ReactJS admite JavaScript sin procesar y JSX. JSX es una sintaxis similar a XML para escribir JavaScript.<\/p>\n
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.<\/p>\n
De esta forma, se resuelven los desaf\u00edos de administrar aplicaciones que deben entregarse a muchos sistemas operativos, navegadores y dispositivos diferentes.<\/p>\n
Puede reducir significativamente el tiempo requerido para configurar una aplicaci\u00f3n web progresiva usando Polymer como plantilla.<\/p>\n
Este proyecto de c\u00f3digo abierto de Google se actualiza frecuentemente para mantenerlo sincronizado con los proyectos de c\u00f3digo abierto que la plantilla aprovecha.<\/p>\n
Las plantillas de Polymer usan el patr\u00f3n PRPL para optimizar la entrega de la aplicaci\u00f3n al dispositivo. \u00daselo para:<\/p>\n
Necesita usar un servidor HTTP2 para entregar recursos bajo demanda. Adem\u00e1s, el servidor precachear\u00e1 los recursos que proporcionan los trabajadores del servicio. En cuanto al dise\u00f1o, la plantilla Polymer aplica el dise\u00f1o de material popular de Google por defecto.<\/p>\n
Mi equipo usa Polymer para construir r\u00e1pidamente prototipos. Les permite comenzar inmediatamente con el trabajo importante (el c\u00f3digo del proyecto) y eludir r\u00e1pidamente la configuraci\u00f3n personalizada.<\/p>\n
Si bien Polymer es ideal para comenzar, hay ocasiones en que mi equipo necesitar\u00e1 desarrollar aplicaciones personalizadas. Para ello, utilizamos Webpack, un paquete de m\u00f3dulos para aplicaciones de JavaScript.<\/p>\n
Hay dos razones por las que usamos Knockout para proyectos r\u00e1pidos en lugar de Reaccionar. Primero, podemos utilizar Knockout para extender HTML, lo que a su vez hace que sea m\u00e1s f\u00e1cil de aprender, y no requiere JSX. La segunda raz\u00f3n es la creaci\u00f3n de plantillas. La creaci\u00f3n de plantillas facilita la creaci\u00f3n de aplicaciones complejas, ya que minimiza la duplicaci\u00f3n de elementos DOM.<\/p>\n
Knockout es lo suficientemente f\u00e1cil para que un desarrollador junior aprenda r\u00e1pidamente y viene con muchos atributos que, de otro modo, deber\u00edan estar escritos en marcos de competencia, como Backbone.js.<\/p>\n
Revisa tu c\u00f3digo con Lighthouse<\/strong> Cada una de estas subsecciones revela tecnolog\u00edas espec\u00edficas que puede agregar o modificar para mejorar el rendimiento de su aplicaci\u00f3n web progresiva. Por ejemplo, el informe de “La aplicaci\u00f3n puede cargar conexiones fuera de l\u00ednea \/ escamosa” proporciona detalles sobre:<\/p>\n La segunda secci\u00f3n, “Mejores pr\u00e1cticas”, proporciona detalles sobre lo siguiente:<\/p>\n La tercera secci\u00f3n, “Rendimiento”, enumera qu\u00e9 tan r\u00e1pido se tarda en cargar una p\u00e1gina desde una aplicaci\u00f3n web receptiva y cu\u00e1nto tiempo lleva cargar cada elemento en la p\u00e1gina. Tambi\u00e9n incluye herramientas para profundizar en cualquier problema que cause ralentizaciones.<\/p>\n La secci\u00f3n final, “Fancier Stuff”, examina si las \u00faltimas caracter\u00edsticas de HTML5 \/ JS est\u00e1n en uso.<\/p>\n El objetivo con Lighthouse es probar su sitio y darle la direcci\u00f3n para solucionar los problemas.<\/p>\n Herramientas extra<\/strong>
\nLa \u00faltima 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\u00f3n 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\u00f3n, “Progressive Web App”, devuelve los siguientes an\u00e1lisis:<\/p>\n\n
\n
\n
\nLas herramientas anteriores son una selecci\u00f3n de las diferentes herramientas progresivas de aplicaci\u00f3n web que nuestro equipo ha revisado. Algunas herramientas adicionales que quiz\u00e1s desee considerar adem\u00e1s de (o como reemplazo) de las herramientas anteriores incluyen:<\/p>\n