O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

288 visualizações

Publicada em

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

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

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

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

Особенности разработки 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

×