So, you think you know widgets.
Upcoming SlideShare
Loading in...5
×
 

So, you think you know widgets.

on

  • 4,277 views

'So, you think you know widgets' A talk by Dan Lee at DojoConf 2011 in Washington, DC.

'So, you think you know widgets' A talk by Dan Lee at DojoConf 2011 in Washington, DC.

Statistics

Views

Total Views
4,277
Slideshare-icon Views on SlideShare
4,154
Embed Views
123

Actions

Likes
5
Downloads
30
Comments
0

6 Embeds 123

http://lanyrd.com 82
http://paper.li 17
https://twitter.com 8
http://twitter.com 6
http://a0.twimg.com 6
http://us-w1.rockmelt.com 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    So, you think you know widgets. So, you think you know widgets. Presentation Transcript

    • SO, YOU THINK YOU KNOW WIDGETS @DanielEricLeeFriday, September 16, 2011
    • DAN LEEFriday, September 16, 2011
    • JAVASCRIPTFriday, September 16, 2011
    • Friday, September 16, 2011
    • Stage One: DoubtFriday, September 16, 2011
    • Stage Two: HateFriday, September 16, 2011
    • Stage Three: Begrudging AppreciationFriday, September 16, 2011
    • Stage Four: LoveFriday, September 16, 2011
    • FOUR STAGES OF WIDGET WIZARDRYFriday, September 16, 2011
    • Stage One: Wonder I never knew JavaScript could be awesome. --My friend TomFriday, September 16, 2011
    • Stage Two: Kicking the Tires With great power, comes...people screwing up.Friday, September 16, 2011
    • 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. });Friday, September 16, 2011
    • 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 = {}; } });Friday, September 16, 2011
    • Another Common Stumbling Point • Resources and Modules • The magic of dojo.require • Register Module Path • Custom modules when using Dojo from a CDNFriday, September 16, 2011
    • 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 educatorFriday, September 16, 2011
    • Stage Three: Gem Mining The Staples® of JavaScript toolkits. “Dojo: Yeah, we’ve got that.”Friday, September 16, 2011
    • My favorite gem: Attribute Maps Bind widget properties to widget DOM Nodes. Update property, DOM node gets updated automatically.Friday, September 16, 2011
    • Widget Attribute Maps <!-- In Widget Template HTML --> <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");Friday, September 16, 2011
    • 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" } }Friday, September 16, 2011
    • 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 }Friday, September 16, 2011
    • One Gotcha... _Widget has an attributeMap, don’t clobber it. attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { // Attribute Map definition })Friday, September 16, 2011
    • 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" }Friday, September 16, 2011
    • Demo Time Let’s see those Attribute Maps in action. It’s me. Of course we’ll use a silly widget.Friday, September 16, 2011
    • Beware @phigginsFriday, September 16, 2011
    • dojo.declare(“poopin.phijit”)Friday, September 16, 2011
    • Stay vigilant at DojoConf caughtyapoopin.comFriday, September 16, 2011
    • 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); }Friday, September 16, 2011
    • Stage Four: CraftsmanshipFriday, September 16, 2011
    • Memory Leaks Historically, not a big deal for web apps. That time is over.Friday, September 16, 2011
    • Tony Gentilcore Web Performance Expert at Google: Awesome blog post about using Chrome’s DevTools Heap Profiler: http://gent.ilcore.com/2011/08/finding-memory-leaks.htmlFriday, September 16, 2011
    • 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 upFriday, September 16, 2011
    • Example Leaky code dojo.declare("poopin.PhijitTriumvirate") <!-- Widget Template --> <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"); } }Friday, September 16, 2011
    • Should I avoid doing this? No! This is perfectly natural, just make sure you clean up after yourself.Friday, September 16, 2011
    • 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/Friday, September 16, 2011
    • 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 diffFriday, September 16, 2011
    • 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(", "));Friday, September 16, 2011
    • Bookmarklet DemoFriday, September 16, 2011
    • 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 thisFriday, September 16, 2011
    • This is so awesomeFriday, September 16, 2011
    • THE END. @DanielEricLeeFriday, September 16, 2011