So, you think you know widgets.

  • 3,889 views
Uploaded on

'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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,889
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
31
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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