Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Особенности разработки API / Всеволод Шмыров (Яндекс)

188 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 6 июня, 10:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2468.html

Разработка API/Framework/встраиваемого контента сильно отличается от разработки обычного frontend-приложения. На примере нашего API Яндекс.Карт я расскажу, чем именно.

+ Какие задачи обычно решают разработчики API?
+ С каким проблемами сталкиваются?
+ Какие есть ограничения в разработке?
+ Чем еще должен заниматься разработчик API, кроме непосредственно разработки?

Published in: Engineering
  • Be the first to comment

Особенности разработки API / Всеволод Шмыров (Яндекс)

  1. 1. Особенности разработки API Всеволод Шмыров, Старший разработчик интерфейсов
  2. 2. Кто я такой? • Меня зовут Сева 3
  3. 3. Кто я такой? • Меня зовут Сева • Разработчик API Карт и Конструктор карт 4
  4. 4. API • Framework • Библиотека • Сервис • Виджет • … 5
  5. 5. Что будет в докладе? • Наш опыт 6
  6. 6. Что будет в докладе? • Наш опыт • Принципы и особенности разработки API 7
  7. 7. Что будет в докладе? • Наш опыт • Принципы и особенности разработки API • Публичное API 8
  8. 8. Чего не будет в докладе? • Ответа на вопрос «Нужно ли вам свое API?» 9
  9. 9. API
  10. 10. План доклада • Проектирование интерфейса 11
  11. 11. План доклада • Проектирование интерфейса • Обратная совместимость 12
  12. 12. План доклада • Проектирование интерфейса • Обратная совместимость • Исследование своего API 13
  13. 13. План доклада • Проектирование интерфейса • Обратная совместимость • Исследование своего API • Дополнительные действия 14
  14. 14. │Будь проще
  15. 15. Пример плохого интерфейса 16 getFriends() => []
  16. 16. Пример плохого интерфейса 17 var friends = getFriends();
  17. 17. Пример плохого интерфейса 18 getFriends() => [] getFriends() => Null // Если нет друзей :(
  18. 18. Пример плохого интерфейса 19 var friends = getFriends(); if (friends) { // ... } else { // ... }
  19. 19. Пример плохого интерфейса 20 getFriends() => [] getFriends() => Null getFriends() => User // Один друг, но какой ...
  20. 20. Пример плохого интерфейса 21 var friends = getFriends(); if (isUser(friends)) { /* ... */ } else if (friends) { /* ... */ } else { /* ... */ }
  21. 21. Интерфейс должен быть • Простым и логичным 22
  22. 22. Интерфейс должен быть • Простым и логичным • Консистентным 23
  23. 23. Консистентный интерфейс 24 iCanShowYou({x: 1, y: 1}); NoUCant([1, 2]); ButIMust(Point);
  24. 24. Консистентный интерфейс 25 iCanShowYou({x: 1, y: 1}); NoUCant([1, 2]); ButIMust(Point);
  25. 25. Консистентный интерфейс 26 iCanShowYou({x: 1, y: 1}); NoUCant([1, 2]); ButIMust(Point);
  26. 26. Интерфейс должен быть • Простым и логичным • Консистентным • Но не в ущерб возможностям 27
  27. 27. Сложные задачи • Много параметров • Неопределенный результат из-за третьих сторон 28
  28. 28. Много параметров 29 someAwesomeMethod( elem, index, startValue, endValue );
  29. 29. Много параметров 30 someAwesomeMethod( elem, /* required */ index, /* = "key" */ startValue, /* = 0 */ endValue /* = 1 */ );
  30. 30. Группировка параметров 31 new ymaps.GeoObject( geometry, /* {Object} */ properties, /* {Object} */ options /* {Object} */ );
  31. 31. Программные хелперы 32 new ymaps.GeoObject(geometry); // Любые геометрии new ymaps.Placemark(coord); // Только «Point»
  32. 32. Неопределенный результат 33 geolocation.get() .then(function (result) { // success }, function (error) { // error });
  33. 33. Неопределенный результат 34 geolocation.get() .then(function (result) { // success }, function (error) { // error });
  34. 34. Браузерная геолокация 35
  35. 35. Браузерная геолокация 36 geolocation.get({ timeout: 30000 }).then(function (result) { // ... });
  36. 36. │Рукописи не горят
  37. 37. Обратная совместимость Работает – не трогай! 38
  38. 38. Публикация нового интерфейса • Степень свободы разработчика 39
  39. 39. Степень свободы разработчика 40 Степень свободы разработчика Ресурсы на поддержку Риск ошибки
  40. 40. Публикация нового интерфейса • Степень свободы разработчика • Расширяемость 41
  41. 41. Расширяемый интерфейс 42 balloon.setPosition( x, y // Обязательные аргументы )
  42. 42. Расширяемый интерфейс 43 balloon.setPosition( [x, y] )
  43. 43. Расширяемый интерфейс 44 balloon.setPosition( [x, y], projection )
  44. 44. Расширяемый интерфейс 45 balloon.setPosition( [x, y], options )
  45. 45. Публикация нового интерфейса • Степень свободы разработчика • Расширяемость • Не станет ли «блокером» в будущем? 46
  46. 46. Расширяемый интерфейс 47 overlay.getLayout() // HTMLLayout
  47. 47. Расширяемый интерфейс 48 overlay.getLayout() // Ilayout // HTMLLayout, CanvasLayout ...
  48. 48. Расширяемый интерфейс 49 overlay.getLayout() // Promise
  49. 49. Исправление ошибок • Deprecated сущности 50
  50. 50. Исправление ошибок • Deprecated сущности • Использование алиасов 51
  51. 51. Алиасы 52 presets.get('islands#greyIcon'); presets.get('islands#grayIcon');
  52. 52. Исправление ошибок • Deprecated сущности • Использование алиасов • Не все можно исправить 53
  53. 53. Отпусти и забудь 54 https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug
  54. 54. Отпусти и забудь 55 https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug
  55. 55. Отпусти и забудь 56 https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug
  56. 56. Отпусти и забудь 57 https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug
  57. 57. Отпусти и забудь 58 https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug
  58. 58. Мажорные релизы API карт 59 • Отказ от поддержки старых браузеров • Добавление современных интерфейсов • «Чистка» кода 2.12.0
  59. 59. «Особый режим» работы 60 'use strict'; function a () { return this.b; }
  60. 60. Порядок координат в API карт https://api-maps.yandex.ru/2.1/ ?lang=ru_RU&coordorder=longlat 61
  61. 61. Порядок координат в API карт 62 ...&coordorder=longlat // [широта, долгота] * ...&coordorder=latlong // [долгота, широта]
  62. 62. Порядок координат в API карт 63 // [широта, долгота] new ymaps.Placemark([55.8, 37.8]) // [долгота, широта] new ymaps.Placemark([37.8, 55.8])
  63. 63. Визуальная обратная совместимость 64
  64. 64. Визуальная обратная совместимость 65
  65. 65. 66
  66. 66. 67
  67. 67. Каскадный «слом» совместимости 68 Проект ScrollZoom MouseEventBrowser API Клиенты
  68. 68. │Свой среди чужих
  69. 69. API «в гостях» 70 API API API jQuery evil.js Site 1 Site 2 Site 3
  70. 70. Переопределение нативных методов 71 Array.prototype.indexOf = function (item) { for (var i = 0; i < this.length; i++) if (item == this[i]) return i; };
  71. 71. Общий CSS 72 * { transition: 2s all ease; }
  72. 72. Iframe v Script 73 https://events.yandex.ru/lib/talks/4258/
  73. 73. │Вы не знаете свой продукт
  74. 74. Маленькие карты 75 2.0 2.1
  75. 75. Разные размеры контролов 76 Large Medium Small
  76. 76. Метрики • Использование определенных модулей 77
  77. 77. Метрики • Использование определенных модулей • Параметры использования API 78
  78. 78. Метрики • Использование определенных модулей • Параметры использования API • Параметры окружающей среды (браузеры) 79
  79. 79. │Думай как …
  80. 80. 81
  81. 81. │Документируй это
  82. 82. Документация 83
  83. 83. Документация 84
  84. 84. Песочница 85
  85. 85. Избыточный пример 86
  86. 86. Избыточный пример 87
  87. 87. Песочница 88
  88. 88. │Call me maybe
  89. 89. Конструктор карт Яндекса 90
  90. 90. │Продай мне эту ручку
  91. 91. Конструктор карт Яндекса 92
  92. 92. │Еще проще
  93. 93. Конструктор карт Яндекса 94
  94. 94. Конструктор карт Яндекса 95
  95. 95. Конструктор • Простое решение популярных задач 96
  96. 96. Конструктор • Простое решение популярных задач • Меньше «свободы» для разработчика 97
  97. 97. Меньше возможностей в виджете 98 <script src=" .../constructor/?um={id}&width=514&height=326 "></script>
  98. 98. Конструктор • Простое решение популярных задач • Меньше «свободы» для разработчика • Обход ограничения обратной совместимости 99
  99. 99. Итог
  100. 100. Принципы разработки API • Не заставляйте делать лишнего 101
  101. 101. Принципы разработки API • Не заставляйте делать лишнего • Помните про обратную совместимость 102
  102. 102. Принципы разработки API • Не заставляйте делать лишнего • Помните про обратную совместимость • Исследуйте использование API 103
  103. 103. Полезные материалы • API Яндекс.Карт https://tech.yandex.ru/maps/ • Iframe v Script https://events.yandex.ru/lib/talks/4258/ 104
  104. 104. vsesh@yandex-team.ru Спасибо за внимание! Всеволод Шмыров, Старший разработчик интерфейсов vseshvsevolod.shmyrov @vsesh

×