Software developers use a variety of tools for their work. So far, we’ve looked at infrastructure and backend tools (Part 1) and code and project management tools (Part 2). In the final part of this series, we will look at the tools that automate routine tasks and help developers to test and verify their software before it ships or becomes part of a production system.
Most of the tools in this part are targeted to web developers, since they mostly deal with Javascript. But similar tools are used by all types of developers to automate routine tasks and perform tests on code commits.
General Automation with Gulp and Grunt
Gulp and Grunt are two Node.js-based automation platforms. Both of these tools allow you to automate repetitive tasks and have them run automatically on certain conditions. This could include running automated tests, packaging files for distribution, linting code, optimizing images, and other scriptable tasks. Both need to be programmed with the tasks you’d like to perform and customized using plugins. There are some differences between the two tools that you should understand before deciding on one.
Grunt is the older of the two tools, so it has a slightly larger community and install base, and thus more plugins to choose from. But this means that it runs somewhat slower than Gulp. Grunt uses temp files to keep track of state and handle intermediate automation tasks, which means that the disk must be written to at each step. While this won’t be noticeable for smaller projects, at a larger scale the speed difference may become noticeable.
Gulp is a newer project, so it doesn’t have as large of a community or plugin library. And instead of intermediary temp files, it makes use of node streams. This means that the entire process stays in memory, rather than being written to disk. This makes Gulp up to 50% faster than Grunt for many operations. But this pipelining process can be more confusing to learn, and configuration files can be more challenging to write in Gulp.
Ultimately both tools are able to accomplish the same tasks, so deciding which to use comes down to personal preferences and the needs of the project or the team.Webpack: A Smarter Tool for Building Projects
If you just need to compile assets and dependencies for distribution, Webpack can help you to do that without the extra coding required to use Gulp or Grunt. Also built on Node.js, Webpack can also be customized extensively to the requirements of the project.
Javascript development and frontend web development now usually involves the use of many different modules. While using modules keeps each developer from having to “reinvent the wheel” and write the same code over and over, it can lead to module bloat — where there are dozens of different Javascript files and assets involved to make a project work.
Webpack can help to cut down on module bloat. When run, it intelligently searches through a project and compiles only the required assets into a few (or even just one) static module that can then be used everywhere on the project instead. It can also handle other build-time functions like optimizing images and linting, but this optimization is its main function.
While Webpack is simpler out-of-the-box than Gulp and Grunt, its more complex features can have a steeper learning curve. But for frontend web development, it’s becoming an indispensable tool for preparing applications for production and distribution.
Javascript Browser Testing with Karma
One of the oldest challenges in frontend web development is the fact that there are dozens of browsers out there, each with its own Javascript implementation. While recent years have seen fewer incompatibilities and better adoption of standards, testing is still needed on a variety of browsers. That’s where Karma comes in.
Karma spawns a web server, and then automatically launches browsers pointed to the web server. It runs a series of automated tests, and displays the results of the test. This makes testing your code across a variety of browsers much faster and simpler than it used to be.
Karma has many customization options for more advanced workflows and in-depth automated testing, but even out-of-the-box it can help to speed up your testing and validation workflow.
Advanced Testing with Browserstack
Similar in principle to Karma, Browserstack brings automation to browser and device testing for mobile apps and web applications. Rather than local testing, Browserstack uses virtualization to run tests across multiple devices and browsers at the same time.
This can be done interactively, using their Live service or automatically using the Selenium framework. They also offer a visual UX testing via their Percy service. Browserstack is a paid service, but they do offer free trials and some access to the visual testing service for free. Additionally, they offer discounts for freelance developers and free access to their products for open-source projects.
Unit Testing with Jasmine
In unit testing, code is written that verifies that certain parts of a program work as expected given certain input values. For example, take a function that adds two numbers and returns the result. The unit test for that function may test that it can add two positive numbers, two negative numbers, a positive number and a negative number, and two large numbers. The test would specify the inputs and the expected outputs. If the outputs match the test, then the test passes. This is different from the functionality testing provided by Karma or Browserstack — but both kinds are important in modern software development.
Unit tests are an important part of test-driven development, which includes the extreme programming and Scrum methodologies. In TDD, unit tests are written before code is written — and when the tests pass, the code is complete. Tests can then be run as the code is changed, expanded or refactored to ensure that nothing has broken in the program. Unit testing can be built into continuous integration/continuous delivery (CI/CD) pipelines, so that the tests are automatically re-run anytime code is committed to the repository.
Some programming languages, like Python and Ruby, include built-in unit testing support. But because Javascript doesn’t have built-in unit testing functionality, a third-party framework needs to be used. That’s where Jasmine comes in. It allows tests to be written for Javascript code. This can be used for both frontend and backend development, since Jasmine is designed to be browser, framework and platform-independent.
Wrap-Up: Tech Tools for Software Developers
Today’s software developers use dozens of different tools to make their job easier. This series has shown you just a sample of all of the tools that you may encounter when writing software. All of these tools were written to solve a particular problem — from the expensive, closed nature of UNIX that inspired Linus Torvalds to create Linux, to the sprawling nature of Javascript modules that motivated the creation of Webpack. Thinking about how these tools came about and what problems they solve can help you to think more like a developer. Think about how you would use them to make your job easier and faster — that’s what software developers do every day! And who knows — you may end up creating a tech tool of your own that can help other developers too.
