Secrets of Awesome JavaScriptAPI DesignBrandon Satrom@BrandonSatrombrandon@KendoUI.com
Read it @bit.ly/ZS5VYv
3Big Ideas
Three ideas...
Three ideas...1.APIs are “Developer UX”
Three ideas...1.APIs are “Developer UX”2.API Design is a universal practice
Three ideas...1.APIs are “Developer UX”2.API Design is a universal practice3.API Design is a “principle-driven” art form
What is design?
What is design?“form[ing] a plan or scheme of [something]… for later execution”- Oxford English Dictionary
Design is universal
We judge designs to be......elegant...beautiful...utilitarian...simple...or not...Images from: http://www.greatbuildings.c...
We judge designs to be......elegant...beautiful...utilitarian...simple...or not...Images from: http://www.greatbuildings.c...
We judge designs to be......elegant...beautiful...utilitarian...simple...or not...Images from: http://www.greatbuildings.c...
We judge designs to be......elegant...beautiful...utilitarian...simple...or not...Images from: http://www.greatbuildings.c...
“Mediocre design provably wastesthe world’s resources, corrupts theenvironment, affects internationalcompetitiveness. Desi...
We apply design practicesto User Interfaces...Images from: http://pinterest.com/fromupnorth/gui/
We call this practice,User Experience (UX)design...Images from: http://pinterest.com/fromupnorth/gui/
What about API Design?
API Design is “Developer UX”
API Design is not JUST ForLibrary Authors...
...modular JS is written to beconsumed...
...the number ofconsumers isirrelevant.Images from flickr.com/photos/powi/
In JavaScript, API design iscritically important...
Dynamic Language...
Anonymity ofconsumers...http://i.qkme.me/3qesq1.jpg
Ambiguity of Requirements...
Your users are smart...
Yeah, but myusers won’t...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
Yeah, but myusers won’t...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
A Tale of Ice &Water
A Tale of Ice &Water
A Tale of Ice &Water
A Tale of Ice &Water
A Tale of Ice &Water
In IndustrialDesign, this isNOT anacceptableanswer...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/r...
... how is Software Different?Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jpg
... how is Software Different?Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jp...
Your users are smart...
http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
...but they are NOT...you.http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
Design the “pit of success”Image from: http://darrell.mozingo.net/2011/06/26/the-pit-of-success/
Example:$("article.blogPost").fadeIn();Use jQuery to select all article tags with the class “blogPost”
Example:$("article.blogPost").fadeIn();Use jQuery to select all article tags with the class “blogPost”article.blogPost	  {...
Goals of API DesignBe Self-DescribingPrevent ErrorsMake Users FastImage from: http://elliottbrown.files.wordpress.com/2012/...
Goals are not enough...
...we need guiding principles...
Principles, not Rules
Principles, not RulesRules are rote, often applied without contextPrinciples encourage application of context
Principles Found in Physical MediaImages from: http://char.txa.cornell.edu/language/principl/principl.htm & http://www.gre...
Principles on display in popularlibraries...BackbonejQueryKendo UIModernizrMoment.jsUnderscore
The Four PrinciplesUnity & HarmonyBalanceProportionEmphasis
WARNING! This is ART, notSCIENCE
Unity and HarmonyImage “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/langu...
Unity andHarmony (art)Unity: The concept behind a work, or how the composer bringseverything together into a coherent whol...
Unity & Harmony (API Design):Familiarity & ComfortExtended Object creation inBackboneWidget Instantiation inKendo UIUse si...
Example:Create Kendo UI Widgets from jQuery-selected DOM Elements$("ul.tree").kendoTreeView();$("ul.panel").kendoPanelBar(...
Example:Create Kendo UI Widgets from jQuery-selected DOM ElementsEach Widget is prefixedwith “kendo” and named ina consiste...
Example:Create Extended Objects with Backbonevar	  Book	  =	  Backbone.Model.extend({	  	  initialize:	  function()	  {	  ...
Example:Create Extended Objects with Backbone[Object].extend is used to“inherit” the built-infunctionality of BackboneMode...
BalanceImage “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/language/princi...
Balance (art)The arrangement of elements to ensure that no one part of the workoverpowers other parts, or causes it to fee...
Balance (API Design):Weight & PredictabilityBrowser Feature Tests inModernizrDOM Selection Syntax injQueryEnsure that each...
Example:Modernizr.geolocationModernizr.localstorageModernizr.webworkersModernizr.canvasModernizr.borderradiusTest Browser ...
Example:Modernizr.geolocationModernizr.localstorageModernizr.webworkersModernizr.canvasModernizr.borderradiusTest Browser ...
Example:$("#grid")	  //	  Selects	  by	  ID$("ul.nav	  >	  li")	  //	  All	  LIs	  for	  UL	  w/class	  "nav"$("ul	  li:nt...
Example:$("#grid")	  //	  Selects	  by	  ID$("ul.nav	  >	  li")	  //	  All	  LIs	  for	  UL	  w/class	  "nav"$("ul	  li:nt...
ProportionImage “The Fisherman” by Saul Steinberg from: http://char.txa.cornell.edu/language/principl/principl.htm
Proportion (art)A measurement of the size and quantity of elements within a work,relative to the whole.Image of Salisbury ...
Proportion (API Design):Scope that matches capabilityMoment.jsUnderscoreMake sure thatevery interface ofthe library matche...
Example:Moment.js is working working with dates... and that’s itmoment().format(dddd);moment().startOf(hour).fromNow();mom...
Example:Moment.js is working working with dates... and that’s itMoment is designed to make working with theJavaScript Date...
_.each(["Todd",	  "Burke",	  "Derick"],	  function(name){	  	  	  alert(name);	  });_.map([1,	  2,	  3],	  function(num){	...
_.each(["Todd",	  "Burke",	  "Derick"],	  function(name){	  	  	  alert(name);	  });_.map([1,	  2,	  3],	  function(num){	...
EmphasisImage of the FlatIron Building from: http://www.greatbuildings.com/
Emphasis (art)The point of focus or interruption of a work. The use of contrast tocause an aspect of the work to stand out...
Emphasis (API Design):Creating a focal pointPlugin development usingjQuery’s fn namespaceMethod chaining in jQueryObject e...
Example:jQuery enables a fluent programming style by returning ajQuery object from most functions.$(‘ul.first’).find(‘.over...
Example:jQuery enables a fluent programming style by returning ajQuery object from most functions.This style enables devs t...
(function($)	  {	  	  $.fn.kittehfy	  =	  function()	  {	  	  	  	  return	  this.each(function(idx,	  el)	  {	  	  	  	  ...
(function($)	  {	  	  $.fn.kittehfy	  =	  function()	  {	  	  	  	  return	  this.each(function(idx,	  el)	  {	  	  	  	  ...
Example:	  	  var	  Book	  =	  Backbone.Model.extend({	  	  	  	  initialize:	  function()	  {	  ...	  },	  	  author:	  f...
Example:	  	  var	  Book	  =	  Backbone.Model.extend({	  	  	  	  initialize:	  function()	  {	  ...	  },	  	  author:	  f...
The Four PrinciplesUnity & HarmonyBalanceProportionEmphasis
The HORROR!aka What might go wrong...
What might go wrong...InconsistencyDisproportionality
Imbalance...Callback signatures on $.map, $.each & $(el).map
Imbalance...Callback signatures on $.map, $.each & $(el).map
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];Callback signatures on $.map, $.each & $(el).map
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Imbalance...var	  letters	  =	  [“a”,	  “b”,	  “c”,	  “d”,	  “e”];$.each(letters,	  function(index,	  val)	  {	  	  consol...
Proportion: TooLarge or Too Small...
Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“Van der Poel designed a compu...
Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“... Every instruction carried...
Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“...And yet it was very difficu...
Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“...the delight that came from...
AwesomeLib.do(prams);
AwesomeLib.do(prams);We can all agreethat this is bad
jQuery();
jQuery();Then, so is this...
Overloads on the jQuery()method...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectOverloads on the jQuery()method...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapOverloads on the jQuery()method...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapOverl...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
jQuery(	  selector	  [,	  context]	  )	  //	  SelectjQuery(	  element	  )	  //	  WrapjQuery(	  object	  )	  //	  WrapjQuer...
Now, for a question...
jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpg
jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpgA baseline e...
jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpgA baseline e...
YES
Here’s thepoint...Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpg
Building andevolving a usefulAPI is hard...Image from: http://www.ibiblio.org/xml/slides/xmlone/london2002/schemas/83.html
...you won’t alwaysget it right.Image from: gorestruly.com2011/09/30/rotting-americana-the-winchester-mystery-house/
But hey, jQuery’s not perfect...
... so you don’t have to be either.
Questions?@BrandonSatrombrandon@kendoui.com
Secrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API Design
Upcoming SlideShare
Loading in …5
×

Secrets of Awesome JavaScript API Design

1,725 views

Published on

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.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,725
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Secrets of Awesome JavaScript API Design

  1. 1. Secrets of Awesome JavaScriptAPI DesignBrandon Satrom@BrandonSatrombrandon@KendoUI.com
  2. 2. Read it @bit.ly/ZS5VYv
  3. 3. 3Big Ideas
  4. 4. Three ideas...
  5. 5. Three ideas...1.APIs are “Developer UX”
  6. 6. Three ideas...1.APIs are “Developer UX”2.API Design is a universal practice
  7. 7. Three ideas...1.APIs are “Developer UX”2.API Design is a universal practice3.API Design is a “principle-driven” art form
  8. 8. What is design?
  9. 9. What is design?“form[ing] a plan or scheme of [something]… for later execution”- Oxford English Dictionary
  10. 10. Design is universal
  11. 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/
  12. 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/
  13. 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/
  14. 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/
  15. 15. “Mediocre design provably wastesthe world’s resources, corrupts theenvironment, affects internationalcompetitiveness. Design isimportant, teaching design isimportant.”- Fred BrooksImage of Fred Brooks from: http://en.wikipedia.org/wiki/File:Fred_Brooks.jpgPoor Design is Costly
  16. 16. We apply design practicesto User Interfaces...Images from: http://pinterest.com/fromupnorth/gui/
  17. 17. We call this practice,User Experience (UX)design...Images from: http://pinterest.com/fromupnorth/gui/
  18. 18. What about API Design?
  19. 19. API Design is “Developer UX”
  20. 20. API Design is not JUST ForLibrary Authors...
  21. 21. ...modular JS is written to beconsumed...
  22. 22. ...the number ofconsumers isirrelevant.Images from flickr.com/photos/powi/
  23. 23. In JavaScript, API design iscritically important...
  24. 24. Dynamic Language...
  25. 25. Anonymity ofconsumers...http://i.qkme.me/3qesq1.jpg
  26. 26. Ambiguity of Requirements...
  27. 27. Your users are smart...
  28. 28. Yeah, but myusers won’t...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
  29. 29. Yeah, but myusers won’t...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
  30. 30. A Tale of Ice &Water
  31. 31. A Tale of Ice &Water
  32. 32. A Tale of Ice &Water
  33. 33. A Tale of Ice &Water
  34. 34. A Tale of Ice &Water
  35. 35. In IndustrialDesign, this isNOT anacceptableanswer...Image from: http://idratherbewriting.com/wp-content/uploads/2012/08/rtfmtractor.jpg
  36. 36. ... how is Software Different?Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jpg
  37. 37. ... how is Software Different?Image from: http://www.globalnerdy.com/wordpress/wp-content/uploads/2010/05/makeabetterfm.jpgIt’s Not.
  38. 38. Your users are smart...
  39. 39. http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
  40. 40. ...but they are NOT...you.http://thebus.net/sites/default/files/americas-next-top-hipster.jpg
  41. 41. Design the “pit of success”Image from: http://darrell.mozingo.net/2011/06/26/the-pit-of-success/
  42. 42. Example:$("article.blogPost").fadeIn();Use jQuery to select all article tags with the class “blogPost”
  43. 43. 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;}
  44. 44. Goals of API DesignBe Self-DescribingPrevent ErrorsMake Users FastImage from: http://elliottbrown.files.wordpress.com/2012/04/sandcastles.png
  45. 45. Goals are not enough...
  46. 46. ...we need guiding principles...
  47. 47. Principles, not Rules
  48. 48. Principles, not RulesRules are rote, often applied without contextPrinciples encourage application of context
  49. 49. Principles Found in Physical MediaImages from: http://char.txa.cornell.edu/language/principl/principl.htm & http://www.greatbuildings.com/
  50. 50. Principles on display in popularlibraries...BackbonejQueryKendo UIModernizrMoment.jsUnderscore
  51. 51. The Four PrinciplesUnity & HarmonyBalanceProportionEmphasis
  52. 52. WARNING! This is ART, notSCIENCE
  53. 53. Unity and HarmonyImage “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/language/principl/principl.htm
  54. 54. Unity andHarmony (art)Unity: The concept behind a work, or how the composer bringseverything 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
  55. 55. Unity & Harmony (API Design):Familiarity & ComfortExtended Object creation inBackboneWidget Instantiation inKendo UIUse similar and/orunifying elementsthrough your libraryto create familiarityand comfort
  56. 56. Example:Create Kendo UI Widgets from jQuery-selected DOM Elements$("ul.tree").kendoTreeView();$("ul.panel").kendoPanelBar();$("div").kendoGrid();
  57. 57. Example:Create Kendo UI Widgets from jQuery-selected DOM ElementsEach Widget is prefixedwith “kendo” and named ina consistent, camel-casedstyle$("ul.tree").kendoTreeView();$("ul.panel").kendoPanelBar();$("div").kendoGrid();
  58. 58. Example:Create Extended Objects with Backbonevar  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()  {  ...  }});
  59. 59. Example:Create Extended Objects with Backbone[Object].extend is used to“inherit” the built-infunctionality of BackboneModels, Views, Collectionsand Routersvar  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()  {  ...  }});
  60. 60. BalanceImage “Portrait of the children of Charles I” by Anthony Van Dyck from: http://char.txa.cornell.edu/language/principl/principl.htm
  61. 61. Balance (art)The arrangement of elements to ensure that no one part of the workoverpowers other parts, or causes it to feel unstable.Image of Italian Textile, 18th Centuty from: http://char.txa.cornell.edu/language/principl/principl.htm
  62. 62. Balance (API Design):Weight & PredictabilityBrowser Feature Tests inModernizrDOM Selection Syntax injQueryEnsure that eachfunction of yourlibrary exhibitsconsistent behavior,or aids in meeting acomplimentary goal.
  63. 63. Example:Modernizr.geolocationModernizr.localstorageModernizr.webworkersModernizr.canvasModernizr.borderradiusTest Browser Capabilities using Modernizr
  64. 64. Example:Modernizr.geolocationModernizr.localstorageModernizr.webworkersModernizr.canvasModernizr.borderradiusTest Browser Capabilities using ModernizrEach property matches anHTML5/CSS-related APIand returns a boolean
  65. 65. Example:$("#grid")  //  Selects  by  ID$("ul.nav  >  li")  //  All  LIs  for  UL  w/class  "nav"$("ul  li:nth-­‐child(2)")  //  2nd  item  in  each  listSelect DOM Elements using jQuery’s Selector Syntax
  66. 66. Example:$("#grid")  //  Selects  by  ID$("ul.nav  >  li")  //  All  LIs  for  UL  w/class  "nav"$("ul  li:nth-­‐child(2)")  //  2nd  item  in  each  listSelect DOM Elements using jQuery’s Selector SyntaxMany jQuery Selectorsmap directly to equivalentCSS selectors
  67. 67. ProportionImage “The Fisherman” by Saul Steinberg from: http://char.txa.cornell.edu/language/principl/principl.htm
  68. 68. 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
  69. 69. Proportion (API Design):Scope that matches capabilityMoment.jsUnderscoreMake sure thatevery interface ofthe library matchesits intended purpose& that no extraneouselements exist.
  70. 70. Example:Moment.js is working working with dates... and that’s itmoment().format(dddd);moment().startOf(hour).fromNow();moment().format([Hello from] YYYY); // Hello from 2013moment().startOf(day).fromNow();
  71. 71. Example:Moment.js is working working with dates... and that’s itMoment is designed to make working with theJavaScript Date object tolerable, and it providesno functionality beyond that scope.moment().format(dddd);moment().startOf(hour).fromNow();moment().format([Hello from] YYYY); // Hello from 2013moment().startOf(day).fromNow();
  72. 72. _.each(["Todd",  "Burke",  "Derick"],  function(name){      alert(name);  });_.map([1,  2,  3],  function(num){      return  num  *  3;  });_.isNumber("ten");  //  FalseExample:Underscore.js, designed to add functional programming support to JS
  73. 73. _.each(["Todd",  "Burke",  "Derick"],  function(name){      alert(name);  });_.map([1,  2,  3],  function(num){      return  num  *  3;  });_.isNumber("ten");  //  FalseExample:Underscore.js, designed to add functional programming support to JSUnderscore provides utilityfunctions that help devs workwith JS collections, arrays,functions and objects. Larger APIsurface, for a broader purpose.
  74. 74. EmphasisImage of the FlatIron Building from: http://www.greatbuildings.com/
  75. 75. Emphasis (art)The point of focus or interruption of a work. The use of contrast tocause an aspect of the work to stand out and capture the viewer’sattention.Image from: http://char.txa.cornell.edu/language/principl/principl.htm
  76. 76. Emphasis (API Design):Creating a focal pointPlugin development usingjQuery’s fn namespaceMethod chaining in jQueryObject extensibility inBackboneProvide a gatewaymethod that anchorsyour library, a chainedor fluent API, or createextensibility hooks forconsuming devs
  77. 77. Example:jQuery enables a fluent programming style by returning ajQuery object from most functions.$(‘ul.first’).find(‘.overdue’)    .css(‘background-­‐color’,‘red’)    .end()    .find(‘.due-­‐soon’)    .css(‘background-­‐color’,  ‘yellow’);
  78. 78. Example:jQuery enables a fluent programming style by returning ajQuery object from most functions.This style enables devs to accomplish a greatdeal of work in a terse, yet readable manner.$(‘ul.first’).find(‘.overdue’)    .css(‘background-­‐color’,‘red’)    .end()    .find(‘.due-­‐soon’)    .css(‘background-­‐color’,  ‘yellow’);
  79. 79. (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...
  80. 80. (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” likenatural extensions tojQuery itself, and behavein similar ways
  81. 81. 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
  82. 82. 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-infunctionality of BackboneModels, Views, Collectionsand Routers
  83. 83. The Four PrinciplesUnity & HarmonyBalanceProportionEmphasis
  84. 84. The HORROR!aka What might go wrong...
  85. 85. What might go wrong...InconsistencyDisproportionality
  86. 86. Imbalance...Callback signatures on $.map, $.each & $(el).map
  87. 87. Imbalance...Callback signatures on $.map, $.each & $(el).map
  88. 88. Imbalance...var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];Callback signatures on $.map, $.each & $(el).map
  89. 89. Imbalance...var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];$.each(letters,  function(index,  val)  {    console.log(index  +  “:  “  +  val.toUpperCase());Callback signatures on $.map, $.each & $(el).map
  90. 90. Imbalance...var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];$.each(letters,  function(index,  val)  {    console.log(index  +  “:  “  +  val.toUpperCase());});  Callback signatures on $.map, $.each & $(el).map
  91. 91. Imbalance...var  letters  =  [“a”,  “b”,  “c”,  “d”,  “e”];$.each(letters,  function(index,  val)  {    console.log(index  +  “:  “  +  val.toUpperCase());});  Callback signatures on $.map, $.each & $(el).map
  92. 92. Imbalance...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
  93. 93. Imbalance...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
  94. 94. Imbalance...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
  95. 95. Imbalance...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
  96. 96. Imbalance...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).mapNot only do $.map and $.each diverge, but $.map and $(el).map order thecallback params differently, depending on how the method is called.
  97. 97. Proportion: TooLarge or Too Small...
  98. 98. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg
  99. 99. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“Van der Poel designed a computer with onlyone operation code...”
  100. 100. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“... Every instruction carried out the sameoperation. He demonstrated the sufficiency ofhis operation—his machine could do anythingany other computer could do...”
  101. 101. 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....”
  102. 102. Image of Fred Brooks from: http://www-set.win.tue.nl/UnsungHeroes/files/PTERA-Kosten-Poel.jpg“...the delight that came from using it wassimilar to... working out a crossword puzzle—a construct of intentional complexity and nointended utility.”- Fred Brooks
  103. 103. AwesomeLib.do(prams);
  104. 104. AwesomeLib.do(prams);We can all agreethat this is bad
  105. 105. jQuery();
  106. 106. jQuery();Then, so is this...
  107. 107. Overloads on the jQuery()method...
  108. 108. jQuery(  selector  [,  context]  )  //  SelectOverloads on the jQuery()method...
  109. 109. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapOverloads on the jQuery()method...
  110. 110. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapOverloads on the jQuery()method...
  111. 111. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectOverloads on the jQuery()method...
  112. 112. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapOverloads on the jQuery()method...
  113. 113. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapjQuery(    jQuery  object  )  //  CloneOverloads on the jQuery()method...
  114. 114. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapjQuery(    jQuery  object  )  //  ClonejQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  ElementsOverloads on the jQuery()method...
  115. 115. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapjQuery(    jQuery  object  )  //  ClonejQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  ElementsjQuery  (  html,  props  )  //  Create  DOM  ElementsOverloads on the jQuery()method...
  116. 116. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapjQuery(    jQuery  object  )  //  ClonejQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  ElementsjQuery  (  html,  props  )  //  Create  DOM  ElementsjQuery  (  callback  )  //  Bind  DOM  loaded  function  Overloads on the jQuery()method...
  117. 117. jQuery(  selector  [,  context]  )  //  SelectjQuery(  element  )  //  WrapjQuery(  object  )  //  WrapjQuery()  //  Empty  $  ObjectjQuery(  elementArray  )  //  WrapjQuery(    jQuery  object  )  //  ClonejQuery(  html  [,  ownerDocument  ]  )  //  Create  DOM  ElementsjQuery  (  html,  props  )  //  Create  DOM  ElementsjQuery  (  callback  )  //  Bind  DOM  loaded  function  Overloads on the jQuery()method...11 ways to calljQuery, with 6different contexts!
  118. 118. Now, for a question...
  119. 119. jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpg
  120. 120. jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpgA baseline example of “Good...”
  121. 121. jQuery: GoodAPI Design orBad APIDesign?Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpgA baseline example of “Good...”
  122. 122. YES
  123. 123. Here’s thepoint...Image from: http://laughingsquid.com/wp-content/uploads/Kevin-Bacon.jpg
  124. 124. Building andevolving a usefulAPI is hard...Image from: http://www.ibiblio.org/xml/slides/xmlone/london2002/schemas/83.html
  125. 125. ...you won’t alwaysget it right.Image from: gorestruly.com2011/09/30/rotting-americana-the-winchester-mystery-house/
  126. 126. But hey, jQuery’s not perfect...
  127. 127. ... so you don’t have to be either.
  128. 128. Questions?@BrandonSatrombrandon@kendoui.com

×