Really understand JavaScript
Frameworks, Libraries, Transpilers, Bundlers… What is this?
With JavaScript growing, multiple frameworks, libraries, transpilers and bundlers have appeared.
For developers, it’s complicated to understand all these “concepts” and most of them just “follow the wave” 🏄 and don’t try to understand how this work.
In this article, I will try to explain all this.
Let’s start! 💪🍿
ECMAScript
Firstly what is this? What is the 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 to use ES5.
🖥 Check-out the web browsers support:
ES5
ES6
Ok, but is it possible I’m developing 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 takes our code in ES6 (for example) and transform all code in ES5.
With this, we have a more significant 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 to follow their 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 an MVC (Model-View-Controller)with a well-opined structure, and you can just start coding. You don’t need to 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 to resolve M and C.
Bundlers ⚒
The most popular is webpack.
Webpack is a tool that makes a combination and minification of JavaScript and CSS files. Also, it can combine and minify all image files.
Let’s take an example. You have this files:
app.js
utils.js
loadsh.js
global.scss
typography.scss
That tool will bundle these 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. 🙌
