Ember - Sophisticated Views


Published on

How Ember's View Layer Handles the Complex Problems

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ember - Sophisticated Views

  1. 1. SOPHISTICATEDVIEWSHow Embers View Layer Handles theComplex Problems
  2. 2. ME
  3. 3. PETER WAGENET■ Tilde Employee■ Ember Core Team Member■ Former SproutCore Core Team Member■ Ruby on Rails Developer
  4. 4. EMBER
  5. 5. A FRAMEWORK FORCREATING AMBITIOUSWEB APPLICATIONS How many here are familiar with Ember? What do you all use?
  7. 7. WHY EMBER?There’s a myriad of ■ No trivial choicesJavaScript application ■ Write less codeframeworks. Here aresome reasons to pick ■ We solve the complexEmber. problems I’d rather sell you on philosophy than features. It’s more important for you to know how we approach problems.
  9. 9. SOME PROBLEMSThere are a number of ■ Managing Nested Viewscomplex problems that ■ Handling EventsEmber tackles. We’llfocus on two of them Event handling is in some ways a subset of nested views, but is a large enough topic to be addressed on its own.which are prettyclosely tied together.
  10. 10. MANAGINGNESTED VIEWSWhile writing to the ProblemsDOM doesn’t seem ■ Zombie Views and Eventstoo hard, once youstart nesting views it’s ■ Re-renderingeasy to trip up.
  11. 11. ZOMBIES Zombies - views or events that don’t die Usually this happens because a parent re- rendered or was destroyed and forgot to teardown the child. In the case of events, an event handler was set up and never removed.
  12. 12. EVENTSdestroy: function () { var c = this; this.unbind(); try { this._element.pause(), this._element.removeEventListener("error", this._triggerError), this._element.removeEventListener("ended", this._triggerEnd), this._element.removeEventListener("canplay", this._triggerReady), this._element.removeEventListener("loadedmetadata", this._onLoadedMetadata), _.each(b, function (a) { c._element.removeEventListener(a, c._bubbleProfilingEvent) }), _.each(a, function (a) { c._element.removeEventListener(a, c._logEvent) }), this._element = null, this.trigger("destroy") } catch (d) {} This is from Rdio’s app The point is not to knock on Backbone, but to realize that there’s a lot to remember about and it’s easy to miss things. This is how zombies happen.
  13. 13. VIEWSIf we want to open at 8am, we need to re-render the App View. In order to re-renderthe App View, the App View must also The issue here occurs if we re-render themanually re-render the child views and re- App View and don’t properly tear-downinsert them into App Views element. the Menu and Menu Item views. We could easily end up with Zombie events and memory leaks.
  14. 14. HANDLING EVENTSWeb applications need ■ Inconsistent Behaviorto handle a wide ■ Setup and Teardownvariety of DOMevents. It’s easy to ■ Performancehandle just a few, but Sort of a continuationproblems arise with from the last point.more.
  15. 15. Lots of individual handlers can be slow.Not to mention the fact that you have to setup different handlers for each event type.
  16. 16. SOLUTIONS
  17. 17. BUILT-INCHILD VIEWSViews are fully aware ■ Smarter re-renderingof their children, ■ Automatic binding andwhich means less observer cleanupwork for your app.
  18. 18. In this example, you can see that the views arenested. If we need to re-render the AppView,Ember tearsdown the children and then re-renders them at the appropriate time.Ember cleans up any bindings and obser vers forviews (and other objects) when destroyed.As it turns out event teardown doesn’t reallymatter.
  19. 19. JQUERYOne of the many ■ Regularizes DOM eventthings jQuery does for bubblingEmber is help to ■ Provides the `on` method fornormalize event delegationhandling. Doesn’t quite merit its own slide, but it is worth mentioning that we outsource tough problems when we can. We’re a bit lazy, even if it doesn’t look like it. We don’t want to deal with problems if someone else already does it well.
  20. 20. EVENT DELEGATIONEmber implements an ■ Single Event Handlerevent delegator that ■ Passes events to correct viewhandles all inboundevents and sends ■ Event setup and teardownthem the correctlocation.
  21. 21. Individual views don’t actually have any eventlisteners. We just assign an `ember-view` classto them that allows jQuery.on to register theirevents. No worries about zombie events here.
  23. 23. HANDLEBARSIntegrated Handlebars ■ Child viewshelpers allow you to ■ Event helperswrite less codewithout losing any of ■ Bound propertiesEmber’s benefits.
  24. 24. VIRTUAL VIEWSEmber uses a purpose ■ Allows for binding content tobuilt library called the DOMMetamorph for ■ No use of HTML elementsupdating parts of theDOM. ■ Doesn’t affect CSS
  25. 25. Handlebars<div id="name"> {{name}}</div> HTML<div id="name"> <script id="metamorph−5−start" type="text/x−placeholder"></script> John Doe <script id="metamorph−5−end" type="text/x−placeholder"></script></div>
  26. 26. END
  27. 27. EMBERJS.COM
  28. 28. @WAGENET
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.