designing js apis
DESCRIPTION
The Good, The Bad, and the UglyTRANSCRIPT
![Page 1: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/1.jpg)
DESIGNING JS APIs
THE GOOD, THE BAD AND THE UGLY
![Page 2: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/2.jpg)
GLOBO.COM
![Page 3: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/3.jpg)
GLOBO.COM
![Page 4: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/4.jpg)
BOOKING.COM
![Page 5: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/5.jpg)
LOOP INFINITO
![Page 6: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/6.jpg)
COLETANEA FRONT-END
![Page 7: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/7.jpg)
DESIGNWHY
![Page 8: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/8.jpg)
DEFINITION purpose, planning, or
intention that exists or is thought to exist behind
an action, fact, or material object
DESIGNWHY
![Page 9: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/9.jpg)
APIs ARE DEVELOPERS
UX
DESIGNWHY
![Page 10: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/10.jpg)
CODE IS WRITTEN
ONCE, READ MANY TIMES
DESIGNWHY
![Page 11: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/11.jpg)
NOBODY READS
API DOCs
DESIGNWHY
![Page 12: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/12.jpg)
BADTHE
GOODTHE
UGLYTHE
![Page 13: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/13.jpg)
BADTHE
![Page 14: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/14.jpg)
BADTHE
IMMUTABLE vs MUTABLE
var foo = [3, 5, 8]; var bar = foo.slice(1, 2);
console.log(foo); //=> [3, 5, 8] console.log(bar); //=> [5]
http://ariya.ofilabs.com/2014/02/javascript-array-slice-vs-splice.html
![Page 15: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/15.jpg)
BADTHE
IMMUTABLE vs MUTABLE
var foo = [3, 5, 8]; var bar = foo.splice(1, 2);
console.log(foo); //=> [3] console.log(bar); //=> [5, 8]
http://ariya.ofilabs.com/2014/02/javascript-array-slice-vs-splice.html
![Page 16: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/16.jpg)
BADTHE
IMMUTABLE vs MUTABLE
var foo = [3, 5, 8]; var bar = foo.sliced(1, 2);
console.log(foo); //=> [3, 5, 8] console.log(bar); //=> [5]
http://ariya.ofilabs.com/2014/02/javascript-array-slice-vs-splice.html
![Page 17: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/17.jpg)
BADTHE
IMMUTABLE vs MUTABLE
var foo = [3, 5, 8]; foo.slice(1, 2);
console.log(foo); //=> [3]
http://ariya.ofilabs.com/2014/02/javascript-array-slice-vs-splice.html
![Page 18: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/18.jpg)
BADTHE
DOUBLE NEGATIVE
foo.disabled = false;
bar.setHidden(false);
kung.invisible = false;
![Page 19: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/19.jpg)
BADTHE
DOUBLE NEGATIVE
foo.enabled = false;
bar.setVisible(false);
kung.visible = false;
![Page 20: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/20.jpg)
BADTHE
BOOLEAN TRAP
var opacitySlider = new Slider(true);
var volumeSlider = new Slider(false);
http://ariya.ofilabs.com/2011/08/hall-of-api-shame-boolean-trap.html
![Page 21: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/21.jpg)
BADTHE
BOOLEAN TRAP
var opacitySlider = new Slider({ horizontal: true });
var opacitySlider = new Slider({ horizontal: false });
http://ariya.ofilabs.com/2011/08/hall-of-api-shame-boolean-trap.html
![Page 22: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/22.jpg)
BADTHE
BOOLEAN TRAP
var opacitySlider = new SliderHorizontal();
var opacitySlider = new SliderVertical();
http://ariya.ofilabs.com/2011/08/hall-of-api-shame-boolean-trap.html
![Page 23: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/23.jpg)
BADTHE
INCONSISTENCE
// inconsistence button.caption = “Lorem”;
radioButton1.value = “Easy”; radioButton2.value = “Medium”; radioButton3.value = “Hard”;
checkbox1.option = “Ipsum”; checkbox2.option = “Dolor”;
![Page 24: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/24.jpg)
BADTHE
GOODTHE
UGLYTHE
![Page 25: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/25.jpg)
GOODTHE
![Page 26: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/26.jpg)
GOODTHE
STATIC POLYMORPHISM
POLYMORPSHISM IS WHEN MULTIPLE IMPLEMENTATIONS CAN RESPOND TO THE SAME
MESSAGE WITHOUT THE SENDER NEEDING TO KNOW ABOUT THE
IMPLEMENTATION
![Page 27: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/27.jpg)
GOODTHE
STATIC POLYMORPHISM
// inconsistence button.caption = “Lorem”;
radioButton1.value = “Easy”; radioButton2.value = “Medium”; radioButton3.value = “Hard”;
checkbox1.option = “Ipsum”; checkbox2.option = “Dolor”;
![Page 28: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/28.jpg)
GOODTHE
STATIC POLYMORPHISM
// static polymorphism // similar classes, same API button.value = “Lorem”;
radioButton1.value = “Easy”; radioButton2.value = “Medium”; radioButton3.value = “Hard”;
checkbox1.value = “Ipsum”; checkbox2.value = “Dolor”;
![Page 29: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/29.jpg)
GOODTHE
NAMING BOOLEAN PROPs
// getters of boolean props should // start with *has*, *can* or *is* if (foo.isChecked()) { // ... }
![Page 30: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/30.jpg)
GOODTHE
NAMING BOOLEAN PROPs
// getters of boolean props should // start with *has*, *can* or *is* if (foo.hasChildren()) { // ... }
![Page 31: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/31.jpg)
GOODTHE
NAMING BOOLEAN PROPs
// getters of boolean props should // start with *has*, *can* or *is* if (foo.canBeClosed()) { // ... }
![Page 32: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/32.jpg)
GOODTHE
SPECIALIZED METHODS
var car = new Vehicle(110, 2014, true, false);
var plane = new Vehicle(900, 2003, true, true);
![Page 33: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/33.jpg)
GOODTHE
SPECIALIZED METHODS
var car = new Car(110, 2014);
var plane = new Vehicle(900, 2003);
![Page 34: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/34.jpg)
GOODTHE
var car = new Car({ speedMax: 110, fabricationYear: 2014 });
var plane = new Plane({ speedMax: 900, fabricationYear: 2003 });
SPECIALIZED METHODS
![Page 35: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/35.jpg)
VERBAL ACTIONS
status.message(“Lorem Ipsum”);
page.forward(); page.backward();
GOODTHE
![Page 36: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/36.jpg)
VERBAL ACTIONS
status.showMessage(“Lorem Ipsum”);
page.goForward(); page.goBackward();
GOODTHE
![Page 37: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/37.jpg)
BADTHE
GOODTHE
UGLYTHE
![Page 38: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/38.jpg)
UGLYTHE
![Page 39: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/39.jpg)
UGLYTHE
var letters = [“a”, “b”, “c”];
$.each(letters, function(index, val) {});
$.map(letters, function(val, index) {});
$(“li”).map(function(index, val) {});
Secrets of Awesome JS API Design — https://www.youtube.com/watch?v=QlQm786MClE
INCONSISTENCE
![Page 40: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/40.jpg)
UGLYTHE
jQuery(selector [, context]) // Select
jQuery(element) // Wrap
jQuery(object) // Wrap
jQuery() // Empty $ object
jQuery(elementArray) // Wrap
jQuery(jQuery object) // Clone
jQuery(html [, ownerDocument]) // Create element
jQuery(html, props) // Create element
jQuery(callback) // Bind DOM loaded function
Secrets of Awesome JS API Design — https://www.youtube.com/watch?v=QlQm786MClE
NOT SPECIALIZED
![Page 41: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/41.jpg)
UGLYTHE
var evento = “Front in Fortaleza”;
evento.substring(6, 8); // => "In" evento.substring(8, 6); // => "In"
http://ariya.ofilabs.com/2014/02/javascript-string-substring-substr-slice.html
INCONSISTENCE
![Page 42: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/42.jpg)
UGLYTHE
http://ariya.ofilabs.com/2014/02/javascript-string-substring-substr-slice.html
var evento = “Front in Fortaleza”;
evento.substr(6, 8); // => "in Forta" evento.substr(8, 6); // => " Forta"
INCONSISTENCE
![Page 43: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/43.jpg)
var evento = “Front in Fortaleza”;
evento.slice(6, 8); // => "in" evento.slice(8, 6); // => ""
http://ariya.ofilabs.com/2014/02/javascript-string-substring-substr-slice.html
UGLYTHE
INCONSISTENCE
![Page 44: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/44.jpg)
UGLYTHE
http://bugs.jquery.com/ticket/13103
JQUERY BOOLEAN TRAP
$("#hoverme-stop-2").mouseenter(function() { $(this) .find("img") .stop(true, true) .fadeOut(); });
![Page 45: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/45.jpg)
UGLYTHE
http://bugs.jquery.com/ticket/13103
JQUERY BOOLEAN TRAP
$("#hoverme-stop-2").mouseenter(function() { $(this) .find("img") .stop({ clearQueue: true, jumpToEnd: true }) .fadeOut(); });
![Page 46: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/46.jpg)
UGLYTHE
http://bugs.jquery.com/ticket/13103
CASE CONSISTENCY
var myRequest = new XMLHttpRequest();
![Page 47: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/47.jpg)
UGLYTHE
BOOLEAN TRAP
event.initKeyEvent( "keypress", true, true, null, null, false, false, false, false, 9, 0 );
![Page 48: Designing JS APis](https://reader030.vdocument.in/reader030/viewer/2022013018/55833a7ed8b42a752f8b51c9/html5/thumbnails/48.jpg)
SEE YOU COWBOY