Anton Shuvalov

Awesome Frontend Packages

Intro

Here is a curated list of frontend packages and services.


Types

  • Flow is a static type checker for JavaScript.
  • TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Monorepo Management

  • Changesets. A way to manage your versioning and changelogs with a focus on monorepos
  • Lerna is a tool for managing JavaScript projects with multiple packages.
  • NPM Workspaces is a generic term that refers to the set of features in the npm cli that provides support to managing multiple packages from your local files system from within a singular top-level, root package.
  • NX is a next generation build system with first class monorepo support and powerful integrations.
  • PNPM Workspaces. pnpm has built-in support for monorepositories (AKA multi-package repositories, multi-project repositories, or monolithic repositories). You can create a workspace to unite multiple projects inside a single repository.
  • Rush is a scalable monorepo manager for the web
  • Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
  • Yarn Workspaces are a new way to set up your package architecture that’s available by default starting from Yarn 1.0.

Package Managers

  • NPM is the world's largest Software Registry. Open-source developers use npm to share software.
  • PNPM is a fast, disk space efficient package manager
  • Yarn is a package manager that doubles down as project manager. Whether you work on one-shot projects or large monorepos, as a hobbyist or an enterprise user, we've got you covered.

State Managers

  • Effector implements business logic with ease for Javascript apps (React/React Native/Vue/Svelte/Node.js/Vanilla), allows you to manage data flow in complex applications. Effector provides best TypeScript support out of the box.
  • Mobx is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).
  • Redux Saga is an intuitive Redux side effect manager. Easy to manage, easy to test, and executes efficiently.
  • Redux A Predictable State Container for JS Apps

Frameworks

  • Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
  • Create React App. Set up a modern web app by running one command.
  • Ember is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.
  • NextJS gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
  • React is a JavaScript library for building user interfaces
  • Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
  • Vue is an approachable, performant and versatile framework for building web user interfaces.

DevTools, Linting & Analysis

  • Bundlesize. Keep your bundle size in check.
  • Commitlint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy.
  • DebugJS is a tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers.
  • Eslint finds and fixes problems in your JavaScript code.
  • Husky. Modern native git hooks made easy. Husky improves your commits and more.
  • Pre Commit is a pre-commit hook installer for git. It will ensure that your npm test (or other specified scripts) passes before you can commit your changes. This all conveniently configured in your package.json.
  • Prettier is an opinionated code formatter supports many languages and integrates with most editors.
  • Semantic Release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.
  • Standard Version. Automate versioning and CHANGELOG generation, with Semantic Versioning and Conventional Commits.
  • StandardJS is a JavaScript style guide, linter, and formatter.
  • dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
  • jscpd is a copy/paste detector for programming source code.
  • xo is a JavaScript/TypeScript linter (ESLint wrapper) with great defaults

Forms

  • Formik is the world's most popular open source form library for React and React Native.
  • React Hook Forms. React Hooks for form state management and validation (Web + React Native).
  • Yup is a dead simple Object schema validation

Builders

  • Broccoli is a browser compilation library – an asset pipeline for applications that run in the browser
  • Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
  • Microbundle is a zero-configuration bundler for tiny modules.
  • Parcel is a zero configuration build tool. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
  • Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
  • Rome Tools is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.
  • Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
  • WebPack is a static module bundler for modern JavaScript applications.

Tests

  • AvaJS. Node.js test runner that lets you develop with confidence.
  • Cypress. Fast, easy and reliable testing for anything that runs in a browser.
  • Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
  • Istanbul instruments your ES5 and ES2015+ JavaScript code with line counters, so that you can track how well your unit-tests exercise your codebase.
  • Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
  • Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
  • React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components.
  • SinonJS. Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework.
  • Tape. Tap-producing test harness for node and browsers.
  • Memlab. Analyzes JavaScript heap and finds memory leaks in browser and node.js

Benchmarks

  • BenchmarkJS is a benchmarking library that supports high-resolution timers & returns statistically significant results.
  • Benchmarked. Easily generate benchmarks from a glob of files. Wrapper for Benchmark.js.
  • Matcha allow you to design experiments that will measure the performance of your code. It is recommended that each bench focus on a specific point of impact in your application.

Data Visualization

  • Chart JS. Simple yet flexible JavaScript charting for designers & developers
  • D3 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
  • visx is a suite of several low-level standalone packages for building visual interfaces with react.
  • Observable Plot is a JavaScript library for exploratory data visualization.
  • Nodl is a framework for computational node graphs.

Functional Programming

  • RXJS. Reactive Extensions Library for JavaScript
  • Rambda is smaller and faster alternative to the popular functional programming library Ramda.
  • Ramda is a practical functional library for JavaScript programmers.
  • lodash-fp module promotes a more functional programming (FP) friendly style by exporting an instance of lodash with its methods wrapped to produce immutable auto-curried iteratee-first data-last methods.

General Purpose Libraries

  • jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
  • Lodash is a modern JavaScript utility library delivering modularity, performance & extras.
  • Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

Date & Time Libraries

  • date-fns is a modern JavaScript date utility library
  • ms. Use this package to easily convert various time formats to milliseconds.

UI Kits

  • Alibaba Ice is a progressive app framework based on react.
  • Angular PrimeNG is the most powerful angular UI component library.
  • Ant Design is a design system for enterprise-level products. Create an efficient and enjoyable work experience.
  • Blueprint is a React-based UI toolkit for the web.
  • Bootstrap. Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
  • Carbon Design System is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
  • DevExtreme is a JavaScript Component Suite for Responsive Web Development
  • EVERGREEN is a React UI Framework for building ambitious products on the web. Brought to you by Segment.
  • Framework7. Bring components-syntax, structured data and data bindings to Framework7 with power and simplicity of React.js.
  • IconicFramework. With a low friction migration, Ionic 6 brings improved desktop support, new UI components, iOS/Android design enhancements, performance and bundling improvements, and so much more.
  • Material UI. MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your design system and develop React applications faster.
  • Microsoft Fluent UI is a collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
  • PureCSS is a set of small, responsive CSS modules that you can use in every web project.
  • Quasar. Effortlessly build high-performance & high-quality Vue.js 3 user interfaces in record time
  • React Spectrum is a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
  • React UI seeks to become the accessible foundation of your React-based design system.
  • Reakit is a lower level component library for building accessible high level UI libraries, design systems and applications with React.
  • RebassJS. React primitive UI components built with Styled System.
  • Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  • Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
  • UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

UI Libraries

  • Autoprefixer parses CSS and add vendor prefixes to rules by Can I Use.
  • Classnames is a simple javascript utility for conditionally joining classNames together
  • PostCSS is a tool for transforming CSS with JavaScript.

UI Development Tools

  • React Styleguidist. Isolated React component development environment with a living style guide
  • StoryBook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

API

  • Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
  • SWR. React Hooks for Data Fetching.

CLI

  • CommanderJS. Node.js command-line interfaces made easy.
  • Minimist is the guts of optimist's argument parser without all the fanciful decoration.

Monitoring

  • LogRocket. Modern Frontend Monitoring and Product Analytics. LogRocket combines session replay, performance monitoring, and product analytics – empowering software teams to create the ideal web and mobile product experience.
  • NewRelic is the leading observability platform where Dev and Ops teams come together to solve problems with data.
  • Rollbar. Proactively discover, predict, and resolve errors in real-time with Rollbar’s continuous code improvement platform.
  • Sentry. From error tracking to performance monitoring, developers can see what actually matters, solve quicker, and learn continuously about their applications - from the frontend to the backend.

Metrics

  • Puppeteer Assets. Measuring and monitor assets metrics using Puppeteer and Prometheus.
  • web-vitals. Essential metrics for a healthy site.

Microfrontend Frameworks

  • Luigi. The Enterprise-Ready Micro Frontend Framework. Luigi helps you to build modularizable, extensible, scalable and consistent UIs and Web Apps.
  • Mosaic is a set of services, libraries together with a specification that defines how its components interact with each other, to support a microservice style architecture for large scale websites.
  • OpenComponents. Serverless in the front-end world for painless micro-frontends delivery.

Misc Packages

  • ajv JSON schema validator
  • kind-of. Get the native JavaScript type of a value, fast. Used by superstruct, micromatch and many others!
  • Normalizr. is a small, but powerful utility for taking JSON with a schema definition and returning nested entities with their IDs, gathered in dictionaries.
  • Humps. Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.
  • ScriptKit. An open-source kit to optimize your developer workflow

Awesome Lists


Created with obsidian-blog