Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Big Ideas Friday, May 24, 13

Slide 4

Slide 4 text

Three ideas... Friday, May 24, 13

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

What is design? Friday, May 24, 13

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Design is universal Friday, May 24, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

“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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

What about API Design? Friday, May 24, 13

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Dynamic Language... Friday, May 24, 13

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

... 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

Slide 38

Slide 38 text

Friday, May 24, 13

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Friday, May 24, 13

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Friday, May 24, 13

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Principles, not Rules Friday, May 24, 13

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

_.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

Slide 76

Slide 76 text

_.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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

(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

Slide 83

Slide 83 text

(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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

jQuery(); Friday, May 24, 13

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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