Usando Next.JS y Redux para aplicaciones web épicas sin JavaScript

Hola, mi nombre es Daniel y soy un desarrollador web y un entusiasta de la privacidad con sede en Oslo, Noruega. Gracias por sintonizar esta charla sobre cómo usar Next.js y Redux para crear increíbles aplicaciones web sin JavaScript, que será una breve exploración de un método que te permitirá desarrollar aplicaciones que funcionen sin JavaScript habilitado en el navegador, al mismo tiempo que disfrutas de los beneficios y la comodidad de las tecnologías web modernas al crearlas.

Desde el principio, quiero mostrarte esto. Esta es tu aplicación TodoMEC estándar, donde puedes agregar cosas, editar cosas, marcar cosas, filtrarlas y borrarlas. Y aquí está de nuevo. Quiero que prestes mucha atención y veas si puedes notar alguna diferencia. Así que podemos agregar cosas, podemos decir `ups`, y editar cosas, marcar cosas, aplicar algunos filtros y podemos borrarlas. ¿Notaste algo? Bueno, esta última fue completamente sin JavaScript en el navegador. Y lo emocionante es que esta fue exactamente la misma aplicación React, el mismo HTML renderizado en el DOM. Y me parece bastante genial que podamos tener una aplicación que funcione sin problemas tanto con como sin JavaScript.

Pero, ¿por qué alguien desactivaría JavaScript en primer lugar? Bueno, hay varias razones, en realidad. Una de ellas es el rendimiento. Cuando no hay JavaScript ejecutándose en segundo plano, tu computadora tiene más recursos para hacer otras cosas. Otra razón es menos ventanas emergentes. Cuando desactivas JavaScript, no tienes ninguna de las suscripciones a boletines emergentes o ventanas emergentes desde la parte inferior, acaparamiento de desplazamiento o contenido que se aplica de repente a la página web y hace que el desplazamiento salte y cosas así. También tienes tiempos de carga más rápidos, ya que obviamente no estás cargando el JavaScript, por lo que la página se cargará más rápido. Y un factor que contribuye a eso es que no estás cargando los scripts de seguimiento y las redes de publicidad que en sí mismos no son realmente deseados la mayor parte del tiempo. Algunos usuarios también desactivarán JavaScript debido a un aumento de la seguridad. Hay ejemplos en el pasado donde las redes de publicidad se han utilizado como vector de ataque para vulnerabilidades del navegador. Y al desactivar JavaScript, las evitas y también evitas cosas como la ejecución de scripts en sitios cruzados. Tengo un servicio de lista de deseos llamado Wishigift. Y en 2018, agregué esto a la lista de tareas, hacer que el sitio funcione sin JavaScript. Porque es un servicio de lista de deseos que respeta la privacidad, y supongo que nuestros usuarios más preocupados por la privacidad les gustaría tener una experiencia que funcione sin JavaScript. Y también es agradable poder publicar algo en Hacker News sin que los comentarios digan que esto no funciona sin JavaScript. Pero también porque es el tipo de sitio web que puede funcionar sin JavaScript o incluso debería, no tengo ninguna experiencia de WebGL, ni estoy utilizando ninguna API web de manera intensiva. Básicamente es una aplicación CRUD glorificada, al igual que muchas otras aplicaciones. Y creo que ese tipo de sitios web que pueden funcionar sin JavaScript también deberían hacerlo. Pero no tenía idea de cómo hacerlo. Estaba usando Redux para absolutamente todo. Y también experimenté un poco con el renderizado del lado del servidor.

Así que acabo de iniciar un procesamiento en segundo plano. Me pregunté, ¿qué está disponible cuando se deshabilita JavaScript? Solo hay HTML y CSS. De acuerdo. ¿Cómo puedo convertir esta aplicación existente para que funcione sin JavaScript? No tengo idea. ¿Y cómo puedo hacerlo de una manera mantenible? Porque no quería tener dos bases de código separadas que necesitaran mantenerse.

Bueno, avanzamos rápidamente hasta 2020, y creo que un día me desperté y mi mente había unido algunas piezas. Me di cuenta de que uno de los principios de Redux, que es que solo debes poner valores serializables en el estado o en las acciones, se alinea muy bien con, o en realidad se alinea perfectamente con un cierto tipo de carga útil que también es serializable. Bueno, hablando de forms (formularios), la solución estaba allí todo el tiempo. En lugar de tener botones independientes, simplemente podría envolverlos en un formulario y evitar el envío predeterminado para que, si se habilita JavaScript, se evite el evento. Y si no se habilita, simplemente llega al servidor y podemos hacer que nuestro servidor envíe cualquier acción que queramos realizar.

Así que en lugar de tener solo un controlador de clic simple en un botón, en su lugar hacemos algo como esto. Lo envolvemos en un formulario y establecemos la acción como una cadena vacía para que cuando envíes este formulario, se envíe a la misma ruta en la que ya estamos, lo que significa una ruta de vista. Y asumimos que la única razón por la que alguien haría una solicitud POST a una ruta de vista es porque están enviando este tipo de formulario que envuelve una acción que quieren realizar. Y dentro de él, incrustamos el estado actual o el estado del cliente, el estado de la aplicación y también el tipo de acción que queremos que se envíe. Y reemplazaremos nuestro tipo de botón por un botón de envío. Y también puedes omitir el atributo de tipo aquí.

Luego, en nuestro app.js, si estás usando Next.js, tenemos este get initial props, y verificamos si esta es una solicitud POST, bueno, entonces queremos leer el cuerpo y el cuerpo se verá algo como esto. Tendrá un tipo de acción, por ejemplo, y el estado. Y pasamos eso a una función auxiliar. Ahora analizaremos la carga útil. Usando el callback que proporcionamos, getReduxStore, tomará el estado analizado en la carga útil y creará una nueva ReduxStore con eso. Y también enviará la acción en la carga útil a esa ReduxStore y devolverá la ReduxStore actualizada y el estado actualizado. Luego podemos asignar eso a nuestro estado precargado y volver a renderizar nuestra aplicación con ese estado.

Entonces, cuando se habilita JavaScript, el usuario hace clic en el botón, se evita el evento y se envía la acción. El estado se actualiza y la aplicación de React se vuelve a renderizar en el lado del cliente. Y es bastante similar cuando se deshabilita JavaScript, excepto que no podemos evitar el predeterminado. Entonces, la solicitud llegará al servidor y nuestro servidor analizará la carga útil y enviará la acción, obtendrá el estado actualizado y volverá a renderizar la aplicación de React en el lado del servidor. Y en ambos escenarios, el resultado final es exactamente el mismo. El estado con el que terminas es exactamente el mismo. Y también, el HTML es exactamente el mismo.

Para ayudarnos con esto, he creado algunos helpers de React que he agregado en un paquete npm. Y el componente más importante es el componente de formulario que incrusta el estado. Selecciona el estado de Redux y lo incrusta en el formulario. Y también maneja el envío. Lo que significa evitar el predeterminado en el lado del cliente y analizar la carga útil. Porque en lugar de simplemente pasar objetos, estamos escribiendo todo... Estamos serializando tanto la acción como la carga útil en el formulario. Por lo tanto, analiza la carga útil del formulario y también despacha cualquier acción que contenga.

También tenemos un botón, que es un helper simple que toma un botón y lo envuelve en el componente de formulario. Y también pasa las props necesarias. Y puedes encontrar esto en witchy-gift.com. Pero te entiendo. En primer lugar, prometiste aplicaciones web épicas. Y en segundo lugar, ¿cómo lo harías con acciones asíncronas? Bueno, también tengo una solución para eso. ¿Quién lo hubiera pensado?

Así que aquí tenemos una aplicación bastante simple que te permite buscar epopeyas. Por lo tanto, podemos buscar a Homero o simplemente hacer una búsqueda vacía y listar todas las epopeyas en el proyecto Gutenberg. Y así, en el lado del cliente, esto está hablando con una API de terceros llamada Gutendex. Puedes ver que tenemos este spinner y cosas así, y también puedes ver en la parte superior derecha aquí, tenemos un indicador que dice si esta página se cargó con una solicitud GET o una solicitud POST. Ahora, en un escenario sin scripts, en lugar de simplemente decirle al servidor que despache una acción, eso no sería suficiente. No sería suficiente porque tenemos acciones asíncronas. Así que en realidad necesitamos llamar y esperar al creador de la acción. Y como verás, esto también funciona perfectamente bien. Puedes ver que esta vez se hizo con una solicitud POST y todo funciona. La funcionalidad es exactamente la misma. No tenemos ningún spinner, por supuesto. No tenemos ningún indicador de carga porque no tenemos ningún JavaScript para activarlo con. Pero eso también muestra que cuando tienes JavaScript habilitado, siéntete libre de agregar cualquier mejora adicional que consideres adecuada. Simplemente es necesario que las interacciones esenciales funcionen sin JavaScript. Entonces, lo que sucede aquí es que en lugar de despachar una acción o decirle al servidor que despache una acción, pasamos el nombre de un creador de acciones. Y tenemos un mapeo de los creadores de acciones a sus funciones.

Y cuando hay un creador de acciones, el servidor se dará cuenta y simplemente esperará el despacho del creador de acciones.

Y ahora, para algo emocionante de programación en vivo. Bien, aquí tienes una sencilla aplicación de contador. Puede incrementar, puede decrementar. También puedes establecer una cantidad personalizada e incrementar y decrementar según esa cantidad. Pero ahora, si deshabilitamos JavaScript, verás que nada funciona. Y eso es porque estamos utilizando JavaScript para todo esto.

Cambiemos esto al modo de desarrollo. Y verás que tenemos todas estas devoluciones de llamada y controladores de onClick. Así que hagamos que esto funcione sin JavaScript. En primer lugar, deshagámonos de todo lo que no necesitamos, que son todas las devoluciones de llamada. No utilizaremos ningún controlador onClick, ni necesitaremos el onChange y el valor aquí. Luego importemos nuestros componentes auxiliares. Importemos el botón e importemos el formulario. Y comentemos esta parte inferior para arreglarla más tarde.

Entonces, en primer lugar, cambiaremos estos botones normales por... Perdón, también olvidé que tenemos que eliminar este tipo de botón porque queremos que estos realmente envíen los forms. Así que cambiemos estos botones por el componente de botón. Y nuestro primer botón debería... Entonces, el componente de botón recibe una Acción. Y nuestro primer botón debería ser la Acción de decremento. Y nuestro segundo botón debería ser la Acción de incremento. Veamos aquí si esto funciona. Podemos decrementar, podemos incrementar. Bien. De acuerdo. Y si deshabilitamos JavaScript... Entonces, en primer lugar, los estilos desaparecen porque Next.js no le gusta tener JavaScript deshabilitado en el modo de desarrollo. Pero nuestra funcionalidad sigue funcionando, que es la parte importante. Y más tarde te mostraré los estilos en una compilación de producción.

Funciona como se esperaría. Bien, logramos que funcione y fue solo un pequeño cambio. Este código es más corto que antes. Solo agregamos la acción que queríamos enviar y utilizamos el componente de botón en lugar de un botón normal.

Entonces, para esta parte, donde puedes seleccionar tu propia cantidad, simplemente cambiaremos este contenedor para que sea nuestro componente de formulario. Y luego queremos usar estos botones normales realmente. Pero queremos que cuando presiones el primer botón, use el valor de este campo de entrada y lo decremente en esa cantidad. Y si presionas el segundo botón, queremos usar este valor nuevamente pero incrementarlo. Y podemos hacer eso diciendo que el botón debe tener el nombre del tipo de acción y el valor de decrementar por cantidad. Y lo que sucederá aquí es que cuando se envíe el formulario al presionar este botón, solo el valor del botón enviado estará en la carga útil misma y en el lado del cliente en el evento submitter. Así que hacemos lo mismo aquí. Decimos que el nombre debe ser el tipo de acción, que corresponde al nombre de la acción, que en este caso es incrementar por cantidad. Y también tenemos que decir que la carga útil es este campo de número. Probemos. OK, disculpa. También tenemos que especificar que la carga útil debe ser JSON. Ahora esto funciona correctamente. Y si deshabilitamos JavaScript también, esto también funciona. Genial.

Pero quiero agregar una última cosa. Me gustan las sorpresas. Así que agreguemos una pequeña sorpresa también. Vamos a darle algunos estilos. Y agregaremos un botón aquí con la clase de nombre botón y sorpresa. Así que quiero agregar un número aleatorio entre -50 y 50. Y podemos hacer esto utilizando la acción, por supuesto, y incrementar por cantidad. Y pasamos, solo un poco de matemáticas rápidas aquí. Obtén un número aleatorio, multiplícalo por 100 y réstale 50, y si lo verificamos, esto funciona maravillosamente. Y... Si deshabilitamos JavaScript, esto también funciona.

Genial. Pero lo que sucede es que si decides actualizar la página, verás que obtenemos el mismo número exacto cada vez. Y eso se debe a que volvemos a enviar el mismo estado exacto y también codificamos los números aleatorios. Y eso también se reenvía cuando volvemos a enviar el formulario. No es muy sorprendente, ¿verdad?

Entonces, en lugar de usar solo una acción, simplemente pasaremos el nombre de un creador de acciones. Y lo llamé incrementar por sorpresa. Y si hacemos clic en eso, veremos que todavía obtenemos un número aleatorio. Y si deshabilitamos JavaScript y actualizamos, obtenemos un nuevo número aleatorio cada vez. Porque ahora el creador de acciones se ejecuta en el servidor, lo que regenera el número aleatorio cada vez. Y también quería mostrarte esto. Si realmente hago una compilación de producción aquí y inicio el servidor, verás que los estilos también funcionan sin JavaScript. Así que solo en modo de desarrollo.

OK, hay algunas advertencias al utilizar este método. Y una de ellas es que no puedes tener ninguna interacción esencial que solo se pueda usar a través de eventos de JS. Entonces no puedes tener ninguna, como dije, interacciones esenciales detrás de cosas como un hover o arrastrar y soltar, o una pulsación larga, y cosas así. Y hay un marcado adicional que debes considerar al aplicar estilos porque estamos agregando formularios en todas partes. También hay muchas actualizaciones. Y diría que esto no es realmente una advertencia o un problema. Porque muchas veces, para un usuario sin JavaScript habilitado, la alternativa sería ninguna aplicación o simplemente sin actualizaciones. Y hay una carga aumentada del servidor porque le decimos a nuestro servidor que maneje más cosas, despache acciones y más re-renderizaciones que no podemos optimizar como podemos hacerlo con las páginas estáticas GetPages. Y cuando agregas GetInitialProps a tus páginas de Next.js, pierdes algunas optimizaciones, lo cual es también triste. Ojalá hubiera una forma de habilitar solo GetInitialProps en las solicitudes POST, así que tal vez eso llegue algún día. Crucemos los dedos.

Y para resumir. Al aprovechar los formularios y una tienda basada en eventos, podemos tener una aplicación que funcionará sin problemas tanto si el usuario tiene JavaScript habilitado en el navegador como si no lo tiene. Y podemos usar algunos componentes auxiliares para facilitar nuestro trabajo al desarrollar una aplicación como esta. Pero esta implementación en sí misma puede no ser perfecta. Soy consciente de eso. Lo que te presento es simplemente un enfoque generalizado o una forma de pensar en cómo hacer aplicaciones que funcionen sin JavaScript. Y si conoces una mejor manera o puedes pensar en una mejor manera, o tienes sugerencias e ideas sobre cómo mejorar esto, me encantaría escucharlas. Y por favor contáctame. Estoy en Portrait2K en Twitter y en todas partes. Y me encantaría saber qué has hecho y si estás usando esto y qué opinas al respecto. Así que gracias por ver esta charla. Y muchas gracias a React Advanced por invitarme. Y espero que hayas disfrutado la charla y el resto de la conferencia.