The Invoca Front-end Tech Radar is maintained by Atlas (Front-end Platform). Anyone can propose updates via pull request.

Frameworks

ApolloClient: Apollo Client is a state management library for JavaScript that enables us to manage both local and remote data with GraphQL. It makes it easy to fetch, cache, and modify application data.

D3: Data-Driven Documents (D3) is a JavaScript library that allows us to bind data to a Document Object Model (DOM), and apply data-driven transformations to the document. It's highly flexible and used primarily for creating data visualizations.

ESLint: ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. We use it to enforce a consistent coding style and catch errors or bad practices early.

Honeybadger: Honeybadger is an exception monitoring service that helps us catch and manage errors in our web applications. It provides real-time error alerting and reporting.

MaterialUI: Material-UI is a React UI framework that follows Google's Material Design guidelines. It offers a set of React components that make it easier to create attractive, consistent designs.

Prettier: Prettier is an opinionated code formatter that supports multiple languages. It automatically formats our code to ensure that it follows a consistent style.

SASS/SCSS: Syntactically Awesome StyleSheets (SASS) is a preprocessor scripting language that is interpreted into Cascading Style Sheets (CSS). SCSS is the modern syntax for SASS and allows us to use variables, nested rules, and more, making our CSS more maintainable.

Storybook: Storybook is a tool for developing UI components in isolation. It serves as a playground and documentation platform, allowing us to visually test and showcase components.

Underscore: Underscore is a JavaScript library that provides a host of functional programming helpers without extending any built-in objects. It's useful for tasks like iterating over arrays and objects, manipulating data, and more.

Grunt: Grunt is a JavaScript task runner that automates repetitive tasks like minification, compilation, and unit testing. It uses a command-line interface to run custom tasks defined in a Gruntfile.

jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal and manipulation, event handling, and animation, making it easier to work with front-end development.

Lodash: Lodash is a JavaScript utility library similar to Underscore, but with some additional capabilities. It provides utility functions for common programming tasks using a functional programming paradigm.

Moment: Moment is a library that allows us to parse, validate, manipulate, and display dates and times in JavaScript. It simplifies working with date-related tasks in our applications.

Lerna: Lerna isn't a language but a tool that optimizes the workflow around managing multi-package repositories with Git and npm. It's often used in large projects to manage multiple interdependent packages within a single repository, making it easier for us to develop, test, and publish those packages.

Languages

JavaScript: JavaScript is a high-level, interpreted scripting language that is widely used for building web-based applications. It allows us to create dynamic, interactive experiences on the client side but is also now extensively used for server-side development, thanks to environments like Node.js.

Lerna: Lerna isn't a language but a tool that optimizes the workflow around managing multi-package repositories with Git and npm. It's often used in large projects to manage multiple interdependent packages within a single repository, making it easier for us to develop, test, and publish those packages.

TypeScript: TypeScript is a superset of JavaScript that adds optional static typing. It's designed to catch type-related errors during development, making our code more robust and maintainable. It gets compiled down to standard JavaScript, allowing it to run in any JavaScript environment.

CoffeeScript: CoffeeScript is a programming language that compiles into JavaScript. It offers more concise syntax and additional features not native to JavaScript, making it easier to write clean and readable code. However, its popularity has declined with the advent of ES6+ features in JavaScript.

Testing

Chromatic: Chromatic is a visual testing tool for UI components and libraries. It integrates with Storybook and allows us to automatically capture snapshots of our components, helping to catch visual regressions during development.

Enzyme: Enzyme is a JavaScript testing utility for React that makes it easier for us to manipulate and traverse our React Component's output. It's commonly used for unit testing React components and provides APIs for simulating user interactions.

Jest: Jest is a popular testing framework for JavaScript, known for its simplicity and zero-config setup. We use it for unit tests, integration tests, and snapshot testing. Its watch mode and mocking capabilities make testing more efficient.

React Testing Library: This library is focused on testing React components in a way that closely resembles how they would be used in a real application. Rather than testing implementation details, we use it to test the rendered output and user interactions.

Playwright: Playwright is a Node.js library for end-to-end testing of web applications. It provides a high-level API for automating web browsers across various platforms and is capable of capturing screenshots, creating PDFs, and more.

Cypress: Cypress is an end-to-end testing framework for web applications. It offers a robust, all-in-one testing environment that runs in the browser, making it easier for us to set up, write, run and debug tests.

Jasmine: Jasmine is a behavior-driven development (BDD) framework for JavaScript. It's commonly used for testing the logic of our JavaScript code. It does not rely on browsers, DOM, or any JavaScript framework, making it well-suited for server-side JavaScript tests as well.

Karma: Karma is a test runner for JavaScript that can execute tests in multiple real browsers. It's often used in combination with other testing libraries and frameworks like Jasmine, Mocha, and QUnit. It helps us ensure that our code works on all browsers we aim to support.

Libraries

Titan: "That turn-key accelerant for frontend development" -- Titan is a frontend development-focused monorepository built to enable the rapid development, testing, and deployment of components and applications.

GitHub Actions: While not strictly a framework, GitHub Actions is a CI/CD and automation tool integrated into GitHub's platform. It allows us to automate a variety of software workflows, including building, testing, and deploying applications directly within our GitHub repositories.

NodeJS: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows us to execute JavaScript server-side, and is commonly used for building back-end services like APIs, among other server-side tasks.

React: React is a JavaScript library for building user interfaces. Developed by Facebook, it enables us to create reusable UI components and manage the state and life cycle of those components in web applications.

Webpack: Webpack is a static module bundler for modern JavaScript applications. It compiles our code and assets like images, CSS into one or more bundles that are optimized, minified, and ready to be served in a web application.

Backdraft: Backdraft is a lesser-known framework for building scalable and maintainable large-scale web applications. It aims to provide a set of abstractions and utilities that simplify the complexities associated with building enterprise-grade applications.