Architecting batteryPOP.com in Ember.js

E6138af35a4330451deb308e9db17752?s=47 machty
September 18, 2012

Architecting batteryPOP.com in Ember.js

Short lightning talk on some of the methods used to achieve good performance and code organization with a highly animated kids web app written in Ember.js.
UPDATE: the site is (finally) live at batterypop.com

E6138af35a4330451deb308e9db17752?s=128

machty

September 18, 2012
Tweet

Transcript

  1. USEFUL ROBOT Architecting battery pop in Ember.js Ember Meetup: September

    18, 2012
  2. batteryPOP Challenges • Auto-resizing to fit all browser dimensions •

    Drilldown / Pagination • Changes to list of currently displayed nodes • Responsive, quick, cross-browser (including IE7+)
  3. First Challenge Auto-Resize / Positioning • Create Repositionable subclass of

    Ember.View • All Repositionables notified of browser dimension changes • positionFormula: shareable function for calculating new size / location / opacity of Repositionable when dimensions change • Pass off animation to separate module that will animate via CSS3 transitions or jQuery timer-based (decided via Modernizr)
  4. Second Challenge Pagination / Managing Tree-based Menu • Maintain a

    stack reflecting current depth of navigation • StackControllers receive pop / push notifications, delegate to PagedNodeOrchestrator to coalesce / disperse nodes • PagedNodeOrchestrator based on Ember.CollectionView: a view manager that modifies views based on underlying array • Lazy creation of views
  5. Final Thoughts Forget HTML5 / Typical Document Structure • Ember

    isn’t really built for view elements moving around the DOM • Put all Repositionables in one container, prevent z-index warfare Don’t use observers / bindings for timer animations • Calculate next locations in one shot, let jQuery / transitions to the heavy lifting
  6. Questions? Useful Robot • Small team of developers / designers

    working out of Brooklyn • info@robotisuseful.com