How Is This NPM Frontend So Fast? 🔥

Hey friends, today I want to talk about npmx, a fast modern browser for the npm registry. And don't worry, this isn't something like a new JavaScript package registry or a package manager that you have to learn. This is just a front end for npmjs. So let me show you an example. Look how fast this is. For example, if I search for swelt, immediately I get results and boom, I can just go to swelt. So let me actually compare it to npm. So let's see if swelt is even cache. That also depends the speeds, right? So I start typing. So okay, nothing happens. All right, let me just click search. Okay, it took a second. It's really not that slow, right? So let's see if this is cached. Okay, so this is cached. So I'm not sure if you know, but Microsoft basically owns the entire development ecosystem. They own npm, they own GitHub, they own VS Code. And previously people would laugh and say, "Oh, Microsoft embrace extend and extinguish." But these days it feels like Microsoft just skips the middle step and they don't extend anything. They let platforms like npm and GitHub just wrote without any meaningful improvements. So for example, if you look at npmjs, there isn't even a dark theme. And I consider that an accessibility feature. And let me show you another example. For example, if I search for solidjs, where is solidjs? Nowhere. Again, enter doesn't work. All right, let me click search. Uh Ryan Solid. Yeah, that's the creator. But where is SolidJS? Nowhere. Oh, I have to be specific. SolidJS-JS. All right, here it is. Finally, and it takes a second. Did you see that? Because it wasn't cached. But if we go to npmx and if you search for solid js, it immediately finds the package. Boom. That's how simple that was. All right. So, it's really amazing what happens when people come together. So, here is an announcement for npmx, a fast modern browser for the npm registry. So, npmx is about speed and simplicity. And later, we're even going to look at how they achieve that. So it makes it easier to find, evaluate, and manage npm packages. And it also gives you useful data like the install size, module format, and outdated dependencies. So you can make better decisions about the packages you use. And what's also interesting is that npmx is building social features using at proto. But the funniest part is that basically one guy said, "All right, I'm tired of this I'm going to start this project and I'm going to ask people for help." And it exploded in popularity. So Daniel Ro, the open source maintainer, founder and leader of the Noxcore team had an idea and he made the first commit to the npmX repository. So let's see how it ended. So the power of the community, things move fast. Within 24 hours, 49 pull requests had been opened. 2 weeks later, the community had contributed thousand issues and PRs. So this isn't some meme hobby project, right? This is serious. And it includes a bunch of useful features like download statistics, outdated dependency warnings, module format, does it support ESM or CJS, install size, even a JSR cross reference. So this is another package registry, multi-provider repo support, version range, resolution, package likes, and social features and performance recommendations. All right, so let's look at an example. So here is a SW package. So we can see the version. We can see that it's built and signed on GitHub actions. You can see it supports types ESM and CJS. And I assume because it has these types, it can generate this documentation. So we can also look at the documentation which clankers love. So that's something really cool. And of course, we can also browse the code if you want. And this is something that npm supports also. But here is a cool feature. So we can compare the swell package to other libraries. So we can compare it to React. We can compare it to Vue and we can compare it to SolidJS for example. So you have this useful table here with all of the relevant information and you have this nice graph and you can see holy react is at 75 million downloads. That's crazy. It like dwarfs all other frameworks. That's how popular React is. So we actually have to remove it to even the scales otherwise we wouldn't be able to read anything. But yeah, now you can see that Vue is at an impressive 9 million downloads. Swelt is going up there with 3 million downloads and solid and 1 million downloads. So yeah, that's really cool. Let's go back. And as you can see here, we have other miscellaneous information about the repo, the license, dependency, so you can see the dependency graph if you want, the install size, of course, swelt is a compiler, so you're not going to ship this code to the browser, but you can also see vulnerabilities when it was last published, installation instructions, and so on. And of course, here is the readme from the SW documentation. And we can see weekly downloads. And this is another cool feature. So npmx parses the markdown file and it has hardcoded playground links. So it can find them and it can display them here. So in the case of swel we can actually go directly here to the swelt playground and here is the nodejs compatibility. We can see versions if it latest outdated and so on. So here are the dependencies and we have some other meta information like keywords and maintainers and just this entire design and feel is just so pleasant and also whatever npmjs link you have you can just replace it with npmx and it's going to work. All right so this was the basic package overview but of course you can do more things. We already looked at how we can compare packages, but we also have this sleek settings panel so you can customize the appearance if you want. And it's really beautiful. And of course, you have some connect features. So you can connect to the npm CLI to manage packages and orgs. So it's going to prompt you with this. So you can input all of your information here. And of course, if you care about social features, you can connect to atmosphere. And if you look at what is an atmosphere account, npmx.dev uses the AT protocol. So basically the AT protocol is the centralized social media and the most popular example of that is blue sky. So as it says here it allows users to own their data and use one account for all compatible applications instead of your data being in the hands of these cringe corporations. All right. So how is this thing so damn fast? Well the first thing it uses Nox the meta framework on top of you which works similar to other frameworks like Nex.js and socase. So basically the first page render is going to be server side rendered for SEO but more importantly for performance because you don't want loading spinners everywhere. You just want something immediately for the user to see and then subsequent navigations are using JavaScript. So it becomes a single page application. So for example if you go here you're going to see it's going to be instant. There is no page reload and etc. But of course even if you use the best framework in the world it wouldn't mean anything if you didn't take advantage of caching. And this project goddamn uses advantage of caching. And what they're using is incremental static regeneration. So let me actually show you how cool this is. So this is basically a feature on Versel that uses stale while revalidate. So this is incremental static regeneration. So basically you don't have to set your own cache headers. It does that for you. So it's the best of both worlds like something in between static and dynamic content. So basically when the user visits your page and it's about the time to revalidate it expired etc. You're not going to have to wait for the content to generate. It's going to serve you the stale content and it's going to regenerate in the background. So as it says here at validation time you have the trigger a function reruns in background update ISR cache and then it's going to purge all the CDN regions. And it's so fast because it's served from Versel's edge cache. So visitors continue to get the cached version while Versell generates the new content. And there's even a better graphic for that that I found. So let's look at this blog post. All right. So here is the versel edge network. So let's say for example that you didn't cach anything. We get a complete miss. In that case it's just going to generate everything in real time and populate the cache. All right. So the next user comes and it's a hit and it's going to get the cache. But of course if the cache expires and it's time to revalidate. You don't have to wait as the next user. You're just going to get the stale content back and in the background is going to generate and populate the cache. And we can see that if we go to the repo. So we can see that they have for the routes here define ISR. So we can see for the API when it's going to expire each hour. So let's see here are the downloads, docs, files. All right. So here is for the packages. So it's going to refresh every minute. And this is awesome because you don't have to worry about cache control headers. It's going to set it for you. But there's other cool things that this project uses. So it doesn't use the normal npmjs registry even though there's an option for it. It uses an Alolia package. So if we search for let me see Alolia. Yeah, here it is. Alolia npm search index. So this is a really fast search index maintained by Alolia and JS deliver. So for example if you go here to the repo. So here it is npm Alolia replication tool. So you can see you can use this yourself if you want. So that is how it's blazingly fast. And there is also other insane things that I didn't even know about. So there is this package fast npm meta. And let me show you why they need this. This is going to sound insane. So let's read the motivation. npm registry API is fairly old and not very efficient. All right, how bad can it be? Right, for example, requesting the V package will make you download almost 5 mgabytes of data. Remember this is just so you get the npm version which represents 36 megabytes of uncompressed JSON data. What the heck? And that is insane. People are complaining about data centers and AI. Why don't we stop the waste here? What is happening? This is a lot of data just to get the latest version of a single package. You think well godamn doesn't this make you think because they say AI is so amazing is going to empower developers to do this and that but meanwhile all these platforms rot nothing meaningful is being added or fixed. No one cares. All right friends so give npmx a try and I'll catch you in the next one. Peace.