Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing JS APis
Search
Caio Gondim
May 17, 2014
Programming
3
220
Designing JS APis
The Good, The Bad, and the Ugly
Caio Gondim
May 17, 2014
Tweet
Share
More Decks by Caio Gondim
See All by Caio Gondim
256 shades of R, G and B
caiogondim
1
98
AB Test
caiogondim
9
660
CSS Layout: O ontem, o hoje e o depois
caiogondim
1
110
Git lightning talk
caiogondim
5
270
HTML5 Sensitivo
caiogondim
5
350
Sublime Text 2 pro tips
caiogondim
21
2.4k
Brazil
caiogondim
2
300
HTML5 - Seu navegador não é mais o mesmo
caiogondim
5
240
História dos Sistemas Operacionais de Videogames
caiogondim
3
860
Other Decks in Programming
See All in Programming
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
How to Break into Reading Open Source
kaspth
2
220
GraphQLとGigaViewer for Apps
numeroanddev
2
120
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
670
Securify_エンジニア採用資料
3shake
0
110
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
実践!難読化ガイド
mitchan
0
230
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
2024 컴포즈 정원사
jisungbin
0
150
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Happy Clients
brianwarren
96
6.6k
Fireside Chat
paigeccino
31
2.9k
Unsuck your backbone
ammeep
667
57k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Bash Introduction
62gerente
608
210k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Transcript
DESIGNING JS APIs THE GOOD, THE BAD AND THE UGLY
GLOBO.COM
GLOBO.COM
BOOKING.COM
LOOP INFINITO
COLETANEA FRONT-END
DESIGN WHY
DEFINITION purpose, planning, or intention that exists or is thought
to exist behind an action, fact, or material object DESIGN WHY
APIs ARE DEVELOPERS UX DESIGN WHY
CODE IS WRITTEN ONCE, READ MANY TIMES DESIGN WHY
NOBODY READS API DOCs DESIGN WHY
BAD THE GOOD THE UGLY THE
BAD THE
BAD THE 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
BAD THE 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
BAD THE 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
BAD THE 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
BAD THE DOUBLE NEGATIVE foo.disabled = false; bar.setHidden(false); kung.invisible =
false;
BAD THE DOUBLE NEGATIVE foo.enabled = false; bar.setVisible(false); kung.visible =
false;
BAD THE 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
BAD THE 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
BAD THE BOOLEAN TRAP var opacitySlider = new SliderHorizontal(); var
opacitySlider = new SliderVertical(); http://ariya.ofilabs.com/2011/08/hall-of-api-shame-boolean-trap.html
BAD THE INCONSISTENCE // inconsistence button.caption = “Lorem”; radioButton1.value =
“Easy”; radioButton2.value = “Medium”; radioButton3.value = “Hard”; checkbox1.option = “Ipsum”; checkbox2.option = “Dolor”;
BAD THE GOOD THE UGLY THE
GOOD THE
GOOD THE STATIC POLYMORPHISM POLYMORPSHISM IS WHEN MULTIPLE IMPLEMENTATIONS CAN
RESPOND TO THE SAME MESSAGE WITHOUT THE SENDER NEEDING TO KNOW ABOUT THE IMPLEMENTATION
GOOD THE STATIC POLYMORPHISM // inconsistence button.caption = “Lorem”; radioButton1.value
= “Easy”; radioButton2.value = “Medium”; radioButton3.value = “Hard”; checkbox1.option = “Ipsum”; checkbox2.option = “Dolor”;
GOOD THE 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”;
GOOD THE NAMING BOOLEAN PROPs // getters of boolean props
should // start with *has*, *can* or *is* if (foo.isChecked()) { // ... }
GOOD THE NAMING BOOLEAN PROPs // getters of boolean props
should // start with *has*, *can* or *is* if (foo.hasChildren()) { // ... }
GOOD THE NAMING BOOLEAN PROPs // getters of boolean props
should // start with *has*, *can* or *is* if (foo.canBeClosed()) { // ... }
GOOD THE SPECIALIZED METHODS var car = new Vehicle(110, 2014,
true, false); var plane = new Vehicle(900, 2003, true, true);
GOOD THE SPECIALIZED METHODS var car = new Car(110, 2014);
var plane = new Vehicle(900, 2003);
GOOD THE var car = new Car({ speedMax: 110, fabricationYear:
2014 }); var plane = new Plane({ speedMax: 900, fabricationYear: 2003 }); SPECIALIZED METHODS
VERBAL ACTIONS status.message(“Lorem Ipsum”); page.forward(); page.backward(); GOOD THE
VERBAL ACTIONS status.showMessage(“Lorem Ipsum”); page.goForward(); page.goBackward(); GOOD THE
BAD THE GOOD THE UGLY THE
UGLY THE
UGLY THE 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
UGLY THE 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
UGLY THE 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
UGLY THE 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
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 UGLY THE INCONSISTENCE
UGLY THE http://bugs.jquery.com/ticket/13103 JQUERY BOOLEAN TRAP $("#hoverme-stop-2").mouseenter(function() { $(this) .find("img")
.stop(true, true) .fadeOut(); });
UGLY THE http://bugs.jquery.com/ticket/13103 JQUERY BOOLEAN TRAP $("#hoverme-stop-2").mouseenter(function() { $(this) .find("img")
.stop({ clearQueue: true, jumpToEnd: true }) .fadeOut(); });
UGLY THE http://bugs.jquery.com/ticket/13103 CASE CONSISTENCY var myRequest = new XMLHttpRequest();
UGLY THE BOOLEAN TRAP event.initKeyEvent( "keypress", true, true, null, null,
false, false, false, false, 9, 0 );
SEE YOU COWBOY
/caiogondim @caio_gondim
[email protected]