Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecting batteryPOP.com in Ember.js

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

machty

September 18, 2012
Tweet

More Decks by machty

Other Decks in Programming

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