EmberJS modularization

A taste of the future

By Tom Coquereau / @thaume

Summary

Which module system for Ember ?

  1. Prerequisites
  2. JS module systems
  3. Modularizing Ember with ES6 modules
  4. The Ember App-Kit project
  5. Questions

Prerequisites

ES6

EcmaScript version 6 done by the TC39 work group

New module system (and a lot of other specs)

Should be done by the end of 2014

Ember Resolver

URL Route name Controller Route Template
/mail mail App.MailController App.MailRoute mail

JS module systems

CommonJS modules


// math.js
exports.add = function() {
// do stuff here
};

// main.js
var add = require('./math').add;
    

AMD modules


define('myModule', [
"jQuery",
"React"
], function(jQuery, React){

// do stuff here ...

});
    

AngularJS modules


angular.module('myModule.service', []);
angular.module('myModule.directive', []);
angular.module('myModule.filter', []);

angular.module('myModule', ['myModule.service', 'myModule.directive', 'myModule.filter']).
run(function(greeter, user) {
greeter.localize({
salutation: 'Bonjour'
});
user.load('World');
});
  

Backbone Marionette modules


MyApp = new Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

// do stuff here ...

});
    

Ember modules ?

AMD seems like the best choice...

AMD is not the answer (by Tom Dale, co-creator of EmberJS)

Ember is not going to implement AMD modules

Modularizing Ember with ES6 modules

November 2013 TC39 meeting : ES6 modules spec done

Ember is moving toward ES6 modules support in 3 steps

Ember core

Ruby modules => ES6 modules

Being modularized : Github thread

ES6 transpiler

ES6 modules are not supported in any browser yet

Transpiles to:

  • AMD
  • CommonJS
  • Global

Modules can work both in NodeJS and in the browser

Github repo

</p>

Ember App Kit

Strong structure to start en Ember application

Custom resolver

Based on ES6 modules

Github repo

Summary

Which module system for Ember ?

  1. Prerequisites
  2. JS module systems in the browser
  3. Modularizing Ember with ES6 modules
  4. The Ember App-Kit project
  5. Questions

The Ember App-Kit (EAK) project

What is Ember App-Kit ?

Ember project scaffolding and tools

Checkout the Github repo and follow the instructions

Project structure


#-- app
#-- adapters
application.js
#-- components
pretty-color.js
#-- controllers
mail.js
#-- helpers
reverse-word.js
#-- models
mailbox.js
message.js
#-- routes
mail.js
#-- templates
#-- mailbox
index.hbs
application.hbs
index.hbs
mail.hbs
mailbox.hbs
#-- views
mail.js
app.js
index.html
router.js
    

Naming conventions

EAK and ES6 modules will resolve dependencies based on files paths
(that's what NodeJS does too)

App.MailRoute would render App.MailView, EAK has the same abilities with modules


#-- app
#-- controllers
mail.js
#-- models
mailbox.js
message.js
#-- routes
mail.js // will know it has to use views/mail and controllers/mail
#-- templates
#-- mailbox
index.hbs
application.hbs
index.hbs
mail.hbs
mailbox.hbs
#-- views
mail.js
    

Resolver

URL Route name Controller Route Template
/mail mail App.MailController App.MailRoute mail

URL Route name Controller Route Template
/mail mail controllers/mail routes/mail templates/mail

Writing modules


// Old way, stuffing everything in a global
// ----------
App.MailRoute = Ember.route.extend({
model: function(params) {
return this.store.find('mailbox', params.id);
}
});

// New way, export an ES6 module from routes/mail.js
// ----------
export default Ember.route.extend({
model: function(params) {
return this.store.find('mailbox', params.id);
}
});

// can also be written
var MailRoute = Ember.route.extend({
model: function(params) {
return this.store.find('mailbox', params.id);
}
});
export default MailRoute;
    

DEMO

Conclusion

Future-proof module system

EmberJS is a good match for large applications

Ready for client/server code sharing

Questions ?