![“Portability”
[1,2,3].forEach(function(item, index){ ... }, context);
dojo.forEach([1,2,3], function(item, index){ ... }, context);
jQuery.each([1,2,3], function(index){ /* this == item */ });
Y.Array.each([1,2,3], function(item, index){ ... }, context)
Fuse.win([1,2,3], function(item, index){ ... }, context);](https://image.slidesharecdn.com/jsconfeu-2010-100925051009-phpapp01/85/Your-Library-Sucks-and-why-you-should-use-it-26-320.jpg)
Your Library Sucks, and why you should use it.
- 1. YOUR LIBRARY SUCKS. jsconf.eu :: 25 Sept 2010 :: Peter Higgins
- 2. BUT YOU SHOULD USE IT. jsconf.eu :: 25 Sept 2010 :: Peter Higgins
- 3. Me. Dojo Toolkit Project Lead JavaScript Engineer @joost / Adconion Blogs Infrequently :: http://higginsforpresident.net Codes @GitHub :: http://github.com/phiggins42 Twitter: @phiggins Beer Drinking Expert
- 4. It’s Just JavaScript TM Lovable, Simple Self Healing Promiscuous Ubiquitous
- 5. The Good Parts Context :: apply/call/hitch/partial AOP, FTW. (duck punch...) Prototypes, also FTW Module Loading (/me jokes)
- 6. The Bad Parts Date() :: designed with evil. The DOM :: also designed with evil. with() and eval() :: allegedly evil.
- 7. Teh Libraries Dojo YUI Mootools / Prototype FuseJS (?) EmbedJS (?) jQuery Your own
- 9. Libraries are a crutch Learn JavaScript first Know enough to dislike parts Supplement those parts Don’t be afraid of the word `prototype` If you don’t know $.fn === $.prototype, quit (or learn)
- 10. PROMISCUOUS Also known as Loose Typing
- 11. SELF-HEALING
- 12. BASIC AOP <3 // I can fix anything: var oldfunction = some.oldFunction; some.oldFunction = function(){ oldfunction.apply(some, arguments); // closures, ftw. }
- 13. Philosophically Fixes on the Natives vs Namespaced fixes SomeString.trim() vs mylibrary.trim(SomeString) mylibrary = {}; mylibrary.trim = String.prototype.trim ? function(str){ return str.trim(); } : function(str){ /* do the “fun” stuff */ };
- 14. Bind/Curry/Whatever Context manipulation, FTW mylibrary.bind = Function.prototype.bind ? function(fn, context){ return fn.bind(context); } : function(fn, context){ return function(){ return fn.apply(context, arguments); } }
- 15. EASY TO ABUSE :(
- 16. DON’T DO THIS: $(“div button#bar”).click(function(){ $(‘#bam’).addClass(“bar”); $(‘#bam’).css(“width”, “200px”) $(‘#bam’).animate({ width: “+=100” }) }).click();
- 17. To be fair ... // easy to write bad code in any library: var $ = dojo.query; $(“div button#bar”).onclick(function(){ $(‘#bam’).addClass(“bar”); $(‘#bam’).css(“width”, “200px”) $(‘#bam’).animate({ width: 300 }) }).trigger(‘click’);
- 18. Why not: var clicker = function(){ $(“#bam”) .addClass(“bar”) .css({ width:”200px” }) .animate({ width:”300px” }) } $(“#bar”).click(clicker); clicker();
- 19. UBIQUITOUS “But can it run JavaScript?”
- 20. Device Penetration Browsers, Now Desktop, Mobile, Device Server Rhino V8 Spidermonkey
- 21. Future Browsers? Kitchen Crap Televisions Washer / Dryer? ...
- 22. COMMONJS is piggybacking.
- 23. CommonJS Modules should be in the language, not here. Forgot about the browser (see: Modules) Though has nothing to do with the DOM A bit late? Only more time will tell.
- 24. STANDARDS. Yep. We (kinda) have them.
- 25. MDC: Array.prototype Array.forEach / map / filter / indexOf / etc etc None of us handle sparse arrays to spec jQuery.map vs jQuery().map offends my senses dojo.map(ar, “return item * 2”) is too much magic
- 26. “Portability” [1,2,3].forEach(function(item, index){ ... }, context); dojo.forEach([1,2,3], function(item, index){ ... }, context); jQuery.each([1,2,3], function(index){ /* this == item */ }); Y.Array.each([1,2,3], function(item, index){ ... }, context) Fuse.win([1,2,3], function(item, index){ ... }, context);
- 27. MDC: Fn.proto.bind “this” is important. var obj = { counter:0, inc: function(howmuch){ this.counter += howmuch || 0; } }; var pfn = obj.inc.bind(obj, 5); // native, moo, proto way var dfn = dojo.hitch(obj, “inc”, 5), // dojo var dfn2 = dojo.hitch(obj, obj.inc, 5); // dojo is backwards var jfn = jQuery.proxy(obj, “inc”); // so is jq. only w/ strings (also can’t pass args) var jfn2 = jQuery.proxy(obj.inc, obj); // this is just plain inconsistent (no args here either)
- 28. I’M MISSING THE POINT? No, i’m not being clear.
- 29. Your library sucks, still. I’m a grumpy old man. </rant> No compelling reason for YOU not to use them If you understand what it’s doing If you don’t MIX Non-trivial tasks Portability
- 30. Library Benefits Deferred development cost Open Source / Many Eyes Battle-tested Common / Consistent APIs
- 31. I WANT TO CHANGE TOPICS Really. Let’s move forward, instead.
- 32. Propose: CommonBrowserJS Reduce what we’ve learned over the years Common Library to build upon No Magic, Pure Standards No UA sniffs, pure `feature detection` Can load CommonJS modules/packages Try to be agnostic? Back to Dojo beginnings.
- 33. Small Problems are Easy MDC / ECMA standards are easy. What next? Modularity Stability (regressions, deprecation, sane versioning) Localization/Internationalization? (l10n, i18n)
- 34. First pass: has.js Agnostic Core pure Feature Detection framework API not as important as converging on test implementations Naming shit is hard.
- 35. DOJO ALREADY DID IT. @dojodidit - Really, We probably have.
- 36. DISCUSS. Done talking. Ask questions if you like.
- 37. AAAAND THANKS. #jsconfeu FTW, 2010 - enjoy the rest of the conference.