Ember - Sophisticated Views

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