A history of JavaScript (II)
And then came Webpack, ES6, and ReactJS. And everything changed.
--
Our first part of the JavaScript story ended with the arrival of the first frameworks for creating web applications. Despite the improvements they introduced, they still had to deal with the complications inherent to the language and the absence of libraries that would allow more than automation (Grunt, Gulp…).
This situation took a 180-degree turn between 2013 and 2015. If we were to ask ourselves what sparked the web development revolution, we should definitely look back at those years. Webpack, the ES6 JavaScript specification, and ReactJS changed everything.
Webpack
Until the release of Webpack, there was no way to understand the resources of a web as a whole. Images, fonts, CSS files, and of course JavaScript were all compartmentalized. For example, if we wanted to use an image within a JavaScript file, it was our responsibility to specify its path within the project.
document.getElementById("myImg").src = "happy-dog.jpg";And if a CSS file was specifically associated with a JavaScript widget, we had to make sure that both files were loaded in the final HTML.
<html>
...
<link rel="stylesheet" href="widget.css">
...
<script type="text/javascript" src="wdiget.js"></script>Chaos was served. If we add to this that each JavaScript file included in the DOM shared variables with the rest of the files, the party was served.
// first.js
var colorCodes = {
back : "#fff",
front : "#888",
side : "#369"
};
// second.js
alert(colorCodes.back); // alerts `#fff`Yes, there were “task runners” like Gulp or Grunt that allowed us to automate certain tasks (minify, generate HTML,…), but they were incapable of seeing the components as part of a whole.
And then Webpack arrived to finally allow us to relate elements, regardless of their type. His idea was very simple: understand each element (whether it was a font, a CSS file, an image or a JavaScript file) as a module and generate from them the final “assets” of the application.
