JavaScript is an essential component of any web developer’s toolkit, but to get the best out of it you need a command of more than vanilla JS.
If you’re just starting out in JavaScript, though, the sheer volume of tools available at any js development company can seem more than a little daunting. That’s why we’ve collected together 25 of the best, covering everything from frameworks and interfaces through to code quality and testing tools.
Read on to discover some of the best web design tools you can lay your hands on, and how they’ll help you become a better JavaScript developer.
Code quality tools
TypeScript
A common issue for new JavaScript developers is its dynamic typing system. A variable type can be inferred at runtime but will have no restriction as to what type it can be in the future.
Dynamic typing can be useful in creating patterns, but how useful that is depends on the project. TypeScript aims to bring a declarative style of programming by typing variables where developers feel it makes sense.
Type annotations appear where a variable is defined. With objects, interfaces define the structure of an object and the type becomes a reference to that interface. These can be extended to create easily customised objects.
TypeScript uses experimental JavaScript syntax as part of its system. Decorators, for example, are functions that apply themselves to a class, method or property that provide repeatable functionality. These can save duplication in a project.
It also compiles existing syntax such as classes, modules and arrow functions into valid ES3 or ES5. This can be customised to the browsers targeted within each project. When browsers can natively support these features, TypeScript can be instructed to keep them, making the resulting code perform better.
TypeScript is a superset of JavaScript, so provides benefits to the language without changing its structure. As a result, any JavaScript is valid TypeScript and any of its features used are completely optional.
ESLint
Linting is a type of static code analysis that can be performed on a project to check for any script that is likely to break or does not match the preferred style for the project. ESLint can check JavaScript for common mistakes, in addition to following popular pre-defined sets of rules from companies such as Google and Airbnb.
Prettier
Much like ESLint, Prettier is able to identify formatting quirks. It also goes one step further and will automatically update the offending lines on the developer’s behalf. While it is not as customisable, Prettier is more aware of surrounding contexts and will only apply formatting where it makes sense. It can also support other formats like JSX.
Travis CI
Travis CI is a continuous integration (CI) tool. It monitors GitHub branches for any new commits and will run tests against it to make sure nothing was broken in the process. It can then deploy the change or notify the team about any issues. Travis CI is free for use with open-source projects, where consistency is important.
JSDoc
When writing complex modules, it can be a difficult task to remember how everything works. With JSDoc, methods can have special code that describes what they do, any parameters they expect and the sort of thing they can return. This can then be processed to create documentation or enable editors like VS Code to provide hints in context to developers.
Project testing
Jest
Jest is a test runner created by Facebook. Its main aim is to be as easy to set up and use as possible, with no configuration required to get started. Any files inside a “__tests__” directory or ending in “.spec.js” or “.test.js” will be picked up automatically.
Tests run quickly and can run on each change to make sure that everything works correctly. Jest can even pick up what has been updated since the last commit and will only run tests on elements that have been affected. Customisable command line options make sure the right tests are running at the right time, which is ideal for keeping continuous integration tools fast.
One standout feature of Jest is snapshot tests. While not testing a specific value, Jest will capture the structure of what is under test and will compare against that in future tests. If anything has changed, Jest will highlight the change and it can either be fixed or confirmed as intentional. This works great for React components but can also be used for any kind of serialised value.
JSDOM is configured by default, which makes testing browser-based projects easier by enabling them to run through Node. Jest also comes with basic test functionality that includes mocks, spies and assertions. While these will work, other tools such as Enzyme and Sinon can be brought in to make writing tests an easier process.
While Jest is often used to test React applications, in actuality it can be used to test a project that was written for any framework or language. Premade setup files can take the hassle out of building the right testing environment, for example making sure that Angular is defined globally.
Editor plugins
Quokka
Despite our best efforts, no developer can get everything right first time. When a small idea needs trying out, setting up a project just to see if it works can be overkill. When working with unfamiliar tools and libraries it is best to have an isolated workspace that shows exactly what is happening at each step.
Quokka is an environment that lives inside an editor. It evaluates code inline and displays the result as it gets used. This makes it great for trying out blocks of logic without having to build a new bundle and check it in the browser.
Coloured blocks alongside each line number shows that it’s covered by Quokka. A green block indicates there are no problems, while red alerts that there is an issue with that line. The comment at the end of that line provides more information. A grey box shows a line is never reached, which may or may not be an intentional decision.
While Quokka works with most setups straight away, its settings can be customised within each file or inside package.json if used with npm. Most languages based on JavaScript are already supported, including JSX and TypeScript, but plugins are also available to work with other syntaxes such as jQuery, without having to explicitly import it. Plugins can be brought in to set up and tear down environments each time the code runs.
The project is made by the same team as wallaby.js, which features similar functionality but for test suites. As a failing test gets written, Wallaby will highlight the issue straight away, which means errors are caught sooner.
Quokka is available as a plugin for VS Code, Atom or JetBrains IDEs. The free Community edition will cover most cases, but the optional Pro edition enhances things further by enabling inline inspection of code to identify slow performance issues.
Emmet
Emmet is a set of plugins available for most code editors that aims to enable developers to code quickly by removing all of the slow, repetitive tasks involved. When developers enter a small keyword, it can detect and replace it with a larger block of content. Emmet will also understand their intentions, parse the syntax and even expand the code automatically.
Import Cost
Over time, applications can soon become bloated with large dependencies weighing them down. Import Cost is a simple plugin for VS Code that will highlight the size of any imports inline as they are added and are colour-coded to see at a glance what might be over-inflating the bundle. The developer can then decide whether that extra weight is justified or not.
BracketHighlighter
Code can often get buried inside nested objects, functions or elements. Sometimes that can make it hard to see exactly which open bracket marries up to which close bracket. BracketHighlighter for Sublime Text will highlight one bracket when the other is selected and will even work with multiple selections and inside strings.
Chrome Debugger
VS Code can create breakpoints and provide feedback on running Node applications already but what about the browser? The Chrome Debugger plugin will hook the editor up to a DevTools instance to enable the same behaviour in-browser. Step through code, pause execution and monitor variable values in a familiar environment.
Interfaces
D3
D3 stands for Data Driven Documents and is designed to create data visualisations with JavaScript using SVG, HTML and CSS. These documents are designed to be easily updated as the user interacts with them or new data arrives.
At its core, D3 binds data to DOM elements, which can be interpreted in different ways depending on the project. For example, a bar chart could be created with a few
elements that are styled to look like bars. Each data value would be bound to a bar, which in this case would be widened based on its value.
By keeping a reference to the selected element, the charts can be updated as necessary. The ‘enter’ and ‘exit’ methods define what should happen when an element is to be added or removed from a chart based on the data. With that in place, charts can be reparsed and updated automatically.
Where D3 really shines is through complex visualisations, such as maps. This is achieved through manipulation of SVGs. While there is no built-in functionality for creating a map, it is possible for D3 to plot GeoJSON data using d3.geo.path.
There are plenty of other tools and libraries built using D3 that are designed to make the process easier. DataMaps provides ready made map data on set projections that can be dropped in and customised as needed.
As D3 will be in charge of the DOM, it can be difficult to integrate with modern web frameworks that update based on state. Libraries such as React-D3 are made to work with updating props and can take the hassle out of integration.
Anime.js
More sites are embracing subtle animations. A small animation is a great way to catch the user’s eye and create interest. CSS animations are ideal for simple transitions that are known ahead of time, but what if the targets and values change based on user input?
Anime.js is a tool that makes animations easier to work with. Everything starts with a call to ‘anime’, which defines everything about the animation including the target, duration and any transitions to apply. Targets can be anything from a DOM node to a JavaScript object, which can transition values inside of itself.
One great feature of Anime.js is the ability to create a path for an element to follow based on a element defined in SVG. By calling anime.path(), it enables that path to be used as a value for X/Y positioning for other animations. These can be stacked or strung together to create a timeline without the need for specified offset values.
Moment.js
Working with dates and times can be challenging. The native Date object provides little functionality to help format and manage time zones. Moment creates special objects that enable devs to parse and format dates and times any way that’s required. The size can be kept small by only including the locales needed for each project.
Semantic UI
Semantic UI is a set of common components that can be enabled as necessary within any project. Common patterns like breadcrumb navigations and toggle buttons encourage are first created with semantic HTML, which the library enhances. Integrations for frameworks like Vue and Angular are available to drop into apps that simplify interface creation.
Pell
A lot of projects make use of a rich text editor. That might be for a comments section where styling options are limited but load times are important, or in a CMS where a large feature set is essential. While there are a multitude of WYSIWYG options out there, they can be large, rely on outdated dependencies or produce non-semantic markup.
Pell is a simple text editor weighing in at just over 3kB minified, making it smaller than options like TinyMCE or Facebook’s Draft.js. There are also no dependencies to rely on, which makes Pell a drop-in replacement for any existing editor.
While others may provide a bigger feature set, Pell focuses on doing the basics well. Actions such as links, lists and images are present out of the box but custom features can be added to suit the needs of any project. The look and feel can also be customised, with Pell providing a SCSS variable file to overwrite as necessary.
