Broccoli (build tool)

Broccoli (build tool)
Name	Broccoli
Title	Broccoli (build tool)
Programming language	JavaScript
Operating system	Cross-platform
Platform	Node.js
Genre	Build automation
License	MIT

Broccoli (build tool) is a JavaScript-based asset pipeline and build tool designed for transforming source trees into deployable artifacts. It emphasizes a minimal, file-system-oriented plugin model and incremental rebuild performance for front-end projects. The tool integrates with common ecosystems and frameworks to process JavaScript, CSS, and other static assets for production.

Overview

Broccoli originated in the context of modern web application development alongside projects such as Ember.js, Node.js, jQuery, AngularJS, React, and Backbone.js. It focuses on producing deterministic output trees from input trees by applying a sequence of transformations implemented as plugins, similar in spirit to Grunt, Gulp, and Webpack. Broccoli targets workflows where incremental rebuilds and predictable file outputs are critical for developer productivity and continuous integration with services like Travis CI and CircleCI.

Features

Broccoli provides features commonly required by front-end toolchains, influenced by tools and standards from projects like CommonJS, ES6, TypeScript, Sass, and Less. It exposes a small API surface for composing build steps with support for file-system caching, persistent rebuild caches for faster iterations as seen in Bazel and Buck, and source maps for debugging standards used by V8 and Chrome DevTools. Built-in support for tree merging, filtering, and concatenation enables integration with asset pipelines used in Ruby on Rails and deployment targets like Heroku. Its plugin model allows reuse and sharing via package registries such as npm.

Architecture and plugins

Broccoli's architecture separates the build graph into nodes representing input trees and transform plugins, following patterns reminiscent of Unix, Make, and dependency-graph systems like Nix. Plugins implement tree transformers and are distributed as npm packages; notable plugin patterns resemble transform libraries used in Babel, PostCSS, and UglifyJS. Developers author plugins to perform operations such as transpilation, minification, fingerprinting, and template compilation, paralleling tooling used by Yarn and pnpm. The plugin ecosystem allowed interoperability with tools such as Ember CLI and adapters for assets from ecosystems like Django or Flask when integrating frontend builds into full-stack projects.

Usage and workflow

Typical Broccoli usage involves creating a build script that requires Broccoli's API and composes input trees with transform plugins, a workflow conceptually similar to task definitions in Grunt or pipeline configuration in Jenkins. Developers use Broccoli in local development with live-reload servers akin to Browsersync and integrate builds into CI pipelines maintained by teams using GitHub or GitLab. Common workflows include transpiling ECMAScript 2015 modules with Babel, compiling stylesheets with Sass processors, generating asset manifests for CDNs like Akamai or Cloudflare, and producing source maps compatible with Firefox Developer Tools.

Performance and benchmarks

Broccoli was designed with incremental rebuild performance and low overhead in mind, drawing inspiration from incremental builders like Tup and caching strategies used by ccache. Benchmarks reported by communities compared Broccoli's watcher latency and rebuild time to contemporaries such as Gulp and Webpack, particularly in scenarios with large numbers of small files typical of Single-page application projects built with Ember.js or React. Its file-system-centric caching and tree-walking minimize unnecessary transformation work, providing speed advantages in repeated edit-build cycles used by teams deploying to Amazon Web Services or Google Cloud Platform.

Comparison with other build tools

In comparisons, Broccoli is often contrasted with Grunt for its simpler API, with Gulp for its streaming model versus Broccoli's tree abstraction, and with Webpack for module bundling capabilities versus Broccoli's focus on file-tree transformations. While Webpack emphasizes dependency graph bundling and code-splitting used by projects like Next.js and Create React App, Broccoli emphasizes deterministic output trees and plugin composability similar to the philosophies behind Rollup and Parcel. Choices among these tools depend on project constraints, teams at organizations such as Facebook, Google, Netflix, or Airbnb and integration needs with ecosystems like Ember CLI or Rails Asset Pipeline.

History and development

Broccoli's development occurred within the broader evolution of JavaScript tooling during the 2010s, alongside the rise of Node.js and front-end frameworks such as Ember.js and React. Influences included earlier automation tools like Make, Grunt, and build research embodied in Bazel. Community contributions and plugin authorship involved developers from open-source projects hosted on GitHub and discussions in communities like Stack Overflow and various developer blogs. Over time, the ecosystem shifted toward integrated bundlers, but Broccoli's design influenced tooling patterns used in Ember CLI and related projects.

Category:Build automation