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

Rate this content
Bookmark

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!

21 min
25 Oct, 2021

Video Summary and Transcription

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.

Available in English

1. Introducción a las aplicaciones web sin JavaScript

Short description:

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.

2. Conversión de la aplicación para que funcione sin JavaScript

Short description:

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.

3. React Helpers y Manejo de Acciones Asíncronas

Short description:

Para ayudarnos con esto, he creado algunos helpers de React que he agregado en un paquete npm. 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. También maneja el envío evitando el predeterminado en el lado del cliente y analizando la carga útil. Estamos serializando tanto la acción como la carga útil en el formulario. También tenemos un botón que se envuelve en el componente de formulario y pasa las props necesarias. Para acciones asíncronas en un escenario sin scripts, necesitamos llamar y esperar al creador de la acción en lugar de simplemente decirle al servidor que despache una acción.

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.

4. Haciendo que la Aplicación del Contador Funcione Sin JavaScript

Short description:

Y cuando hay un creador de acciones, el servidor esperará el despacho del creador de acciones. Aquí hay una sencilla aplicación de contador que puede incrementar, decrementar y establecer una cantidad personalizada. Deshabilitar JavaScript resulta en la falta de funcionalidad porque JavaScript se utiliza para todo esto. Para hacer que funcione sin JavaScript, elimina las devoluciones de llamada innecesarias, importa componentes auxiliares y cambia los botones por el componente de botón. Los estilos desaparecen cuando se deshabilita JavaScript en el modo de desarrollo, pero la funcionalidad permanece.

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.

5. Añadiendo Formulario y Sorpresa

Short description:

Agregamos la acción para enviar y utilizamos el componente de botón en lugar de un botón normal. Para esta parte, cambiamos el contenedor para que sea el componente de formulario. Al presionar el primer botón, se decrementará la cantidad ingresada en el campo de entrada. Al presionar el segundo botón, se incrementará la cantidad ingresada. También agregamos una sorpresa generando un número aleatorio entre -50 y 50 utilizando la acción de incrementar por cantidad.

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.

6. Trabajando sin JavaScript

Short description:

Si actualizamos la página, obtenemos el mismo número porque volvemos a enviar el mismo estado y números aleatorios codificados. En lugar de usar solo una acción, pasamos el nombre de un creador de acciones llamado incrementar por sorpresa. Esto nos permite obtener un nuevo número aleatorio cada vez, incluso cuando JavaScript está deshabilitado. Hay algunas advertencias, como las interacciones esenciales que no funcionan sin JavaScript y la carga aumentada del servidor. Sin embargo, al aprovechar los formularios y una tienda basada en eventos, podemos crear aplicaciones que funcionen sin problemas con o sin JavaScript.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.
JSNation Live 2021JSNation Live 2021
19 min
Multithreaded Logging with Pino
Top Content
Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Workshops on related topic

Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Workshop
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.