Lesson Description

The "Islands vs Microfrontends" Lesson is part of the full, Enterprise UI Development: Microfrontends, Testing, & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:

Steve highlights some of the benefits of server-side rendering. For example, SvelteKit's form actions work without JavaScript but are enhanced progressively when JavaScript is enabled. Server-side rendered applications are often preferred when there are compliance constraints, like in the banking industry.

Preview

Transcript from the "Islands vs Microfrontends" Lesson

[00:00:00]
>> Steve Kinney: This is one of this, and the reason we're not even in too deep is because it's not for everyone. Like I presently don't have a use case for it at this moment, but I could definitely see a world where like the marketing side I would totally use it, right? You know, an application like that I was using, like it's still, there's not a lot to render without the JavaScript, and I also have like very, like in my last job, very weird compliance requirements, right, where we couldn't use any server-side rendering for certain customers even if we wanted to because they were all on like AWS's like private networking and the idea that we would use like Vercel or something outside that networking to do any of the rendering was like against.

[00:00:47]
Banks is all I'm going to say, you know, so like, even if you're like, well, it's best practice, I'm like, great, I would like large banks' money please, or big company money please, so yeah, some of those you have to like consider, so yeah, I think if you have a predominantly like statically rendered page where you're like progressively enhancing it, it's definitely worth considering. If it's more of like a desktop app that happens to live on the web, it's probably not the right choice for you because like, what were you rendering before the JavaScript loaded anyway at that point, you know, like, and like sometimes server-side rendering is tricky because like now you, if it can't be cached, now you're just doing all that work on your computer while they wait, you know what I mean?

[00:01:35]
Like, so it's all these things are not like always do this, is usually bad advice. You know, if you're using a lot of the trees and Apple, like the idea, like, think about it, the limitations are baked into the metaphor. Like, you remember the stuff we saw with the communication between various different pieces. It's called an islands architecture. Each one is its own island, right? There's a certain amount of, like, you know, the metaphor exists there, right?

[00:02:05]
They are each on their own island, and you will end up like, and like if you're just like, I just hate JavaScript is not the reason to take on an island lifestyle. But kind of just like look at that in terms of the other metaphors that we talked about today, which is like, at what level of each of these working at, right? Like an island just thinks about that search bar, that chat window for, you know, talking to a customer support agent, that cart interaction, right?

[00:02:39]
The build time is thinking about it in terms of like the repo and the workspace to like tie it all together and the module federation is just pulling stuff at runtime, right? Like you're not really getting a lot of server-rendered stuff because you are literally pulling JavaScript packages as you need them, right? And so like, the point is that there are different tools for different problems and that like, depending on the unique situations that you're working in, there are different ways to handle all of these things, right?

[00:03:07]
Like, and it's worth thinking about for the experience you're trying to deliver, what are you doing here, right? Cool. So yeah, like what are the differences, you know, they are, if you're like they seem mostly the same, they are just kind of flavors of a thing, right? Like, the islands are like you're doing that progressive enhancement. Like I think I said this during a break, one of the really interesting things to see in something like SvelteKit, for instance, is there is this idea of like form actions where instead of like having an API endpoint, you like define an action which accepts a POST request from like a form, right?

[00:03:50]
And so, and then you can have an enhancer on there like that is JavaScript in the case that you want to be like, oh, we want to do some validation, but the idea that the page works if JavaScript was turned off, and if the JavaScript comes on, it's all progressive enhancement after the fact, right? Versus, you know, maybe you're server-rendering the page, but like, maybe your application again is like a data visualization graph.

[00:04:15]
There's probably not a lot, not a lot happening before the JavaScript loads, right? If it's a bunch of knobs and stuff that you're tweaking to see different things, like, you're going to need some JavaScript, because no one's going to sit there and submit a form over and over and over again to see the page fit. And so like, figure out which one is right for you and kind of do that as well.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now