Really understand JavaScript
Tags: javascript, beginners, webdev, career
Published: 2019-11-21 22:03:40

**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](https://caniuse.com/#search=ES5)
[ES6](https://caniuse.com/#search=ECMAScript%202015)

**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](https://babeljs.io/) 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](https://webpack.js.org/).
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 webpack](https://thepracticaldev.s3.amazonaws.com/i/5e1a4cmyzp3vmpckj5ll.gif)
<figcaption>From https://webpack.js.org/</figcaption>

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. 🙌