La próxima ola de frameworks web es BYOJS

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

El desarrollo de aplicaciones web ha tenido muchos cambios a lo largo de la vida de la web. Desde aplicaciones del lado del servidor con un toque de JavaScript hasta aplicaciones de una sola página construidas completamente con JavaScript. Ahora estamos volviendo a donde muchos nuevos frameworks web se construyen primero de forma estática, con JavaScript agregado según sea necesario. Esta charla cubre la construcción de aplicaciones web con JavaScript a través de la lente de Astro, un generador de sitios estáticos donde la elección del framework de JavaScript es única para ti.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

BYOJS significa 'Bring Your Own JavaScript'. Es un concepto en el desarrollo web que implica usar el framework de JavaScript de tu elección en un proyecto específico, permitiendo una mayor flexibilidad y personalización en la construcción de aplicaciones web.

Brandon Roberts es un desarrollador y GDE (Google Developer Expert) de Angular. Contribuye activamente a la comunidad Angular y es uno de los mantenedores del proyecto ngRx, que es un conjunto de bibliotecas reactivas para aplicaciones Angular.

Astro es una herramienta de generación de sitios estáticos que también soporta renderizado en el lado del servidor. No envía JavaScript del lado del cliente por defecto, promoviendo una arquitectura optimizada centrada en la velocidad y eficiencia de carga.

Jamstack es una arquitectura diseñada para hacer la web más rápida, segura y fácil de escalar. Utiliza JavaScript, APIs desacopladas, y contenido pre-renderizado en HTML para optimizar la entrega y la experiencia del usuario en aplicaciones web.

El renderizado en el lado del servidor (SSR) es crucial para mejorar el tiempo de carga y la interactividad de las aplicaciones web, permitiendo que el contenido se pre-renderice en el servidor y se envíe al cliente, donde puede ser hidratado para añadir interactividad.

Astro permite integrar diversos frameworks de JavaScript como React, Vue, y Svelte, entre otros, permitiendo que los desarrolladores utilicen sus conocimientos existentes para construir componentes estáticos que luego pueden ser mejorados con interactividad en el cliente.

Brandon Roberts
Brandon Roberts
23 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La próxima ola de frameworks web es BYOJS, que cubre la historia y evolución de la construcción de aplicaciones web. La evolución de los frameworks web y los sistemas de compilación incluye opciones populares como React, Angular y Vue, así como sistemas de compilación avanzados como Webpack y Rollup. El aumento de las herramientas de medición de rendimiento y la adopción de Jamstack han llevado a una mejora en el rendimiento web. La arquitectura Jamstack se centra en la pre-renderización de páginas, la desacoplación de APIs y servicios, y la mejora de páginas con JavaScript. Astro, un generador de sitios estáticos con soporte SSR, promueve la arquitectura de islas y la hidratación parcial.

1. Introducción a los marcos de trabajo web

Short description:

La próxima ola de marcos de trabajo web es BYOJS. Cubriré la historia y evolución de la construcción de aplicaciones web y las diferentes pilas utilizadas. Luego hablaré sobre las aplicaciones del lado del servidor tradicionales como PHP, ASP clásico, .NET MVC y Express. Después de eso, discutiré las aplicaciones del lado del cliente y la introducción de los empaquetadores como Gulp, Browserify y Require.js.

La próxima ola de marcos de trabajo web es BYOJS.Hola, mi nombre es Brandon Roberts.Puedes seguirme en Twitter en Brandon T Roberts, donde publico gifs, hablo de deportes y a veces bloqueo a personas, así que puedes seguirme allí.Soy un mantenedor en el proyecto ngRx, que es un conjunto de bibliotecas reactivas para aplicaciones Angular.También soy un GDE, lo que significa que he estado en la comunidad de Angular durante un tiempo y he podido contribuir con algunas cosas interesantes allí.También soy un ingeniero de experiencia de desarrollo en App-Rite.

Entonces, para la agenda de esta charla, quiero cubrir la historia y evolución de la construcción de aplicaciones web y las diferentes pilas que he utilizado a lo largo de los años.Hablaré sobre la próxima ola de marcos de trabajo web y el significado de BYOJS.Y hablaré sobre lo que eso significa a través del proyecto Astro.

Primero hablaré sobre la historia y evolución de la construcción de aplicaciones web.Como mencioné antes, esto es desde mi punto de vista, que ha sido durante varios años.Tu experiencia puede variar aquí.Así que aclaremos eso desde el principio.Pero creo que tendremos algunas similitudes en el camino.Así que adentrémonos en la historia de la construcción de aplicaciones web.Tenemos aplicaciones tradicionales del lado del servidor, de las que hablaremos, aplicaciones del lado del cliente, y aplicaciones más modernas del lado del servidor antes de entrar en la próxima ola.

Para las aplicaciones tradicionales del lado del servidor, hablemos de algunas de ellas.Está PHP, que sigue siendo un favorito entre los desarrolladores.También hay otra opción clásica, ASP clásico, que es similar a PHP, pero utiliza una sintaxis mássimilar a .NET.También está .NET MVC, que es otro marco de trabajo de Microsoft utilizado para construir aplicaciones webcon una separación más clara entre modelo, vista y controlador.Express también surgió como una forma de servir una aplicación HTML utilizando varios lenguajes de plantillas.Por supuesto, hay muchos otros que surgieron en el camino.Estos marcos de trabajo del lado del servidor realizaban todo el procesamiento en el servidor y simplemente devolvían el HTML.Si había alguna funcionalidad de JavaScript en las páginas que estábamos construyendo, seagregaba más o menos como scripts en línea o archivos de JavaScript ligeramente empaquetados concatenadosjuntos.Esto se hacía generalmente utilizando la conocida biblioteca jQuery en ese entonces.

Ahora pasamos a las aplicaciones del lado del cliente.Cuando se introdujo más JavaScript en estas aplicaciones, comenzamos a vermás empaquetadores involucrados en el proceso para optimizar el envío de JavaScripta los usuarios.Herramientas de código abierto como Gulp, que es un conjunto de herramientas que utiliza un sistema de construcción en tiempo real.También está Browserify, que es una de las primeras herramientas que permitió a los desarrolladores utilizarmódulos en estilo Node.js y compilarlos y usarlos en el navegador.Require.js, que es un sistema de carga de módulos y archivos que también utiliza importaciones en estilo Node.js.

2. Evolución de los marcos de trabajo web y sistemas de construcción

Short description:

Y System.js, Backbone, Ember, AngularJS, Angular, React y Vue son algunos de los marcos de trabajo web que han surgido. En el espacio de React, Next.js y Remix son opciones populares. Angular Universal y Nuxt se utilizan para el renderizado del lado del servidor en los espacios de Angular y Vue. Webpack y Rollup son sistemas de construcción avanzados, mientras que Lerna y NX son herramientas para el desarrollo de monorepos. El cambio hacia el envío de aplicaciones JavaScript ha llevado al surgimiento de herramientas de medición de rendimiento y a la adopción de la pila Jam. Herramientas como web.dev proporcionan métricas para medir la velocidad de carga de la página.

Y System.js, donde se utilizaban módulos ES estándar que podían cargarse en el navegador. Y con la evolución de las aplicaciones web construidas para aplicaciones del lado del cliente, surgieron más marcos de trabajo web en el camino. Backbone, que fue un marco MVC temprano para construir aplicaciones del lado del cliente. Está Ember, que se basa en gran medida en convenciones e integraciones para construir aplicaciones web. Estaba AngularJS, que se integraba con HTML existente con cosas como directivas. Angular, su sucesor, que se orientaba a aplicaciones más generales. React, introducido en 2013, que realmente cambió la forma en que pensamos en la construcción de interfaces de usuario en JavaScript. Y está Vue, que ha surgido y ha abierto su propio camino como una herramienta para construir aplicaciones web. Y, por supuesto, hay muchos otros marcos de trabajo web que han surgido en este espacio.

Para las aplicaciones modernas del lado del servidor que se construyeron en JavaScript, en el espacio de React tenemos opciones como Next.js, que es el marco de trabajo de React más grande hasta la fecha para construir aplicaciones. Y recién llegados a este espacio como Remix, que combina algunas cosas del cliente y del servidor de una manera más cohesiva. En el espacio de Angular tenemos cosas como Universal. Angular Universal para renderizar aplicaciones del lado del cliente en el servidor. Y para Vue tenemos herramientas como Nuxt y también hay otras en este espacio.

Las aplicaciones modernas de JavaScript también trajeron la necesidad de sistemas de construcción másadvanced. Y así, algunos de estos sistemas facilitaron el empaquetado de JavaScript para enviarlo al cliente. Y esto también facilitó el envío de aplicaciones completas del lado del cliente. Webpack probablemente sea el más notable hasta la fecha, con su amplio conjunto de complementos y personalización al igual que Rollup, que es un paquete de módulos para JavaScript que compila pequeñas piezas de código en algo más grande como una biblioteca o una aplicación. También está V, que ha llegado y ha arrasado en el panorama web con su velocidad y extensibilidad a través de complementos, y también se basa en Rollup y está construido en un lenguaje diferente, pero se utiliza para construir aplicaciones JavaScript. Si estás en el espacio de monorepo, hay herramientas como Lerna, que orquesta las herramientas de construcción, y ha estado presente durante varios años, y herramientas como NX que han modernizado el desarrollo de monorepos de código abierto. Y también hay otras en este espacio que han surgido como sistemas de construcción o herramientas para ayudar a los desarrolladores a enviar aplicaciones web. Porque al final del día, solo queremos volver a enviar código y aplicaciones a los usuarios y brindarles una buena experiencia de usuario. Así que a continuación, hablaré sobre la próxima ola de marcos de trabajo web y formas de enviar JavaScript, enviar aplicaciones con JavaScript que han surgido. Así que podemos comenzar con el por qué ha habido un cambio en las aplicaciones tradicionales del lado del servidor para enviar solo o la mayoría de las aplicaciones utilizando JavaScript y obtener algunas de las nuevas herramientas que están disponibles. Una cosa que realmente ha surgido es la idea de nuestras herramientas que te permiten medir el rendimiento de las aplicaciones web y brindarte más información sobre ese proceso. También está el surgimiento de la pila Jam, que analiza cuál es la definición de eso y cómo funcionan las diferentes herramientas en ese espacio. En lo que llamamos, al menos para esta charla, la web de primer nivel estático o basada en HTML. Tenemos herramientas que miden qué tan rápido y cuánto tiempo tarda en cargarse una página. También hay muchas herramientas conocidas. Estoy utilizando web.dev como referencia para las métricas que utilizamos para medir esto.

3. Web Performance and Next Wave of JavaScript Tools

Short description:

Whitehouse es una herramienta para medir el rendimiento web. Métricas como el tiempo de primer byte, la primera pintura de contenido, la pintura de contenido más grande y el tiempo de interacción proporcionan información sobre el uso de JavaScript. HTML es la forma más rápida de entregar contenido. La próxima ola de herramientas de JavaScript incluye Jamstack, SSG, renderizado del lado del servidor y marcos de trabajo basados en HTML.

Whitehouse es una herramienta que también puedes utilizar para medir el rendimiento web de una aplicación. Y solo estoy enumerando algunas de las métricas que puedes utilizar para hacer eso. Hay tiempo de primer byte, que es una métrica que mide el tiempo entre la solicitud de un recurso y cuando el primer byte de la respuesta comienza a llegar. Hay primera pintura de contenido, que mide el tiempo desde que la página comienza a cargarse hasta que se renderiza cualquier parte del contenido de la página en la pantalla. También hay pintura de contenido más grande, que es una métrica importante centrada en el usuario para medir la velocidad de carga percibida, porque marca el punto en el que la página carga, en la línea de tiempo de carga de la página, cuando es probable que se haya cargado el contenido principal de la página. También está la métrica de tiempo de interacción, que mide cuándo comienza a cargarse la página, cuándo se han cargado sus principales subrecursos y el usuario es capaz de responder a la entrada del usuario. Por lo tanto, el uso de estas herramientas y métricas nos ha permitido obtener mejores conocimientos sobre cómo estamos utilizando o sobreutilizando JavaScript en las aplicaciones. Paquetes más grandes significan más JavaScript para procesar y HTML siempre ha sido la forma más rápida de enviar contenido a los usuarios. Por lo tanto, queríamos buscar una mejor combinación allí. Entonces, ¿cuáles son algunas de las próximas herramientas en la próxima ola de construcción de aplicaciones con JavaScript? Tenemos Jamstack y hablaré sobre qué es Jamstack y cómo proporciona algunas herramientas para construir aplicaciones web con JavaScript. Hablaré sobre SSG o generadores de sitios estáticos. Hablaré sobre el renderizado del lado del servidor. Y luego hablaremos sobre las aplicaciones web estáticas o basadas en HTML que están surgiendo o los marcos de trabajo que están surgiendo ahora para ayudarnos a enviar código.

4. The Jamstack and the Static-First HTML-First Web

Short description:

El Jamstack es una arquitectura diseñada para hacer que la web sea más rápida, segura y fácil de escalar. Se centra en pre-renderizar páginas, desacoplar APIs y servicios y mejorar páginas con JavaScript. Herramientas como QUIC, Spellkit, Eleventy, Eels y Astro son ejemplos de la nueva ola de herramientas que priorizan la renderización de HTML primero y agregan JavaScript selectivamente. Astro, un generador de sitios estáticos con soporte SSR, promueve la arquitectura de islas y la hidratación parcial. Proporciona un equilibrio entre entregar contenido rápidamente y ofrecer una experiencia de usuario rica.

Entonces tenemos el Jamstack, y la definición del Jamstack ha evolucionado a lo largo de los años. Al principio, se parecía más a esto, donde el Jam y Jamstack estaban en mayúsculas y se referían a usar JavaScript para mejorar páginas, APIs y, lo más común, funciones sin servidor para descargar datos, obtener del cliente o integrar más código en el cliente y, por supuesto, HTML para renderizar contenido en una página.

Hoy en día, Jamstack se define más como una arquitectura diseñada para hacer que la web sea más rápida, segura y fácil de escalar. Se basa en muchas de las herramientas y flujos de trabajo que los desarrolladores utilizan para ayudarlos a ser más productivos. Y eso es solo lo que se encuentra en la página jamstack.org para la definición.

Los generadores de sitios estáticos se centran en la pre-renderización, donde las páginas se renderizan en tiempo de compilación y se sirven en el cliente sin ningún HTML incluido. En Jamstack, también se centran en desacoplar APIs y servicios de las aplicaciones del lado del cliente y mejorar estas páginas con JavaScript porque el HTML ya está renderizado en lugar de usar JavaScript para renderizar la página en su totalidad. También existen aplicaciones renderizadas en el lado del servidor que se encuentran en este espacio, donde la pre-renderización se realiza en el servidor y luego se envía al cliente. Después de que se renderiza la página, se carga el JavaScript del lado del cliente y se hidrata la página para hacerla más interactiva. Aquí es donde aún enviamos uno o tal vez algunos paquetes al cliente para manejar esto en la aplicación del lado del cliente. Como mencioné antes, esto proporciona un tiempo de interacción más rápido si estamos midiendo el rendimiento de la página en sí. Cada una de estas herramientas se ha movido en esa dirección de tratar de obtener el contenido y los datos lo más rápido posible al cliente. También debo mencionar que HTML siempre ha sido la forma más rápida de llegar allí. Entonces, estas nuevas herramientas se están moviendo hacia lo que se llama una web de HTML primero o una web de HTML primero, donde la forma principal es renderizar HTML y luego agregar algo de JavaScript de diferentes maneras, o incluso no agregar JavaScript en absoluto, para los diferentes tipos de sitios web que se van a construir.

Algunas de estas herramientas incluyen QUIC, que es un marco de trabajo de HTML primero relativamente nuevo que renderiza todo el HTML utilizando SSR y solo, a un nivel muy granular, genera el JavaScript que necesitas. También está Spellkit, que utiliza la renderización en el lado del servidor con mejora progresiva para mejorar la página, donde aún obtienes los beneficios de HTML primero y con la funcionalidad adicional. También está Eleventy, que se creó como una alternativa de JavaScript a Jekyll. Esto también no envía JavaScript del lado del cliente por adelantado. Otra herramienta que descubrí recientemente se llama Eels, que es nueva en este espacio, y luego está Astro, del cual hablaré más. Es una herramienta de generación de sitios estáticos que tiene integraciones adicionales. Como mencioné antes, Eels es relativamente nuevo y se inspiró en Astro. Pero lo más importante que queremos aquí es un equilibrio donde aún podamos ofrecer contenido a los usuarios lo más rápido posible al tiempo que brindamos una experiencia de usuario rica para las aplicaciones web.

A continuación, quiero hablar sobre esta nueva web de HTML primero a través del proyecto Astro. Astro es un generador de sitios estáticos que también ha agregado recientemente soporte para renderizado en el lado del servidor. No envía JavaScript del lado del cliente por defecto cuando está renderizando las páginas de la aplicación en tu sitio web. Promueve cosas como la arquitectura de islas y utiliza la hidratación parcial, de lo cual hablaré más y tiene integraciones. Y luego hablaremos sobre lo que eso significa en el mundo de BYOJS, como lo llamo. El generador de sitios estáticos se ocupa principalmente de sitios web, por lo que estás construyendo cosas como páginas de destino, sitios de marketing. También hay blogs, cosas que no requieren mucha interactividad del usuario o tal vez solo un poco de actividad del usuario, interactividad y simplemente hacer una diferenciación general entre sitios web y aplicaciones web.

5. Astra and the Islands Architecture

Short description:

Astra utiliza el renderizado en el lado del servidor para eliminar JavaScript y enviar solo el marcado. Admite hidratación parcial para componentes interactivos. La arquitectura de islas carga componentes de forma independiente. Las directivas controlan la carga de componentes según la visibilidad y la actividad del usuario. Astro se integra con frameworks populares, permitiendo el renderizado estático y la interactividad posterior. Obtén más información en astro.build.

Como mencioné antes, Astra no envía JavaScript por defecto. Por lo tanto, utiliza el renderizado en el lado del servidor o el renderizado en el lado del usuario para renderizar estos componentes en la página. Lo hace eliminando todo el JavaScript al renderizar la página en el momento de la compilación y enviándote solo el marcado para que puedas usarlo con tus estilos y presentar esos datos al usuario.

Como mencioné antes, Astra admite la hidratación parcial. Por lo tanto, hay áreas donde necesitarás algo de interactividad. Lo logra proporcionando o cargando solo lo necesario para el cliente en ese momento específico. Cada componente específico tiene una cierta funcionalidad de JavaScript, como un carrusel de imágenes, una barra de búsqueda con autocompletado o incluso una barra lateral móvil. Estas son cosas que se renderizan en el cliente y aún quieres tener algo de JavaScript allí para mejorar esa experiencia.

Como mencioné antes, la arquitectura de islas es la idea de utilizar la hidratación parcial para construir sitios web completos. Esto es una alternativa al proceso común de construir un sitio web, como un paquete en JavaScript y enviar ese paquete completo al usuario, ya sea un solo paquete o tal vez algunos paquetes cargados de forma diferida. Pero aún así, todos estos componentes se cargan de forma individual para el sitio web o tal vez una pequeña aplicación web en sí. Y todas estas cosas se cargan de forma aislada, es decir, no están conectadas entre sí de ninguna manera, por lo que no tienen ninguna dependencia de lo que se necesita cargar para ellos.

Al mirar una página de ejemplo, tenemos algunas áreas distintas. Podríamos tener una cabecera donde la cabecera se carga de forma independiente en su propia isla. Una barra de navegación en el lateral que puede tener sus propios subcomponentes y el área principal para mostrar contenido en la página. Como mencioné antes, todas estas cosas se consideran islas y se cargan de forma aislada e independiente entre sí.

La arquitectura de islas o los componentes en la arquitectura de islas también hacen uso de diferentes directivas. Estas son directivas que, cuando se utilizan en los componentes, indican cuándo cargar el componente cuando la página se carga, para no cargar el JavaScript hasta que el componente esté presente en la página. O si el usuario está navegando por la página y está inactivo, entonces cargar esos componentes. Definitivamente se aprovecha de diferir eso tanto como sea posible para mostrarlo o cargar ese JavaScript para el usuario.

Entonces, ¿qué significa esto en términos de BYO JS que he estado mencionando durante esta charla? BYO JS significa traer tu propio framework de JavaScript, incluido allí. Y Astro lo hace a través de integraciones. Astro es diferente porque puedes utilizar tus conocimientos existentes de tu framework elegido y Astro sabe cómo integrarse con esos frameworks web y renderizar esos componentes en la página de forma estática. Y agregar interactividad a esos componentes más tarde cuando lo necesites en el cliente, por lo que obtienes lo mejor de ambos mundos.

Astro admite casi todos los frameworks comúnmente utilizados que admiten componentes, como React, Vue, Svelte, Solid y más. Hay más que solo mencioné aquí. También tienen APIs que te permitirían integrar cualquier framework de JavaScript en una aplicación de Astro. Puedes obtener más información sobre el proyecto Astro en astro.build. Puedes leer más en la documentación, aprender más sobre las integraciones y ver cómo puede ayudarte a construir sitios web más rápido. Así que definitivamente échale un vistazo. En resumen, hablé sobre la historia y evolución de la construcción de aplicaciones web, utilizando el renderizado en el lado del servidor, el lado del cliente y las aplicaciones y frameworks. Hablé sobre la próxima ola de frameworks web, algunos de los cuales están disponibles hoy en día, como el uso de Jamstack y otras herramientas en ese espacio. Y hablé sobre el proyecto Astro. Puedes obtener más información sobre Astro en astro.build para leer más sobre la documentación y obtener más información o incluso participar en el proyecto.

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)