Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Secrets of Awesome JavaScript API Design

Secrets of Awesome JavaScript API Design

As developers, we know what good and bad JavaScript APIs "feel" like, and yet we struggle with designing the kind of APIs that we enjoy using. But principles of good JavaScript API design do exist, and it's possible to extract them from several key libraries in the the proliferating JavaScript landscape. In this session, Brandon Satrom will do exactly that, digging into the design aspects of popular libraries like jQuery, Backbone, Knockout, Modernizer, Kendo UI and others to enumerate the designed-in qualities of these libraries that make them not only popular, but a pleasure to use.

Brandon Satrom

May 23, 2013
Tweet

More Decks by Brandon Satrom

Other Decks in Programming

Transcript

  1. Secrets of Awesome JavaScript
    API Design
    Brandon Satrom
    @BrandonSatrom
    [email protected]
    Friday, May 24, 13

    View Slide

  2. Read it @
    bit.ly/
    ZS5VYv
    Friday, May 24, 13

    View Slide

  3. 3 Big Ideas
    Friday, May 24, 13

    View Slide

  4. Three ideas...
    Friday, May 24, 13

    View Slide

  5. Three ideas...
    1.APIs are “Developer UX”
    Friday, May 24, 13

    View Slide

  6. Three ideas...
    1.APIs are “Developer UX”
    2.API Design is a universal practice
    Friday, May 24, 13

    View Slide

  7. Three ideas...
    1.APIs are “Developer UX”
    2.API Design is a universal practice
    3.API Design is a “principle-driven” art form
    Friday, May 24, 13

    View Slide

  8. What is design?
    Friday, May 24, 13

    View Slide

  9. What is design?
    “form[ing] a plan or scheme of [some
    thing]… for later execution”
    - Oxford English Dictionary
    Friday, May 24, 13

    View Slide

  10. Design is universal
    Friday, May 24, 13

    View Slide

  11. We judge designs to be...
    ...elegant
    ...beautiful
    ...utilitarian
    ...simple
    ...or not...
    Images from: http://www.greatbuildings.com/ and http://list25.com/25-ugliest-buildings-in-the-world/
    Friday, May 24, 13

    View Slide

  12. We judge designs to be...
    ...elegant
    ...beautiful
    ...utilitarian
    ...simple
    ...or not...
    Images from: http://www.greatbuildings.com/ and http://list25.com/25-ugliest-buildings-in-the-world/
    Friday, May 24, 13

    View Slide

  13. We judge designs to be...
    ...elegant
    ...beautiful
    ...utilitarian
    ...simple
    ...or not...
    Images from: http://www.greatbuildings.com/ and http://list25.com/25-ugliest-buildings-in-the-world/
    Friday, May 24, 13

    View Slide

  14. We judge designs to be...
    ...elegant
    ...beautiful
    ...utilitarian
    ...simple
    ...or not...
    Images from: http://www.greatbuildings.com/ and http://list25.com/25-ugliest-buildings-in-the-world/
    Friday, May 24, 13

    View Slide

  15. “Mediocre design provably wastes
    the world’s resources, corrupts the
    environment, affects international
    competitiveness. Design is
    important, teaching design is
    important.”
    - Fred Brooks
    Image of Fred Brooks from: http://en.wikipedia.org/wiki/File:Fred_Brooks.jpg
    Poor Design is Costly
    Friday, May 24, 13

    View Slide

  16. We apply design practices
    to User Interfaces...
    Images from: http://pinterest.com/fromupnorth/gui/
    Friday, May 24, 13

    View Slide

  17. We call this practice,
    User Experience (UX)
    design...
    Images from: http://pinterest.com/fromupnorth/gui/
    Friday, May 24, 13

    View Slide

  18. What about API Design?
    Friday, May 24, 13

    View Slide

  19. API Design is “Developer UX”
    Friday, May 24, 13

    View Slide

  20. API Design is not JUST For
    Library Authors...
    Friday, May 24, 13

    View Slide

  21. ...modular JS is written to be
    consumed...
    Friday, May 24, 13

    View Slide

  22. ...the number of
    consumers is
    irrelevant.
    Images from flickr.com/photos/powi/
    Friday, May 24, 13

    View Slide

  23. In JavaScript, API design is
    critically important...
    Friday, May 24, 13

    View Slide

  24. Dynamic Language...
    Friday, May 24, 13

    View Slide

  25. Anonymity of
    consumers...
    http://i.qkme.me/3qesq1.jpg
    Friday, May 24, 13

    View Slide

  26. Ambiguity of Requirements...
    Friday, May 24, 13

    View Slide

  27. Your users are smart...
    Friday, May 24, 13

    View Slide

  28. Yeah, but my
    users won’t...
    Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
    Friday, May 24, 13

    View Slide

  29. Yeah, but my
    users won’t...
    Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
    Friday, May 24, 13

    View Slide

  30. A Tale of Ice &
    Water
    Friday, May 24, 13

    View Slide

  31. A Tale of Ice &
    Water
    Friday, May 24, 13

    View Slide

  32. A Tale of Ice &
    Water
    Friday, May 24, 13

    View Slide

  33. A Tale of Ice &
    Water
    Friday, May 24, 13

    View Slide

  34. A Tale of Ice &
    Water
    Friday, May 24, 13

    View Slide

  35. In Industrial
    Design, this is
    NOT an
    acceptable
    answer...
    Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
    Friday, May 24, 13

    View Slide

  36. ... how is Software Different?
    Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jpg
    Friday, May 24, 13

    View Slide

  37. ... how is Software Different?
    Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jpg
    It’s Not.
    Friday, May 24, 13

    View Slide

  38. Friday, May 24, 13

    View Slide

  39. Your users are smart...
    Friday, May 24, 13

    View Slide

  40. http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
    Friday, May 24, 13

    View Slide

  41. ...but they are NOT...
    you.
    http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
    Friday, May 24, 13

    View Slide

  42. Design the “pit of success”
    Image from: http://darrell.mozingo.net/2011/06/26/the-pit-of-success/
    Friday, May 24, 13

    View Slide

  43. Example:
    $("article.blogPost").fadeIn();
    Use jQuery to select all article tags with the class “blogPost”
    Friday, May 24, 13

    View Slide

  44. Example:
    $("article.blogPost").fadeIn();
    Use jQuery to select all article tags with the class “blogPost”
    article.blogPost  {
       border-­‐radius:  10px;
       background-­‐color:  salmon;
       box-­‐shadow:  0px  0px  10px  2px  #ccc;
    }
    Friday, May 24, 13

    View Slide

  45. Goals of API Design
    Be Self-Describing
    Prevent Errors
    Make Users Fast
    Image from: http://elliottbrown.files.wordpress.com/2012/04/sandcastles.png
    Friday, May 24, 13

    View Slide

  46. Friday, May 24, 13

    View Slide

  47. Goals are not enough...
    Friday, May 24, 13

    View Slide

  48. Friday, May 24, 13

    View Slide

  49. ...we need guiding principles...
    Friday, May 24, 13

    View Slide

  50. Principles, not Rules
    Friday, May 24, 13

    View Slide

  51. Principles, not Rules
    Rules are rote, often applied without context
    Principles encourage application of context
    Friday, May 24, 13

    View Slide

  52. Principles Found in Physical Media
    Images from: http://char.txa.cornell.edu/language/principl/principl.htm & http://www.greatbuildings.com/
    Friday, May 24, 13

    View Slide

  53. Principles on display in popular
    libraries...
    Backbone
    jQuery
    Kendo UI
    Modernizr
    Moment.js
    Underscore
    Friday, May 24, 13

    View Slide

  54. WARNING! This is ART, not
    SCIENCE
    Friday, May 24, 13

    View Slide

  55. The Four Principles
    Unity & Harmony
    Balance
    Proportion
    Emphasis
    Friday, May 24, 13

    View Slide

  56. Unity and Harmony
    Image “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  57. Unity and
    Harmony (art)
    Unity: The concept behind a work, or how the composer brings
    everything together into a coherent whole.
    Harmony: The placement of similar elements throughout a work,
    yielding an uncomplicated and simple feel.
    Painting by Robert Delauny, from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  58. Unity & Harmony (API Design):
    Familiarity & Comfort
    Extended Object creation in
    Backbone
    Widget Instantiation in
    Kendo UI
    Use similar and/or
    unifying elements
    through your library
    to create familiarity
    and comfort
    Friday, May 24, 13

    View Slide

  59. Example:
    Create Kendo UI Widgets from jQuery-selected DOM Elements
    $("ul.tree").kendoTreeView();
    $("ul.panel").kendoPanelBar();
    $("div").kendoGrid();
    Friday, May 24, 13

    View Slide

  60. Example:
    Create Kendo UI Widgets from jQuery-selected DOM Elements
    Each Widget is prefixed
    with “kendo” and named in
    a consistent, camel-cased
    style
    $("ul.tree").kendoTreeView();
    $("ul.panel").kendoPanelBar();
    $("div").kendoGrid();
    Friday, May 24, 13

    View Slide

  61. Example:
    Create Extended Objects with Backbone
    var  Book  =  Backbone.Model.extend({
       initialize:  function()  {  ...  },
       author:  function()  {  ...  },
       pubDate:  function()  {  ...  },
    });
    var  DocumentRow  =  Backbone.View.extend({
       tagName:  "li",
       className:  "row",
       events:  {
           "click  .icon":  "open",
           "click  .button.edit":  "openEditDialog"
       },
       render:  function()  {  ...  }
    });
    Friday, May 24, 13

    View Slide

  62. Example:
    Create Extended Objects with Backbone
    [Object].extend is used to
    “inherit” the built-in
    functionality of Backbone
    Models, Views, Collections
    and Routers
    var  Book  =  Backbone.Model.extend({
       initialize:  function()  {  ...  },
       author:  function()  {  ...  },
       pubDate:  function()  {  ...  },
    });
    var  DocumentRow  =  Backbone.View.extend({
       tagName:  "li",
       className:  "row",
       events:  {
           "click  .icon":  "open",
           "click  .button.edit":  "openEditDialog"
       },
       render:  function()  {  ...  }
    });
    Friday, May 24, 13

    View Slide

  63. Balance
    Image “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  64. Balance (art)
    The arrangement of elements to ensure that no one part of the work
    overpowers other parts, or causes it to feel unstable.
    Image of Italian Textile, 18th Centuty from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  65. Balance (API Design):
    Weight & Predictability
    Browser Feature Tests in
    Modernizr
    DOM Selection Syntax in
    jQuery
    Ensure that each
    function of your
    library exhibits
    consistent behavior,
    or aids in meeting a
    complimentary goal.
    Friday, May 24, 13

    View Slide

  66. Example:
    Modernizr.geolocation
    Modernizr.localstorage
    Modernizr.webworkers
    Modernizr.canvas
    Modernizr.borderradius
    Test Browser Capabilities using Modernizr
    Friday, May 24, 13

    View Slide

  67. Example:
    Modernizr.geolocation
    Modernizr.localstorage
    Modernizr.webworkers
    Modernizr.canvas
    Modernizr.borderradius
    Test Browser Capabilities using Modernizr
    Each property matches an
    HTML5/CSS-related API
    and returns a boolean
    Friday, May 24, 13

    View Slide

  68. Example:
    $("#grid")  //  Selects  by  ID
    $("ul.nav  >  li")  //  All  LIs  for  UL  w/class  "nav"
    $("ul  li:nth-­‐child(2)")  //  2nd  item  in  each  list
    Select DOM Elements using jQuery’s Selector Syntax
    Friday, May 24, 13

    View Slide

  69. Example:
    $("#grid")  //  Selects  by  ID
    $("ul.nav  >  li")  //  All  LIs  for  UL  w/class  "nav"
    $("ul  li:nth-­‐child(2)")  //  2nd  item  in  each  list
    Select DOM Elements using jQuery’s Selector Syntax
    Many jQuery Selectors
    map directly to equivalent
    CSS selectors
    Friday, May 24, 13

    View Slide

  70. Proportion
    Image “The Fisherman” by Saul Steinberg from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  71. Proportion (art)
    A measurement of the size and quantity of elements within a work,
    relative to the whole.
    Image of Salisbury Cathedral from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  72. Proportion (API Design):
    Scope that matches capability
    Moment.js
    Underscore
    Make sure that
    every interface of
    the library matches
    its intended purpose
    & that no extraneous
    elements exist.
    Friday, May 24, 13

    View Slide

  73. Example:
    Moment.js is working working with dates... and that’s it
    moment().format('dddd');
    moment().startOf('hour').fromNow();
    moment().format('[Hello from] YYYY'); // Hello from 2013
    moment().startOf('day').fromNow();
    Friday, May 24, 13

    View Slide

  74. Example:
    Moment.js is working working with dates... and that’s it
    Moment is designed to make working with the
    JavaScript Date object tolerable, and it provides
    no functionality beyond that scope.
    moment().format('dddd');
    moment().startOf('hour').fromNow();
    moment().format('[Hello from] YYYY'); // Hello from 2013
    moment().startOf('day').fromNow();
    Friday, May 24, 13

    View Slide

  75. _.each(["Todd",  "Burke",  "Derick"],  function(name){  
       alert(name);  
    });
    _.map([1,  2,  3],  function(num){  
       return  num  *  3;  
    });
    _.isNumber("ten");  //  False
    Example:
    Underscore.js, designed to add functional programming support to JS
    Friday, May 24, 13

    View Slide

  76. _.each(["Todd",  "Burke",  "Derick"],  function(name){  
       alert(name);  
    });
    _.map([1,  2,  3],  function(num){  
       return  num  *  3;  
    });
    _.isNumber("ten");  //  False
    Example:
    Underscore.js, designed to add functional programming support to JS
    Underscore provides utility
    functions that help devs work
    with JS collections, arrays,
    functions and objects. Larger API
    surface, for a broader purpose.
    Friday, May 24, 13

    View Slide

  77. Emphasis
    Image of the FlatIron Building from: http://www.greatbuildings.com/
    Friday, May 24, 13

    View Slide

  78. Emphasis (art)
    The point of focus or interruption of a work. The use of contrast to
    cause an aspect of the work to stand out and capture the viewer’s
    attention.
    Image from: http://char.txa.cornell.edu/language/principl/principl.htm
    Friday, May 24, 13

    View Slide

  79. Emphasis (API Design):
    Creating a focal point
    Plugin development using
    jQuery’s fn namespace
    Method chaining in jQuery
    Object extensibility in
    Backbone
    Provide a gateway
    method that anchors
    your library, a chained
    or fluent API, or create
    extensibility hooks for
    consuming devs
    Friday, May 24, 13

    View Slide

  80. Example:
    jQuery enables a fluent programming style by returning a
    jQuery object from most functions.
    $(‘ul.first’).find(‘.overdue’)
       .css(‘background-­‐color’,‘red’)
       .end()
       .find(‘.due-­‐soon’)
       .css(‘background-­‐color’,  ‘yellow’);
    Friday, May 24, 13

    View Slide

  81. Example:
    jQuery enables a fluent programming style by returning a
    jQuery object from most functions.
    This style enables devs to accomplish a great
    deal of work in a terse, yet readable manner.
    $(‘ul.first’).find(‘.overdue’)
       .css(‘background-­‐color’,‘red’)
       .end()
       .find(‘.due-­‐soon’)
       .css(‘background-­‐color’,  ‘yellow’);
    Friday, May 24, 13

    View Slide

  82. (function($)  {
       $.fn.kittehfy  =  function()  {
           return  this.each(function(idx,  el)  {                
               var  width  =  el.width,
                   height  =  el.height;
               var  src=  "http://placekitten.com/";
               el.src=  src  +  width  +  "/"  +  height;
           });
       };
    })(jQuery);
    $("img").kittehfy();
    Example:
    jQuery plugins are connected to jQuery via the fn (“effin”)
    namespace...
    Friday, May 24, 13

    View Slide

  83. (function($)  {
       $.fn.kittehfy  =  function()  {
           return  this.each(function(idx,  el)  {                
               var  width  =  el.width,
                   height  =  el.height;
               var  src=  "http://placekitten.com/";
               el.src=  src  +  width  +  "/"  +  height;
           });
       };
    })(jQuery);
    $("img").kittehfy();
    Example:
    jQuery plugins are connected to jQuery via the fn (“effin”)
    namespace...
    jQuery Plugins “feel” like
    natural extensions to
    jQuery itself, and behave
    in similar ways
    Friday, May 24, 13

    View Slide

  84. Example:
       
    var  Book  =  Backbone.Model.extend({    
       initialize:  function()  {  ...  },
       author:  function()  {  ...  },
       pubDate:  function()  {  ...  },
    });
    var  DocumentRow  =  Backbone.View.extend({
       tagName:  "li",
       className:  "row",
       events:  {
           "click  .icon":  "open",
           "click  .button.edit":  "openEditDialog"
       },
       render:  function()  {  ...  }
    });
    Create Extended Objects with Backbone
    Friday, May 24, 13

    View Slide

  85. Example:
       
    var  Book  =  Backbone.Model.extend({    
       initialize:  function()  {  ...  },
       author:  function()  {  ...  },
       pubDate:  function()  {  ...  },
    });
    var  DocumentRow  =  Backbone.View.extend({
       tagName:  "li",
       className:  "row",
       events:  {
           "click  .icon":  "open",
           "click  .button.edit":  "openEditDialog"
       },
       render:  function()  {  ...  }
    });
    Create Extended Objects with Backbone
    [Object].extend is used to
    “inherit” the built-in
    functionality of Backbone
    Models, Views, Collections
    and Routers
    Friday, May 24, 13

    View Slide

  86. The Four Principles
    Unity & Harmony
    Balance
    Proportion
    Emphasis
    Friday, May 24, 13

    View Slide

  87. The HORROR!
    aka What might go wrong...
    Friday, May 24, 13

    View Slide

  88. What might go wrong...
    Inconsistency
    Disproportionality
    Friday, May 24, 13

    View Slide

  89. Inconsistency...
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  90. Inconsistency...
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  91. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  92. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  93. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  94. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  95. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    var  uppers  =  $.map(letters,  function(val,  index)  {
       return  (val.toUpperCase());
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  96. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    var  uppers  =  $.map(letters,  function(val,  index)  {
       return  (val.toUpperCase());
    });
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  97. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    var  uppers  =  $.map(letters,  function(val,  index)  {
       return  (val.toUpperCase());
    });
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  98. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    var  uppers  =  $.map(letters,  function(val,  index)  {
       return  (val.toUpperCase());
    });
    $(‘li’).map(function(index,  val)  {  //WAT  });
    Callback signatures on $.map, $.each & $(el).map
    Friday, May 24, 13

    View Slide

  99. Inconsistency...
    var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];
    $.each(letters,  function(index,  val)  {
       console.log(index  +  “:  “  +  val.toUpperCase());
    });  
    var  uppers  =  $.map(letters,  function(val,  index)  {
       return  (val.toUpperCase());
    });
    $(‘li’).map(function(index,  val)  {  //WAT  });
    Callback signatures on $.map, $.each & $(el).map
    Not only do $.map and $.each diverge, but $.map and $(el).map order the
    callback params differently, depending on how the method is called.
    Friday, May 24, 13

    View Slide

  100. Proportion: Too
    Large or Too Small...
    Friday, May 24, 13

    View Slide

  101. AwesomeLib.do(prams);
    Friday, May 24, 13

    View Slide

  102. AwesomeLib.do(prams);
    We can all agree
    that this is bad
    Friday, May 24, 13

    View Slide

  103. jQuery();
    Friday, May 24, 13

    View Slide

  104. jQuery();
    Then, so is this...
    Friday, May 24, 13

    View Slide

  105. Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  106. jQuery(  selector  [,  context]  )  //  Select
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  107. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  108. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  109. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  110. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  111. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    jQuery(    jQuery  object  )  //  Clone
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  112. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    jQuery(    jQuery  object  )  //  Clone
    jQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  Elements
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  113. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    jQuery(    jQuery  object  )  //  Clone
    jQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  Elements
    jQuery  (  html,  props  )  //  Create  DOM  Elements
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  114. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    jQuery(    jQuery  object  )  //  Clone
    jQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  Elements
    jQuery  (  html,  props  )  //  Create  DOM  Elements
    jQuery  (  callback  )  //  Bind  DOM  loaded  function  
    Overloads on the jQuery()
    method...
    Friday, May 24, 13

    View Slide

  115. jQuery(  selector  [,  context]  )  //  Select
    jQuery(  element  )  //  Wrap
    jQuery(  object  )  //  Wrap
    jQuery()  //  Empty  $  Object
    jQuery(  elementArray  )  //  Wrap
    jQuery(    jQuery  object  )  //  Clone
    jQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  Elements
    jQuery  (  html,  props  )  //  Create  DOM  Elements
    jQuery  (  callback  )  //  Bind  DOM  loaded  function  
    Overloads on the jQuery()
    method...
    11 ways to call
    jQuery, with 6
    different contexts!
    Friday, May 24, 13

    View Slide

  116. Building and
    evolving a useful
    API is hard...
    Image from: http://www.ibiblio.org/xml/slides/xmlone/london2002/schemas/83.html
    Friday, May 24, 13

    View Slide

  117. ...you won’t always
    get it right.
    Image from: gorestruly.com2011/09/30/rotting-americana-the-winchester-mystery-house/
    Friday, May 24, 13

    View Slide

  118. But hey, jQuery’s not perfect...
    Friday, May 24, 13

    View Slide

  119. ... so you don’t have to be either.
    But hey, jQuery’s not perfect...
    Friday, May 24, 13

    View Slide

  120. What are we building
    anyway?
    Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    Friday, May 24, 13

    View Slide

  121. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    Friday, May 24, 13

    View Slide

  122. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    “Van der Poel designed a computer with only
    one operation code...”
    Friday, May 24, 13

    View Slide

  123. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    “... Every instruction carried out the same
    operation. He demonstrated the sufficiency of
    his operation—his machine could do anything
    any other computer could do...”
    Friday, May 24, 13

    View Slide

  124. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    “...And yet it was very difficult to program....”
    Friday, May 24, 13

    View Slide

  125. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
    “...the delight that came from using it was
    similar to... working out a crossword puzzle—
    a construct of intentional complexity and no
    intended utility.”
    - Fred Brooks
    Friday, May 24, 13

    View Slide

  126. Let’s build
    great art
    Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpg
    Friday, May 24, 13

    View Slide

  127. Slides
    bit.ly/JSAPIDesign
    @BrandonSatrom
    [email protected]
    Fluent Office Hours -
    11:50 - 12:30
    East Lounge (Table C)
    Friday, May 24, 13

    View Slide