Four Stages of Widget Wizardry and Avoiding Memory Leaks

SO,
YOU
THINK
YOU
KNOW
WIDGETS
@DanielEricLee

Friday, September 16, 2011

DAN LEE


JAVASCRIPT


Stage One: Doubt


Stage Two: Hate


Stage Three: Begrudging Appreciation


Stage Four: Love


FOUR
STAGES
OF
WIDGET
WIZARDRY


Stage One: Wonder

I never knew JavaScript could be awesome.

--My friend Tom


Stage Two: Kicking the Tires

With great power, comes...people screwing up.


Alpha Mistake: Accidental Static Fields

dojo.declare("test.Widget", [ dijit._Widget, dijit._Templated ],{
templateString :
dojo.cache("test", "templates/Widget.html"),

objectProperty: { } // Well, there goes your afternoon.

});


Avoiding Accidental Statics

dojo.declare("test.Widget", [ dijit._Widget, dijit._Templated ], {
templateString :
dojo.cache("test", "templates/Widget.html"),

// Initialize to null
objectProperty: null,

// Instantiate in constructor
constructor: function() {
this.objectProperty = {};
}
});


Another Common Stumbling Point

• Resources and Modules

• The magic of dojo.require

• Register Module Path

• Custom modules when using Dojo from a CDN


You guys already knew this stuff, but....

• Don’t forget, you are JavaScript Astronauts

• You were loading modules when these

kids were in diapers

• Anticipating where newcomers will struggle

is the most powerful tool of the educator


Stage Three: Gem Mining

The Staples® of JavaScript toolkits.
“Dojo: Yeah, we’ve got that.”


My favorite gem: Attribute Maps

Bind widget properties to widget DOM Nodes.

Update property, DOM node gets updated automatically.


Widget Attribute Maps


<span data-dojo-attach-point="heroNode"></span>

// Specified as a property on your widget definition
attributeMap: {
hero: {
node: "heroNode",
type: "innerHTML"
}
}

// Calling 'set' on hero updates the innerHTML of 'heroNode'
myWidget.set("hero", "Larry Bird");

Widget Attribute Maps

// Also possible to bind to a CSS class or HTML attribute
attributeMap: {
// Bind to a CSS class
prop: {
node: "someNode",
type: "class"
},
// Bind to an HTML attribute
prop2: {
node: "imageNode",
type: "attribute",
attribute: "src"
}
}


More Complex Bindings: Custom Setters

Add function to your widget with naming convention:
_setPropertynameAttr

// Whenever widget.set(‘funkiness’, value) is called,
// this function is called
_setFunkinessAttr : function(brandNewFunk) {
// Do what needs to be done to update the widget
// to the new level of funkiness
}


One Gotcha...

_Widget has an attributeMap, don’t clobber it.

attributeMap:
dojo.delegate(dijit._Widget.prototype.attributeMap, {
// Attribute Map definition
})


Gotcha resolved in Dojo 1.7...

• attributeMap is deprecated, to be removed in Dojo 2.0.

• All property/DOM bindings can be speciﬁed via _set

convention. To specify an attributeMap relationship, return
an object instead of a function. Nice.

_setHeroAttr: { node: "heroNode", type: "innerHTML" }


Demo Time

Let’s see those Attribute Maps in action.
It’s me. Of course we’ll use a silly widget.


Beware @phiggins


dojo.declare(“poopin.phijit”)


Stay vigilant at DojoConf caughtyapoopin.com


Phijit code: Let’s see a quick demo
attributeMap: {
threatLevel: {
node: "threatLevelNode",
type: "class"
}
},
_setCounterAttr: function(value) {
var threatCss = "low";

this.counterNode.innerHTML = value;

if(value >= 3 && value <= 4) {
threatCss = "elevated";
} else if (value >= 5) {
threatCss = "severe";
}
this.set('threatLevel', threatCss);
}


Stage Four: Craftsmanship


Memory Leaks

Historically, not a big deal for web apps.
That time is over.


Tony Gentilcore

Web Performance Expert at Google:

Awesome blog post about using
Chrome’s DevTools Heap Proﬁler:

http://gent.ilcore.com/2011/08/ﬁnding-memory-leaks.html


Widget Specific Leak

• Widgets within Widgets can leak

• Calling destroyRecursive() on a widget generally

cleans up child widgets
• Child widgets deﬁned declaratively in HTML

template get cleaned up
• Widgets new’d programmatically do not get cleaned up


Example Leaky code

dojo.declare("poopin.PhijitTriumvirate")


<div>
<div data-dojo-attach-point="phijits"></div>
</div>

postCreate : function() {
for(var i = 0; i < 3; i++) {
var p = new poopin.Phijit(); // Leaky Phijit
dojo.place(p.domNode, this.phijits, "last");
}
}

Should I avoid doing this?

No! This is perfectly natural,
just make sure you clean up after yourself.


Clean up - Two techniques

Quick and Dirty:
• Append your programmatically created widgets to
this._supportingWidgets
• Internal, subject to change.

Better:
• Keep track of these widgets yourself, destroy them when

the parent is destroyed.
• http://higginsforpresident.net/2010/01/widgets-within-widgets/


Lightweight Leak Detection

dijit.registry to the rescue!

To detect leaks:
• Query the registry

• Perform interactions that should result in net zero widgets

•Query the registry again to produce a diff


dijit.registry Query code

// Query the registry
my_widgets = [];
dijit.registry.forEach(function(widget){
my_widgets.push(widget.id);
});
console.log("Widgets Captured (" + dijit.registry.length + ") in total)");

// Query it again, produce a Diff
var leakyWidgets = [];
dijit.registry.forEach(function(widget){
if(dojo.indexOf(my_widgets, widget.id) === -1) {
leakyWidgets.push(widget.declaredClass);
}
});

console.log(leakyWidgets.length + " potential leaks found");
console.log("Potential Leaks: " + leakyWidgets.join(", "));


Bookmarklet Demo


Most Important Stage

• Stage Two: Kicking the Tires

• This is where we lose people

• If you care about Dojo, you should not be OK with this


This is so awesome


THE END.
@DanielEricLee


Four Stages of Widget Wizardry and Avoiding Memory Leaks

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Four Stages of Widget Wizardry and Avoiding Memory Leaks

Similaire à Four Stages of Widget Wizardry and Avoiding Memory Leaks (20)

Dernier

Dernier (20)

Four Stages of Widget Wizardry and Avoiding Memory Leaks