so, you think you know widgets

@DanielEricLee

SO,YOU THINK YOU KNOW WIDGETS

Friday, September 16, 2011

DAN LEE


JAVASCRIPT


Stage One: Doubt


Stage Two: Hate


Stage Three: Begrudging Appreciation


Stage Four: Love


FOURSTAGES

OFWIDGET

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 definitionattributeMap: { 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 attributeattributeMap: { // 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

// 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 }

Add function to your widget with naming convention:

_setPropertynameAttr


One Gotcha...

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

_Widget has an attributeMap, don’t clobber it.


Gotcha resolved in Dojo 1.7...

• attributeMap is deprecated, to be removed in Dojo 2.0.• All property/DOM bindings can be specified 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


http://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

Awesome blog post about using

Chrome’s DevTools Heap Profiler:

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

Web Performance Expert at Google:




Widget Specific Leak

• Widgets within Widgets can leak

• Calling destroyRecursive() on a widget generally

cleans up child widgets

• Child widgets defined 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/


http://higginsforpresident.net/2010/01/widgets-within-widgets/

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 registrymy_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 Diffvar 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


so, you think you know widgets

Technology

widget attribute maps

widget properties

silly widget

widget definition attributemap

widget specific leak

widget dom nodes

magic of dojo

html attribute attributemap