10 Years of Best of JS

Hello, everyone. This is Michael from Japan. I'm so happy to be part of the JavaScript nation, and today I'd like to introduce a project called Best of JS that I created 10 years ago. So here is the plan for today. First, we'll have a quick look at the JavaScript evolution at a high level. Then, I will tell you the story behind Best of JS. And at the end, we will see some key trends over the last years.

So let's get started with a quick overview of JavaScript evolution. So it's almost 30 years ago, and JavaScript started as a kind of toy language. So mainly, it was used to add things like form validation. But the real thing was Java, that's why it was called JavaScript. It was just a little browser. It has limited browser support and just basic DOM manipulation. And I couldn't resist sharing a snippet of what I call vintage HTML JavaScript.

Another revolution in 2009, when JavaScript basically moved to the server with the creation of Node.js by Ryan Dow. So, of course, it made possible to run JavaScript on the server. But even more important, it sparked a new era of JavaScript ecosystem, starting with the MPM package manager that became the most popular package manager.

Because it enabled rich browser applications. And at the time, we had an explosion of new libraries like Prototype, Moodle, Dojo, YUI. But there was one that won the game. I guess you remember that. It's jQuery, of course. It was released in 2006 and became a kind of standard that means JavaScript in the browser at the time. It had a magnificent API, excellent documentation, it solved a lot of issues. It was integrated with WordPress, of course. And it still can be found everywhere nowadays. Because it's integrated by default in a lot of frameworks.

Another revolution in 2009, when JavaScript basically moved to the server with the creation of Node.js by Ryan Dow. So, of course, it made possible to run JavaScript on the server. But even more important, it sparked a new era of JavaScript ecosystem, starting with the MPM package manager that became the most popular package manager. And there was a whole ecosystem that was created at the time. And the interesting thing was that the tools themselves were written in JavaScript. So, they were built tools like Grant, Gulp, Webpack, Transpiler, you may remember CoffeeScript, Babel, that is really important for script running in the client. Lintels, testing. A lot of tools.

And then we entered the beginning of the golden age of the SBA, single page application. So, these applications were enabled by AJAX because everything happens thanks to a synchronous request made by the browser. The key feature had this very fast navigation between the pages. Because you don't need a full reload. Everything happens using the history API of the browser. Another good thing is that they can be easily hosted on any static hosting service because they use a JSON API to communicate with the backend. So, they are easy to experiment a new UI because you can swap them without changing the backend. And they used to have these libraries were very popular to create a single page application. There was Backbone that introduced this idea of MVC in the browser. Knockout that introduced the binding between input and data. And I did it was refined and completed by AngularJS. There was also this library called Ember.

But the one that people remember the most was React, Vue.js, and Angular. AngularJS morphed into Angular 2. So, these are the three main libraries that are still nowadays the main UI libraries. The only downside of not only but there are some downsides related to SBA. Sometimes it's about performance. When you start small with a few pages, there is not much trouble because of the size of the bundle. But the more you add pages and the more your bundle increases in size and it can become huge.

Another downside is the SEO when everything is generated by JavaScript. It's not great for robots that index pages. Also, there are some friction sometimes when you work with the backend team because you have to synchronize between the backend team and the frontend team. You have to be sure that the version of the API you use is correct and there is no breaking changes, for example, this kind of thing. So, that's the reason why a new UI started a few years ago. It started with what we call full stack frameworks. JavaScript both in the client and in the server side.

And recently, the name changed a bit. We call that meta framework because they are built on top of frameworks like React or Vue.js. So, the most famous one is Next.js. And then we have the equivalent for Vue.js which is Next. And more recently, we have Remix, Veltkit, Solid. Veltkit being built on top of the belt, and Solid being built on top of Solid. That is a very nice alternative to React. And then we have new paradigms because now we have server components in both React and also they come to Vue ecosystem. These components can talk to the backend directly.

So, they enable a seamless integration between frontend and backend. At some point, people used to mock PHP, but there were a lot of memes and jokes about PHP coming to React because the fact that React can talk directly with a database now reminds us of PHP simplicity. Then let's move on to the second part after this a bit boring introduction.

I'd like to talk about best of JS. What is best of JS? It's a created list of JavaScript projects to help developers discover trends, libraries, and track project growth. It's a tool to help users find new projects classified under tags and quickly find known projects for documentation. The goal is to make searches quick, highlighting hot projects, latest additions, rankings, and popular tags.

Why was best of JS created? The aim is to gather all web platform-related projects in one place to share trends through filters and filter out deprecated or irrelevant projects. The creator aims to keep everything up to date and carefully tag projects. The initiative was launched 10 years ago using the domain js.org and later migrating to a personal domain.

You can see the home page that by default highlights the hot projects of the day. If we scroll down, we find the latest additions because new projects are continuously added. Rankings are also displayed, along with popular tags that classify all projects meaningfully. The main goal is to gather and share web platform projects, maintaining relevance by filtering out deprecated ones.

The creator's passion for versatile web technologies led to the creation of best of JS to empower full stack developers amidst rapid changes. By centralizing all web projects and utilizing filters, trends are shared while ensuring project validity. The meticulous process includes tagging projects thoughtfully and monitoring GitHub stars' evolution to indicate project maintenance and quality.

The initiative, starting 10 years ago, aimed to provide an up-to-date resource for developers, initially on a free domain and later on a personalized one. The focus on GitHub stars' evolution, though not solely indicative of project quality, serves as a vital metric. Projects are manually curated, ensuring relevance and accuracy, with a careful approach to tagging and maintaining project listings.

And the goal is to share the trends also using some filters. And also, something important that I want to filter out projects that are deprecated or projects that are no more relevant. Because it's easy on the web to find a blog post or things like, you know, awesome lists. Basically, ReadMe made a list of projects. But nobody is going to remove a project that is no more relevant or a project that becomes deprecated after a few more years, it depends. So, I try to be very careful about ensuring that everything is up to date.

And then, yeah, there is also this concept of tags. You know, that I try to think carefully about how to tag them meaningfully. So, I launched everything 10 years ago using this awesome free domain called js.org. Later, I got my domain. But at first, it started like that. So, I'm thankful to them.

How it works. So, the core metric is the evolution of the GitHub stars. You might find it a bit silly because it doesn't really mean the quality of the project. But it's not just the one number. It's the evolution over time that is integrated. I noticed that if a project doesn't get any star for, let's say, a given period of time, like for one year, it means that usually the project is kind of not maintained anymore or is not in a great shape.

So, the process is that usually I try to read newsletters, to read, you know, to follow important people. And every time I notice a project that is interesting, I add it manually to the best of JS, trying to find the tag, sometimes creating new tags that are missing. And every time, every day, there is a process that takes a snapshot of the number of stars and that stores everything in a database so that every day we can generate a new home page by computing the trends daily, weekly, monthly.

I also have to mention that there is a kind of sister project called JavaScript Rising Stars. I've been running that for nine years now. You can see on the screenshot, since 2016. It's a kind of snapshot of best of JS data that I take every year. And it's enhanced by a lot of comments written by me or by guest writers like Ivan or Anthony, people that are really good at what they do. I have another project posted on Astro, which is a great framework, by the way.

So, this is the edition of this year, released in January. And, you know, we have basically the rankings of the year with the most popular project of the year, which is ChatZ and UI. We're going to talk about them a bit later. Just some numbers before going to the last part of the talk. So, the first commit was 10 years ago. I did manually more than 3,000 projects. But there are only 2,200 projects showing up in the UI. So, the reason is that there is this process that I mentioned that removes the project that are no more relevant. So, it's part of the process.

So, the reason is that there is this process that I mentioned that removes the project that are no more relevant. So, it's part of the process. You know, projects get traction and over time it happens that sometimes they lose traction. New projects replace them and so on. We also have nine editions of the Rising Stars, as I mentioned. And we have 205 tags that you can find in the UI here again. So, the most popular one being the React ecosystem. We have the Vue ecosystem, of course. And we have the component library.

So, let's see, for example, what is the most popular component library right now. You can check using different criteria. For example, if I want to check only the last month, you will see that, again, it's ChatZ and UI. It was the most popular project. You can adjust and you can even add more tags. For example, if you want to limit your search to the Vue ecosystem, you can click here and you get another view. So, if you have time, please check Face.js. Going back, then I'd like to move to the last part of the talk. So, I'd like to discuss some key trends and some success stories that I picked, from this analysis. Don't expect it to be exhaustive. It's just some random picks.

First, I think the most meaningful trend is TypeScript. Because ten years ago, there were several JavaScripts competing. There was Flow from Facebook that was used a lot in the React ecosystem, TypeScript, but also some languages like CoffeeScript. There was Babel, to compile and bundle code for the browser. There was no clear winner. A key moment happened when the Angular framework was written in TypeScript in 2014. At the time, it was not an obvious choice. And then, yeah, if we fast forward, ten years later, it's crazy. TypeScript is really the de facto standard to write JavaScript. We have even new runtimes that understand that speak TypeScript by default.

So, Deno released in 2018. Burn released in 2021. They are both great tools to write things like scripts, for example. Because you can write TypeScript without the same tools. I want to add two exciting news from last year. There was this new package registry called GSR, from the Deno team. So, it's a registry that supports TypeScript natively. Also, another great news was the fact that TypeScript is going to be understood by Node.js directly, without any flag, from Node.js 23. It's not a full compilation. It's not going to throw errors, but it's going to be able to read and understand your TypeScript code by stripping out annotations.

Then another thing I'd like to talk about is the evolution of the styling and how we basically went from CSS, raw CSS, to headless components. It all started more than ten years ago, 15 years ago, with Bootstrap. Bootstrap was a great CSS framework with great ideas and great support for responsive web design. I still remember these days, I was surprised by responsive components. I used to check how it worked, and all the media queries were handled by the CSS framework. Also, this utility class that you could put to make your components or your HTML elements mobile-friendly. The main downside was they were very opinionated about the design. So, you get a consistent look and feel out of the box, but it can be hard to customize. You have to fight the CSS sometimes and avoid conflict in class, especially when you deal with a big code basis.

At the time, there was also this trend of generating CSS from what we call preprocessor. So, we have this kind of CSS, headless, stylus, post-CSS. So, all these tools were able to generate CSS, giving you the power of using things like variables, functions. And there was also the trend of the CSS in JavaScript. It was a great fit to SPA because single-page applications are very dynamic, so we need sometimes to make to adjust the style depending on the state. So, by being able to write the styles in JavaScript, you get a lot of flexibility. And also, we were able to scope styles and we were able to make the styles close to the code they belong to. And the two most famous solutions were style components and emotion. But there are some tradeoffs. Things like runtime overhead, meaning that there is some stuff happening at runtime when you run these kind of libraries. The JavaScript engine is going to update the head of your page to make some changes to the styles.

Also, they have an impact on the bundle size because in JavaScript, it adds more JavaScript to sometimes a bundle that is already big if you have a lot of logic in your application. Also, the idea, when you want to deal with server-side rendering, it can add complexity. And all these trends led to something called headless components. That's a trend that I found very interesting over the last years. So, what are headless components? They are unstyled components, meaning they come with no style. You have to style them by yourself. But they come with a great built-in accessibility. When you think about accessibility, you can think about disabled users, but you also think about poor users, things like keyboard shortcuts, for example. All the details are hard to get right at first when you want to write them by yourself. So, these libraries, like we have ARIA, LSUI, Redux Primitives, help you create applications dealing with all these tedious aspects.

And now I want to talk about Tailwind CSS, because that's one of the current standards in web development. So, Tailwind CSS, you must have heard of that, use this atomic CSS approach. So, instead of writing styles in your CSS, you write them directly in HTML as attributes. So, there is no more CSS file. There is no more risk of conflict because of all the styles that can clash. It also helps getting a consistent design system because they have, by default, a very nice system. They provide, for example, a scaling space. They also have a great Dx, developer experience, if you use the right tools in the IDE. And there is something called build time optimization, meaning there is a process that ensures that you keep, you ship only the right amount of CSS into your browser. So, in a way, it's a solution to a lot of problems that I described very briefly previously.

Another reason why it became a standard, because of great documentation. Also, the fact that it scales very well, no matter the size of your application. Also, for developers, it's great to be able to reuse the knowledge that you have accumulated over different projects. And last but not least, there is a native community and a huge ecosystem. Something interesting is that there is this kind of love-hate relationship. Some people love, some people hate. We have to say that sometimes it feels strange to rely on string concatenation. I've included here a snippet from my own code base. This is the command key search box that you see on some fancy sites. You can see this huge class name.

So, when you have to debug that, it's not that fun. So, that's a reason why there are some alternatives that provide both type safety and also the same idea of processing at build time to ensure that we ship only the right amount of CSS to the browser. There is Uno-CSS from Anthony Fu. There is Talex from Meta. There is Panda from the Chakra team. Something that I found very interesting is that sometimes it's not the best concept that wins, but it's rather the best execution. Meaning that it's also the ecosystem, the documentation, and everything that happens on social media that helps the growth of a project.

So, in a way, TeleWin CSS checks all these check boxes. And another project that I like to highlight is ChatCN UI. It comes because, in a way, related to everything I mentioned before. It's related to the headless component because it's built on top of Redix UI. It's also related to TeleWin CSS because it's something that you can customize very easily with TeleWin CSS. It was the hottest project in 2023 and 2024 in the Rising Stars project that I introduced previously.

And when it came, it was a kind of game-changer because, instead of providing components that you install by running npm install, you copy-paste the components into your codebase. There is also a command-line tool that can help you with that, but still, at the end of the day, the code belongs to your codebase. Meaning that you have ownership and you can customize the things the way you want. So, that's why I mentioned that it's great. It's really impressive how you can customize it. And it has created a whole ecosystem because this CLI can work not only with ChatCN UI components but with any registry that follows the contract introduced by ChatCN UI.

So, we have the equivalence of ChatCN for Vue, for Svelte, for Solid. And recently, in Best of JS, I introduced a tag called ChatCN. I think you can see it here. Yes, ChatCN. You can see the code available from ChatCN registry. So, most projects here are inspired by ChatCN. Meaning that you can easily grab these components and integrate them in your codebase.

And the last point I wanted to point out about the trends, you know, is the tooling. Because in the beginning, I said that with Node.js, we had a lot of tools that were written in JavaScript itself. It's great, but the only downside is that they are not super fast, especially when you deal with a big codebase. But that's the reason why over the years, we got new tools that are written mainly in Go and Rust. PSBuild was a kind of pioneer in this space and it's a low-level bundler that is used by a lot of other tools. Then there is Vite.

So, Vite is a key part of the ecosystem because it powers a lot of projects, including frameworks, libraries. I'm talking about the Astro framework, for example. There is Vitess, a modern test. It's inspired by Jest API, but it has great TypeScript support. It's always a pleasure to work with it because it works right away out of the box. And there is also Beom, which is a replacement of ESlint and Pwt. It's faster on these tools, but it leads to less boilerplate because it combines these two tools. Also, I have to mention that there are more exciting tools coming soon. There is this company called Void Zero, created last year by Ivan Yu, creator of Vue.js. There are other great tools like Wordown.

I think that's all I wanted to share about the trends. Just to summarize, ten years ago, I was building SPA with React, Webpack to compile everything with Babel. I was using a preprocessor called Stylus. Ten years later, I used Next.js. I used React components. Of course, TypeScript everywhere. Everything runs in a monorepo. It's pretty fun.

Again, the same problem as ten years before. It's hard to keep up to date. I think the best of JS is still relevant. I hope it will help you to navigate this ever-changing landscape. Please, let me know. Have a look. You can pick me on GitHub.

Thank you, everybody. Have fun at JS Nation. Talk to you soon.