Fastest Frontend Tools in 2022

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The open-source backend cloud platform
  • Onboard AI - Learn any GitHub repo in 59 seconds
  • InfluxDB - Collect and Analyze Billions of Data Points in Real Time
  • vite-ts-react-tailwind-template

    Minimal, sensible defaults, fast.

    I tried tons of frontend tools this year in my pursuit to optimize my Developer Experience. I published an incredibly fast minimal template with sensible defaults which you can use to quickly spin up new projects: cpojer/vite-ts-react-tailwind-template.

  • prettier-plugin-sort-imports

    A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.

    Despite the existence of Prettier, arguments about code style such as how to sort ES module imports still exist. Manually sorting ES modules wastes time, and usually leads to losing context when you are writing code and then have to navigate to the top of a file to modify your import statements. I love using the @trivago/prettier-plugin-sort-imports plugin which automatically sorts new imports, and works perfectly together with TypeScript's auto-import feature. Similarly, prettier-plugin-tailwindcss automatically sorts Tailwind classes in your code.

  • Appwrite

    Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.

  • prettier-plugin-tailwindcss

    A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

    Despite the existence of Prettier, arguments about code style such as how to sort ES module imports still exist. Manually sorting ES modules wastes time, and usually leads to losing context when you are writing code and then have to navigate to the top of a file to modify your import statements. I love using the @trivago/prettier-plugin-sort-imports plugin which automatically sorts new imports, and works perfectly together with TypeScript's auto-import feature. Similarly, prettier-plugin-tailwindcss automatically sorts Tailwind classes in your code.

  • ts-node-dev

    Compiles your TS app and restarts when files are modified.

    Before switching to the above, I used to use ts-node-dev but it does not support ESM or swc properly.

  • tsx

    ⚡️ TypeScript Execute: Node.js enhanced to run TypeScript & ESM

    Given my use of vite, I would like to use tsx in the future but after multiple attempts, it always added a 10x performance overhead for API requests in development and I ran out of time figuring out why.

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    TypeScript

  • vite

    Next generation frontend tooling. It's fast!

    Vite is the best and fastest dev server I've used. I was skeptical at first, but now I don't enjoy working on any front-end project that isn't using Vite. With esbuild under the hood, it builds whole projects faster than it takes others to hot reload a single change. While other bundlers can be made fast, Vite does it all out of the box with almost no configuration required.

  • Onboard AI

    Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Tailwind is another project I was initially skeptical about. After a year of using it, Tailwind's tradeoffs make sense to me. The way it abstracts styling into a system of CSS variables instead of direct CSS property assignments is genius. I recommend using it if you want sensible defaults for styling, smart composition for styles, and consistency across your project. The way it handles dark-mode styles is nice, too.

  • tools

    Unified developer tools for JavaScript, TypeScript, and the web

    I'm incredibly excited about the potential of Rome tools. Rome's formatter and linter are close to production ready, and hopefully when I refresh this post next year, I'll be able to drop a bunch of paragraphs and replace them with just rome.

  • React

    The library for web and native user interfaces.

    TypeScript (and to a lesser extent React) are unwritten standards at this point. TypeScript especially offers an incredible productivity boost to any project. I assume all new frontend projects use TypeScript unless there is a really strong reason not to, and I'm just including this paragraph for completeness and to show my appreciation that's been ongoing since January 11th 2013. Thanks TypeScript team ❤️

  • prettier

    Prettier is an opinionated code formatter.

    ESLint and Prettier are widely adopted and you are likely using them already. They both serve overlapping concerns around code style, and on the surface, it seems like a good idea to run Prettier within ESLint. However, upon profiling why ESLint was slow on a bunch of projects, I noticed prettier consistently taking about 50% of the total ESLint runtime. If you are formatting your documents on save, there is no point in running Prettier within ESLint at the same time.

  • ESLint

    Find and fix problems in your JavaScript code.

    ESLint and Prettier are widely adopted and you are likely using them already. They both serve overlapping concerns around code style, and on the surface, it seems like a good idea to run Prettier within ESLint. However, upon profiling why ESLint was slow on a bunch of projects, I noticed prettier consistently taking about 50% of the total ESLint runtime. If you are formatting your documents on save, there is no point in running Prettier within ESLint at the same time.

  • esbuild

    An extremely fast bundler for the web

    Vite is the best and fastest dev server I've used. I was skeptical at first, but now I don't enjoy working on any front-end project that isn't using Vite. With esbuild under the hood, it builds whole projects faster than it takes others to hot reload a single change. While other bundlers can be made fast, Vite does it all out of the box with almost no configuration required.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts