Rome, All-In-One Frontend Dev Toolchain

TL;DR If you are tired of building your toolchain for your web development projects. Rome plans to be your one stop shop for all your development needs; Linting, Bundling, Format, Compile/Transpile, Unit test and more. They are building a tool that does it all.

State of the JavaScript Toolchain

In the world of JavaScript development, there are so many tools to help complete your job. Each part of your toolchain requires a different package. Each level of your toolchain has tons of different packages you need to choose from.

Linting: ESLint, TSLint, JSLint, JSHint
Module Bundlers: Webpack, Rollup, Parcel, Browserify
Code Formatters: Prettier, Beautfiy, StandardJS
Transpilers: Babel, Typescript Compiler
Unit Tests: Jest, Jasmine, Mocha

It requires a lot of work to start a new project. You have to look into each of the packages and choose which one serves you the best. There are also new frameworks and packages constantly popping up making the lists continue to grow.

Most frameworks now come with a Command Line Interface (CLI) tool that obfuscates most of the toolchain. Instead of managing all those tools yourself, the owner of the CLI has to manage and adjust as needed.

Rome to the rescue

Rome is an open source toolchain planning to unify it all. There will be no reason to build your own because it will be your toolchain.

It will be a linter
It will be a compiler
It will be a bundler
It will be a test runner
It will be a Documentation Generator
The list goes on.

Their philosophy is to reduce the amount of work to get the project running. There will be very little configuration needed. Everything is built themselves and will not use external dependencies.

Current State

The only feature currently released is Linting for JavaScript and Typescript. They will begin working on their other features once linting is mature and stable. Rome wasn't built in a day.

Installation

Their documentation for installation is pretty straightforward. Install the package in your project using

npm install -D rome

After its installed you need to initialize the project

rome init

I ran into issues where node_modules for projects are not set in my path. So I had to run rome init with this command.

./node_modules/rome/bin/rome/index.js init

Now that your project is initialized, you can run linting using

rome check

Since I added this to my nextjs project, the linter was trying to check all the files in the .next folder.

To add folders to be ignored, you can use the rome CLI config commands

rome config push lint.ignore ".next"

If the linter found issues that can automatically be fix just run apply with check

rome check --apply

Downsides

This package is trying to do everything. There is still a good amount of work left before it can replace the entire toolchain but it doesn't need to do everything before you can use it.

The project is striving very little configuration. This leads it to be very opinionated structure and formatting. It can make it more difficult adding Rome to existing projects where it does not fit perfectly.

A package that tries to do everything typically ends up doing nothing. As more and more features get added, more complexity is added. With more complexity comes more challenging problems to solve.

Conclusion

Rome is striving to be the toolchain to simplify future development. In a world where there are so many choices at each level of the chain, one choice for everything seems nice. I plan to keep watching the progress and hope to see the final product one day.

Resources

Link to Rome's Documentation

Rome, All-In-One Frontend Dev Toolchain

Comments

More from this blog

How to Focus an Input Field with a Hotkey in React

Why Neovim is My Text Editor of Choice

What is a Design System and Why Is It Important for Software Engineering?

Real-time Page Views with Next.js and Supabase

Create a Dynamic Sitemap with Next.js

State of the JavaScript Toolchain

Rome to the rescue

Current State

Installation

Downsides

Conclusion

Resources

Command Palette

Comments

More from this blog

State of the JavaScript Toolchain

Rome to the rescue

Current State

Installation

Downsides

Conclusion

Resources