9 ms·

Significant JavaScript projects from 2006 to 2020

114 points by michaelrambeau 6y ago

maps7 6y ago
Nice summary. Deno v1 was only released this year though: May 13, 2020
EE84M3i 6y ago
This is a cool list, but I was kinda hoping to see a shout out to prototype.js and script.aculo.us in the epilogue.
deleted 6y ago
[deleted]
halfmatthalfcat 6y ago
Where's Backbone, Ember, Coffeescript (the OG transpiled lang), HTML5, CSS3, WASM, ect, etc. The road to today is paved with many influential projects.
- petercooper 6y ago
  Only the first two are JavaScript projects (but do deserve a mention IMHO). The rest are more generally 'web platform' projects, but I think a thorough timeline covering the web platform more generally would be very neat/useful.
  - armandososa 6y ago
    I think Coffeescript is more related to the modern JS flow (with all the transpiling) that Rome is trying to consolidate. But I don't think it's the OG, if memory serves Objective-J was first.
- fireattack 6y ago
  Ember, Coffeescript, sure, but I won't call HTML5 or CSS3 "best of JS".
- vinnymac 6y ago
  The fact that these weren't even mentioned in the text after the diagram was disturbing to me.
- JamesSwift 6y ago
  And browserify, gulp, grunt, babel..
  - postalrat 6y ago
    Babel for sure.
- zachrose 6y ago
  Backbone especially because it seemed so obvious to so many people that there needed to be an object-oriented "MVC" framework in the browser, and only over 5-10 years of experiencing the sharp edges and missing pieces did unorthodox alternatives (Flux etc) seem interesting.
hardwaresofton 6y ago
For those that are disappointed at the omissions in the timeline: > Disclaimer > We could have mentioned a lot of other projects: > [lines omitted] > ...but we had to make choices to keep this timeline compact. > The 2 main constraints were: > We wanted 20 projects because we are in 2020 > We wanted at least one project for every year between 2010 and 2020. Reasoning kind of dumb, since this could have been a much more impactful post, but glad they laid out their reasoning. They missed some major precursors to the web we know to day -- Node Webkit existed before Electron IIRC, there's stuff like MooTools, Ember has been around basically forever (and SproutCore before that), Backbone isn't mentioned, KnockoutJS started the MVVM craze IIRC. In more recent time, they left out Parcel which is by far the easiest bundler I've ever used, JSPM & SystemJS were left out as well. I wonder if there's a better timeline out there for the history of JS tooling. Given the disclaimer at the end, they predicted people would be unsatisfied with the omissions... They were right
- swyx 6y ago
  i attempted a timeline too: https://www.swyx.io/writing/js-third-age/ https://www.swyx.io/writing/js-third-age/ but youre right that people are unhappy with whatever you eventually leave out
  - emehrkay 6y ago
    Yeah. Im surprised that both of these left out Prototype.js which, to me, seems to be the father of these client-side libs
    - armandososa 6y ago
      Yes! I think prototype was the first to use the dollar sign as a shorthand for dom methods.
    - swyx 6y ago
      i'll cop to the fact that its mainly bc i wasnt around for that time so i'm just reconstructing things from how they look to me today
thrownaway954 6y ago
i did not know that vue was 7 years old already.
Mooty 6y ago
Still looking for stuff to replace Wordpress and jQuery in this area. This trend is cool but requires a technical hurdle way bigger than before with lots of tradeof (backward compatibility/easy introduction to programming/performances on frontend).
imedadel 6y ago
It should be noted though that Rome is not a project by Facebook. It's by Sebastian McKenzie (@sebmck), who started working on it as a side project while working in Facebook. But he's working in Discord now. And the project is totally owned by him.
- goleary 6y ago
  Yeah I was going to say he probably won't be happy seeing it presented this way considering his current public opinion on Facebook.
darepublic 6y ago
A low key ad for Rome imo. I thought the title was a metaphor for the JavaScript empire into its current state not the name of a new library. Nonetheless seems worth checking out
- vmception 6y ago
  > Rome is designed to replace Babel, ESLint, Webpack, Prettier, Jest, and others. Sure, why not. Cool, lets see if it works out
  - captn3m0 6y ago
    Rome has zero deps, which is big win over the alternatives imo.
    - mikewhy 6y ago
      Still though, it casts a very wide net. I'm super fond of simplifying things and having fewer dependencies (one reason why I prefer TypeScript over Babel), but I'm not sure why I would want my test runner to ever care about formatting code, or why I would want my Markdown formatter to ever worry about bundling JavaScript files. Still, very excited to check it out!
      - Macha 6y ago
        I think tying an opinionated linter/code style tool to the rest of the tools is going to limit adoption. While people point to gofmt/prettier as examples of opinionated tools winning, Eslint (fully configurable) is still more popular by downloads than prettier (slightly configurable) and both are way more so than standard (not at all configurable).
- y-c-o-m-b 6y ago
  I'm not so sure that's a bad thing. I've never heard of it until now and just by looking at the Getting Started guide, I'm kind of excited about it: https://romefrontend.dev/#getting-started https://romefrontend.dev/#getting-started
dragosmocrii 6y ago
Is Rome supposed to do what Svelte does?
- goleary 6y ago
  No, Rome is a tool chain that is supposed to replace your separate tools for linting, building & testing. So you might use it with your React app to get rid of eslint, webpack & jest (at some point, it's not there yet). Svelte however is an entirely new framework which is fundamentally different from react/vue/angular in some very interesting ways (which I won't get in to here).
- tiborsaas 6y ago
  No, it wants to be your one stop shop: > Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. > Rome is designed to replace Babel, ESLint, Webpack, Prettier, Jest, and others.
120bits 6y ago
Nice article. I really liked MeteorJS and thought it had lot of potential. Sad to see it didn't make to 20 projects in 2020.
grouseway 6y ago
I feel even a list of the 5 most impactful js projects should include Firebug. Firebug played a huge role in removing the shroud around javascript and making it approachable to a lot of people, helping them introspect others code, and improving their own code quality. After it, javascript became a beast you could tame rather than a source of endless frustration.
- armandososa 6y ago
  Yes! But I think you had to have lived through the process of developing javascript programs without any developer tools to really appreciate Firebug and how indebted we all are to Joe Hewitt. And also, we should mention Chris Pederick's Web Developer Toolbar.
- alxlaz 6y ago
  It didn't only remove the shroud that made it difficult to work with for beginners, it made an incredible difference in terms of being able to use JavaScript for serious application development. When Firebug showed up, the JavaScript development tools were basically where under 1,000-dollar, pre-Turbo C development tools were on the PC, except slower, too. That didn't stop anyone from writing complex JavaScript programs, of course, but it was extremely useful in getting people to take it seriously, and in making people in established organizations trust it for complex UI work. I don't have words to say how dreadful JS development was before that. Debugging was extraordinarily limited by default, and we all had bits and pieces of debugging functionality pieced together from a variety of projects, most of which were glorified "debug by printf" hooks which sometimes interfered with the real application logic, and you ended up having to debug your debug code instead of whatever was actually broken.
- jitendrac 6y ago
  +1 for firebug, It really paved the way for skeleton for most of current inspector tools.
andrew_ 6y ago
Ugh. Was the author of this article in the field since 2006? From the look of this list, I'd wager not. Almost resembles a cherry pick of Google results. Listing VSCode without listing it's precursor and source of inspiration (Atom) nor the platform which enabled VSCode to be a thing (Electron) is mind-bottling¹. We're going to list Snowpack (new last year) but omit Rollup (hey, Webpack made it and it drives three other projects listed there), which is what drives Snowpack? Should've been called "Some old school stuff I heard about and shiny projects with lots of Github stars." Sloppy click-bait work, this. [1] https://www.youtube.com/watch?v=rSfebOXSBOE https://www.youtube.com/watch?v=rSfebOXSBOE
- redsky17 6y ago
  Electron is listed as #9 as the entry for 2013.
  - andrew_ 6y ago
    Bananas. I'm not seeing that on my end (Chrome). Opened Firefox and there it is. Might be time to nuke this Chrome install.
- ornornor 6y ago
  It’s automated I think via the GitHub API
apacheCamel 6y ago
These posts and subsequent comments always prove me to that the wide world of JavaScript has so much more to offer than I could ever imagine. I've only used a very small subset of tools, I really wish there was an easier place to visualize all the available tools and what they accomplish. I don't know what I don't know so it is hard to even begin.
pacomerh 6y ago
shouldn't take this list too serious. Rome is here?, it's pretty new hasn't proven it's success. also, Three.js, Atom, are not here?
sramam 6y ago
my additions: npm and esprima Both had significant impacts on the JS developer-experience.
Lammy 6y ago
Nobody remembers MooTools
- mfkp 6y ago
  I had actually completely forgot about MooTools until this comment. Brought back some fond memories of a simpler time!
- petercooper 6y ago
  For those into trivia, MooTools curiously popped up again a couple of years ago when the 'flatten' method was being discussed and it was suggested that it be called 'smoosh' to avoid breaking MooTools apps(!) https://github.com/tc39/proposal-flatMap/pull/56 https://github.com/tc39/proposal-flatMap/pull/56
ubertaco 6y ago
The article omits some major influential JS projects over the years that folks have already pointed out (Backbone, Coffeescript, Underscore -- and I'd add Require.js, as a commonplace early AMD loader before ES modules were a thing). And then it also lists 2 projects that, frankly, I've never heard of (and I try to keep pace) and speaks of them in suspiciously-glowing terms, speculating about them being significant in the future. Fine, you can't always know today what will have had the biggest impact in 5 years, but the result is that this reads like a really bad "puff piece" ad for those two projects. It's like when you see blog posts from some SaaS company about "best practices for <industry>", and the first few tips are either obvious or wrong, and the last few tips are "buy our product!"
node-bayarea 6y ago
Really like this bestofjs.org site! Kudos to the creator(s)!
bachmeier 6y ago
Not a web dev. Don't know much about Javascript itself. MathJax might be the most significant JS project ever. It enabled something that couldn't really be done before it came along, displaying complicated equations in a readable manner. Ace deserves at least an honorable mention. I was able to add a full-blown text editor to a CGI app with little effort. I'm pretty sure it's been around longer than VS Code and it's been used in more major projects.
stuff4ben 6y ago
This list shows how out-of-date I am with frontend webdev. I last did frontend stuff with Spring MVC and JSPs!! Yeah it's been over a decade. I was also using table-driven UI element placement still and hadn't fully switched over to CSS. I'll get there someday...
legerdemain 6y ago
> Babel #13 > First called `5to6`, the compiler Babel helped make the > ES6 version of JavaScript popular and was a key part of > React success. It was called "6to5" for reasons that should be obvious. But it's also just an irrelevant factoid on a timeline that at first seems to be a history of influential JS projects over the past 15 years, but in reality just takes some projects that are well-known today and kind of arbitrarily arranges them.
michaelrambeau 6y ago
This is Michael the author, thank you all for your feedback! This timeline was like a game, trying to find a balance between projects that made the history and bets for the future. The disclaimer explains some of the rules but of course the result is not perfect. I should have added that all projects mentioned are GitHub projects tracked by Best of JS app (the app I created in 2015) I totally agree about the importance of Firebug that I discovered in 2005 or 2006. Being able to debug JavaScript was such a liberation! JavaScript was no more just a toy language. I also agree about some projects should have been mentioned, at least in the disclaimer, mainly Backbone and its friend Underscore because at the beginning of 2010s, it was a kind of standard to build clean apps in the browser, using a MVC pattern. In addition of the Rising Stars projects https://risingstars.js.org/ https://risingstars.js.org/ that provides an overview by year, this timeline was the first attempt to provide a big picture about the landscape of the 10 last years, I will try to create something more thorough soon.
segmondy 6y ago
not sure why you started from 2006 maybe because of query. but I would go a bit back. Gmail - 2004 Google maps - 2005 These were the things that really woke us up that js is a game changer.
egfx 6y ago
Sadly there are some glaring omissions. How about Enyo the predecessor of React? If there was no Enyo there would be no React since a team member on Facebook was originally inspired by it ... https://en.m.wikipedia.org/wiki/Enyo_(software) https://en.m.wikipedia.org/wiki/Enyo_(software) How about PhoneGap? A Javascript library that allowed you to write native mobile apps for the first time.
nojvek 6y ago
Site doesn’t load on iOS even after a minute.

maps7 6y ago

Nice summary. Deno v1 was only released this year though: May 13, 2020

EE84M3i 6y ago

This is a cool list, but I was kinda hoping to see a shout out to prototype.js and script.aculo.us in the epilogue.

deleted 6y ago

[deleted]

halfmatthalfcat 6y ago

Where's Backbone, Ember, Coffeescript (the OG transpiled lang), HTML5, CSS3, WASM, ect, etc. The road to today is paved with many influential projects.

petercooper 6y ago
Only the first two are JavaScript projects (but do deserve a mention IMHO). The rest are more generally 'web platform' projects, but I think a thorough timeline covering the web platform more generally would be very neat/useful.
- armandososa 6y ago
  I think Coffeescript is more related to the modern JS flow (with all the transpiling) that Rome is trying to consolidate. But I don't think it's the OG, if memory serves Objective-J was first.
fireattack 6y ago
Ember, Coffeescript, sure, but I won't call HTML5 or CSS3 "best of JS".
vinnymac 6y ago
The fact that these weren't even mentioned in the text after the diagram was disturbing to me.
JamesSwift 6y ago
And browserify, gulp, grunt, babel..
- postalrat 6y ago
  Babel for sure.
zachrose 6y ago
Backbone especially because it seemed so obvious to so many people that there needed to be an object-oriented "MVC" framework in the browser, and only over 5-10 years of experiencing the sharp edges and missing pieces did unorthodox alternatives (Flux etc) seem interesting.

hardwaresofton 6y ago

For those that are disappointed at the omissions in the timeline: > Disclaimer > We could have mentioned a lot of other projects: > [lines omitted] > ...but we had to make choices to keep this timeline compact. > The 2 main constraints were: > We wanted 20 projects because we are in 2020 > We wanted at least one project for every year between 2010 and 2020. Reasoning kind of dumb, since this could have been a much more impactful post, but glad they laid out their reasoning. They missed some major precursors to the web we know to day -- Node Webkit existed before Electron IIRC, there's stuff like MooTools, Ember has been around basically forever (and SproutCore before that), Backbone isn't mentioned, KnockoutJS started the MVVM craze IIRC. In more recent time, they left out Parcel which is by far the easiest bundler I've ever used, JSPM & SystemJS were left out as well. I wonder if there's a better timeline out there for the history of JS tooling. Given the disclaimer at the end, they predicted people would be unsatisfied with the omissions... They were right

swyx 6y ago
i attempted a timeline too: https://www.swyx.io/writing/js-third-age/ https://www.swyx.io/writing/js-third-age/ but youre right that people are unhappy with whatever you eventually leave out
- emehrkay 6y ago
  Yeah. Im surprised that both of these left out Prototype.js which, to me, seems to be the father of these client-side libs
  - armandososa 6y ago
    Yes! I think prototype was the first to use the dollar sign as a shorthand for dom methods.
  - swyx 6y ago
    i'll cop to the fact that its mainly bc i wasnt around for that time so i'm just reconstructing things from how they look to me today

thrownaway954 6y ago

i did not know that vue was 7 years old already.

Mooty 6y ago

Still looking for stuff to replace Wordpress and jQuery in this area. This trend is cool but requires a technical hurdle way bigger than before with lots of tradeof (backward compatibility/easy introduction to programming/performances on frontend).

imedadel 6y ago

It should be noted though that Rome is not a project by Facebook. It's by Sebastian McKenzie (@sebmck), who started working on it as a side project while working in Facebook. But he's working in Discord now. And the project is totally owned by him.

goleary 6y ago
Yeah I was going to say he probably won't be happy seeing it presented this way considering his current public opinion on Facebook.

darepublic 6y ago

A low key ad for Rome imo. I thought the title was a metaphor for the JavaScript empire into its current state not the name of a new library. Nonetheless seems worth checking out

vmception 6y ago
> Rome is designed to replace Babel, ESLint, Webpack, Prettier, Jest, and others. Sure, why not. Cool, lets see if it works out
- captn3m0 6y ago
  Rome has zero deps, which is big win over the alternatives imo.
  - mikewhy 6y ago
    Still though, it casts a very wide net. I'm super fond of simplifying things and having fewer dependencies (one reason why I prefer TypeScript over Babel), but I'm not sure why I would want my test runner to ever care about formatting code, or why I would want my Markdown formatter to ever worry about bundling JavaScript files. Still, very excited to check it out!
    - Macha 6y ago
      I think tying an opinionated linter/code style tool to the rest of the tools is going to limit adoption. While people point to gofmt/prettier as examples of opinionated tools winning, Eslint (fully configurable) is still more popular by downloads than prettier (slightly configurable) and both are way more so than standard (not at all configurable).
y-c-o-m-b 6y ago
I'm not so sure that's a bad thing. I've never heard of it until now and just by looking at the Getting Started guide, I'm kind of excited about it: https://romefrontend.dev/#getting-started https://romefrontend.dev/#getting-started

dragosmocrii 6y ago

Is Rome supposed to do what Svelte does?

goleary 6y ago
No, Rome is a tool chain that is supposed to replace your separate tools for linting, building & testing. So you might use it with your React app to get rid of eslint, webpack & jest (at some point, it's not there yet). Svelte however is an entirely new framework which is fundamentally different from react/vue/angular in some very interesting ways (which I won't get in to here).
tiborsaas 6y ago
No, it wants to be your one stop shop: > Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. > Rome is designed to replace Babel, ESLint, Webpack, Prettier, Jest, and others.

120bits 6y ago

Nice article. I really liked MeteorJS and thought it had lot of potential. Sad to see it didn't make to 20 projects in 2020.

grouseway 6y ago

I feel even a list of the 5 most impactful js projects should include Firebug. Firebug played a huge role in removing the shroud around javascript and making it approachable to a lot of people, helping them introspect others code, and improving their own code quality. After it, javascript became a beast you could tame rather than a source of endless frustration.

armandososa 6y ago
Yes! But I think you had to have lived through the process of developing javascript programs without any developer tools to really appreciate Firebug and how indebted we all are to Joe Hewitt. And also, we should mention Chris Pederick's Web Developer Toolbar.
alxlaz 6y ago
It didn't only remove the shroud that made it difficult to work with for beginners, it made an incredible difference in terms of being able to use JavaScript for serious application development. When Firebug showed up, the JavaScript development tools were basically where under 1,000-dollar, pre-Turbo C development tools were on the PC, except slower, too. That didn't stop anyone from writing complex JavaScript programs, of course, but it was extremely useful in getting people to take it seriously, and in making people in established organizations trust it for complex UI work. I don't have words to say how dreadful JS development was before that. Debugging was extraordinarily limited by default, and we all had bits and pieces of debugging functionality pieced together from a variety of projects, most of which were glorified "debug by printf" hooks which sometimes interfered with the real application logic, and you ended up having to debug your debug code instead of whatever was actually broken.
jitendrac 6y ago
+1 for firebug, It really paved the way for skeleton for most of current inspector tools.

andrew_ 6y ago

Ugh. Was the author of this article in the field since 2006? From the look of this list, I'd wager not. Almost resembles a cherry pick of Google results. Listing VSCode without listing it's precursor and source of inspiration (Atom) nor the platform which enabled VSCode to be a thing (Electron) is mind-bottling¹. We're going to list Snowpack (new last year) but omit Rollup (hey, Webpack made it and it drives three other projects listed there), which is what drives Snowpack? Should've been called "Some old school stuff I heard about and shiny projects with lots of Github stars." Sloppy click-bait work, this. [1] https://www.youtube.com/watch?v=rSfebOXSBOE https://www.youtube.com/watch?v=rSfebOXSBOE

redsky17 6y ago
Electron is listed as #9 as the entry for 2013.
- andrew_ 6y ago
  Bananas. I'm not seeing that on my end (Chrome). Opened Firefox and there it is. Might be time to nuke this Chrome install.
ornornor 6y ago
It’s automated I think via the GitHub API

apacheCamel 6y ago

These posts and subsequent comments always prove me to that the wide world of JavaScript has so much more to offer than I could ever imagine. I've only used a very small subset of tools, I really wish there was an easier place to visualize all the available tools and what they accomplish. I don't know what I don't know so it is hard to even begin.

pacomerh 6y ago

shouldn't take this list too serious. Rome is here?, it's pretty new hasn't proven it's success. also, Three.js, Atom, are not here?

sramam 6y ago

my additions: npm and esprima Both had significant impacts on the JS developer-experience.

Lammy 6y ago

Nobody remembers MooTools

mfkp 6y ago
I had actually completely forgot about MooTools until this comment. Brought back some fond memories of a simpler time!
petercooper 6y ago
For those into trivia, MooTools curiously popped up again a couple of years ago when the 'flatten' method was being discussed and it was suggested that it be called 'smoosh' to avoid breaking MooTools apps(!) https://github.com/tc39/proposal-flatMap/pull/56 https://github.com/tc39/proposal-flatMap/pull/56

ubertaco 6y ago

The article omits some major influential JS projects over the years that folks have already pointed out (Backbone, Coffeescript, Underscore -- and I'd add Require.js, as a commonplace early AMD loader before ES modules were a thing). And then it also lists 2 projects that, frankly, I've never heard of (and I try to keep pace) and speaks of them in suspiciously-glowing terms, speculating about them being significant in the future. Fine, you can't always know today what will have had the biggest impact in 5 years, but the result is that this reads like a really bad "puff piece" ad for those two projects. It's like when you see blog posts from some SaaS company about "best practices for <industry>", and the first few tips are either obvious or wrong, and the last few tips are "buy our product!"

node-bayarea 6y ago

Really like this bestofjs.org site! Kudos to the creator(s)!

bachmeier 6y ago

Not a web dev. Don't know much about Javascript itself. MathJax might be the most significant JS project ever. It enabled something that couldn't really be done before it came along, displaying complicated equations in a readable manner. Ace deserves at least an honorable mention. I was able to add a full-blown text editor to a CGI app with little effort. I'm pretty sure it's been around longer than VS Code and it's been used in more major projects.

stuff4ben 6y ago

This list shows how out-of-date I am with frontend webdev. I last did frontend stuff with Spring MVC and JSPs!! Yeah it's been over a decade. I was also using table-driven UI element placement still and hadn't fully switched over to CSS. I'll get there someday...

legerdemain 6y ago

> Babel #13 > First called `5to6`, the compiler Babel helped make the > ES6 version of JavaScript popular and was a key part of > React success. It was called "6to5" for reasons that should be obvious. But it's also just an irrelevant factoid on a timeline that at first seems to be a history of influential JS projects over the past 15 years, but in reality just takes some projects that are well-known today and kind of arbitrarily arranges them.

michaelrambeau 6y ago

This is Michael the author, thank you all for your feedback! This timeline was like a game, trying to find a balance between projects that made the history and bets for the future. The disclaimer explains some of the rules but of course the result is not perfect. I should have added that all projects mentioned are GitHub projects tracked by Best of JS app (the app I created in 2015) I totally agree about the importance of Firebug that I discovered in 2005 or 2006. Being able to debug JavaScript was such a liberation! JavaScript was no more just a toy language. I also agree about some projects should have been mentioned, at least in the disclaimer, mainly Backbone and its friend Underscore because at the beginning of 2010s, it was a kind of standard to build clean apps in the browser, using a MVC pattern. In addition of the Rising Stars projects https://risingstars.js.org/ https://risingstars.js.org/ that provides an overview by year, this timeline was the first attempt to provide a big picture about the landscape of the 10 last years, I will try to create something more thorough soon.

segmondy 6y ago

not sure why you started from 2006 maybe because of query. but I would go a bit back. Gmail - 2004 Google maps - 2005 These were the things that really woke us up that js is a game changer.

egfx 6y ago

Sadly there are some glaring omissions. How about Enyo the predecessor of React? If there was no Enyo there would be no React since a team member on Facebook was originally inspired by it ... https://en.m.wikipedia.org/wiki/Enyo_(software) https://en.m.wikipedia.org/wiki/Enyo_(software) How about PhoneGap? A Javascript library that allowed you to write native mobile apps for the first time.

nojvek 6y ago

Site doesn’t load on iOS even after a minute.