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     ...
Stage One: Wonder                             I never knew JavaScript could be awesome.                                   ...
Stage Two: Kicking the Tires                             With great power, comes...people screwing up.Friday, September 16...
Alpha Mistake: Accidental Static Fields             dojo.declare("test.Widget", [ dijit._Widget, dijit._Templated ],{     ...
Avoiding Accidental Statics             dojo.declare("test.Widget", [ dijit._Widget, dijit._Templated ], {             	 t...
Another Common Stumbling Point            • Resources and Modules            • The magic of dojo.require            • Regi...
You guys already knew this stuff, but....            • Don’t forget, you are JavaScript Astronauts                      • ...
Stage Three: Gem Mining                             The Staples® of JavaScript toolkits.                               “Do...
My favorite gem: Attribute Maps                             Bind widget properties to widget DOM Nodes.                Upd...
Widget Attribute Maps             <!-- In Widget Template HTML -->             <span data-dojo-attach-point="heroNode"></s...
Widget Attribute Maps             // Also possible to bind to a CSS class or HTML attribute             attributeMap: {   ...
More Complex Bindings: Custom Setters              Add function to your widget with naming convention:              _setPr...
One Gotcha...             _Widget has an attributeMap, don’t clobber it.             attributeMap:             	 dojo.dele...
Gotcha resolved in Dojo 1.7...             • attributeMap is deprecated, to be removed in Dojo 2.0.             • All prop...
Demo Time                             Let’s see those Attribute Maps in action.                             It’s me. Of co...
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: "threatLev...
Stage Four: CraftsmanshipFriday, September 16, 2011
Memory Leaks                             Historically, not a big deal for web apps.                                       ...
Tony Gentilcore                             Web Performance Expert at Google:                             Awesome blog pos...
Widget Specific Leak            • Widgets within Widgets can leak            • Calling destroyRecursive() on a widget gene...
Example Leaky code             dojo.declare("poopin.PhijitTriumvirate")             <!-- Widget Template -->             <...
Should I avoid doing this?                                    No! This is perfectly natural,                             j...
Clean up - Two techniques    Quick and Dirty:      • Append your programmatically created widgets to           this._suppo...
Lightweight Leak Detection    dijit.registry to the rescue!    To detect leaks:          • Query the registry          • P...
dijit.registry Query code    // Query the registry    my_widgets = [];    dijit.registry.forEach(function(widget){    	 my...
Bookmarklet DemoFriday, September 16, 2011
Most Important Stage            • Stage Two: Kicking the Tires            • This is where we lose people            • If y...
This is so awesomeFriday, September 16, 2011
THE END.        @DanielEricLeeFriday, September 16, 2011
Upcoming SlideShare
Loading in...5
×

So, you think you know widgets.

4,052

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
4,052
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
32
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

So, you think you know widgets.

  1. 1. SO, YOU THINK YOU KNOW WIDGETS @DanielEricLeeFriday, September 16, 2011
  2. 2. DAN LEEFriday, September 16, 2011
  3. 3. JAVASCRIPTFriday, September 16, 2011
  4. 4. Friday, September 16, 2011
  5. 5. Stage One: DoubtFriday, September 16, 2011
  6. 6. Stage Two: HateFriday, September 16, 2011
  7. 7. Stage Three: Begrudging AppreciationFriday, September 16, 2011
  8. 8. Stage Four: LoveFriday, September 16, 2011
  9. 9. FOUR STAGES OF WIDGET WIZARDRYFriday, September 16, 2011
  10. 10. Stage One: Wonder I never knew JavaScript could be awesome. --My friend TomFriday, September 16, 2011
  11. 11. Stage Two: Kicking the Tires With great power, comes...people screwing up.Friday, September 16, 2011
  12. 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. 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. 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. 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. 16. Stage Three: Gem Mining The Staples® of JavaScript toolkits. “Dojo: Yeah, we’ve got that.”Friday, September 16, 2011
  17. 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. 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. 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. 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. 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. 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. 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. 24. Beware @phigginsFriday, September 16, 2011
  25. 25. dojo.declare(“poopin.phijit”)Friday, September 16, 2011
  26. 26. Stay vigilant at DojoConf caughtyapoopin.comFriday, September 16, 2011
  27. 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. 28. Stage Four: CraftsmanshipFriday, September 16, 2011
  29. 29. Memory Leaks Historically, not a big deal for web apps. That time is over.Friday, September 16, 2011
  30. 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. 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. 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. 33. Should I avoid doing this? No! This is perfectly natural, just make sure you clean up after yourself.Friday, September 16, 2011
  34. 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. 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. 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. 37. Bookmarklet DemoFriday, September 16, 2011
  38. 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. 39. This is so awesomeFriday, September 16, 2011
  40. 40. THE END. @DanielEricLeeFriday, September 16, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×