Astro & Fresh - Comprendiendo la Arquitectura de Islas

Rate this content
Bookmark

Una introducción a la emergente arquitectura de islas que puede mejorar significativamente el rendimiento de tus aplicaciones.

21 min
24 Oct, 2022

Video Summary and Transcription

La arquitectura de islas es una nueva forma de construir sitios web con poco o ningún JavaScript, utilizando bibliotecas como Astro y Fresh. La representación en el servidor mejora el SEO y los tiempos de carga, pero aún puede resultar en grandes cargas de JavaScript. La hidratación permite islas de interactividad, cargando solo el JavaScript necesario. Astro es un marco para implementar la arquitectura de islas, que admite múltiples bibliotecas como React y SolidJS. Permite la migración progresiva entre marcos e integración de diferentes bibliotecas en el mismo proyecto.

Available in English

1. Introducción a la Arquitectura de Islas

Short description:

La arquitectura de islas es una nueva forma emergente de construir sitios web con poco o ningún JavaScript, utilizando bibliotecas como Astro y Fresh. Estos sitios web se pueden dividir en sitios impulsados por contenido y sitios impulsados por datos, cada uno con diferentes necesidades y escala. Las bibliotecas de componentes como React, Vue, Svelt y SolidJs se han vuelto populares para construir estos sitios web, ofreciendo composabilidad, reutilización y facilidad de eliminación. Sin embargo, son bibliotecas del lado del cliente, lo que puede causar problemas con la indexación de motores de búsqueda y resultar en grandes cargas de JavaScript.

Hola a todos. Quiero hablar sobre la arquitectura de islas hoy. Es una nueva forma emergente de construir sitios web que te permite construir sitios web con poco o incluso sin JavaScript. Las bibliotecas líderes en esto son Astro y Fresh. Intentaré hacer una demostración de Astro en esta charla y exploraremos cómo implementa la arquitectura de islas.

Pero antes de llegar allí, quiero sentar las bases de por qué existe algo como la arquitectura de islas y cómo llegamos a este punto. Así que un poco sobre mí, mi nombre es Arpit. Puedes encontrarme en línea. Trabajo en el espacio de Web 3.0 para un protocolo DeFi y comencemos.

Entonces, pensemos en el tipo de sitios web que estamos acostumbrados a construir. Construimos blogs, documentaciones o aplicaciones muy impulsadas por datos, algo como Facebook que tiene mucha información para mostrar al usuario. Podemos dividirlos en dos tipos diferentes de sitios web: sitios web impulsados por contenido y sitios web impulsados por datos. Ambos tienen diferentes necesidades y diferentes tipos de escala que están tratando de lograr y debemos intentar usar la herramienta correcta para el trabajo.

Entre ellos, tenemos de todo. Como dije, sitios web impulsados por contenido y sitios web impulsados por datos. Pero esto no es una cosa de elegir uno u otro. Hay algunos sitios web que tendrán mucho contenido en una página, pero la otra página será principalmente estática y nada más. La razón por la que menciono esto es que estamos acostumbrados a construir muchos de estos con las mismas herramientas. Y esas herramientas son bibliotecas de componentes que se han vuelto muy populares en la última década más o menos. La más popular es React, pero algunos de ustedes pueden estar usando Vue, Svelt o SolidJs. Los beneficios de estos son que son componibles. Puedes combinarlos en diferentes componentes. Puedes reutilizarlos en toda tu aplicación. Incluso en sistemas de diseño, puedes usar tipos similares de componentes en diferentes plataformas incluso. Por lo general, son fáciles de escribir, especialmente si los escribes en pequeños fragmentos. Son muy fáciles de eliminar. La cosa sobre estas bibliotecas es que todas son bibliotecas del lado del cliente. Por lo general, no renderizan nada en el servidor. Debido a esto, tienes un problema y los motores de búsqueda no pueden indexar fácilmente tus sitios web. También entregan una carga de JavaScript grande porque tienes que servir tu propio JavaScript junto con la biblioteca en sí.

2. Server-side Rendering and Downsides

Short description:

Las desventajas de no servir HTML son que resulta en tiempos de carga lentos y un panel de contenido grande llamado LCP. Para resolver esto, se utiliza el renderizado en el lado del servidor, con frameworks como Next.js y Nuxt. El renderizado en el lado del servidor te permite renderizar algunas partes de tu aplicación como HTML, mejorando el SEO y reduciendo los tiempos de carga. Sin embargo, aún puede resultar en servir una carga de JavaScript grande.

Junto con eso, no sirves ningún HTML. Por lo tanto, tienes todas las desventajas sin ninguna de las ventajas. La principal es que hay un panel de contenido grande llamado LCP, que es lento. Esto significa que tarda mucho tiempo en que el contenido sea visible para los usuarios.

La forma en que resolvemos esto en la industria es utilizando el renderizado en el lado del servidor. Todas estas bibliotecas tienen sus propios frameworks. React tiene Next, Vue tiene Nuxt, y todos ellos se basan en algo nuevo. Los beneficios son que renderizas algunas partes de tu aplicación como HTML y lo sirves a los usuarios. La obtención de datos puede ocurrir en el servidor. Con Next.js, puedes obtener datos una vez cuando se construye la aplicación, o cada vez que el usuario accede, que es lo que hace su función getServerSideProps. Esto permite un buen SEO para ti, porque junto con JavaScript también estás sirviendo HTML, y tiene un LCP más rápido. Un problema con esto es que aún sirves una carga de JavaScript muy grande que es posible que no necesites realmente. Estos frameworks dependen principalmente de la hidratación de la página completa.

3. Hydration and Islands of Interactivity

Short description:

La hidratación consiste en servir una página HTML junto con un archivo JavaScript para hacerla interactiva. Sin hidratación significa servir solo HTML, mientras que la hidratación de página completa carga todo el JavaScript para la página completa. La hidratación parcial permite que los componentes carguen solo el JavaScript necesario. Esto permite la creación de islas de interactividad, donde cada elemento es responsable de cargar sus propios datos. Al identificar qué partes de la aplicación no necesitan JavaScript, se puede evitar el JavaScript innecesario. Smashing Magazine sirve la mayor parte del contenido en el servidor, pero utiliza JavaScript para funciones interactivas como la búsqueda.

Lo que quiero hablar a continuación es de la hidratación. La hidratación consiste básicamente en servir una página HTML y junto con eso servir un archivo JavaScript y hacerla interactiva. El HTML mostrará algunos datos en la pantalla o algún contenido en la pantalla mientras el JavaScript se carga y después de que el JavaScript se carga, hará que tu contenido sea interactivo agregando listeners de eventos, agregando listeners de clic, por ejemplo. Todo lo que harías con JavaScript, esto es lo que es la hidratación.

En este momento, pensarías en la hidratación como sin hidratación o hidratación de página completa. Sin hidratación es simplemente que tu servidor renderiza algo de HTML y lo sirve a los usuarios y eso puede llevarte bastante lejos. Solo HTML y CSS te llevarán bastante lejos, pero necesitarás algo de JavaScript más adelante. Entonces, la forma en que estos frameworks permiten esto es cargar todo el JavaScript para la página completa de una vez y luego el framework que estás utilizando cargará y se hará cargo de todo el sitio web y será responsable de la renderización, cualquier renderización que ocurra. Así que hay un punto intermedio entre esto que es la hidratación parcial. Entonces, cuando estás escribiendo un framework basado en componentes, puedes pensar en algunos componentes que cargarán solo HTML y algunos componentes que cargarán su JavaScript que necesitan junto con el HTML. Lo que esto te permite hacer es crear islas de interactividad. Lo que esto significa es que tendrás múltiples elementos en tu página que son responsables de cargar sus propios datos y esto significa que tu aplicación es básicamente una colección de muchas aplicaciones o muchas islas que cargan sus propios datos y son responsables de renderizarse a sí mismas básicamente.

Así que tomemos un ejemplo, por ejemplo, y tenemos un diseño básico para un sitio web. Es posible que desees tener un encabezado, contenido de texto, un carrusel de imágenes y un pie de página. Probablemente no necesites que todos estos se rendericen a través de React o algo así. Puedes renderizar algunos de estos en el servidor y no necesitas cargar el JavaScript para eso en absoluto. Debes identificar qué parte de tus aplicaciones no necesita JavaScript en absoluto y luego servir eso básicamente. Por ejemplo, un encabezado puede tener una barra de búsqueda, una barra lateral puede tener cierta interactividad y el carrusel de imágenes tendrá listeners de clic. Entonces, necesitan algún tipo de JavaScript que puedan cargar y habrá islas que cargarán JavaScript para sí mismas. Y el pie de página y el contenido principal de texto, es posible que realmente no necesiten JavaScript. No tiene sentido escribir un componente de React para ellos y cargar ese JavaScript de vuelta al usuario cuando realmente no lo necesitan.

Un ejemplo que también quiero mencionar es Smashing Magazine. Mira este sitio web. Todo lo que ves aquí se puede renderizar en el servidor y probablemente no necesitas nada que necesite interactuar con él. Todos estos son enlaces y hacer clic en enlaces es una característica que el navegador te brinda de forma gratuita básicamente. Pero la entrada. Si busco async await aquí, esto está ejecutando alguna consulta de búsqueda en segundo plano y todo esto es posible gracias a algún JavaScript. No puedes deshacerte de él por completo. Entonces, la forma ideal sería renderizar todo esto en el servidor e inyectar algún tipo de JavaScript. Esta barra de búsqueda en sí misma sería una isla de interactividad donde carga solo el JavaScript que necesita.

4. Implementación de la arquitectura de islas con Astro

Short description:

La implementación de la arquitectura de islas implica el uso del marco de trabajo Astro, que es astro.build. Para ejecutar una demostración, puedes utilizar el asistente de configuración ejecutando 'pnpm create astro'. Después de configurar el proyecto, puedes ejecutarlo utilizando el comando 'pnpm dev'. Sin embargo, al acceder a la aplicación en localhost:3000, es posible que inicialmente no veas nada renderizado. Esto se debe a que Astro sigue una estructura de enrutamiento basada en archivos y es necesario renderizar componentes específicos para ver el contenido deseado.

Entonces, eso es la hidratación parcial y eso nos lleva a la implementación de la arquitectura de islas architecture y la hidratación parcial. Entre eso, quiero hablar sobre astro que es astro.build. Esta biblioteca es un marco de trabajo para implementar la arquitectura de islas. Veamos una demostración de esto. ¿Cómo lo hacemos? Ejecutamos el asistente de configuración. Entonces, pnpm create astro. Vamos. Llamémoslo test. Test no está vacío. Wow. Llamémoslo test uno. Hagamos lo básico. ¿Te gustaría instalar? No lo hagamos ahora mismo. Sin repositorio git. Y realmente me gusta TypeScript con tipos estrictos. Genial. De hecho, ya había creado una demostración de Astro para esto. Así que vamos a ver qué obtenemos. Lo siento, queremos ver esto en acción. ¿Cómo ejecutamos esto? Hay algunos scripts. Vamos a ejecutar el script dev pnpm dev. Y lo siento. Vamos a localhost. Esto es 3000. Y aún no vemos nada. ¿Por qué no vemos nada? Una cosa sobre esto, sigue el enrutamiento con archivos de página, enrutamiento basado en archivos. Así que ahora vemos que no estamos renderizando nada. Veamos qué sucede cuando renderizamos nuestro componente hello.

5. Explorando dot astro y construyendo un Contador React

Short description:

La extensión de archivo dot astro viene con su propio marco de componentes y modelo de renderizado. El código JavaScript dentro del archivo se ejecuta en el servidor y se convierte en HTML antes de ser enviado al usuario. Esto permite utilizar Astro como un formato de plantilla, similar a PHP. Otro ejemplo es construir un contador de React utilizando useState para incrementar y decrementar un valor. Los componentes de React se pueden importar en archivos de Astro.

Dice hola, soy Arpit. ¿Cómo estás? Bien, exploremos qué es este componente hello. También presta atención a cuál es la extensión de archivo. Es dot astro. Entonces dot astro viene con su propio marco de componentes y modelo de renderizado de componentes, básicamente. Por lo tanto, puedes ejecutar JavaScript en esta área aquí mismo, y debajo de eso habrá un componente de archivo único que puedes exportar e importar en otros archivos de componentes, básicamente.

Entonces quiero renderizar en un H1 con el nombre, y esto es JSX, al igual que React, como muchos de ustedes pueden estar familiarizados. Si actualizo esto a algo como esto, actualizado, genial. Como puedes ver, esto es realmente rápido, así que es bueno que también implementen una actualización rápida. Una cosa, entonces este JavaScript, ¿dónde se ejecuta? Imprimió hola aquí, pero ¿se imprimió aquí? No lo hizo. Parece que este componente Azure solo se ejecuta en el servidor. Entonces en realidad no enviaste ninguno de estos JavaScript al usuario. Esto se convierte en HTML y luego se envía al usuario. Esto significa que puedes usarlo como un formato de plantilla, donde puedes hacer una búsqueda de... Fetch algo desde tu base de datos, básicamente. Y eso se ejecutaría como PHP. Hay una broma en la comunidad de Astro que dice que Astro es solo PHP, donde buscas todos tus datos aquí y renderizas plantillas. Y eso es en cierto modo verdad, realmente.

Veamos algunos otros ejemplos. Quiero construir un contador, un ejemplo interactivo de lo que debería suceder aquí. Comentemos esto. Quiero construir un contador de react, que básicamente agregará un botón de incremento y un botón de decremento. Entonces, un ejemplo simple, useState, lo incrementaremos con add, lo decrementaremos con subtract. Y veamos qué hace esto. En un archivo de Astro, puedo importar componentes React. Esto es realmente asombroso. Entonces, veamos cómo funciona esto. Componentes, contador react, punto, ¿necesito? Probablemente no. Sí. Muy bien.

6. React Counter y Astro Framework

Short description:

En Astro.build, JavaScript no se envía por defecto. JavaScript se puede habilitar utilizando directivas del cliente, como client load, idle, media y client-visible. Astro es un marco de múltiples componentes que admite la integración de React y Tailwind. Otros marcos como alpinejs, lit, preact y vue también son compatibles con Astro.

¿Qué pasó? Contador React. Estoy haciendo clic en él, pero no pasa nada. ¿Por qué es eso? Esto es extraño. ¿Está roto? No. Entonces, la cosa es que esto no es un error, es más bien una característica, en Astro.build, no enviamos JavaScript por defecto. Entonces, ¿qué significa eso? ¿Cómo habilitas JavaScript entonces? Porque estamos usando React, obviamente, queremos enviar JavaScript, no funciona sin JavaScript.

Por defecto, vemos que se renderizó lo que sea que fuera la salida, por defecto, lo que se renderizaría en el servidor, podemos habilitar JavaScript mediante estas directivas, estas directivas del cliente. Entonces, ¿qué es esta carga del cliente? Esto significa que JavaScript se cargará junto con la página cuando se cargue toda la página. Entonces, ahora si hago clic en él, ahora funciona. Eso es increíble, ¿verdad? Entonces, JavaScript solo se carga cuando lo necesitas. Esto significa que también hay otras directivas. Idle, significa que tan pronto como pueda comenzar a cargarse, básicamente. Media es, puedes cargar JavaScript condicionalmente, si estás en un dispositivo móvil, solo se cargará ese componente en el móvil, si estás en un escritorio, solo se cargará ese componente en el escritorio. Esto es lo mismo que las variables CSS. Luego, client-visible, utiliza internamente algo llamado observador de intersección para observar si el componente está en pantalla o no, y si está en pantalla, solo cargará el JavaScript en ese momento. Entonces, si estás construyendo una página de destino muy grande, por ejemplo, y tienes que seguir desplazándote y desplazándote, pero también quieres que la página de destino se cargue muy rápidamente, puedes habilitar algo como esto donde el HTML se cargará y se renderizará muy rápidamente, y el JavaScript se cargará progresivamente cuando el componente entre en la vista. Entonces, por ahora queremos mantenerlo en carga.

Otra cosa sobre Astro es que es un marco de múltiples componentes, como habrás visto, componente sólido y un componente hinchado aquí. Entonces, sí, veamos cómo funciona eso. Puedes renderizar varios de estos componentes en Astro, incluso en el mismo archivo, de hecho. Veamos cómo sucede esto, por cierto. Entonces, astro.config, estamos cargando React y Tailwind aquí. Como habrás notado, estoy usando Tailwind aquí. Esto hace que Astro pueda manejar componentes de React y componentes de Tailwind. Entonces, veamos cómo funcionan estas integraciones. Astro tiene integraciones para todos estos frameworks, alpinejs, lit, preact, vue que no estamos cubriendo aquí. Pero veamos cómo agregamos estos. Entonces, npx astro add-react, okay. Tengo un componente sólido y un componente hinchado escritos aquí. Veamos si podemos agregar esto.

7. Agregando Múltiples Bibliotecas con Astro

Short description:

Astro permite agregar múltiples bibliotecas como SolidJS, SwellJS y ReactJS a la configuración automáticamente. Permite ejecutar componentes de React y Solid juntos en la misma página. Esta flexibilidad es beneficiosa para aplicaciones grandes con múltiples equipos trabajando en diferentes proyectos y utilizando diferentes frameworks. Permite una migración progresiva de un framework a otro reemplazando componentes. AstroJS permite la integración de SolidJS, ReactJS y SwellJS en el mismo proyecto.

Astro add, veamos si podemos agregar múltiples de estos. Solidjs y swelled. Vamos. Sí, sí, ya, vean qué inteligente fue esto. Así que agregó solidjs y swelled a nuestra configuración automáticamente cuando hicimos un astro add. Así que veamos un componente sólido aquí.

Solidjs es muy similar a react. Así que creamos una señal. Creamos una función de suma y una función de resta y esto se verá casi exactamente igual excepto que el contador será una llamada a función. Y veamos. Oh, no lo importamos. Importémoslo. Contador sólido. Vean qué increíble es esto. Estamos ejecutando un componente React y un componente sólido en la misma página. Vamos un paso más allá.

Este también es un componente swelled que escribí. Lo mismo, una función de suma, una función de resta, solo incrementamos de manera diferente aquí, adjuntamos nuestros controladores de clic y importamos, digamos, solid. ¿Por qué son impresionantes múltiples bibliotecas? Imaginen que están construyendo una aplicación realmente grande, donde múltiples equipos están trabajando en diferentes tipos de aplicaciones y tienen diferentes necesidades, podrían estar trabajando en dos proyectos diferentes y un equipo quiere usar React y otro equipo quiere usar Solid, y teóricamente podrían hacerlo, bueno, en realidad ahora pueden hacerlo, y lo mismo con cualquier otro framework, y digamos que quieres migrar lentamente de una base de código basada en React a una base de código basada en Solid, podrías reemplazar progresivamente cada uno de los componentes que tienes y pasar a un framework diferente, básicamente. Sí, esto es SolidJS. Esto es ReactJS. Esto es SwellJS. En la misma cosa, habilitado por AstroJS, y eso es todo. Adiós.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM