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
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)
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
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