Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

So, you think you know widgets.

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

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

×