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
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PipeCDのプラグイン化で目指すところ
warashi
1
280
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.3k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
NPOでのDevinの活用
codeforeveryone
0
840
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
PicoRuby on Rails
makicamel
2
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Done Done
chrislema
184
16k
The Invisible Side of Design
smashingmag
301
51k
Writing Fast Ruby
sferik
628
62k
GraphQLとの向き合い方2022年版
quramy
49
14k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Practical Orchestrator
shlominoach
189
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimizing for Happiness
mojombo
379
70k
Music & Morning Musume
bryan
46
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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]