Intro

As you start developing Ember applications, you'll soon come across a tool called Broccoli. This piece of software is an essential part of how Ember CLI and Ember's addon ecosystem work together.

Now, for the majority of time that I spend in development, I'm not thinking about Ember CLI or Broccoli.js at all — and this is one of the great strengths of the Ember ecosystem. If I need some new piece of functionality that goes beyond what Ember offers out of the box, I just go to emberobserver.com and search for a pre-built solution.

But eventually there will come a time when you'll want to peek under the hood and learn a little bit more about how Ember CLI works its magic. You might be working in your app's build file and run into something called a tree — well, what the heck is a tree? Or you might try to install an addon and hit a Broccoli build error, and feel completely lost when trying to figure out what's going on.

In this series I want to demystify some of these core concepts, so that you can feel more confident if you ever find yourself needing to dig deeper into your app's build code. Ember CLI has a huge scope and deserves its own series, so the focus of this series will be on the lower-level Broccoli build tool. We want to end up with a good mental model for how the tool itself works, as well as how it fits into the larger Ember story.

Learning more about Broccoli and what problems it solves gave me a lot more confidence in the quality of Ember CLI's architecture. Broccoli is a solid abstraction and I'm really happy with how Ember CLI uses it under the hood. And once you learn how it works, you'll feel more confident in your development as well.

So, let's get started!