Cómo codificar un sitio web de noticias de aplicaciones web progresivas

Durante las últimas dos semanas, trabajé en un proyecto personal llamado The Global Upvote. El Global Upvote agrega las historias más votadas de toda la web, resumidas y actualizadas cada sesenta segundos.

Este artículo se centra en cómo pude implementar The Global Upvote para aspirantes a desarrolladores. Escribí un artículo separado sobre el proceso de diseño detrás de esto. Estas dos historias pueden parecer completamente separadas. Pero el proceso de diseño y desarrollo estaba profundamente entrelazado en la vida real.

Tenga en cuenta que he escrito un artículo hermano sobre cómo diseñar este sitio web de noticias de la aplicación web progresiva aquí.

Encontrar los datos

En diseño, hay un concepto de contenido primero. Content-First Design dice que necesitas diseñar alrededor del contenido. Para poder hacer eso, necesitaba asegurarme de poder obtener los datos correctos. Antes de comenzar con el trabajo de front-end real, trabajé con la API de Reddit y mi servidor Node.

Sabía que había dos partes del contenido que quería capturar de Reddit:

  1. Las publicaciones principales de r / WorldNews por sus titulares
  2. El comentario de un usuario de bot que resumió la historia

Afortunadamente, había un gran contenedor de Nodos para la API llamado Snoowrap. Fue fácil de usar y me hizo obtener contenido en poco tiempo.

Una gran cosa que aprendí en este proyecto fue la gestión de solicitudes. En el pasado, había usado mi servidor Node como solicitante de API cada vez que un usuario visitaba mi aplicación. Pero tuve una epifanía obvia.

Podría conservar la pequeña cantidad de datos (historias) en mi servidor y actualizarla una vez por minuto con un simple setInterval. Esto dejó de aumentar el riesgo de abusar de los límites de mi API de Reddit y acortó los tiempos de carga de la historia porque no tendría que hacer ping a la API de Reddit cada vez.

Manteniéndolo progresivo

¿Quieres conocer el secreto sucio y barato sobre cómo hacer una aplicación web progresiva en React? Simplemente use Create-React-App. Los colaboradores de ese proyecto han hecho un trabajo maravilloso al agregar trabajadores de servicio para cargas casi instantáneas y un archivo de manifiesto para sus metadatos, y optimizar el paquete Webpack lo mejor que pueden. En el pasado, tuve que trabajar mucho para las PWA (aplicaciones web progresivas) e incluso escribí un tutorial sobre cómo perfeccionarlas.

Esta fue la primera vez que trabajé en un modo sin conexión para Chrome y Firefox para hacer cosas como leer artículos antes de que mi computadora se conectara a wifi.

La primera mitad consistía en hacer cosas cada vez que cambiaba la conexión a Internet utilizando detectores de eventos. De esa forma, una nueva conexión a Internet podría activar la búsqueda de historias y una conexión perdida podría notificar al usuario que está desconectado.

La segunda mitad del modo fuera de línea consistía en guardar nuevas historias en el dispositivo del usuario cada vez que se buscaban. Esta fue la primera vez que usé LocalStorage y me sorprendió gratamente lo fácil que fue.

Una última parte del PWA que se hizo fue mejorar el índice de velocidad de percepción. Puede ver esta métrica centrada en el usuario abriendo Chrome DevTools y ejecutando una auditoría. Para mejorar esta puntuación, hice esqueletos que aparecerían cuando se recuperara el estado de mi aplicación.

Conectar un complemento

Había determinado que quería que el usuario pudiera guardar la experiencia como su nueva pestaña para Chrome y Firefox. Los navegadores admiten de forma nativa la creación de una página de inicio. Pero eso no le da el control de la barra de URL inmediatamente. Este fue un detalle importante porque un usuario no quiere tener que hacer clic en la barra de URL cada vez que abre una nueva pestaña.

Temía estar a punto de sumergirme en el desarrollo profundo de extensiones de navegador. Esto era algo con lo que no estaba familiarizado además de un verificador de cuadrícula para ayudar a mis habilidades visuales. Una vez más, esta solución me acabó entregando en bandeja de plata. Google incluye una extensión similar en sus descargas de muestra. Estaba trabajando en poco tiempo con la extensión de la pestaña Global Upvote. ¡Ni siquiera se necesitaron cambios para el envío a la tienda de Firefox!

El resultado final

Desde el punto de vista del desarrollo, me encantaron todas las diferentes soluciones que pude reunir para The Global Upvote. Estas soluciones me dicen que la comunidad web está mejorando al trabajar en conjunto para hacer que la experiencia de desarrollo sea menos frustrante. Accediendo a la auditoría de Chrome DevTools, anteriormente Google Lighthouse Extension también se ha vuelto más fácil que nunca.

Todo el código fuente ha sido de código abierto en caso de que desee investigar o hacer que funcione para usted.

Varias cosas rápidas a tener en cuenta:

  • ¿Dónde están los archivos CSS?

    No hay ninguno. ¡Uso componentes con estilo para adjuntar estilos directamente a su componente!

    Vea esta charla que di en IBM sobre por qué CSS-in-JS es increíblemente bueno: //vimeo.com/230614037

  • ¿Dónde está el código fuente de su extensión de pestaña?

    Compruébelo en el repositorio separado para la pestaña Global Upvote.

  • ¿Cómo empiezo a ejecutar esto localmente?

    Consulte la documentación de Create-React-App si aún no lo ha hecho.

    Mucho guau. También necesita un archivo llamado keys.jsonen el directorio raíz con su información para Snoowrap. Debe tener un aspecto como este:

{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }

¡Espero que haya disfrutado de este informe de caso!

Una vez más, he escrito un artículo hermano sobre cómo diseñar este sitio web de noticias de la aplicación web progresiva aquí.

Para obtener más información: no dude en ponerse en contacto conmigo a través de los comentarios, correo electrónico o @seejamescode. Trabajo en ATX para IBM Design y siempre me encanta conversar con la comunidad de diseño web. ¡Deje cualquier pregunta que pueda tener e intentaré responderla por usted!