Ember.js at Zendesk

2,377 views

Published on

Published in: Technology, Education
  • Be the first to comment

Ember.js at Zendesk

  1. 1. Ember.js at Zendesk
  2. 2. Daniel Breves SOFTWARE ENGINEER, ZENDESK Follow me on Twitter: @danielbreves
  3. 3. 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
  4. 4. A little Zen history
  5. 5. Why Ember?
  6. 6. Why Ember? • Designed for large web applications • Convention over configuration • Dynamic bindings! • Vibrant, growing community
  7. 7. 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
  8. 8. How big is Zendesk? Over a thousand app servers responding to an average of ~100k rpm
  9. 9. Extensions
  10. 10. Extensions • Sammy.js/Router.js • Ember-Resource • Ember-CPM • Ember-I18n
  11. 11. Ember-Resource - https://github.com/zendesk/ember-resource
  12. 12. Ember-CPM - https://github.com/jamesarosen/ember-cpm
  13. 13. Ember.I18n- https://github.com/jamesarosen/ember-i18n
  14. 14. Namespaces vs Modules
  15. 15. Namespaces • • • • • Pollutes the global scope Hard to manage dependencies Leads to tight coupling Enforces managing loading order Hard to test
  16. 16. Modules with script loaders • • • • Does not pollute the global scope Dependencies are easy to locate Handles loading order for you Easier to test
  17. 17. Stop using namespaces! Before After
  18. 18. ! The Run Loop & The Object Model !
  19. 19. Run Loop A way of grouping computations in different queues, which run in a certain order.
  20. 20. Bindings
  21. 21. Computed Properties Computed properties all the things! ! !
  22. 22. Observers The Ember.Mixin class allows you to create mixins, whose properties can be added to other classes.
  23. 23. Optimisations
  24. 24. Pure handlebars
  25. 25. Caching views
  26. 26. Boot load vs asynchronous calls
  27. 27. Jasmine/Unit testing !
  28. 28. Jasmine/Unit testing
  29. 29. Zendesk App Framework/ Marketplace !
  30. 30. Zendesk Apps
  31. 31. Marketplace
  32. 32. 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
  33. 33. Thanks!
  34. 34. Zendesk tools • Ember-Resource https://github.com/zendesk/ember-resource ! • Ember-CPM https://github.com/jamesarosen/ember-cpm ! • Ember.I18n https://github.com/jamesarosen/ember-i18n

×