JavaScript API Disasters

JavaScript API Disasters

Presented at SF JavaScript Meetup, Aug 11, 2015.

Are you confused by JavaScript’s String functions substring vs substr vs slice? How about Array’s slice vs splice? Do you realize that double-negatives, such caseInsensitive, are hard on non-native speakers? Aren’t you mad by the tedious DOM API such as initKeyEvent("keypress", true, true,null, null, false, false, false, false, 9, 0)? Why do you think one NaN will never equal to another NaN?

In this talk, we will learn from a (long) list of API bad practices found in real-world libraries and applications. Furthermore, to avoid being inducted to this API Hall of Shame, we will formulate and use the following strategies:

* Ensure consistent naming via static polymorphism
* Avoid dangerous and unnecessary shortcuts
* Mitigate confusing semantics with a proper choice of words

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

August 11, 2015
Tweet

Transcript

  1. 2.
  2. 3.
  3. 5.
  4. 6.
  5. 8.

    var date = [14, 3, 77] var year = a.slice(2,

    1) year [] date [14, 3, 77] var date = [14, 3, 77] var year = a.splice(2, 1) year [77] date [14, 3]
  6. 9.
  7. 10.
  8. 12.
  9. 14.
  10. 15.
  11. 16.

    X1.value = 'Rare'; X2.value = 'Medium'; X3.value = 'Well done';

    Y.option = 'Fries'; Z.caption = 'Order'; X1.value = 'Rare'; X2.value = 'Medium'; X3.value = 'Well done'; Y.value = 'Fries'; Z.value = 'Order';
  12. 17.

    slider.maxValue = 100; slider.minValue = 0; slider.value = 34; indicator.range

    = [100, 0]; indicator.progress = 61; slider.maximum = 100; slider.minimum = 0; slider.value = 34; indicator.maximum = 100; indicator.minimum = 0; indicator.value = 61;
  13. 19.

    corner = new Point(10, 10); dim = new Size(70, 50);

    R = new Rect(corner, dim); Q = new Rect(10, 10, 80, 60); corner = new Point(10, 10); dim = new Size(70, 50); R = new Rect(corner, dim); Q = new Rect(10, 10, 70, 50); x1, y1, x2, y2 x, y, w, h
  14. 20.

    var x = Math.sqrt(-2) isNaN(x) true x === NaN false

    isNaN('hola') true x == NaN false
  15. 21.
  16. 22.
  17. 23.
  18. 24.

    What’s in a name? that which we call a rose

    by any other name would smell as sweet...
  19. 25.

  20. 27.

    // Horizontal s1 = new Slider(true); // Vertical s2 =

    new Slider(false); s1 = new Slider({ orientation: 'horizontal' }); s2 = new Slider({ orientation: 'vertical' });
  21. 28.

    // Animate the resize w.resize(250, 150, true); // Do not

    animate the resize w.resize(250, 150, false); w.resize(250, 150, { animate: true });
  22. 29.

    // Expand + animate treeItem.setState(true, true); // Expand + don't

    animate treeItem.setState(true, false); // Collapse + animate treeItem.setState(false, true);
  23. 31.
  24. 36.

    this.callMe = "Adam"; flight.from = SFO; flight.to = JFK; this.name

    = "Adam"; flight.departure = SFO; flight.destination = JFK;
  25. 38.

    var a = [14, 3, 77] var b = a.slice(1,

    2) a [14, 3, 77] b [3] var a = [14, 3, 77] var b = a.splice(1, 2) a [14] b [3, 77]
  26. 40.

    var p = new Point(14, 3); p.translate(4, 4); p.translated(4, 4);

    var s = ' hal9000 '; s.trim(); s.trimmed();
  27. 41.
  28. 43.
  29. 44.
  30. 47.
  31. 48.
  32. 50.