ember - sophisticated views
Post on 21-Oct-2014
2.145 views
DESCRIPTION
How Ember's View Layer Handles the Complex ProblemsTRANSCRIPT
How Ember's View Layer Handles the Complex Problems
SOPHISTICATED VIEWS
ME
■ Tilde Employee
■ Ember Core Team Member
■ Former SproutCore Core Team Member
■ Ruby on Rails Developer
PETER WAGENET
EMBER
A FRAMEWORK FOR CREATING AMBITIOUS WEB APPLICATIONS
How many here are familiar with Ember?What do you all use?
A BRIEF HISTORY
■ No trivial choices
■ Write less code
■ We solve the complex problems
There’s a myriad of
JavaScript application
frameworks. Here are
some reasons to pick
Ember.
WHY EMBER?
I’d rather sell you on philosophy than features. It’s more important for you to know how we approach problems.
THE COMPLEX PROBLEMS
■ Managing Nested Views
■ Handling Events
There are a number of
complex problems that
Ember tackles. We’ll
focus on two of them
which are pretty
closely tied together.
SOME PROBLEMS
Event handling is in some ways a subset of nested views, but is a large enough topic to be addressed on its own.
Problems
■ Zombie Views and Events
■ Re-rendering
While writing to the
DOM doesn’t seem
too hard, once you
start nesting views it’s
easy to trip up.
MANAGINGNESTED VIEWS
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.
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) {}
EVENTS
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.
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 manually re-render the child views and re-insert them into App View's element.
VIEWS
The issue here occurs if we re-render the App View and don’t properly tear-down the Menu and Menu Item views. We could easily end up with Zombie events and memory leaks.
■ Inconsistent Behavior
■ Setup and Teardown
■ Performance
Web applications need
to handle a wide
variety of DOM
events. It’s easy to
handle just a few, but
problems arise with
more.
HANDLING EVENTS
Sort of a continuation from the last point.
Lots of individual handlers can be slow.Not to mention the fact that you have to set up different handlers for each event type.
SOLUTIONS
■ Smarter re-rendering
■ Automatic binding and observer cleanup
Views are fully aware
of their children,
which means less
work for your app.
BUILT-INCHILD VIEWS
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 observers for views (and other objects) when destroyed.
As it turns out event teardown doesn’t really matter.
■ Regularizes DOM event bubbling
■ Provides the `on` method for delegation
One of the many
things jQuery does for
Ember is help to
normalize event
handling.
JQUERY
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.
■ Single Event Handler
■ Passes events to correct view
■ Event setup and teardown
Ember implements an
event delegator that
handles all inbound
events and sends
them the correct
location.
EVENT DELEGATION
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.
MORE SOLUTIONS
■ Child views
■ Event helpers
■ Bound properties
Integrated Handlebars
helpers allow you to
write less code
without losing any of
Ember’s bene!ts.
HANDLEBARS
■ Allows for binding content to the DOM
■ No use of HTML elements
■ Doesn’t affect CSS
Ember uses a purpose
built library called
Metamorph for
updating parts of the
DOM.
VIRTUAL VIEWS
<div id="name">
{{name}}
</div>
<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>
HTML
Handlebars
END
EMBERJS.COM
@WAGENET