Nuke: Revolutionizing Web Development

Hola a todos. Mi nombre es Tero Pihlainen, y soy un ingeniero de software de Helsinki, Finlandia. Soy mayormente conocido por un reproductor de video llamado Flowplayer y luego una biblioteca de herramientas jQuery. Estos fueron en su momento.

Los más modernos son Riot.js, una biblioteca de JavaScript, que es una especie de más grande... Este nuevo marco que estoy construyendo en este momento es, con mucho, el proyecto más ambicioso en el que estoy involucrado. Así que estoy feliz de presentar esto a todos allá afuera.

Así que comencemos. Aquí está el lema. Es el marco de UX para la web. Para esto, presentaré lo que eso significa. Básicamente son tres cosas. Tendrás mejores herramientas, mejor código, base, y los sitios web resultantes son mejores. Por mejor, me refiero en comparación con los marcos establecidos como Next.js o Beat o Astro.

Así que comencemos con las herramientas. Para esto, lo primero que notarás al usar Nuke es que es muy rápido. Para esto, aquí tenemos una comparación. A la izquierda, ves el marco de inicio de blogs de Next.js. Y en el lado derecho, ves el... Para esto, es algo similar, pero de Nuke. El conjunto de características es similar, y en general, se pueden comparar básicamente como manzanas con manzanas. Y cuando lo construyes, Next.js tarda como 10 segundos. Pero Nuke es un juego completamente diferente. Es como 100 veces más rápido. Básicamente todo es más rápido. Los tiempos de recarga en caliente cuando guardas un archivo y ves la reacción, cómo React responde a ti. Para esto, es mucho más rápido. Y para esto, permítanme simplemente demostrar. Aquí está esta construcción de blog con Next.js. Para esto...

Y eso... Para esto... Está haciendo cosas. Para esto... Para esto... Y tomó aproximadamente... Para esto... Nueve segundos. Y con Nuke, presiona Enter y está listo. Aquí tomó 48 milisegundos. Así que toma, cada vez que haces clic, o al menos en mi máquina, es menos de 100 milisegundos.

Para esto... La segunda cosa con Nuke es que es más simple. Para esto... Muchas menos cosas en las que pensar. Para esto... Los métodos de API y la complejidad general son un juego completamente diferente.

Para esto... Aquí mostraré la diferencia. Nuevamente, comparando cómo se construye el blog en Next.js versus Nuke. Para esto... Para esto... El blog de Next.js... Para esto, lo instalé con NPM. Descarga estos 227 paquetes, en total más de 300 megabytes. Pero con Nuke, es todo como 10 veces más pequeño de lo que es. Para esto... Un juego completamente diferente. Y esto no es solo el tamaño de las cosas. Es solo la complejidad general y la flexibilidad del sistema, y el tamaño de los rastros de pila al depurar cosas, y cuántas sorpresas obtienes, y los errores que obtienes, y ese tipo de cosas.

Así que es algo importante ser simple. Para esto... Para esto... La tercera cosa sobre las herramientas... Para esto, es la experiencia del desarrollador. Y cuando consideras los frameworks web, hay esta cosa sobre tomar un archivo, guardarlo y ver la respuesta. Para esto, con Nuke, es nuevamente un tipo de juego diferente. No solo obtienes los componentes del servidor o los componentes del cliente, sino que cada archivo que guardas, verás que el navegador reacciona instantáneamente. Para esto, es importante tener contenido aquí, y por supuesto, estilo. Para esto, hay datos. Para esto, si vas y guardas otra página, el navegador se actualizará. Puedes tener incluso múltiples navegadores, múltiples proveedores de navegadores, y todos reaccionarán a las cosas. Errores de CSS. Todo está construido con esta idea de recarga en caliente, que es una gran parte de la experiencia del desarrollador.

Déjame mostrarte. Para esto, un video. Para esto, y en el lado izquierdo, verás un bloque. Para esto, este nuevo bloque, un bloque de inicio. Y en el lado derecho, ves diferentes tipos de archivos. Y al editarlos, verás cómo el navegador recarga en caliente mientras desarrollo el sitio. Para esto, estoy editando esto. Para esto, un dato YAML, que representa los objetos de información. Y verás estos nuevos elementos de encabezado apareciendo aquí al editar. Para esto, en esta página principal. Para esto, he añadido alguna área. Para esto, cuando se guarda, el navegador se actualiza. Para esto, no es la recarga de la página. Es una operación de diferenciación del DOM. Hay un tráfico de red menor entre el servidor y los clientes, por lo que realmente debería ser instantáneo. Y es una experiencia diferente a la que tienes con este gran framework de JavaScript.

Para esto, otro ejemplo es que simplemente edito otro archivo, y el navegador reacciona a él. Lo mismo aquí. Aquí, de hecho, edité los metadatos, el área de contenido real. Para esto, los metadatos están aquí en el front matter. Aquí, estoy familiarizado con la terminología de markdown.

Finalmente, estoy editando un archivo CSS y particularmente una propiedad Mac switch en el body. Así que cualquier cosa que digas, lo verás aquí. Así que sí, esa es la idea. Para esto, para esto, para esto, para esto. Es por eso que new tiene mejores herramientas.

La siguiente cosa en la que me voy a centrar aquí es en un mejor código, lo que significa que, de nuevo, un ejemplo. Aquí hay una página principal de Tailwind comparada con la nueva página principal, y cómo está básicamente codificada. Para esto, la diferencia aquí es que para esto, para esto, para esto, sí, la página principal de Tailwind está construida con Next.js. Y la idea principal allí es que cuando hay una página compleja, comenzarás con JavaScript e importarás varios tipos de cosas. Para esto, haz la función básica de React y devuelve las cosas aquí. Tienes los metadatos aquí, y luego tienes el diseño HTML y el estilo está incrustado con estas expresiones específicas de Tailwind y clases de utilidad. Así que es realmente un proyecto de JavaScript.

Y con new, para esto, todo se reduce al contenido. Cada página que haces, y no importa cuán compleja sea, todo se trata del contenido. Así que una de las ideas principales en new es que es un entorno de desarrollo centrado en el contenido, y todo es así. Así que es algo diferente. Incluso las personas no técnicas pueden desarrollar páginas y no solo entradas simples de Pog, sino que son como páginas principales y antiguas páginas de aterrizaje allí. Para esto, para esto, otra gran cosa entre estos dos frameworks, para esto, es el tipo de código que haces. Aquí comparamos el código real detrás de este botón, y lo comparamos con el botón en la nueva página principal.

Para esto, el lema aquí es que las habilidades son atemporales, porque nuevamente, estás pasando de esta maraña de JavaScript a algo moderno y estándar. Veamos la diferencia. Así que aquí nuevamente, es el código fuente de este botón en la página principal de Tailwind. Para esto, comienzas importando estas cosas. No estoy muy familiarizado con Radix UI, React Slots, Class Variance on Authority. Para esto, algunas cosas de React, CN de Utils. Para esto, estas Clases y Expresiones de Utilidad de Tailwind. También tienes diferentes nombres para diferentes contextos para el botón, y luego estas cosas específicas de React. Así que es una forma muy común de desarrollo moderno de JavaScript. Para esto, se trata de ir a CSS moderno. Hace lo mismo. Es estándar. Es como un libro. Para esto, tienes comentarios. No tienes comentarios aquí, pero puedes hacer comentarios, a diferencia de lo que no puedes hacer entre estas clases de utilidad, y los estados, y hay este tipo diferente de... Pero de todos modos, si estás en el CSS, esto es lo que haces. Y la mayoría de los desarrolladores de UX definitivamente hacen esto. Y voy a mirar esto con el ojo izquierdo. Para esto, y para esto, y para esto, y luego para esto... Una especie de cosa importante entre cómo haces sitios web con Nix.js versus Gnu es que toda la ideología detrás de hacer las cosas. Para esta ingeniería, es ingeniería de JavaScript y Gnu es ingeniería de diseño, también llamada desarrollo de UX. Básicamente, significa que la base de código en Nix.js se trata de JavaScript o TypeScript, pero en Gnu, se centra en CSS. Para esto, el tiempo se dedica a codificar y depurar aquí en Nix.js, pero en Gnu, piensas en términos de diseño y experiencia del usuario. Además, la cantidad de código es un buen punto de referencia. En Nix.js, tiende a crecer a medida que la aplicación crece, pero en Gnu, se detiene mientras has hecho los sistemas de diseño, y luego puedes simplemente escalar el contenido. Es más minimalista, es más simple, está más basado en estándares cuando hablas de ingeniería de diseño versus ingeniería de JavaScript. Aquí, vemos la diferencia. Para este código fuente real de GitHub para la plantilla de inicio de bloque de Nix.js, puedes ver que se trata de estos archivos de TypeScript. Para esto, mezclo con React, el sistema de plantillas JSX o CSS. Sí, hay muchos de estos archivos, y todos se ven así.

Pero en Gnu, para esto, la mayor parte de la base de código es CSS. Para esto, estoy estableciendo el sistema de diseño. Y sí, para esto, tienes menos código, y todo es CSS estándar. Y puedes usar el CSS moderno porque Gnu está respaldado con el módulo llamado Lightning CSS, por lo que puedes usar anidamiento, y todo tipo de cosas modernas de CSS aquí. Pero sí, mentalidades muy diferentes al desarrollar sitios web.

Finalmente, después de mirar las herramientas y el código, vemos los resultados reales al construir con Gnu. Para esta primera cosa, verás que los sitios web de Gnu son muy, muy pequeños, lo que significa muy rápidos. Y aquí comparamos la documentación de Nix.js versus la documentación de Gnu. Tomé esto como un ejemplo porque son muy similares, con funcionalidades muy parecidas. Puedes ir allí y verlo tú mismo. Son muy similares.

Vamos a sumergirnos bajo el capó y ver qué hay detrás de estos sitios web. Para esto, el Nix.js es, en primer lugar, 645 kilobytes de HTML, CSS y JS. He destacado estos activos importantes e ignorando el contenido, y las imágenes, y cosas así. Así que sí, es principalmente JavaScript y muy grande, y termina con 52 solicitudes de HTML, CSS y JS. Para esto, uno bastante grande. Para esto, estoy terminando, como, por encima de un segundo. Pero Gnu, nuevamente, sitio muy similar, carga útil muy diferente. La carga útil es solo de 27 kilobytes, siendo el documento el activo más grande. Para esto, el archivo de JavaScript más grande es de tres kilobytes. Para esto, hay transiciones de vista, todo tipo de cosas modernas incluidas.

Y sí, las cantidades de descarga y las cifras de tiempo son bastante decentes. Para esto, la segunda cosa en los sitios web es que Gnu tiene incorporado el llamado turbo-linking, básicamente que los cambios de página son instantáneos, y están acoplados con efectos de transición de vista. Para esto, y en general con CSS moderno, puedes implementar movimiento y estas mejoras de experiencia de usuario de una manera bastante fácil.

Veamos la diferencia. Para esto, las nuevas plantillas de inicio de bloque, desde el principio, y verás lo suave que es, lo rápido que es. Para esto, y no necesitas hacer mucho para llegar a este nivel de experiencia. Hay algunas islas reactivas allí. Para esto, sí, cosas bastante geniales, diría yo.

Para esto, y como diapositiva final de lo que es Gnu y por qué es bueno, esto es un poco de lo que viene. Para esto, y porque Gnu requiere que tengas bastante experiencia con CSS, pero con plantillas, todo eso está más o menos resuelto. Y obtendrás esta experiencia de usuario muy profesionalmente diseñada y de alto nivel con diseño de movimiento. Para esto, como todo hecho, solo te encargas del contenido. Veamos cómo se verían las próximas plantillas. Hay bastantes cosas que darse cuenta aquí. En primer lugar, para esto, ves títulos haciendo diferentes tipos de movimientos cuando haces clic en esta imagen principal. Para esto, hay una gran transición y también se cuida la transición de la imagen así como eso. Y deberías ver el título. También, todo tipo de cosas como imágenes cargadas de manera diferida con... Para esto, detectando cuando están en el área visible y haciendo varias animaciones. Además, en esta página, el color de la marca se cambia muy fácilmente. Para esto, Nike, que es el cliente de este sitio web teórico. También, viste esta animación bastante genial allí. Cuando desplazas hacia abajo, hay una ligera transición en la imagen principal. Para esto, incluso hacer zoom y seleccionar te da los botones de color de la marca, bla, bla, bla. Es un diseño de muy alto nivel. Para esto, cosa respaldada por el sistema, y sí. Esas cosas son nuestra segunda en la hoja de ruta. Ahora mismo, estamos aquí. Puedes ir al nuevo sitio web, descargar y probar las cosas y verás la plantilla de inicio de blog y puedes hacer muy... Está bastante lejos.

La incorporación es genial y la experiencia de desarrollo es genial. Básicamente, lo que te mostré aquí está todo ahí. Hay algunas aclaraciones de documentación que necesitan hacerse. Luego, el tema de las plantillas, básicamente lo que te mostré con el tema de Nike. Para esto, hice aplicaciones de una sola página.

Ahora mismo, te estoy mostrando cómo hacer estos sitios web con mucho contenido, pero hay problemas similares que deben solucionarse sobre cómo hacer aplicaciones de una sola página. Pueden ser mucho más simples, rápidas y pequeñas. También, como los sitios web que se centran en la experiencia del usuario. La nube, hay mucho que mejorar, especialmente en los aspectos de rendimiento. Podemos hacer mejoras de 100x allí también.

Para esto... Así que, sí. Eso es todo. Gracias por escuchar. Estoy bastante emocionado yo mismo. Esto es lo que creo que es bastante asombroso en la escena del desarrollo de sitios web.