Zero JavaScript has been the new buzz phrase around JavaScript libraries for the last little while. And I think it's time to address the elephant (or lack of elephant) in the room. Every library is talking about subtly different things which makes it hard at times to discern what is going on. So let's see if we can bring some clarity.
First, to answer the question. Probably not. Not really. We haven't fundamentally changed how things work. JavaScript didn't get to where it is today purely out of reckless abandonment as some critics might state.
The reasons for having JavaScript on your web pages are good ones. JavaScript can have a really positive effect on user experience. Smoother transitions, faster loading of dynamic content, better interactivity, and even improved accessibility.
So when people are talking about 0kb JavaScript what are they talking about?
Progressive Enhancement
In the past week, I've seen not one but two demo's showing how HTML Forms do POST requests without JavaScript on the page. Remix Run and SvelteKit both have the ability to server render a page and then have forms function perfectly fine without loading the JavaScript bundles.
Unsurprisingly links (<a> anchor tags) work as well in this condition. This isn't groundbreaking and every server-rendered library can benefit from this if they design their APIs to handle form posts. But it definitely makes for the jaw-drop demo.
Spoiler Alert - I especially enjoyed the Remix Run demo where they didn't tell the audience they were not sending any JavaScript to the browser for the first 30 minutes. We just assumed they were building a client app.
Rich Harris, creator of Svelte, gave a very similar demo 4 days earlier. I'm not terribly surprised as this is core web fundamentals, and less popular frameworks have been doing the exact same thing for years even with React in tow.
For the majority of us, we might not need to cater to no JS. Ryan and Michael remind us repeatedly in their video that while this is really cool, the benefit is that by using the built-in platform mechanisms they can simplify the logic that you, the developer, need to write.
The best part of progressive enhancement is it is available to every framework. It's built into the browser. More meta-frameworks should support this. Ultimately, you are probably still sending that JavaScript. It's cool that you don't have to. But it is a sort of all-or-nothing deal on a per-page basis.
React Server Components
This announcement definitely was groundbreaking. Components that only render on the Server in React. These are being advertised as zero bundle-size components.
What does zero bundle-size actually mean? Well, it means that you aren't shipping these components with your bundle. Keep in mind, the rendered templates are making it to the browser eventually through a serialized format. You do save sending the React code to render it though.
Server components are stateless. Even so, there are big savings in not bundling for libraries like React whose code scales with template size as it creates each VDOM node one by one regardless. A stateless template in a framework like Lit or Solid, is just a one-line DOM template clone on top of the template itself which needs to be sent anyway.
A better perspective is to view this as a new type of integrated API. At minimum what you save here is the component-specific data-processing you do after you load some data. React Server components let you naturally create a per-component API that is perfectly tailored for that component's needs. That API just might contain some markup, so to speak.
This means no more Lodash or Moment in the browser. That is a huge win. But the real gain is how much easier it is to avoid performance cliffs. We could have already avoided sending most of this with our APIs, but we'd need to write those APIs.
What we get is a different way to do Code Splitting, and write our APIs. We are definitely shaving some weight, but zero bundle size isn't zero size.
Islands
A year or so ago Jason Miller, creator of Preact, was struggling to put a name on an approach to server rendering that had existed for years but no one was really talking about it. He landed on the Islands Architecture.
The idea is relatively simple. Instead of having a single application controlling the rendering of the whole page, as you find commonly in JavaScript frameworks, have multiple entry points. The JavaScript for these islands of interactivity could be shipped to the browser and hydrated independently, leaving the rest of the mostly static page sent as pure HTML.
Hardly a new idea, but finally it had a name. This as you can imagine drastically reduces the amount of JavaScript you have on the page.
Astro is a multi-framework meta-framework built on top of this idea.
What's really cool about this is we are actively reducing the JavaScript sent on a page while keeping interactivity if desired. The tradeoff is these are multi-page (server-routed) apps. Yes, you could build a Single Page App but that would be negating the benefits.
To be fair any 0kb JS app would have to function as separate pages. And with Astro 0kb is just a matter of not shipping client components. Progressive enhancement like described above is a natural addition.
So Islands are definitely a way to reduce JavaScript and you might actually end up with 0kb of JavaScript where you want it. Where you don't, you don't have to load unnecessary JavaScript. And with a library like Astro you can use tools you are familiar with.
Partial Hydration
Partial Hydration is a lot like the Island's architecture. The end result is Islands of interactivity.
The difference is the authoring experience. Instead of authoring a static layer and an Island's layer, you write your code like a single app more like a typical frontend framework. Partial Hydration automatically can create the islands for you to ship the minimal code to the browser.
A lesser known gem (released back in 2014!), Marko is a JavaScript library that uses its compiler to automate this Partial Hydration process to remove Server only rendered components from the browser bundle.
Beyond the benefits in terms of DX from maintaining a single application, this opens up potential coordination of components. One such application is progressive(streaming) rendering.
A loading experience like this can be coordinated between the client and server without sending a JavaScript bundle to the browser. Just because your page has data incrementally loading doesn't mean it needs a JavaScript library. Marko's out-of-order streaming with fallback placeholders needs JavaScript on the page that gets inlined as it renders. However, with in-order progressive rendering, no JavaScript still works.
Notice the client loading states of this Hacker News Demo, and then open the network tab to see the absence of shipped JavaScript.
What's particularly cool about this is the way the browser holds navigation until the page starts loading. A page can load its static content quickly and have that similar client-side style progress indication with no JavaScript bundle.
In general, Partial Hydration extends the benefits of Islands giving the potential to treat your pages as single coordinated apps.
So 0kb?
Maybe not, but all of these approaches and libraries bring some good benefits. JavaScript brings a lot of value, but we don't need as much of it everywhere. Adding new ways to leverage the server, on top of React or Svelte, can help reduce some much un-needed bloat without fundamentally changing the developer experience.
Islands approaches allow applications that do want to operate in no/low JavaScript mode to do so in an incremental way without the buying in to be all or nothing for each page. We can even accomplish dynamic loading without shipping a JavaScript bundle.
The real winner is the developer. All of these approaches give us the tools to simplify client-server interactions. That has been the real challenge as we attempt to move more to the server. And that is the really exciting part.
Latest comments (57)
Third party scripts, how they would fit into new paradigm. Enterprise apps generally needs third part scripts (Monitoring, analytics etc.), would those functionalities move to server side as well.
If you haven't seen it I strongly recommend checking out Partytown: partytown.builder.io/
We need things in the browser for analytics but we don't need to compromise main thread performance.
Javascript does more than UI stuff... There are many things going on under the hood in web apps. We were already doing 0 javascript apps before with PHP or "progressive apps" by adding a bit of JS to them. Looks like some people forgot or are too young to understand why we have things done in a certain way today. But sure we keep improving even if it means taking a step back sometimes.
I'm a new developer. Why are devs obsessed with minimizing bundle sizes to an insane level? We live in a world where people download a 5gb update before playing a video game and web devs think 200mb is too much. Will it really be too much 10-20 years from now? They're building 5G towers and at the same moment devs are trying to get bundle sizes down to 30kb. It just doesn't make sense to me
This might be worth a read: infrequently.org/2021/03/the-perfo...
I don't think this is applicable to everything but I think things like eCommerce are the most concerned. Google is going to use performance to inform their search results coming up soon. There is definitely pressure to deliver on small size and performance.
Partial hydration sounds more like SSR of micro frontend, and Astro is also like an implementation of micro frontend.
Manual Islands like Astro are like Microfrontends more or less. They got here for a different reason. The goal instead of split ownership is to maximize the amount of static parts outside of the island. In a sense, a team might own that static part so it's a bit different. You could use the same technology but this is less concerned with how you stitch it together as much as ensuring least JS is sent.
Partial Hydration is different though. You literally write a single app. Like picture writing a normal React app (minus client-side routing). All your code is written in JSX the whole tree using React components. And then you run
npm run buildand the bundle automatically realized that most of your code never updates so it doesn't need to send it to the browser. It can move down the tree from the root eliminating components that never have props that update and aren't stateful themselves until it has isolated a few micro apps inside the main app to bundle.It is like Islands or Microfrontends perhaps in what you get out of it but it's not a way of splitting up dev. It's quite the opposite. You wrote a single app experience.
I find it unbelievable how some people manage to put on a "innovation" or a "future trend" guise for something that is definitely the past. How was data sent from browser to the server since the old days of ASP and PHP with CGI in the 1990s? Easy: making form submission. It's there even before 1995, when JavaScript arrived. But when AJAX arrived in the early 2000s it was precisely to enable a better UX, sending/receiving only the data that matters at that moment, avoiding complete requests by the browser for every single communication with the server. And that has never changed! That is, any developer can build a form submitted by the browser, without JavaScript, at any time, regardless of any library being used... Since 1991.
What's about hotwire where you can render all on the server, but also get the spa like feeling?
Hotwire does achieve the goal from a UX standpoint mostly. But a lot of this is coming from the perspective of DX. With most of these solutions (save maybe Astro) you build everything as a single app, single shared technology, single state model(most important), very similar to how SPAs are developed today. You basically write one congruent app.
Nothing wrong with Hotwire and it in a sense is a natural progression from techniques we've been using to ship partials since we've been able to AJAX. Although generally turbolinks(underlying tech) is big enough itself to bundle so I sort of view it like a framework since it is larger than Svelte or Preact. But it is sort of outside of this trend.
I see stuff like Hotwire almost complementary to any MPA architecture. Things like Astro/Marko would definitely consider leveraging the same approach. And in a sense React Server Components have a lot in common with Hotwire. I expect to see more similar things come in if library authors can figure out how to keep the DX seamless.
Thanks Ryan for the article and for the links to the talks.
The topic seems very interesting, gonna watch the videos and re-read the article to really understand the trend. Looks like it's something I overlooked.
Better known as AHAH or Asynchronous HTML over HTTP with REST and Content Negotiation. "Islands" are called HTML fragments and Partial HTML. Super powerful stuff.
webdevelopment2.com/ahah-asynchron...
xfront.com/microformats/AHAH.html
griffith.wordpress.com/2008/11/12/...
randyfay.com/ahah
medium.com/@ijoeyguerra/content-ne...
Async HTML and HTTP (AHAH) is more like Turbolinks (aka. HOTwire Turbo). It intercepts clicks on links and injects HTML fragments into the current page.
Islands Architecture is more like JS on-demand: it does not front-load all JS, but downloads it when needed (when the user scrolls to a clickable part of the page, or clicks on an interactive part which needs to execute some JS).
Idk... We've been doing "server-side rendering" for years, since we starting building traditional, multi-page applications and personally, I don't like having to debug stuff whenever something gets updated or breaks, which is why I prefer to ride the wave of JAMstack architecture nowadays. I think this works best for high-volume content websites and e-commerce sites. As for full web applications, I'd rather stick to using client side rendering; the less the server has to do, the better.
0kb JS was the past and seems like its coming back, one way or another. Having a site with 0kb JS in an utopia and is not achievable but minimizing the JS footprint is very much possible and thats where we as web devs/frontend devs should focus IMO.
As mostly a Backend Developer myself, IMO one of the things modern frontend really got right is the component model. Yes you could use "includes" or "partials" in traditional server side frameworks, but you would still need to wire the javascript in separate files, which I have some trouble to get into my head after get used to the component structure.
Itยดs really interesting to see that, from one side, traditional backend technologies trying to close the gap to modern client applications with technologies like Hotwire Turbo, Phoenix Live View, etc, while from another side client frameworks also getting closer to the server with React Server components, SvelteKit, etc.
The future looks bright IMO and hope we will reach a middle ground.
I start playing a bit with Svelte and I am really impressed with itยดs bundle size. Svelte has ~2kb gzipped while, for example Hotwire Turbo, has ~13kb gzipped. If you add Stimulus, itยดs another ~8kb gzipped.
Here goes one of their main selling points and It makes really hard to think of doing a traditional full SSR with templates again and loosing all the component based structure ;)
Yeah this is a good point. As much as client side gets flack for size the libraries and approaches innovated to combat these are actually pretty good at it. Sure that doesn't help with all the 3rd party libraries brought in but compilers like Svelte or Marko or Solid can really aid in tree-shaking where the minimal bundles can be even smaller than advertised especially on small demos.
In reality Svelte components scale different etc, so final bundle sizes can actually be a bit larger etc.. but the overall thing is still very small.
Most of the server focus libraries like Hotwire, Stimulus, Alpine are larger and in many cases have worse browser performance. But I see the tension there since client side libraries want to control the rendering on the server to deliver their experience while optimizing rather than just be an Island in many cases.
Things are definitely converging, but at the same time it's more like passing ships. This ultimately might become a language thing.
At our company, we render everything on the server. For partial page replacements etc. we use HTMX. It is so much easier than all that client-side scripting nightmare. How did people ever forget about this? Sometimes I am ashamed for my profession.
I can understand this trend from a Blog or E-Commerce POV. But for rich web applications this makes things much more complicated imo.
I was so happy when things moved away from the server to the client, where trivial functionality would not have desasterous security implications. However, it seems people definitely want to get back to these days.
Another thing I dislike about this trend is that due to increasing load on the Server it will be harder to entry the market with scalable low-cost solutions.
Why don't the frameworks make more use of dynamic import for load performance?
Why? If you render everything on the server, and let the browser do its magic, plus maybe use some HTMX, you end up only having to care about state on the back end, instead of having both frontend and backend state without any benefits whatsoever.
Why do I want to manage state in the backend? This is something at least I want to avoid at any cost.
You have to manage state in the backend anyway. This way, you simply avoid having to deal with it on the frontend, too.
Can you show me an example of state that I definitely have to manage in the backend? In my current understanding there is none.
Precisely, the models here are the opposite way. The desire here stems from the want to manage state on the frontend so using a client model lets us keep the server mostly stateless while having a single developer experience. It's basically the complete opposite approach but has the same benefits in the opposite way. The difference is arguably for many apps, the state is in the right place (closer to the customer).
I won't say this is the right solution for everything, but what is cool about this is if you wanted to scale state to the server it isn't that much of a jump, whereas given the complexity of frontend I'd say the opposite direction is not as true.
This is the fundamental difference about this time around. And why things are not just going back to how they were 10 years ago.
Thank you for this explanation. I am doing these critical confrontations mainly to find out which trends are hype and which are solid.
For sure, I think there is a lot of noise here. Especially from the primarily server rendered crowd. They've been waiting for like a decade to say I told you so. And the client approach hasn't been giving them that. There have been some missteps and some learnings but no one things things are suddenly going to go back to how things were.
The thing to discern I think revolve around architectural nuances. I always say follow the client state. This has been the bane of web dev. A musical chairs (hot potato) to see who is left holding the bag. Eventually client side was like, it is fine we like state, it is worth the complexity. If where you manage state has change you can't view even similar looking solutions the same.
My hope is with enough perspective of different projects working in this area we can see the emergent trends and better evaluate what is actually going on.
Actually, both approach are needed, its what you are building that will dictate how much state you should retain on the client-side.
Wanting to avoid server-side state at all costs is just being lazy and not wanting to be an actual developer who creates solutions to your customers problems.
You want to make everything just with front-end tech, come on, that isn't happening, there's always a service layer and a database, always.
There will always be the client/server model as long as we still use the HTTP protocol.
This split is never going away, just deal with it and become a full-stack developer.
"They've been waiting for like a decade to say I told you so"
This goes even back, I'm doing software development for 14 years, it used be called 3-tier architecture, there's always was a frontend layer, the service layer and the database layer, since the well before the first web bubble.
The client/server division is as old as the TCP/IP itself.
Front-end developers not wanting to have the server side is a funny proposition.
Let me propose not having front-end at all by allocating all the code of the server-side and creating a splitting mechanism to replace the HTML so the applications can actually run really distributed, by automatically moving running binary code between CPUs (of even different architectures), and we can end this insanity once and for all.
It's a matter of moving the boundaries. No one wants to write the interopt part. The API when there is no additional need for it.
The thinking of frontend on the backend is that you write a single app that communicates directly with your service/database layers. It isn't unlike how things were like before when we were mostly server rendering stuff. The difference is the front of backend looks more like the frontend than the backend. It's a bit like mobile development.
This is all abstraction/framework level consideration. It doesn't change or oust core backend technologies. It's more suggesting that viewing an application as only a bunch of rendered HTML pages is an antiquated model and we want a unified one. Now traditional backend technologies could(and have) take this approach too, it is just that JavaScript frameworks have been working in this ultra lean zone for years and still have advantage running in the browser. So the question is if they can bridge the gap in a way that hasn't been really successfully realized thus far.
"So the question is if they can bridge the gap in a way that hasn't been really successfully realized thus far."
That's my point, there's lot of space for engineering better things.
The irony is that using remote access gets a seamless "cloud" experience of a native application.
JS started lean, but now are so bloated that native applications outperform it. And ironically, they are smaller in size. I see that big electron 90MB blob there, its like a white gorilla in the middle of the class
Dynamic Imports + Components is sort of where this is coming from. Components lead to co-location of fetching and once we started lazy loading the client-side waterfalls started to become a problem. There are other ways to solve this of course. But the naive approach is causing larger performance issues than pretty much any optimization the React team could counter.
React Server Components are basically a different sort of Lazy Loading. They wrapped the parallelizing dynamic import problem and progressive rendering problems together. This can increase performance considerably, and was most likely motivated by usage at Facebook in their new redesign. Marko's progressive rendering and partial hydration grew from eBay's need when moving to Node almost a decade back.
This whole motion is coinciding with the move to serverless which offers relatively inexpensive metered compute. Both Remix Run and SvelteKit highlight serverless deploy as a starting configuration option. I think this is how they aim to handle scalable low-cost solutions.
Static is still king for performance, I think a way of instantly autogenerate static pages when data changes is the best, or detect when data is stale serve it client side instantly while rebuild is triggered in the background.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.