So, you think you know widgets.

5,729 views

Published on

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

Published in: Technology, News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,729
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
33
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

So, you think you know widgets.

  1. SO, YOU THINK YOU KNOW WIDGETS @DanielEricLeeFriday, September 16, 2011
  2. DAN LEEFriday, September 16, 2011
  3. JAVASCRIPTFriday, September 16, 2011
  4. Friday, September 16, 2011
  5. Stage One: DoubtFriday, September 16, 2011
  6. Stage Two: HateFriday, September 16, 2011
  7. Stage Three: Begrudging AppreciationFriday, September 16, 2011
  8. Stage Four: LoveFriday, September 16, 2011
  9. FOUR STAGES OF WIDGET WIZARDRYFriday, September 16, 2011
  10. Stage One: Wonder I never knew JavaScript could be awesome. --My friend TomFriday, September 16, 2011
  11. Stage Two: Kicking the Tires With great power, comes...people screwing up.Friday, September 16, 2011
  12. 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
  13. 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
  14. 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
  15. 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
  16. Stage Three: Gem Mining The Staples® of JavaScript toolkits. “Dojo: Yeah, we’ve got that.”Friday, September 16, 2011
  17. My favorite gem: Attribute Maps Bind widget properties to widget DOM Nodes. Update property, DOM node gets updated automatically.Friday, September 16, 2011
  18. 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
  19. 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
  20. 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
  21. One Gotcha... _Widget has an attributeMap, don’t clobber it. attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { // Attribute Map definition })Friday, September 16, 2011
  22. 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
  23. 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
  24. Beware @phigginsFriday, September 16, 2011
  25. dojo.declare(“poopin.phijit”)Friday, September 16, 2011
  26. Stay vigilant at DojoConf caughtyapoopin.comFriday, September 16, 2011
  27. 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
  28. Stage Four: CraftsmanshipFriday, September 16, 2011
  29. Memory Leaks Historically, not a big deal for web apps. That time is over.Friday, September 16, 2011
  30. 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
  31. 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
  32. 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
  33. Should I avoid doing this? No! This is perfectly natural, just make sure you clean up after yourself.Friday, September 16, 2011
  34. 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
  35. 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
  36. 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
  37. Bookmarklet DemoFriday, September 16, 2011
  38. 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
  39. This is so awesomeFriday, September 16, 2011
  40. THE END. @DanielEricLeeFriday, September 16, 2011

×