On Schedule Frontend Development

4 minute read Published:

My dream project makes me happy because we’re solving an important problem for our customers. To stay best in class we heavily rely on tooling. Automation lets us focus our brainpower on hard challenges. We reliably ship improvements and features, as multiple automatic safety nets catch problems in the product before a human touches the new version. The stakeholders are happy, as our progress is steady and predictable. Am I wearing pink glasses? Maybe. Let’s take a look at some tools to help us close the gap between the dream and reality.

TypeScript

TypeScript increases code correctness, the malleability of the project, and lets developers focus on the high-level objectives. It is a programming language that sprinkles static types on top of JavaScript. Code enriched with type information enables better tooling. This includes type checking, which will catch many common bugs. Statically typed code is easier to modify when new feature requests require refactoring. Reorganizing code in plain JavaScript is usually a giant search & replace operation, that is prone to errors. Refactoring in TypeScript is a matter of a few commands. The tooling can reliably apply most of the required modifications. Auto-completion and contextual information when coding make developers more productive as they switch less between files and documentation. The editor will show available calls and properties on a particular object. TypeScript has a vibrant open-source community behind it with Microsoft being one of the large sponsors. If you regret embarking on the TypeScript train, you can easily switch back to plain JavaScript by running the code through the TypeScript Compiler or Babel.

Linters, static code analysis, code formatting tools

The earlier we catch a mistake, the cheaper it is to fix it. Static code analysis can serve as one of the safety nets in our development process. Linters can point out errors as we write the code to reduce the number of defects reported by customers.

ESLint can also draw attention to the accessibility problems, such as missing alt text on an image or buttons with missing semantic attributes. This will make your product more inclusive and increase your market by 25% (the number of people with a disability). ESLint comes with plugins for popular frameworks, including React, Svelte, and Angular.

Commands such as npm audit and automatic dependency updater Dependabot will deal with outdated dependencies. Findings of these tools at minimum still require a sanity check by a developer. Outdated dependency count can also be considered as one of the metrics in estimating the tech debt.

Prettier will keep your code formatting consistent and reduce noise in the git history. In a project where code is automatically formatted before each commit, developers can review pull requests faster. Cleaner git history reduces the time required for diagnosing regressions with git blame, as there are no commits with meaningless changes.

Functional libraries

Modern modular libraries in functional coding style can be an effective solution to hard problems such as formatting dates.

Computers typically store timestamps in a format that is meaningless to people. Converting between a Unix timestamp and a human-readable text necessarily involves detailed knowledge about the calendar, leap years, leap seconds, and awareness of when specific parts of the world switch in and out of daylight savings time. After all these calculations we can determine what date it is and the time within the day. Next, we apply language rules to finish with a human-readable date and time representation. This simple recipe is actually filled with traps where things could go wrong. For most products, picking a library is the pragmatic way to solve a hairy problem like this.

The promise of functional programming style is side-stepping the problems with unintended side-effects. Functional libraries will typically take an input, and return output without implicitly involving (reading or modifying) other data. Depending on a functional library is less risky as it interacts with our code in a very explicit way. This makes upgrades smoother and faster. Replacing a functional library is easier than replacing an alternative in OOP style. Bundlers will also work better with functional libraries, as control flow in those is easier to follow, resulting in a smaller bundle size, and a faster web app for your users.

Creators of Moment.js have recognized the importance of immutable data structures and functional coding style. Nowadays they recommend Intl or Luxon.

Effective teams and companies are always on the lookout for better tools and practices. Team members will be thankful for being able to work with and on the state-of-the-art software. The stakeholders will profit from increased productivity. Evaluate new ways of doing things, adopt new tools where it makes sense, and keep your competitive edge.