October 2018, FrontendConf Moscow

1. DEVELOPER EXPERIENCE
и API как ПРОДУКТ
Анастасия Горячева
INTENTO

2. INTENT
O
3© Intento, Inc. / Октябрь 2018
A simple API to third-
party AI models from
many vendors
https://inten.to

3. ПЛАН
1. Что такое DX?
2. Зачем делать DX лучше?
3. Как делать DX лучше?
4. Пример, что влияет на DX
5. Мир API-сервисов & DX
4
6. API машинного перевода
7. Как мы выбирали
характеристики DX
8. Опыт через характеристики
9. Что с этого фронтедеру?

4. 1. ЧТО ТАКОЕ DX?
5

5. DX = UX + ПРАКТИКИ
РАЗРАБОТКИ
6

6. ЖИЗНЕННЫЙ ЦИКЛ
ПРОДУКТА
7
Продукт → Пользователь

7. СМЕСТИМ ТОЧКУ ЗРЕНИЯ
Продукт → Пользователь
Платформа → Продукт → Пользователь
8

8. МЕСТО ДЛЯ
РАЗРАБОТЧИКОВ
Продукт → Пользователь
Платформа → Продукт → Пользователь
9

9. ПРИМЕРЫ ХОРОШЕГО DX
Открытый код
Инструменты отладки в браузере
Интерактивный stack trace
…
10

10. INTENTO
11
INTENTO

11. НЕПРИЯТНЫЙ DX
“Вечные” баги в опенсорс проекте
Привяжите местный номер телефона
Используйте местную банковскую карту
12

12. ДНО DX
Подпишите NDA, а потом прочитаете спеку
13

13. 2. ЗАЧЕМ ДЕЛАТЬ DX
ЛУЧШЕ?
14

14. ПЛОХОЙ DX
Съедает время ⌛
Истощает силы 😩
Делает вас несчастными 😿
Снижает производительность 🤯
15

15. Это вас раздражает
⬇️
Это вас замедляет
⬇️
Это тормозит Прогресс
16

16. 3. КАК ДЕЛАТЬ DX ЛУЧШЕ?
17

17. ДВЕ СТОРОНЫ МЕДАЛИ
18

18. I. Выбирая, что использовать,
смотрите, что вас ждет
II. Предлагая интерфейс,
думайте про опыт его
использования
19

19. I. ВЫБОР ПРАВИЛЬНЫХ
ВЕЩЕЙ
• Сравниваете варианты (измеряете в числах)
• Предсказываете, что может вас замедлить в будущем
• Выбираете, что кажется подходящим сейчас
• Начинаете использовать, получаете инсайты
• Обновляете числа в сравнении и обновляете предсказание
• Возможно, пересматриваете выбор
20

20. НАСЛАЖДАЕТЕСЬ! 🤯
21

21. ВЫБОР КОМПОНЕНТА
<NAME>
• Сколько загрузок в неделю? (npmjs.org)
• Когда последнее обновление? (github.com)
• Есть ли демо? (jsfiddle.com)
• Пробуете добавить в свой проект
• Ой! Что-то с конфигом webpack
• Фиксите Ой / Берете другой компонент
22

22. II. СОЗДАНИЕ ПРАВИЛЬНОГО
ОПЫТА
1. Боли будущих пользователей? (не свои)
2. Выбираете одну из проблем
3. Решение доносите до пользователей
4. Уменьшилась ли ИХ боль?
5. Что можно поправить?
6. Обновляете реализацию
7. Повторяете…
23

23. ПРОФИТ! 💎
24

24. 4. ПРИМЕР, ЧТО ВЛИЯЕТ НА
DX
25

25. ДОПУСТИМ,
ВАШЕМУ САЙТУ НУЖНА
КАРТА
26

26. INTENTO
27

27. ТРЕБОВАНИЯ К КАРТЕ
• Возможность встроить в сайт
• Добавление меток
• Приближение / удаление
• Drag’n’drop
28

28. ВАШ САЙТ ВЗЛЕТАЕТ
29
⏱
👩👩👧
👧 👨👨
👦👦
🚀

29. ЛИМИТЫ
• Варианты оплаты
• “Оптовый” тариф
• История оплат
30
UPTIME /
ОШИБКИ
• Уведомления
о сбоях
• Служба поддержки

30. АУДИТОРИЯ РАСТЁТ
31

31. БОЛЬШЕ ОЖИДАНИЙ
• Разные устройства
• Работа offline
• Поддержка китайского языка
• Интеграция с соцсетями
32

32. ОБУЧЕНИЕ
КОЛЛЕГ
• Быстрый старт
• Free trial
• Интерактивные
доки
33
ОБСЛУЖИВАНИ
Е
• Удобные логи
• Release notes
• Ясные ограничения
на RPS

33. INTENTO
34
УЖЕ НЕ ТАК МНОГО
ВАРИАНТОВ?

34. 5. МИР API-СЕРВИСОВ & DX
35

35. СМЕСТИМ ТОЧКУ ЗРЕНИЯ
Продукт → Пользователь
Платформа → Продукт → Пользователь
36

36. ЦЕПОЧКИ ПЛАТФОРМ
Платформа → Продукт → Пользователь
Платформа → Платформа → Продукт → Пользователь
Платформа(ы) → Платформа → Продукт → Пользователь
Платформа(ы) → ... → Платформа(ы) → Продукт → Пользователь
37

37. INTENTO
38
INTENTO

38. ПРИМЕР ЦЕПОЧКИ
• Переводчик (человек)
• CAT-средство* - софт
• Вендор софта
• Сервис машинного перевода
• Натренированные модели для NMT**
40
* Computer-assisted translation
** Neural Machine Translation

39. КАЖДЫЙ РАЗ, КОГДА НУЖНО
СОСТЫКОВАТЬ ПАРУ ПЛАТФОРМ,
РЫДАЕТ СТРАДАЕТ ЕЩЁ ОДИН
РАЗРАБОТЧИК
41

40. 6. API МАШИННОГО
ПЕРЕВОДА
42

41. II. СОЗДАНИЕ ПРАВИЛЬНОГО
ОПЫТА
1. Изучаете боли будущих пользователей, а не свои
2. Выбираете одну из проблем; подыскиваете решение
3. Реализуете; доносите до пользователей
4. Слушаете отзывы: уменьшилась ли ИХ боль?
5. Анализируете, что можно поправить
6. Обновляете реализацию или начинаете с пункта 1.
7. Повторяете 4-7
43

42. INTENTO
44
INTENTO
From State of the Machine Translation by Intento (July 2018)
https://bit.ly/mt_jul2018 19 Cloud MT engines, 48 language pairs

43. ~70 ХАРАКТЕРИСТИК → 8
ГРУПП
45
• Product features
• API design
• Documentation
• Onboarding
• Commercial
• Implementation
• Maintenance
• Reliability

44. 46
INTENTO

45. 47
INTENTO
GOOGLE

46. 48
INTENTO
ЯНДЕКС

47. 49
INTENTO
PROMT

48. КОЕ-КАКИЕ ГРУППЫ
ДЕТАЛЬНО
50

49. ХАРАКТЕРИСТИКИ
ПРОДУКТА
• Языки
• Форматированный текст
• Определение языка
51

50. КОММЕРЧЕСКИЕ УСЛОВИЯ
• Free trial
• Публичные цены
• “Оптом дешевле"
• История платежей
52

51. НАДЕЖНОСТЬ
• Перебои
• Конфликты со спецификацией
• Тормоза
53

52. БОЛЬШЕ ПОДРОБНОСТЕЙ
В СТАТЬЕ*
54
* https://blog.inten.to/measuring-api-developer-experience-91b5c19645b0

53. 7. КАК МЫ ВЫБИРАЛИ
ХАРАКТЕРИСТИКИ DX?
55

54. НА ОСНОВЕ ЖИЗНЕННОГО ОПЫТА
56

55. ИСТОРИЯ ПРО БУТЫЛКУ
57

56. ЧТО БУДЕТ НАПИСАНО
НА ВАШЕЙ ЗАПИСКЕ?
58

57. ЭТО ТЕХНИКА НАЗЫВАЕТСЯ
ПРЕМОРТЕМ
59

58. НА ОСНОВЕ ЖИЗНЕННОГО ОПЫТА
60

59. СОСТАВИЛИ ДЛИННЫЙ СПИСОК
ИЗ ТОГО, С ЧЕМ САМИ
СТАЛКИВАЛИСЬ
61

60. ПОЛНЫЙ ЛИ ЭТО СПИСОК?
62
ДОСТАТОЧНО ПОЛНЫЙ!

61. ДАВАЙТЕ
КАК-НИБУДЬ ЭТО
ПРОВЕРИМ
63

62. РОЛИ В КОМАНДЕ *
64
* или Команды в Организации
QA / Testing
Support
Security
Development
…
Product
Finance
Sales
DevOps
Analytics

63. В ВАШЕЙ КОМАНДЕ БУДУТ
ДРУГИЕ РОЛИ!
65

64. КАК СООТНОСЯТСЯ РОЛИ И
ХАРАКТЕРИСТИКИ DX?
67

65. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
68
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability
РОЛИ В
КОМАНДЕ
ХАРАКТЕРИСТИКИ
DX

66. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
69
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

67. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
70
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

68. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
71
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

69. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
72
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

70. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
73
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

71. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
74
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

72. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
75
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

73. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
76
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

74. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
77
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

75. Product
Finance
Sales
DevOps
Analytics
QA Testing
Support
Security
Development
78
Product features
API design
Documentation
Onboarding
Commercial
Implementation
Maintenance
Reliability

76. РЕЗУЛЬТАТЫ
СОПОСТАВЛЕНИЯ
• Каждая роль в команде DX-характеристика
• Каждая DX-характеристка роль в команде
• То есть список достаточно хорош для оценки сервиса
79
⇒
⇒

77. 8. ОПЫТ
ЧЕРЕЗ ХАРАКТЕРИСТИКИ
80

78. 1/8 НЕДОСТАЮЩИЕ СВОЙСТВА
ПРОДУКТА
• Делать самим
• Добавлять еще один сервис
81

79. 2/8 СОМНИТЕЛЬНЫЙ ДИЗАЙН
API
• Неинтуитивный формат URI
• Игнорирование стандартов вроде REST
• Нешифруемый трафик
• Нет запроса для определения квоты через API
82

80. 3/8 НЕПОЛНАЯ
ДОКУМЕНТАЦИЯ
• Сообщения об ошибках без объяснения
• Новые фичи слабо описаны
• Нет песочницы для изучения API *
83
* Просто добавьте OpenAPI / swagger. Почти “просто”.

81. 4/8 ВХОДНОЙ БАРЬЕР
• Кривая регистрация
• Недостаточно примеров
• Нет SDK
• Нет чата поддержки
84

82. 5/8 НЕПРОЗРАЧНЫЕ КОММЕРЧЕСКИЕ
УСЛОВИЯ
• Нет публичных цен
• Нет истории платежей
• Просто очень дорого
85

83. 6/8 ПОДОЗРИТЕЛЬНАЯ
РЕАЛИЗАЦИЯ
• Неочевидные коды ошибок
• Проблемы c unicode
• Нет http-сжатия
86

84. 7/8 НЕБРЕЖНОЕ
ОБСЛУЖИВАНИЕ
• Нет версионирования
• Нет release notes
• Нет roadmap
87

85. 8/8 НЕ-НАДЕЖНОСТЬ
• Наблюдаемые перебои
• Замедление производительности
• Внезапные баги
88

86. 9. ЧТО С ЭТОГО
ФРОНТЕНДЕРУ?
89

87. БУДУЩЕЕ УЖЕ ЗДЕСЬ
• Делегирование через API-сервисы
• AI – это весело https://aijs.rocks/
• Tensorflow.js догоняет python-аналог
• AI-сервисы как помощники
90

88. ИТОГ
1. Что такое DX?
2. Зачем делать DX лучше?
3. Как делать DX лучше?
4. Пример, что влияет на DX
5. Мир API-сервисов & DX
91
6. API машинного перевода
7. Как мы выбирали
характеристики DX
8. Опыт через характеристики
9. Что с этого фронтедеру?

89. READ IT LATER
92
https://goo.gl/1BRB6x

90. IMAGE CREDITS,
UNSPLASH.COM
•Aaron Burden
•Alexander Andrews
•Andrew Itaga
•Arwan Sutanto
•Dawid Zawila
•Fleur Treurniet
93
• Jeremy Bishop
• Larry Teo
• Dan Freeman
• Mike Kononov
• Samuel Zeller
• Tom Grimbert
• Tyler Nix

91. СПАСИБО!
94
Анастасия Горячева
A.e.goryacheva@gmail.com
Github: tyanas
twitter: tyanas_