Really understand JavaScript

Nuno Lemos — Thu, 21 Nov 2019 22:03:40 +0000

Frameworks, Libraries, Transpilers, Bundlers… What is this?

With JavaScript growing, multiple frameworks, libraries, transpilers and bundlers have appeared.
For developers is complicated understand all this "concepts" and most of them just "follow the wave" 🏄 and don't try to understand how this work.

In this article I will try explain all this.
Let's start! 💪🍿

ECMAScript

Firstly what is this? What is difference between ECMAScript and JavaScript?

Before the fame, the creators of JavaScript joined to the ECMA (European Computer Manufacturers Association) to create a new language with patterns and normative.
As the name JavaScript has been previously patented (by Sun Microsystems) they chose ECMAScript to the name.

The general-purpose core of ECMAScript has standardization. With this has been possible embedded this language in several web browsers.

ECMAScript 2009 (ES5), ECMAScript 2015 (ES6)

ES5 and ES6 are a versions of ECMAScript.
Currently we can use the version 2018 but modern web browsers only read the version 2015 (ES6) and in some cases, like IE, is needed use ES5.

🖥 Check-out the web browsers support:
ES5
ES6

Ok, but is possible I'm develop my app in current ECMAScript version and this working in several web browsers?
YES! 🎉

Transpilers ✒️

The most of web browsers (in this time) don't support ES6 and for resolve this limitation is needed use one transpiler.

The transpiler compiles code to same level of code/abstraction.

Babel is the best example. He take our code in ES6 (for example) and transform all code in ES5.
With this we have a bigger range of web browsers compatibility.

Frameworks and Libraries

Frameworks and Libraries are both code written and shared by someone else to make us more agile.

The difference in both is:
In Frameworks all the control flow is already there. You need follow their own pattern and structure. Framework is always the commander!
In Libraries you decide the flow. You are the commander!

For example:
Angular is a Framework.
Angular is a MVC (Model-View-Controller), have a structure and you can just start coding. You don't need decide which routing libraries to use for example.

React is a Library.
React gives freedom. It only provides the "view" in MVC and you need resolve M and C.

Bundlers ⚒

The most popular is webpack.
Webpack is a tool thats make a combination and minification of JavaScript and CSS files. Also, it can combine and minify all image files.

From https://webpack.js.org/

Let's take an example. You have this files:
app.js
utils.js
loadsh.js
global.scss
typography.scss

That tool will bundle this files in only two files:
bundle.js and style.css

Conclusion

Much more I could to say but, the message is:

Learn more about JavaScript and make your own choices.
Don't follow the masses and have your own opinion.

Thanks for reading. 🙌