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
240
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
110
AB Test
caiogondim
9
680
CSS Layout: O ontem, o hoje e o depois
caiogondim
1
140
Git lightning talk
caiogondim
5
280
HTML5 Sensitivo
caiogondim
5
360
Sublime Text 2 pro tips
caiogondim
21
2.5k
Brazil
caiogondim
2
310
HTML5 - Seu navegador não é mais o mesmo
caiogondim
5
250
História dos Sistemas Operacionais de Videogames
caiogondim
3
880
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
Is Xcode slowly dying out in 2025?
uetyo
1
270
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Goで作る、開発・CI環境
sin392
0
230
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing for humans not robots
tammielis
253
25k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Six Lessons from altMBA
skipperchong
28
3.9k
Speed Design
sergeychernyshev
32
1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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]