JavaScript has come a long way from its humble beginnings, and build tools and automation systems have played a key role in making this language work well.
The History of JavaScript Frameworks
The early uses of JavaScript occurred in an internet landscape that looks a lot different from what we see today. Back then, a fairly secure and fast web meant a little bit of JavaScript went a long way, without putting a lot of burden on the system, or on the developer who was working to create something with JavaScript.
Then the internet became more complicated.
As the internet grew faster, more flexible, and more functional, more JavaScript was needed to make a project work. With all of that JavaScript code in one place, frameworks organized code and sped up performance.
JavaScript did not need to allow for importing code from one file to another. It was a browser-based system without access to local files. When the landscape of the internet changed, people got around this by loading multiple files with shared global variables.
Until 2009, that is, when CommonJS set a goal of making an ecosystem for JavaScript outside of the realm of browsers.
That’s where build tools become important.
What is a Build Tool?
A JavaScript build tool lets programmers install things like front-end libraries and frameworks, servers, testing libraries, or additional front-end build tools and other code-related tools.
A JavaScript build tool is also used to automate tasks with their own packages and plugins.
As you can see, ‘build tool’ means a lot of things in the JavaScript world. Not all tools are built alike, and not one tool will do everything. Many programmers use various build tools in combination to get a job done.
A ‘build’ is an application that is ready for other users to access and run on their own system. Ideally, you want this build to be as lightweight, bug-free, and effective as possible.
Take a look at module bundlers. Remember the problem with trying to deal with local files on a browser-based system? With modules, as introduced by CommonJS, JavaScript works like other programming languages, enabling importing and exporting of code across files without a workaround.
With a module bundler, programmers can go from 1. building with access to a file system to 2. creating an application in its finished stage, designed to work without access to that system.
Then there are task runners, JavaScript build tools that automate simple but important tasks, like cleaning up comments and code, and decreasing file sizes to make an application lean.
With this type of system in place, the application you develop will be faster, cleaner, and easier to put together. This will save time for you in development and time for the end user when he or she runs the leaner, cleaner application.
Spotlight on Webpack and Gulp
Webpack is an open source module bundler, meaning it takes all of the modules in a JavaScript application and packages them to one or more bundles to be served to a browser. Add in optional loaders and plugins, and it can optimize and transform files before bundling them, for fast, bug-free results.
Gulp is an open source JavaScript tool for defining and running tasks. Each task is defined as a JavaScript function. If you are doing something repeatedly, Gulp and its plugins automate this task. Or you can write your own code if there is not a plugin that exists to make it happen.
Gulp recognizes that a lot of development time is spent on painfully repetitive tasks. It works to reduce that annoyance so developers can get on with building.
Its plugins are very simple. All adhere to quality guidelines. As a developer, you can rely on this code to work as expected, without unwanted additions.
There are over 3700 gulp plugins right now, used by over 1000 companies.
These are just two of the JavaScript build tools available, but they are some of the most popular and well-used, for good reason. They do what they need to do quickly and simply, leaving no room for errors.
Using Build Tools and Automation Systems Wisely
There’s no one way to do JavaScript ‘right.’ That holds true for build tools and automation systems. You can choose the ones that work for you and forget about the rest, learn as you go based on what you need, or dive deeply into researching all of the options.
Whatever you choose, it should make your life easier, not more difficult, especially when it comes to automation. You will know that your build tools and automation systems are working well when you can program with a smile on your face.