How Ember's View Layer Handles the Complex Problems

1. SOPHISTICATED
VIEWS
How Ember's View Layer Handles the
Complex Problems

3. ME

4. PETER WAGENET
■ Tilde Employee
■ Ember Core Team Member
■ Former SproutCore Core Team Member
■ Ruby on Rails Developer

5. EMBER

6. A FRAMEWORK FOR
CREATING AMBITIOUS
WEB APPLICATIONS
How many here are familiar with Ember?
What do you all use?

7. A BRIEF HISTORY

8. WHY EMBER?
There’s a myriad of ■ No trivial choices
JavaScript application
■ Write less code
frameworks. Here are
some reasons to pick ■ We solve the complex
Ember. problems
I’d rather sell you on philosophy than
features. It’s more important for you to
know how we approach problems.

9. THE
COMPLEX
PROBLEMS

10. SOME PROBLEMS
There are a number of ■ Managing Nested Views
complex problems that
■ Handling Events
Ember tackles. We’ll
focus 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 pretty
closely tied together.

11. MANAGING
NESTED VIEWS
While writing to the Problems
DOM doesn’t seem
■ Zombie Views and Events
too hard, once you
start nesting views it’s ■ Re-rendering
easy to trip up.

12. 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.

13. EVENTS
destroy: 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.

14. VIEWS
If we want to open at 8am, we need to re-
render the App View. In order to re-render
the App View, the App View must also The issue here occurs if we re-render the
manually re-render the child views and re- App View and don’t properly tear-down
insert them into App View's element. the Menu and Menu Item views. We
could easily end up with Zombie events
and memory leaks.

15. HANDLING EVENTS
Web applications need ■ Inconsistent Behavior
to handle a wide
■ Setup and Teardown
variety of DOM
events. It’s easy to ■ Performance
handle just a few, but
Sort of a continuation
problems arise with from the last point.
more.

16. Lots of individual handlers can be slow.
Not to mention the fact that you have to set
up different handlers for each event type.

17. SOLUTIONS

18. BUILT-IN
CHILD VIEWS
Views are fully aware ■ Smarter re-rendering
of their children,
■ Automatic binding and
which means less
observer cleanup
work for your app.

19. In this example, you can see that the views are
nested. 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 for
views (and other objects) when destroyed.
As it turns out event teardown doesn’t really
matter.

20. JQUERY
One of the many ■ Regularizes DOM event
things jQuery does for bubbling
Ember is help to
■ Provides the `on` method for
normalize event delegation
handling.
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.

21. EVENT DELEGATION
Ember implements an ■ Single Event Handler
event delegator that
■ Passes events to correct view
handles all inbound
events and sends ■ Event setup and teardown
them the correct
location.

22. Individual views don’t actually have any event
listeners. We just assign an `ember-view` class
to them that allows jQuery.on to register their
events. No worries about zombie events here.

23. MORE
SOLUTIONS

25. HANDLEBARS
Integrated Handlebars ■ Child views
helpers allow you to
■ Event helpers
write less code
without losing any of ■ Bound properties
Ember’s benefits.

26. VIRTUAL VIEWS
Ember uses a purpose ■ Allows for binding content to
built library called the DOM
Metamorph for
■ No use of HTML elements
updating parts of the
DOM. ■ Doesn’t affect CSS

27. 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>

28. END

29. EMBERJS.COM

30. @WAGENET