Ember.js at Zendesk

Follow me on Twitter: @danielbreves

Daniel Breves SOFTWARE ENGINEER, ZENDESK

Ember.js at Zendesk• A little Zen history • Why Ember? • Extensions (Sammy.js, Ember-Resource, Ember-CPM, Ember.I18n) • Namespaces vs Modules • The Run Loop & The Object Model • Optimisations • Jasmine/Unit testing • Zendesk App Framework/Marketplace

A little Zen history

Why Ember?

• Designed for large web applications • Convention over configuration • Dynamic bindings! • Vibrant, growing community

Why Ember?

How big is Zendesk?

JS CSS IMG

app 1.1 MB 403 KB 131.1 KB

templates 671 KB

vendor 717 KB 29.3 KB 8.6 KB

How big is Zendesk?

Over a thousand app servers responding to an average of ~100k rpm

Extensions

• Sammy.js/Router.js • Ember-Resource • Ember-CPM • Ember-I18n

Extensions

Ember-Resource - https://github.com/zendesk/ember-resource

Ember-CPM - https://github.com/jamesarosen/ember-cpm

Ember.I18n- https://github.com/jamesarosen/ember-i18n

Namespaces vs Modules

• Pollutes the global scope • Hard to manage dependencies • Leads to tight coupling • Enforces managing loading order • Hard to test

Namespaces

• Does not pollute the global scope • Dependencies are easy to locate • Handles loading order for you • Easier to test

Modules with script loaders

Stop using namespaces!

Before After

!

The Run Loop & The Object Model

!

Run Loop

A way of grouping computations in different queues, which run in a certain order.

Bindings

Computed properties all the things! !

!

Computed Properties

The Ember.Mixin class allows you to create mixins, whose properties can be added to other classes.

Observers

Optimisations

Pure handlebars

Caching views

Boot load vs asynchronous calls

Jasmine/Unit testing !

Jasmine/Unit testing

Zendesk App Framework/Marketplace

!

Zendesk Apps

Marketplace

Ember.js at Zendesk• A little Zen history • Why Ember? • Extensions (Sammy.js, Ember-Resource, Ember-CPM, Ember.I18n) • Namespaces vs Modules • The Run Loop & The Object Model • Optimisations • Jasmine/Unit testing • Zendesk App Framework/Marketplace

Thanks!

• Ember-Resource https://github.com/zendesk/ember-resource !

• Ember-CPM https://github.com/jamesarosen/ember-cpm !

• Ember.I18n https://github.com/jamesarosen/ember-i18n

Zendesk tools