Thread by @loige

"Yo, why are #JavaScript and its ecosystem so messy?!" 😡

Well, I am glad you asked... Let me tell you a story! 🤓

🧵👇

For starting... #JavaScript was not designed to be the language that it is today!

JS was created in 1995 by @BrendanEich for Netscape, a web browser that was trying to come up with a language to make the web more interactive

@BrendanEich #JS wasn't related w/ #Java, so why did they call it Java-Script?! Duh! 😳

Java was trendy! it was possible to build interactive sites by embedding Java apps in pages (applets). So it was mostly a #mktg move: "JS: the lightweight Java alternative" or something like that I guess

@BrendanEich I was 8 at the time, so my first encounter with #JavaScript was probably about 6-7 years later when I started to play around with #Frontpage and #DreamWeaver... I remember being confused by JS & its evil twin brother #JScript!

They looked almost identical, but not really 😢

@BrendanEich JScript was an attempt by #Microsoft to reverse engineer and re-implement #JavaScript and make it available for Internet Explorer (which also supported #VBScript, a scripting language based on #Basic) 😵

My first prog language was #qBasic, so VBS was actually easier for me! 😀

@BrendanEich I remember hopping into some #web development forums and no one really liked JS & JScript. Devs were like: "It's a toy, it's slow and insecure" or "this will never be something mainstream!"

If you don't believe me, ask @pelger! 😀

@BrendanEich @pelger In 1997 something cool happened: the #EcmaScript standard (Ecma-262) was published: ecma-international.org/wp-content/upl…

This was the first standard specification for a scripting language that all browser vendors could conform to!

A bit of a peace treaty in the ongoing browser's war! ⚔️

@BrendanEich @pelger If you have ever been confused by #EcmaScript vs #JavaScript:

- EcmaScript is a blueprint for a language
- JavaScript is an implementation of that blueprint (btw, another one was #ActionScript for Flash)

@BrendanEich @pelger Lots of stuff happened in the following 10 years.
While JavaScript was getting a more and more standard implementation, browsers still didn't really have uniform APIs to interact with the DOM and other browser capabilities. So JS development was still quite tedious! 🤨

@BrendanEich @pelger Also, web development was server-driven, very little still happened on the frontend.
That started to change in 2005 when the "AJAX paper" was published proposing a new approach where the frontend could dynamically fetch data and re-render dynamically

📄 courses.cs.washington.edu/courses/cse490…

@BrendanEich @pelger One of the biggest innovations at the time was definitely #jQuery, published in 2006 by @jeresig
It became a universal API to interact with browser capabilities (handling all the browser-specific differences).
It was also one of the first JS #OSS projects with great docs & DX!

@BrendanEich @pelger @jeresig I remember using jQuery was pure joy! ❤️ You could easily find tons of examples in the docs. There was even a search feature! Soon there was even a booming ecosystem of jQuery plugins for all sorts of needs.

For the first time, using #JavaScript was feeling fun & productive! 🤗

@BrendanEich @pelger @jeresig in 2009 something interesting happens: @jashkenas releases the first version of #CoffeeScript, a high-level language that compiles to... JavaScript! 🙀

This was another attempt at making the JS experience more pleasant and it definitely influenced the future of the language!

@BrendanEich @pelger @jeresig @jashkenas At this point, a new revolution: in 2008 #Google enters into the browser business with #Chrome! Why does this matter? Because it ships with @v8js an entirely new #JavaScript engine that can run JS faster than anything else thanks to black magic and compiler tricks! ⚡️

@BrendanEich @pelger @jeresig @jashkenas @v8js Of course, all the other browsers don't waste any time and the browser war starts again! This time is about having the fastest engine to run #JavaScript!

@BrendanEich @pelger @jeresig @jashkenas @v8js Now, this is an important detail about #JavaScript... There isn't a standard way of interpreting and executing it! There are different engines with different characteristics and tradeoffs (and sometimes subtle bugs 🐞)!

More on this later...

@BrendanEich @pelger @jeresig @jashkenas @v8js All this investment into engines had an interesting effect: developers started to realize that now the game was getting quite serious! Hardware was improving, the web was everywhere (even on multiple devices), #JAVASCRIPT WAS EVERYWHERE and it was getting faster and faster!

@BrendanEich @pelger @jeresig @jashkenas @v8js This is probably what inspired Ryan Dahl to try to build server-side applications with #JavaScript, which lead to the creation of #NodeJs in 2009!

@BrendanEich @pelger @jeresig @jashkenas @v8js I remember discovering #NodeJs (probably around 2011) and thinking "WOW, I can finally use one language to build full stack web applications! I'll be saving tons of time and avoid code duplication everywhere!" 🤯

@BrendanEich @pelger @jeresig @jashkenas @v8js At that point, it was clear to me I would end up spending a lot of time building projects w/ #Nodejs! Little did I know that a few years later I would end up co-authoring one of the most appreciated books on the topic thanks to @mariocasciaro! 😻

📙 nodejsdesignpatterns.com

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro #NodeJs changed everything, not just for me but for the industry! It was proof that #JavaScript could be an excellent tool even outside the boundaries of the browser and that increased the adoption even more! At this point, everyone was optimistic about JavaScript's future!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro Ok, this is just half of the story! We still haven't answered the question at hand here: "WHY IS JS SO FRIGGIN MESSY?!" 🤬

Let's talk more about engines, #EcmaScript, and how #JavaScript is actually executed!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro In 2015, ECMA-262 got a major improvement: with the release of #ES2015, the language got new features and capabilities. The race for new features has never stopped; since then we get a new major edition with new features every year (#ES2016, … #ES2022).

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro Keep in mind that different engines need to keep up with this race and keep implementing all these new features as they come into the spec!

Of course, they are not going to do it all at the same time, so at any given moment, different engines will support different features! ☹️

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro Also, JS alone is not so useful! We generally want to interact with the underlying system (the browser, the filesystem, the network, etc).

Guess what?! all these integration layers are not entirely standard! 😲

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro - Node.js came up with its own bespoke core library
- Browsers have finally agreed on having a Web platform, but that took a long time!

And I am not going to talk about module systems here (but yeah that is another problem!)

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro BTW, today there are many JS runtimes other than browsers and #NodeJs!

- @deno_land (also by Ryan Dahl) and #Bun (by @jarredsumner) are the main contenders to run JS on the server
- @HermesEngine is an engine optimized for mobile!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine All these engines and runtimes support different capabilities! It's a friggin' huge matrix if you really want to understand what can you use and where... 🙈

But not to worry, there is a website for that! 🤓 caniuse.com

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine Ok, but what if you really want to use something that is not (fully) supported yet?

Well, you might have 2 options:

- Use a polyfill to provide an implementation for a missing function
- Use a transpiler (like @babeljs) to "compile" new language features to old JS!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs The fact that we can "transpile" newer #JavaScript to older (and more widely supported) JS should make you think! 🧠

I know, I know... you are now wondering if you can even get crazy things that don't even exist in the standard! 🤯

Like what?!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs Like, #JavaScript but with a types system and type checking!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs Yeah, exactly like @typescript (and @flowtype)!

These are new languages that are built on top of JavasScript and require special tooling to be transpiled and executed on a JavaScript engine!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype I still remember that when I saw TypeScript for the first time I thought it was somewhat similar to #ActionScript 3, which was supposed to be EcmaScript 4 (an edition that never shipped and that was dropped in favor of ES5!)... certain ideas are destined to come back! 🧟‍♀️

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype But, what about mixing #JavaScript up with #XML (in a weird way) so it becomes somewhat easier to write web applications?!

Isn't manipulating XML and #HTML what we do most of the time?!

It should be simple and natively supported by the language, right!? 🤥

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype I know I know, you are thinking about #JSX and @reactjs!

Yes, JSX is also a non-standard feature and you can't just run code using JSX without transpiling it first!

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype @reactjs #JSX and #TypeScript are (probably) great ideas, but they are effectively JavaScript "dialects". They require extra tooling and additional setup. They add an additional level of indirection and they contribute highly to the JavaScript ecosystem's "messiness"! 🥵

Use them wisely

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype @reactjs On the other end, there might be a future where #EcmaScript evolves to support something like #TypeScript and #JSX natively and we could have our cake and eat it too! 🍰👩‍🍳

This is how #JavaScript keeps innovating after all!

Some WIP is already here: github.com/tc39/proposal-…

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype @reactjs I hope this short story gives you a feeling of how JS has organically evolved from a small language to mainstream success.

Let's acknowledge that the ecosystem is a bit messy in its own way, but it's also a beautiful and varied World, full of opportunities! 🥰

@BrendanEich @pelger @jeresig @jashkenas @v8js @mariocasciaro @deno_land @jarredsumner @HermesEngine @babeljs @typescript @flowtype @reactjs If you still despise #JavaScript, that's OK. 🤗

... But remember that there are only 2 kinds of languages:

- The ones people complain about
- The ones nobody uses!

😛

If you found this thread interesting, please consider following me and sharing this post 😍

https://twitter.com/loige/status/1554922711226392578