JavaScript EcoSystem

Getting to know the Javascript ecosystem can be a bit overwhelming at the beginning specially if you are not really familiar with JavaScript specific terminology like Node.js, babel, ECMAscript… and you are working or starting a new project that uses JavaScript. I have done some research to understand them myself and I thought it could be a good idea to share a summary in this post.

The beginnings

JavaScript is an interpreted and lightweight programming language that was invented in 1995. It is the language used to create dynamic websites, and it is increasingly being used for writing server applications and services using Node.js.

A JavaScript program needs a JavaScript engine to be executed and all web browsers have one. JS engines are developed by web browser vendors (chrome or safari), therefore its way to interpret the JS code is unique in all different browsers.

For instance, SpiderMonkey was the first JavaScript engine and it is currently used by Mozilla Firefox.

Safari’s JS engine is JavaScriptCore (also called Nitro), Edge has Chakra and Chrome has V8, that unlike the others, compiles JavaScript source code to native machine code during runtime instead of interpreting it ahead of time (AOT).

In order to all the JS engines interpret the language the same way, JavaScript was submitted to ECMA International for standardisation, and the result was a new language specification, known as ECMAScript, that when implemented, would be supported by all the browsers.

ES versions

New releases of ECMAScript have been published since the first standardisation, resulting in new versions of the specification.

Its versions are known as its abbreviation (ES) and the number of the version (ES1, ES2, ES3, ES4, ES5), although the most recent ones have exchanged the version number for the year of publishing (ES2015, ES2016, ES2017, ES2018)

To be consistent, it is advisable to use the features of a chosen version throughout the project. The features for the different versions can be found in the ECMA official website and there are also multiple blogs that explain them in practice.

JavaScript is up to today the most used implementation of ECMAScript.

The Back-end Ecosystem

As I explained in the previous section, JS engines are used to interpret the language and there is one for every browser. V8 is the JS engine from Chrome and since it is open source it has been used to create Node.js.

NodeJS and NPM

Node.js is an open source Javascript run-time environment that using the V8 JS engine allows to execute JavaScript code outside the browser. Thanks to this, Node.js is used to build network programs such as web servers.

Node.js primary features are: built on a single-threaded and non-blocking (commands execute concurrently and use callbacks to signal completion or failure) event loop, the Google Chrome V8 JavaScript engine, as mentioned above, and a low-level I/O API.

Node.js includes some libraries in the project by default, but in order to add more and manage its dependencies, it uses a package manager. The file that a JavaScript uses to manage its dependencies is called package.json.

NPM is the most used package manager and it can manage local dependencies as well as globally installed JavaScript tools.

Other package managers can be used such as Facebook’s Yarn.

Module bundlers

When developing, it is good practice the use of modules to structure the code and separate concerns in the web application. Modules files need to be merged into one single file in other to all of them be included in the application.

Webpack is a web module bundler that does the task mentioned above and it also bundles other assets like images and CSS. And it also watches those files for changes and it reloads the files that have been subject to any change.

Transpilers

We know that ECMAscript was created to standardise Javascript in order to make it compatible with all the browsers, but now the problem is that not all the browsers support the latest version of the specification. To be able to use the latest version of ECMAscript and to be compatible with all the browsers, a traspiler is used to convert modern JavaScript into older, browser-supported JavaScript.

The most popular transpiler is Babel as it is customisable and allows to compile between several ECMAscript versions.

Conclusion

This is just a very small part of the JavaScript ecosystem, but it could help to understand a bit better how JavaScript works, where is compiled and the tools that are being used in a project and the reason why we use them.