An introduction to the emerging islands architecture which can significantly improve the performance of your apps.
Astro & Fresh - Understanding the Islands Architecture
AI Generated Video Summary
1. Introduction to Islands Architecture
But before we get there, I want to lay the groundwork for why something like the islands architecture exists and how we get to this point. So a little bit about me, my name is Arpit. You can find me online. I work in the Web 3.0 space for a DeFi protocol and let's get started.
So let's think about the kind of websites that we are used to building. We build blogs, documentations or very data driven applications, something like Facebook which has load a lot of data to display it to the user. So we can divide these out into two different kinds of websites which are content driven websites and data driven websites. Both of them have different kinds of needs and different types of scale that they are trying to achieve and we should try and use the correct tool for the job.
2. Server-side Rendering and Downsides
Along with that, you don't serve any HTML. So you have all the downsides without any of the upsides. The big one is that there is a large contentful panel called LCP, which is slow. This means that it takes a very long time for the content to be visible to the users.
3. Hydration and Islands of Interactivity
4. Implementation of Islands Architecture with Astro
The implementation of the islands architecture involves using the Astro framework, which is astro.build. To run a demo, you can use the setup wizard by running 'pnpm create astro'. After setting up the project, you can run it using the 'pnpm dev' command. However, when accessing the application at localhost:3000, you may not see anything rendered initially. This is because Astro follows file-based routing, and it's necessary to render specific components to see the desired content.
So that's partial hydration and that gets us to the implementation of the islands architecture and partial hydration. Among that, I want to talk about astro which is astro.build. This library is a framework for implementing the islands architecture. Let's run through a demo of it. How do we do this? Run the setup wizard. So pnpm create astro. Let's go. Let's call this test. Test is not empty. Wow. Let's call this test one. Let's just do the basics. Would you like to install? Let's not do that right now. No get repository. And I really like TypeScript so strict types. Cool. So I actually had already built an Astro demo for this. So let's go ahead and see what we get. Sorry, we want to see this in action. How do we run this. There are some scripts. Let's do the dev script pnpm dev. And sorry. Let's go to localhost. This is 3000. And we don't see anything yet. Why don't we see anything. So one thing about this, it follows the routing with page files, file based routing. So right now we see that we are not rendering anything. Let's see what happens when we render our hello component.
5. Exploring dot astro and Building a React Counter
Let's look at some other examples. I want to build a counter, an interactive example of what should happen here. Let's comment this out. I want to build a react counter, which will basically just add a button and add an increment button and a decrement button. So, a simple example, useState, we will increment it with add, decrement it with subtract. And let's see what this does. In an astrophile, I can import React components. This is really kind of amazing. So, let's see how this works. Components, react counter, dot, do I need to? Probably not. Yeah. All right.
6. React Counter and Astro Framework
So, another thing about Astro is it is a multi-component framework, as you might have seen, solid component and a swelled component here. So, yeah, let's see how that works. You can render multiple of these components in Astro, even in the same file, actually. Let's see how this happens, by the way. So, astro.config, we are loading React and Tailwind here. As you might have noticed, I'm using Tailwind here. So, this makes it so that Astro can deal with React components and Tailwind components. So, let's see how these integrations work. Astro has integrations for all of these frameworks, alpinejs, lit, preact, vue that we are not covering here. But, let's see how we add these. So, npx astro add-react, okay. I have a solid component and a swelled component written out here. Let's see if we can add this.
7. Adding Multiple Libraries with Astro
Astro allows adding multiple libraries like SolidJS, SwellJS, and ReactJS to the configuration automatically. It enables running React and Solid components together on the same page. This flexibility is beneficial for large applications with multiple teams working on different projects and using different frameworks. It allows for progressive migration from one framework to another by replacing components. AstroJS enables the integration of SolidJS, ReactJS, and SwellJS in the same project.
Astro add, let's see if we can add multiple of these. Solidjs and swelled. Let's go. Yep, yes, ya, see how intelligent this was. So it added solidjs and swelled to our config automatically when we did an astro add. So let's look at a solid component here.
Solidjs is just very close to react. So we create a signal. We create an add function and a subtract function and this will look almost exactly the same thing, except the counter will be a function call. And let's see. Oh, we did not import it. Let's import this. Solid counter. See how amazing this is. We are running a React component and a solid component in the same page. Let's go ahead one step further.
This is a swelled component as well that I wrote. Same thing, an add function, a subtract function, we just increment differently here, attach our on click handlers, and import, let's say solid. Why are multiple libraries an impressive thing? So, imagine if you are building on a really large application, where multiple teams are working on different kinds of applications, and they have different needs, so they could really be working on two different projects, and one team wants to use React and one team wants to use Solid, and they could theoretically do that, well, actually do that now, and same thing with any other framework, and say if you want to slowly migrate away from React-based code base to a Solid-based code base, you could progressively replace each and every component that you have and move onto a different framework, basically. Yeah, so this is SolidJS. This is ReactJS. This is SwellJS. In the same thing, enabled by AstroJS, and that is it.