SOPHISTICATEDVIEWSHow Embers View Layer Handles theComplex Problems
ME
PETER WAGENET■ Tilde Employee■ Ember Core Team Member■ Former SproutCore Core Team Member■ Ruby on Rails Developer
EMBER
A FRAMEWORK FORCREATING AMBITIOUSWEB APPLICATIONS            How many here are familiar with Ember?            What do you...
A BRIEF HISTORY
WHY EMBER?There’s a myriad of      ■ No trivial choicesJavaScript application                         ■ Write less codefra...
THECOMPLEXPROBLEMS
SOME PROBLEMSThere are a number of    ■ Managing Nested Viewscomplex problems that                         ■ Handling Even...
MANAGINGNESTED VIEWSWhile writing to the       ProblemsDOM doesn’t seem                           ■ Zombie Views and Event...
ZOMBIES          Zombies - views or events that don’t die          Usually this happens because a parent re-          rend...
EVENTSdestroy: function () {  var c = this; this.unbind();  try {    this._element.pause(),    this._element.removeEventLi...
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 al...
HANDLING EVENTSWeb applications need    ■ Inconsistent Behaviorto handle a wide                         ■ Setup and Teardo...
Lots of individual handlers can be slow.Not to mention the fact that you have to setup different handlers for each event t...
SOLUTIONS
BUILT-INCHILD VIEWSViews are fully aware   ■ Smarter re-renderingof their children,                        ■ Automatic bin...
In this example, you can see that the views arenested. If we need to re-render the AppView,Ember tearsdown the children an...
JQUERYOne of the many          ■ Regularizes DOM eventthings jQuery does for     bubblingEmber is help to                 ...
EVENT DELEGATIONEmber implements an    ■ Single Event Handlerevent delegator that                       ■ Passes events to...
Individual views don’t actually have any eventlisteners. We just assign an `ember-view` classto them that allows jQuery.on...
MORESOLUTIONS
HANDLEBARSIntegrated Handlebars   ■ Child viewshelpers allow you to                        ■ Event helperswrite less codew...
VIRTUAL VIEWSEmber uses a purpose    ■ Allows for binding content tobuilt library called      the DOMMetamorph for        ...
Handlebars<div id="name">  {{name}}</div>                    HTML<div id="name">  <script id="metamorph−5−start" type="tex...
END
EMBERJS.COM
@WAGENET
Ember - Sophisticated Views
Ember - Sophisticated Views
Upcoming SlideShare
Loading in …5
×

Ember - Sophisticated Views

2,447 views

Published on

How Ember's View Layer Handles the Complex Problems

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,447
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
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?
  6. 6. A BRIEF HISTORY
  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.
  8. 8. THECOMPLEXPROBLEMS
  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.
  22. 22. MORESOLUTIONS
  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

×