Я расскажу о том, как мы разрабатываем фронтенд и бэкенд параллельно, используя protobuf + JSON RPC. Часто фронтенд выставляет требования к бэкенду, из этих требований получается API, и разработка возможна только при одновременной работе серверного и клиентского девелопера. Мы же начинаем разработку с API, и фронтенд (а также мобильные приложения) никак не зависят от степени готовности бэкенда. – Я поделюсь тем, как мы делаем API до начала разработки; – Success story использования protobuf + RPC; – И немного – о разработке клиента вообще без серверного кода.

1. Максим Кислов
Frontend-разработчик, Badoo

2. Делаем API по-
взрослому

3. 340 миллионов
пользователей
5 приложений (iOS,
Android, Windows
Mobile, Mobile Web, Web)
Общий бэкенд
9 релизов в неделю
Badoo — это

4. Бэкенд ~ 30 человек
Приложения: 5
команд ~ 60 человек
3 архитектора API
Badoo — это

6. Хочу так

7. Разработка
Web
Backend

8. Разработка
iOS Web
BackendBackend

9. Разработка
iOS
Backend
AndroidWeb
Backend Backend

10. Разработка
Web
Backend
iOS Android

11. Должно получаться
Backend
Клиент

12. Что получалось
Backend
Клиент

15. Наши требования
• Одно API для всех платформ
• Документация всего
• Работа с нативными клиентами (смартфоны)
• Минимум запросов
• Нет избыточных данных
• Типизация
• Версионирование

16. Бэкенд
mobile
web
API

17. Представьте, что вы
архитектор API

18. Хочу так

19. PRD (Product requirement document)

20. PRD

21. PRD

22. PRD

24. Чего хочется
• Писать API в общем проекте с другими
разработчиками
• Хранить API в текстовом формате, лучше – в
обычной VCS
• Получать удобное и структурированное ТЗ на
выходе
• Удобный формат для бэкенда и клиентов

25. Наше решение
• Google Protocol Buffers
• Описание в .proto-файлах
• Типизированный
• Поддержка большинства популярных языков
• Бинарная сериализация по умолчанию
• Можно использовать другую сериализацию

26. message PopularityPage {
repeated ApplicationFeature promos = 1;
repeated PopularityDay days = 2;
optional string footer = 3;
repeated PromoBlock promo_blocks = 4;
}
message PopularityDay {
optional int64 date = 1;
optional int32 value = 2;
optional PopularityLevel level = 3;
repeated string popularity_lines = 4;
repeated Activity activity = 5;
}

27. Еще надо так

28. enum WhatsNewType {
WHATS_NEW_TYPE_BUMPED_INTO = 1;
WHATS_NEW_TYPE_HOT_LIST_PHASE_2 = 2;
WHATS_NEW_TYPE_HON_SEARCH_ENGINE = 3;
WHATS_NEW_TYPE_HON_PHOTO_SENDING = 4;
WHATS_NEW_TYPE_PROFILE_SHARING = 5;
WHATS_NEW_TYPE_POPULARITY = 6;
WHATS_NEW_TYPE_GIFTS = 7;
WHATS_NEW_TYPE_VIP = 8;
WHATS_NEW_TYPE_SUGGESTED_PLACES = 9;
}

29. Документация API

30. Разработка API
• Разработчик делает API
• 2 ревью
• Первое – внутри команды
• Второе – каждой платформой

31. Документация

32. Документация

33. Документация

34. Документация

35. Представьте, что вы
фронтенд-разработчик

36. class PopularityDay {
setDate(date: String) {
this._set('date', date)
return this;
},
getDate() {
return this._get('date');
}
//..etc
}

37. GPB-RPC.js
• Осуществляет транспорт
• Сериализует и десериализует сообщения

38. var body = new ServerGetPopularity()
.setUserId(this._userId)
new GpbRpc
(
MessageType.SERVER_GET_POPULARITY,
body
)
.on(
MessageType.CLIENT_POPULARITY,
this.requestReady,
this)
.on(
MessageType.CLIENT_PHOTO_REQUIRED,
this.requestError,
this);

39. var body = new ServerGetPopularity()
.setUserId(this._userId)
new GpbRpc
(
MessageType.SERVER_GET_POPULARITY,
body
)
.on(
MessageType.CLIENT_POPULARITY,
this.requestReady,
this)
.on(
MessageType.CLIENT_PHOTO_REQUIRED,
this.requestError,
this);

40. var body = new ServerGetPopularity()
.setUserId(this._userId)
new GpbRpc
(
MessageType.SERVER_GET_POPULARITY,
body
)
.on(
MessageType.CLIENT_POPULARITY,
this.requestReady,
this)
.on(
MessageType.CLIENT_PHOTO_REQUIRED,
this.requestError,
this);

41. var body = new ServerGetPopularity()
.setUserId(this._userId)
new GpbRpc
(
MessageType.SERVER_GET_POPULARITY,
body
)
.on(
MessageType.CLIENT_POPULARITY,
this.requestReady,
this)
.on(
MessageType.CLIENT_PHOTO_REQUIRED,
this.photoRequired,
this);

42. function requestReady(error, popularityPage)
{
if(error) {
// handle error
}
popularityPage.getUserId();
//… etc
}
function photoRequired(error, promoBlock)
{
if(error) {
// handle error
}
promoBlock.getTitle();
//… etc
}

43. message BadooMessage {
required fixed32 message_type = 1;
repeated MessageBody message_body = 3;
required int32 version = 4;
}
new BadooMessage()
.setMessageType(MessageType.MyType)
.setMessageBody([body,…])
.setVersion(this._version)

44. var user = new User()
.setProjection([
UserField.USER_FIELD_NAME,
UserField.USER_FIELD_PROFILE_PHOTO,
UserField.USER_FIELD_SOCIAL_NETWORKS,
UserField.USER_FIELD_PHOTO_COUNT,
UserField.USER_FIELD_COUNTRY,
UserField.USER_FIELD_CREDITS,
UserField.USER_FIELD_GENDER
]);
new GpbRpc(MessageType.SERVER_GET_USER, user)

45. Еще надо так

46. GpbRpc.any.on
(
MessageType.CLIENT_SHOW_WHATS_NEW,
this.showWhatsNew,
this
)
function showWhatsNew(whatsNew) {
switch(whatsNew.getType()) {
case WhatsNewType.WhatsNewRethink:
this.showRethink(whatsNew);
break;
//… etc
}
}

47. GpbRpc.any.on
(
MessageType.CLIENT_SHOW_WHATS_NEW,
this.showWhatsNew,
this
)
function showWhatsNew(whatsNew) {
switch(whatsNew.getType()) {
case WhatsNewType.WhatsNewRethink:
this.showRethink(whatsNew);
break;
//… etc
}
}

48. GpbRpc.any.on
(
MessageType.CLIENT_SHOW_WHATS_NEW,
this.showWhatsNew,
this
)
function showWhatsNew(whatsNew) {
switch(whatsNew.getType()) {
case WhatsNewType.WhatsNewRethink:
this.showRethink(whatsNew);
break;
//… etc
}
}

49. Представьте, что вы тестировщик

50. Представьте, что вы тестировщик
…
и что-то пошло не так

51. QaApi Logs Viewer

52. QaApi Logs Viewer

53. QaApi Logs Viewer

54. Представьте, что вы
выехали на продакшн

55. Feature dashboard

56. AppStartup
Клиент Я поддерживаю
[FEATURE_TYPE.PHOTO, …]
Сервер
Включаю Включай
Проверяю поддержку у себя

57. Версионирование
• Поля не удаляются из протокола
• Старые поля помечаются как deprecated или
obsolete
• Obsolete — поле, которое не будет
использоваться в следующих версиях
• Deprecated — поле, которое не используют
новые версии платформ

58. Итоги

59. Для разработчика API
• Пишут API текстом
• Все хранится в GIT
• Сделали больше 500 команд

60. Для клиентского разработчика
• Техническое задание вместо «хочу так»
• Все документировано
• Не нужен бэкенд для разработки

61. Для продукта

62. Спасибо