UX ha sido el punto focal del desarrollo web moderno desde hace bastante tiempo. Esto se ve influenciado por varios factores, que incluyen la velocidad de carga de la página, la legibilidad, la facilidad de uso y el diseño. Pero ahora que hay más usuarios prefiere la navegación web móvil sobre el uso de escritorios, cualquier sitio web, ya sea un blog de nicho o una tienda de comercio electrónico, debería comenzar a priorizar la facilidad de uso móvil .
Hoy en día, es fácil aplicar un tema sensible a los dispositivos móviles y usar herramientas como las de Google. Prueba amigable para dispositivos móviles para recibir recomendaciones adicionales sobre cómo optimizar su sitio. Pero si quiere llevar las cosas al siguiente nivel, puede desarrollar una aplicación web progresiva (PVA) para ofrecer nuevas experiencias nuevas y memorables a sus usuarios de dispositivos móviles.
Un PWA aprovecha las tecnologías web modernas para habilitar las características similares a las de las aplicaciones. A diferencia de los sitios web móviles tradicionales, un PWA no tiene que actualizar toda la página al cargar contenido nuevo, ni necesita tener acceso a la conectividad a Internet. También son instalables, lo que significa que los usuarios pueden reutilizarlos fácilmente agregando un acceso directo a la pantalla de inicio.
Las aplicaciones web progresivas tienen el potencial de ser el próximo gran avance para la web móvil. Esto fue propuesto originalmente por Google hace solo un par de años en 2015. Pero, en tan poco tiempo, ya ha atraído mucha atención porque es relativamente fácil de desarrollar y para la entrega de experiencia de usuario de la aplicación.
-Rahul Varshneya, cofundador de la empresa de desarrollo de aplicaciones Arkenea .
Un PWA es un gran proyecto que podría guiar la dirección de su presencia web móvil en el futuro. Pero si es completamente nuevo para las PWA, aquí hay 7 herramientas y recursos que lo pondrán en el camino correcto:
Cuando se trata de desarrollar un PWA, necesita tener una comprensión más profunda de lo que son capaces de hacer.
Para ver las PWA en acción, puede consultar PWA.rocks para ejemplos bajo varias categorías, incluyendo negocios, juegos, compras y sociales. Esto te ayudará a visualizar cómo se vería tu futuro PWA. También puede obtener inspiración de los ejemplos disponibles al conceptualizar qué ofrecerá su PWA a los usuarios de dispositivos móviles.
Knockear es una herramienta gratuita de código abierto que puede ayudarlo con el Modelo-Ver-Ver el Modelo o los enlaces MVVM. Esto le permite simplificar el proceso de codificación de las IU de JavaScript permitiéndole definir vistas y enlaces declarativos que están controlados por las propiedades del modelo de vista .
La plataforma funciona exclusivamente con JavaScript, que funciona con todos los principales navegadores y cualquier entorno web. La biblioteca Knockout también se puede integrar fácilmente con sitios web existentes sin reescrituras extensas.
La forma más rápida de crear un PWA es usar PWABuilder y cree rápidamente un trabajador de servicio para la funcionalidad fuera de línea, que funciona tirando y sirviendo el "offline.html" de su servidor web cada vez que los usuarios pierden la conectividad a Internet. También puede enviar su PWA a la tienda de aplicaciones para dispositivos Android e iOS.
Para usar PWABuilder, todo lo que necesita hacer es insertar la URL de su sitio web y luego completar los detalles adicionales como su nombre, descripción del sitio e ícono preferido. También puede modificar fácilmente ciertas propiedades, como la orientación de la pantalla, el idioma y el color de fondo de su PWA. La plataforma generará automáticamente un manifiesto basado en la información que proporcione.
JavaScript suele ser el idioma introductorio aprendido por los estudiantes que desean aprender desarrollo web. Si eres un desarrollador experimentado de Java o .NET, entonces AngularJS es uno de los mejores frameworks de JavaScript que puedes usar para aplicaciones web. Aun así, su sitio web ofrece un montón de guías, tutoriales y recursos que lo ayudarán a aprender a manejar la plataforma.
La última versión, Angular v4.0, proporciona el mismo entorno, ya sea que esté desarrollando para dispositivos móviles o de escritorio. En caso de que piense que Angular es demasiado complejo para sus necesidades, puede optar por Reaccionar -Una biblioteca JavaScript adaptada al desarrollo de la interfaz de usuario. Otra alternativa es Polímero , que puede proporcionarle plantillas y otros componentes reutilizables que pueden acelerar el proceso de desarrollo de PWA.
Un PWA no es exactamente un proyecto de bricolaje para bloggers o publicistas afiliados, pero aún se puede hacer con los recursos adecuados. Si ya tiene experiencia con los sistemas de administración de contenido pero no tiene idea de cómo desarrollar aplicaciones web, entonces puede obtener los conceptos básicos a través de Desarrolladores de Google , una biblioteca de recursos que puede ayudarte a aprender a codificar.
Los desarrolladores de Google tienen un tutorial completo sobre cómo funcionan las PWA, cómo construir una y cómo hacer que funcione correctamente. También cubre otros aspectos básicos, como habilitar el "agregar a la pancarta de la pantalla de inicio" y usar HTTPS.
Webpack es una herramienta extremadamente útil para combinar los recursos de su aplicación de JavaScript, incluidos recursos que no son de código, como fuentes e imágenes. Estos se tratarán como objetos de JavaScript, lo que a su vez les permite cargarlos más rápido. La plataforma también hace que sea significativamente más fácil administrar dependencias.
Solo recuerda que Webpack tiene una curva de aprendizaje abrupta, lo que significa que podrías estar buscando horas de navegación para tutoriales y guías. Sin embargo, los recursos de aprendizaje y la documentación disponible en su sitio web no son amigables para principiantes. La buena noticia es que Webpack está ampliamente cubierto en otros sitios, incluida la sección de documentación de Angular 4.0.
Finalmente, GitHub es un sitio web impulsado por la comunidad que mantiene repositorios de proyectos. Abarca una amplia gama de temas relacionados con la programación, incluidos los trabajadores de servicios de JavaScript y PWA. De hecho, puede encontrar los repositorios PWA.rocks y Webpack dentro de la plataforma. Esto te ayudará a profundizar tu comprensión o incluso a contribuir a un mayor desarrollo.
Hoy en día, hay un puñado de repositorios que involucran PWA en GitHub. Puede aprender de estos proyectos o iniciar su propio repositorio mientras experimenta con su primer PWA. GitHub ahora también cuenta con funciones de administración de proyectos, lo que le permite colaborar sin problemas con otros desarrolladores de forma remota.
Las aplicaciones web progresivas son el futuro de las experiencias web móviles, pero actualmente no muchas de ellas las usan. Con las herramientas anteriores, ahora es completamente capaz de crear una PWA sobresaliente y establecer una presencia autorizada. Simplemente tome nota de que las herramientas, recursos y prácticas de PWA evolucionan con las tecnologías en constante evolución de los principales navegadores en línea.