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.
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.
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.
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.
Wrap-Up: Tech Tools for Software Developers