Overview of the Ember.js code

Question

I have discovered Ember.js through this article.

A cursory glance at the documentation promises a very impressive tool. A cursory glance at the source code reveals a monster. The "compiled" version of the source is nearly 15000 lines of code, and the GIT repo is full of files scattered around.

I wouldn't want to embark myself in learning a JavaScript framework if I felt I could not have at least a global understanding of the code. (One of the quality of jQuery or Backbone is that the code base is relatively straightforward.)

Do you have any advice for navigating (and eventually understanding) the code?

Answer 1

Ember.js consists of several packages including the most relevant ones:

• ember-metal
• ember-runtime
• ember-views
• ember-handlebars
• ember-routing

It also has a couple bundled dependencies:

• Handlebars
• Metamorph

Metal consists of several foundation technologies: observers, bindings, computed properties, and a run loop.

Runtime provides the Ember object system along with a handful of useful classes. The object system is built with many of the foundational technologies implemented in metal, but exposes them in a much cleaner way to the application developer.

The ember-views package is pretty self-explanatory, it's the Ember view system built on top of the runtime. On top of that, is the ember-handlebars package which depends on ember-views to provide auto-updating templates on top of the Handlebars templating system.

The ember-routing package provides the system responsible for maintaining the application structure and state. It allows to connect the views to specific parts of your app as well as transitioning between states. For more details see the Router code source

For more info on Handlebars, check out the Handlebars website.

Metamorph is a small library written by Yehuda and Tom which provides Ember with the ability to update specific portions of the DOM, which enables Ember's DOM binding functionality.