WHY NESTEDTERNARY OPERATORSMAKE ME WANT TOKICK INANIMATEOBJECTS IN THE NUTSAKA: Making JavaScript Libraries More Approacha...
IN THE WORLD OF JS LIBRARIES...                     AUTHORS       USERS
IVE BEEN USING A LOT OF LIBRARIESTHIS PAST YEAR... bootstrap.datepicker.js   jquery-1.7.min.js       jsrender.js bootstrap...
AND SOMETIMES I SEE STUFF LIKE... (aposed      ? (aposed = !apos, (aposed ? all : "))      : quoted            ? (quoted =...
AND IT MAKES ME THINK OF.... 
...WOULDNT THIS BE BETTER? 
THE STAGES OF BEING A USER:    1. Learn how a library works & start using it.      2. Debug a library when something goes ...
STEP 1: THIS LOOKS LIKE A USEFULLIBRARY, LETS SEE HOW TO USE IT.    Document everything.       JSDoc, JSDuck, JoDoc, Dox, ...
NOT ENOUGH DOCUMENTATION. this.options.knownHelpers = {    each: true,    if: true,    unless: true,    with: true,    log...
TOO MUCH DOCUMENTATION.                               vs.   http://handlebarsjs.com/         https://github.com/wycats/han...
DUPLICATE DOCUMENTATION.              vs.
STEP 2: UH OH, SOMETHING WENTWRONG. TIME TO DEBUG THE LIB.Make your code readable. ○ "Common conventions"   ■ Idiomatic.js...
SHORTENED VARIABLE NAMES. ar a = s.split("."),v        r = "",        l = a.length;for (var i = 0; i < l; i++) {  var item...
SHORTENED VARIABLE NAMES.  FOR:   The shortened names make sense.   AGAINST:   Maybe to you. But not to people new to the ...
SHORTENED VARIABLE NAMES.  FOR:   It makes for less bytes of code.   AGAINST:   Code will get compiled to least number of ...
SHORTENED VARIABLE NAMES.  FOR:   It makes for shorter lines of code.   AGAINST:   Readability trumps line length.  
MISSING SEMI-COLONS. 
MISSING SEMI-COLONS.  AGAINST:   Its harder to read the code.    "Readability is the single most important quality of a pi...
MISSING SEMI-COLONS.  AGAINST:  Its harder to make non-breaking changes to the code. this:  a = b + c  (d + e).print() is ...
MISSING SEMI-COLONS.  FOR:   Its what the core team prefers.   AGAINST:   The core team arent the only developers looking ...
MISSING SEMI-COLONS.  AGAINST:  Hacker News agrees.
NESTED TERNARY OPERATORS. $.qsa = $$ = function(element, selector){    var found    return (element === document && idSele...
NESTED TERNARY OPERATORS. AGAINST:    Theyre hard to understand. $.qsa = $$ = function(element, selector){    var found;  ...
NESTED TERNARY OPERATORS.  AGAINST:   Its hard to debug the nested statements.   FOR:   You can debug them with breakpoint...
NESTED TERNARY OPERATORS. FOR:  They perform better than if/else. AGAINST:   Compilers convert if/else to ternary.   Try i...
STEP 3: OK, ALL WORKING. TIME TOINTEGRATE WITH MY WORKFLOW.Try your code with popular JS build tools  ● JSHint  ● Closure ...
UNSPECIFIED JSHINT OPTIONS. [jshint] Error(s) in ./application/static/js/libs/bootstrap.js:Missing semicolon. (line: 24, c...
STEP 4: WHEE, IT WORKS, NOW I JUSTWANNA SUBMIT THIS ONE CHANGE.Make it easy to build. Make the tests easy to run.  ...use ...
TOO MANY TOOLS? 
SO, IF YOURE A LIBRARY...WHICH ONE DO YOU WANT TO BE?            elite                      approachable                  ...
Upcoming SlideShare
Loading in...5
×

Making JavaScript Libraries More Approachable

3,476

Published on

A talk given at NotConf in Phoenix, Texas in 2012.

(Alternative title: Why nested ternary operators make me want to kick inanimate objects in the nuts.)

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,476
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Making JavaScript Libraries More Approachable

  1. 1. WHY NESTEDTERNARY OPERATORSMAKE ME WANT TOKICK INANIMATEOBJECTS IN THE NUTSAKA: Making JavaScript Libraries More Approachable http://tinyurl.com/ternaryops Pamela Fox @pamelafox
  2. 2. IN THE WORLD OF JS LIBRARIES...  AUTHORS USERS
  3. 3. IVE BEEN USING A LOT OF LIBRARIESTHIS PAST YEAR... bootstrap.datepicker.js jquery-1.7.min.js jsrender.js bootstrap.js jquery.autosuggest.js lscache.js colorslider.js jquery.calendrical.js modernizr-1.7.js confetti.js jquery.dateinput.js personalize.js date.format.js jquery.fancybox.js phonegap.js dateinput.js jquery.mobile.js stacktrace.js dd_belatedpng.js jquery.overlay.js throttle.js facebook.js jquery.sparkline.js timeago.js facebook_js_sdk.js jquery.tablesorter.js useragent.js handlebars.js jquery.tagfield.js zepto.js highcharts.js jquery.tooltip.js
  4. 4. AND SOMETIMES I SEE STUFF LIKE... (aposed ? (aposed = !apos, (aposed ? all : ")) : quoted ? (quoted = !quot, (quoted ? all : ")) : ( (lftPrn ? (parenDepth++, lftPrn) : "") + (space ? (parenDepth ? "" : named ? (named = FALSE, "b") : "," ) : eq ? (parenDepth && syntaxError(), named = TRUE, b + path + :) : path ? (path.replace( rPath, parsePath ) + (prn ? (fnCall[ ++parenDepth ] = TRUE, prn) : operator) ) : operator ? all : rtPrn ? ((fnCall[ parenDepth-- ] = FALSE, rtPrn) + (prn ? (fnCall[ ++parenDepth ] = TRUE, prn) : "") ) : comma ? (fnCall[ parenDepth ] || syntaxError(), ",") : lftPrn0 ? "" : (aposed = apos, quoted = quot, ")))
  5. 5. AND IT MAKES ME THINK OF.... 
  6. 6. ...WOULDNT THIS BE BETTER? 
  7. 7. THE STAGES OF BEING A USER:   1. Learn how a library works & start using it.   2. Debug a library when something goes wrong.   3. Integrate a library with their workflow.   4. BONUS: Submit a patch to the library.
  8. 8. STEP 1: THIS LOOKS LIKE A USEFULLIBRARY, LETS SEE HOW TO USE IT. Document everything.  JSDoc, JSDuck, JoDoc, Dox, NDoc, Docco, Docco-Husky, AutoObjectDocumentation  Make the documentation easy to patch. 
  9. 9. NOT ENOUGH DOCUMENTATION. this.options.knownHelpers = { each: true, if: true, unless: true, with: true, log: true}; handlebars.js
  10. 10. TOO MUCH DOCUMENTATION.  vs. http://handlebarsjs.com/ https://github.com/wycats/handlebars.js/
  11. 11. DUPLICATE DOCUMENTATION.  vs.
  12. 12. STEP 2: UH OH, SOMETHING WENTWRONG. TIME TO DEBUG THE LIB.Make your code readable. ○ "Common conventions" ■ Idiomatic.js ■ Crockford ■ Google ■ Stoyan Stefanov ○ Descriptive variable names Make your code debuggable. ○ On *all* platforms.
  13. 13. SHORTENED VARIABLE NAMES. ar a = s.split("."),v r = "", l = a.length;for (var i = 0; i < l; i++) { var item = a[i]; if (item.length == 2) { r += "0" + item; } else { r += item; }}function login(a, b) { b = b || { perms: }; PhoneGap.exec(function(e) { FB.Auth.setSession(e.session, connected); if (a) a(e); }, null, com.phonegap.facebook.Connect, login, b.perms.split(,) );}
  14. 14. SHORTENED VARIABLE NAMES.  FOR: The shortened names make sense.   AGAINST: Maybe to you. But not to people new to the code.   "Common sense" is not common.
  15. 15. SHORTENED VARIABLE NAMES.  FOR: It makes for less bytes of code.   AGAINST: Code will get compiled to least number of bytes anyway.  
  16. 16. SHORTENED VARIABLE NAMES.  FOR: It makes for shorter lines of code.   AGAINST: Readability trumps line length.  
  17. 17. MISSING SEMI-COLONS. 
  18. 18. MISSING SEMI-COLONS.  AGAINST: Its harder to read the code.    "Readability is the single most important quality of a piece of code. Semicolons aid readability by eliminating ambiguity and ensuring that nobody ever has to spend even a second figuring out whether your code will do what it looks like it will do." Jason Kester "Relying on implicit insertion can cause subtle, hard to debug problems. Dont do it. Youre better than that." Google Style Guide
  19. 19. MISSING SEMI-COLONS.  AGAINST: Its harder to make non-breaking changes to the code. this: a = b + c (d + e).print() is interpreted as: a = b + c(d + e).print(); so you have to: ;(d + e).print()
  20. 20. MISSING SEMI-COLONS.  FOR: Its what the core team prefers.   AGAINST: The core team arent the only developers looking at the code. (But they might be if thats the philosophy.) Dont use your library code to show off how well you know the idiosyncrasies of a language.
  21. 21. MISSING SEMI-COLONS.  AGAINST: Hacker News agrees.
  22. 22. NESTED TERNARY OPERATORS. $.qsa = $$ = function(element, selector){ var found return (element === document && idSelectorRE.test(selector)) ? ( (found = element.getElementById(RegExp.$1)) ? [found] : emptyArray ): (element.nodeType !== 1 && element.nodeType !== 9) ? emptyArray : slice.call( classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) : tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) : element.querySelectorAll(selector) ) } zepto.js
  23. 23. NESTED TERNARY OPERATORS. AGAINST: Theyre hard to understand. $.qsa = $$ = function(element, selector){ var found; if (element === document && idSelectorRE.test(selector)) { found = element.getElementById(RegExp.$1); return found && [found] || []; } else if (classSelectorRE.test(selector)) { return slice.call(element.getElementsByClassName(RegExp.$1)); } else if (tagSelectorRE.test(selector)) { return slice.call(element.getElementsByTagName(selector)); } else { return slice.call(attemptQuerySelectorAll(element, selector)); }}If you have the choice between two styles andone is more readable, choose that one.
  24. 24. NESTED TERNARY OPERATORS.  AGAINST: Its hard to debug the nested statements.   FOR: You can debug them with breakpoints.   AGAINST: You cant always use fancy debuggers. See: Android, IE
  25. 25. NESTED TERNARY OPERATORS. FOR: They perform better than if/else. AGAINST: Compilers convert if/else to ternary. Try in UglifyJS or Closure Compiler.
  26. 26. STEP 3: OK, ALL WORKING. TIME TOINTEGRATE WITH MY WORKFLOW.Try your code with popular JS build tools ● JSHint ● Closure Compiler / UglifyJS ● Grunt  If it requires options, specify them or inlinethem into the code.
  27. 27. UNSPECIFIED JSHINT OPTIONS. [jshint] Error(s) in ./application/static/js/libs/bootstrap.js:Missing semicolon. (line: 24, character: 5)> "use strict"Comma warnings can be turned off with laxcomma (line: 31, character: 9)> , thisStyle = thisBody.styleBad line breaking before ,. (line: 30, character: 48)> var thisBody = document.body || document.documentElement...Too many errors. (8% scanned). (line: 139, character: 73)/*jshint asi:true, laxbreak:true, laxcomma:true, expr:true, boss:true */
  28. 28. STEP 4: WHEE, IT WORKS, NOW I JUSTWANNA SUBMIT THIS ONE CHANGE.Make it easy to build. Make the tests easy to run.  ...use familiar tools and languages.
  29. 29. TOO MANY TOOLS? 
  30. 30. SO, IF YOURE A LIBRARY...WHICH ONE DO YOU WANT TO BE? elite approachable vs. AUTHORS USERS USERS AUTHORS
  1. A particular slide catching your eye?

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

×