Una breve exploración de un método para construir sitios web que funcionen sin JS, al tiempo que disfrutan de la comodidad de las tecnologías modernas de frontend y backend, ¡con codificación en vivo!
![Node Congress 2023](https://gitnation.imgix.net/stichting-frontend-amsterdam/image/upload/v1619376938/eav9rff77rtiyz7qse5v.jpg?auto=format,compress&fit=scale&w=60)
Nivel: intermedio
Una breve exploración de un método para construir sitios web que funcionen sin JS, al tiempo que disfrutan de la comodidad de las tecnologías modernas de frontend y backend, ¡con codificación en vivo!
Daniel es un desarrollador web y un entusiasta de la privacidad con sede en Oslo, Noruega, especializado en el uso de tecnologías como Next.js y Redux.
Desarrollar sin JavaScript mejora el rendimiento al liberar recursos del sistema, reduce las ventanas emergentes y los tiempos de carga, aumenta la seguridad y elimina la dependencia de scripts y redes de publicidad no deseados.
Daniel sugiere usar formularios para envolver botones y acciones, manejar solicitudes POST en el servidor y sincronizar el estado y las acciones entre el cliente y el servidor de manera que la aplicación funcione igualmente bien con o sin JavaScript.
El propósito es mejorar la accesibilidad y el rendimiento, ofrecer una experiencia consistente aunque JavaScript esté desactivado y respetar las preferencias de privacidad de los usuarios que desean evitar scripts potencialmente invasivos.
Daniel desarrolló un paquete npm que incluye un componente de formulario que maneja el estado y un botón que encapsula la acción, facilitando la integración con Redux y el manejo de formularios.
Sí, las aplicaciones no pueden depender de interacciones que solo se manejen con JavaScript, como hover o drag and drop, y puede haber un aumento en la carga del servidor debido a la gestión de más re-renderizaciones y despacho de acciones.
Las acciones asíncronas se manejan pasando el nombre del creador de acciones al servidor, que luego espera y despacha la acción, asegurando que la funcionalidad sea equivalente con o sin JavaScript.
Esta charla explora el desarrollo de aplicaciones web que funcionan sin JavaScript habilitado en el navegador, al tiempo que disfrutan de los beneficios de las tecnologías web modernas. El orador demuestra cómo convertir una aplicación existente para que funcione sin JavaScript envolviendo los botones en un formulario y evitando el evento de envío predeterminado. Se presentan los ayudantes de React para manejar acciones asíncronas y el orador muestra cómo hacer que una aplicación de contador funcione sin JavaScript eliminando devoluciones de llamada innecesarias y cambiando los botones por un componente de botón. La charla también cubre la adición de un formulario y una característica sorpresa, y enfatiza que al aprovechar los formularios y una tienda basada en eventos, las aplicaciones pueden funcionar sin problemas con o sin JavaScript.
En esta charla, exploraré un método para desarrollar aplicaciones que funcionen sin JavaScript habilitado en el navegador, al mismo tiempo que disfrutan de los beneficios de las tecnologías web modernas. Te mostraré una aplicación TodoMEC que funciona con y sin JavaScript. Hay varias razones por las que alguien desactivaría JavaScript, incluyendo el rendimiento, menos ventanas emergentes, tiempos de carga más rápidos y mayor seguridad. Agregué hacer que mi servicio de lista de deseos funcione sin JavaScript a mi lista de tareas porque respeta la privacidad y puede funcionar sin JavaScript. Sin embargo, no sabía cómo lograr esto con Redux y el renderizado del lado del servidor.
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.
Para convertir una aplicación existente para que funcione sin JavaScript, envuelve los botones en un formulario y evita el evento de envío predeterminado. Si JavaScript está habilitado, se evita el evento y se envía la acción del lado del cliente. Si JavaScript está deshabilitado, la solicitud llega al servidor y el servidor envía la acción y vuelve a renderizar la aplicación del lado del servidor. El estado resultante y el HTML son los mismos en ambos escenarios.
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.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments