Benjamim Alves - Senior Software Engineer

Let’s be honest: JavaScript is awesome to develop, implement and test solutions at a fast pace in different environments. Whether it’s websites, mobile apps, backend services, frontend Web Apps, you name it — JavaScript can do it.

However, unlike other languages, JavaScript by itself doesn’t provide a safe and comfortable environment to build software on a large scale. That’s where modern tooling comes to the rescue!

Keep scrolling to learn more about Frontend tools, and discover our favorites.

Image of Tools Photo by Cesar Carlevarino Aragon on Unsplash

Why Frontend tooling is so important:

Big products are developed by many teams;
Consistency tops perfection every day;
Convention over configuration;
Enhances code editors and language features;
Provides a better developer experience;
Ensures quality.

  Note: The following list intends to cover and provide the necessary tools to build sustainable Frontend code-bases shared across many teams. Our preferences at tb.lx will be marked with a 🌻 just because I like sunflowers. 😅

Package Managers

Package Managers help us to automate processes like installing, upgrading, configuring, and removing packages on our project.

NPM (Node Package Manager): released in 2010, the most popular and default package manager installed alongside with Node.js installation;
YARN 🌻: released by Facebook in 2016 to address some performance and security issues that NPM had at the time;
PNPM: released in 2017 by Zoltan Kochan with the promise to be faster and more efficient than NPM or YARN.

Bundlers

Bundlers are used to pack together JavaScript modules into one or more JavaScript files, so they can be executed in the browser.

WebPack🌻: there’s not much more to say about it. It’s the most recognised and used bundler in the JavaScript community;
Parcel: claims to be a “Blazing fast” bundler, more so than WebPack and Browserify, for example;
Rollup: comes with the promise to compile small pieces of code into something larger and more complex, such as a library or an application;
FuseBox: is also a fast JS bundler/loader with a comprehensive API, built in Code splitting, Hot Module Replacement (HMR), and first class TypeScript support with zero configuration;
Pax: is a bundler for development purposes only, as it includes only what is necessary for development. For that reason, it entitles itself “The fastest bundler in the galaxy”;
Browserify: allows you to write require the same way that you do in Node.js;
Poi: is a bundler built on top of WebPack, aiming to make developing and bundling apps with WebPack as easy as possible;
Snowpack: is an alternative to heavier, more complex bundlers like WebPack or Parcel, and leverages on JavaScript’s native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows;
ESBuild: wants to bring a new era to the build tool performance and create an easy-to-use modern bundler along the way.

Build tools & Task runners

These will help us improve our day-to-day work by automating repetitive and necessary tasks, like minifying, compiling, linting, unit-testing, etc..

Gulp: allows you to automate your repetitive workflows and compose them to create efficient pipelines. There’s a lot of plugins for Gulp, but in case you don’t find one plugin that suits your needs, you can develop your own. It’s all about JavaScript;
Grunt: runs in Node.js, so it’s simple and fast, it has a lot of plugins to perform your task, and you can also create your own tasks;
BrowserSync🌻: imagine when you are developing your UI, and every time you want to see your changes taking effect on the browser, you need to refresh the page, which is a little bit painful for your fingers. BrowserSync, among many other things, will automatically handle that refresh for you.

Compilers / Transpilers

Compilers in JavaScript are used to transpile ESNext code to Vanilla JavaScript or browser readable code.

Babel🌻: allows you to use the latest ESNext on your development code because it will transpile it to your browser for you;
TypeScript transpiler🌻: if you are more about static-type languages like TypeScript, you can use this transpiler to produce JavaScript code for you;
SWC: is written in rust and calls itself a “super-fast compiler”.

Code generators

With code generators, there is no more Copy+Pasting components, folders, files, or creating component files from scratch! Code generators allow you to generate components (and much more) from the CLI and improve the standardisation of code, thus increasing development speed.

Plop🌻: easy to use, fast to learn, very flexible, powerful, and it uses the popular handlebars for file templating;
Hygen: it’s used to supercharge the workflow on your projects (React Native, Redux, and Express), avoiding manual work.

IDEs & Code Editors

Wait, aren’t IDEs (Integrated Development Environment) and Code editors the same? No, they are not. Long story short, with an IDE you can develop your code, test it and build it. A Code Editor by itself misses most of the functionalities provided by an IDE, and may require extensions and plugins.

IntelliJ IDEA: it’s an IDE released in 2001 by JetBrains, which focuses on Java, but it also supports other programming languages, like JavaScript. It allows you to automate repetitive programming tasks to speed up development, features advanced code completion, has a built-in static code analyser, and integrated version control. There are two versions available, a free one and another for commercial use;
WebStorm: released in 2010, also by JetBrains, this IDE focuses on JavaScript, code completion, on-the-fly error detection, and much more;
VSCode🌻: released in 2015 by Microsoft, it’s definitely the most used code editor by JavaScript community. It comes with IntelliSense features, and it has a lot of plugins that you can easily install;
Sublime Text: launched initially as a code editor in 2008, it provides a free trial period, but you will need to buy a license for continued use;
Atom: released in 2014, it is one of the most popular code editors based in Electron. It’s easy to install, features intelligent code completion, and it’s free.

Linters & Formatters

While linters analyse code to catch errors and suggest best practices, like function complexity and syntax improvements, the formatters fix spacing, line jumps, comments, among other things.

JSLint: it’s the oldest linter, created by Douglas Crockford in 2002;
JSHint: originated from the JSLint project in 2010, but it allows you to have a lot more configurations;
ESLint🌻: it’s extremely configurable, supports JSX, and it’s the most used by the JavaScript community;
Beautifier: as the name indicates, it will automatically beautify your JavaScript code for you;
Prettier🌻: like Beautifier, it helps you make your code better indented and organised, not only for JavaScript. It also works on TypeScript, SCSS, HTML, etc.

Testing

This should go without saying, but to ensure good code quality, we need to test our code. From unit tests to integration and E2E tests, there are already several tools out there to help us.

JEST🌻: it’s the most used JavaScript Testing framework. It’s simple, fast, safe, has code coverage, it’s easy to mock, and provides a rich context for exceptions when tests fail;
Jasmine: it’s a behaviour-driven development framework for testing;
AVA: it’s a minimalistic testing library that runs in Node.js. It’s highly opinionated and runs tests concurrently, with a separate process for each test file;
Mocha: it’s a framework that also runs in Node.js and in the browser, which makes asynchronous tests simple, but, unlike other frameworks, it uses different tools for assertions, mocking, and spying tools, like Sinon and Chai;
Testing Library🌻: it’s a family of libraries, which is awesome when you want to have DOM testing utilities to encourage good testing practices. Take a look at the React Testing Library;
Cypress🌻: it’s an end to end test framework, entirely written in JavaScript;
Puppeteer: it’s a Node.js library developed by Google. It provides a convenient Node.js API to control Chrome or Headless Chrome;
Playwright: released at the beginning of 2020 by a team that was also involved in Puppeteer development. It is exactly the same as Puppeteer but, it also runs on Firefox and Safari and was developed by Microsoft.

Mock tools

When working on projects, sometimes we still don’t have backend APIs ready to be used, so we may need to mock some Endpoints and HTTP requests.

JSON Server🌻: lets you create a fully featured fake REST API with zero coding in less than 30 seconds;
Sandbox🌻: quick and very easy way to mock RESTful APIs and SOAP web services. It has instant deployment, collaborative build, and debugging tools for integration. Also, it’s not local, so everyone can access the API;
MirageJS: it’s an API mocking library that lets you build, test, and share a complete working JavaScript application without having to rely on any backend services;
Mockserver: enables mocking in any system via HTTP(S) such as REST or RPC services to test applications easily and effectively. It also provides a proxy for encrypted SSL traffic, tunnelling, among others;
MockLab: it’s a simulator for HTTP-based APIs built on WireMock. It has Swagger, manual and automated testing;
Mocky: it’s an open-source project compatible with JavaScript, Mobile, and Server applications, featuring CORS, JSONP and GZIP responses;
Mockoon: it’s an open-source software to create mock APIs really fast locally. No account is required, and no remote deployment needed;
Beeceptor: it requires zero code to use it. It’s a free online tool to mock REST API calls using HTTP requests;
Nock: it’s a simple HTTP server for Node.js to test modules that perform HTTP requests in isolation.

Static Typing

Simply put, static typing prevents our code from having runtime errors because most of them can be caught during the development/compile-time.

TypeScript🌻: it’s a language for applications, regardless of scale, created by Microsoft in 2012, which builds on JavaScript by adding static type definitions;
Flow: it’s a language created by Facebook in 2014 written in OCaml, and is often used with React;
PropTypes: it’s a library for type-checking only for React projects.

Other tools we also like to use

Storybook🌻: a better way to develop UI components in an isolated way;
BrowserStack: allows you to test your application in different browsers and devices;
Husky🌻: it’s a way to improve our commits and more;
Sentry🌻: it’s an application for monitoring platforms to help developers diagnose, fix and optimize the performance of the code;
Swagger🌻: a great tool for API Development, to design and document your API’s at scale;
Insomnia: the same as Swagger, but also for GraphQL API’s;
JSDoc🌻: it’s an API documentation generator for JavaScript.

Bonus — Our favorite productivity tools

Cat Sleeping Photo by Erik-Jan Leusink on Unsplash

Now, it’s time to relax! Grab a cup of coffee, share this with all your teammates, and we promise they will be happier. 😉

Acknowledgements I want to thank my colleagues António Freire and António Silva, for this great team effort and for reviewing and contributing to this article.