![Page 1: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/1.jpg)
Эволюция клиентской разработки: от веба ко «всеобщей мобилизации»
или mobile-first на примере Badoo
Павел Довбуш
![Page 2: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/2.jpg)
«Простой» веб
● 1 платформа, 0 ⇒ 50 М пользователей● Логика отображения и шаблонизация на сервере● HTML по сети● Переход между страницами - полная перерисовка● JavaScript - “Ajax и украшения”
![Page 3: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/3.jpg)
![Page 4: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/4.jpg)
«Простой» Веб с точки зрения разработки
● Параллельная разработка● Договоренности “как делать”, простая “интеграция”● Узкая специализация● Хорошо работает при небольшом количестве
человек
![Page 5: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/5.jpg)
Рост + появление мобильных
● Усложнение дизайна и верстки● Все больше интерактива● Больше пользователей, новые рынки
Мобильные:● Эксперементальная команда● Малая доля трафика, еще меньшая - дохода● Учимся взаимодействовать с несколькими
платформами
![Page 6: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/6.jpg)
![Page 7: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/7.jpg)
Веб 1.5
● Нужно улучшить user experience● Делаем одностраничное приложение● Что переносить на клиент?
○ переводим на API○ или половинчатое решение
![Page 8: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/8.jpg)
Переход Web 1.0 ⇒ 1.5
![Page 9: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/9.jpg)
Переход Web 1.0 ⇒ 1.5
● Логика отображения и шаблонизация на сервере● JSON + HTML по сети● Переход между страницами - перерисовка
фрагментов● JavaScript - приложение, частично логика
![Page 10: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/10.jpg)
Web 1.5 – Результаты
● Для пользователя:○ ускорение в ~3 раза○ kpi ~1 секунда
● Переход ~2 месяца 80% функционала, “хвост” доделок
● Изменили 20% кода● Та же структура команд и разработки
![Page 11: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/11.jpg)
Jinba
● Рождение Jinba - нашей системы аналитики и мониторинга UX
● Доклад RIT/2015: Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователейhttps://goo.gl/NARWL1
![Page 12: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/12.jpg)
Мобильные клиенты
● Мобильный трафик растет● Стабилизировался протокол● Стандарты и подходы работы между
мобильными командами
![Page 13: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/13.jpg)
![Page 14: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/14.jpg)
Мобильный веб
● Отдельная команда● Сначала для feature-phone, потом HTML5● REST+JSON прокси● Стандартные фреймворки и решения
![Page 15: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/15.jpg)
Рост + превалирование мобильных
● Сайт - Усложнение дизайна и верстки● Сайт - Все больше интерактива, анимаций,
усложнение логики● Больше мобильного трафика● Рост команд и компании● Распространение Jinba на все платформы
(доклад РИТ 2015 - https://goo.gl/NARWL1)
![Page 16: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/16.jpg)
![Page 17: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/17.jpg)
Протокол
Точка синхронизации между платформами
● Своя надстройка над Google Protocol Buffers● Строгая типизация и валидация● Сообщения и команды - описание в одном месте● Генерация “реализации” для всех платформ● Версионирование сообщений и полей а не API● Поддержка десятков версий приложений
![Page 18: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/18.jpg)
Мобильный Веб ⇒ mAPI
● Так ли нужен МобайлВеб прокси?○ фиксит протокол○ Protobuf RPC ⇒ REST+JSON○ немного логики
Переход:● Генерация JS классов для сообщений● Высокоуровневая абстракция RPC● Подробности - доклад
JSConf EU 2014 - http://goo.gl/8AvRgU
![Page 19: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/19.jpg)
![Page 20: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/20.jpg)
Веб 1.5 ⇒ mAPI
● Делаем по два раза● Усложнение контроля в связи
с ростом команд● Высокая связность мешает развитию● Мобильный трафик больше десктопного
![Page 21: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/21.jpg)
Веб 1.5 ⇒ mAPI
Задача:● Сделать Веб таким же клиентом как мобильные ● Упростить структуру разработки● Делать функционал один раз, использовать везде● Перевести фокус на мобильные клиенты
Решение:● ~1 год работы, изменение структуры разработки● Повезло - совместили с редизайном● Сближение с мобильными по функционалу
![Page 22: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/22.jpg)
![Page 23: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/23.jpg)
mAPI команда
● Протокол - язык общения между командами● Отдельная команда ответственная за протокол● Документирование изменений на всех
платформах● Центр - не только технически, но и по процессам
![Page 24: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/24.jpg)
![Page 25: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/25.jpg)
Итого
● Протокол - язык общения между командами● Первой реализовать фичу может любая
клиентская команда● Перераспределение разработчиков
○ Бэкенд○ QA○ Веб ⇔ Мобайл Веб
● Унификация технологий● Унификация процесса разработки
![Page 27: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/27.jpg)
Протокол
enum Role {ADMIN = 1;USER = 2;
}
message User {required string name = 1;optional uint32 age = 2;required Role role = 3;
}
Interface description language
var Role = new GpbEnum();Role._values = [ 1, 2 ];Role.ADMIN = 1;Role.USER = 2;
class User extends GpbMessage {getName() { … }setName() { … }hasName() { … }getAge() { … }getRole() { … }
}
var user = new User().setName(‘John’).setAge(30).setRole(Role.USER);
Генарация классов
![Page 28: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/28.jpg)
new RPC(request_type, parameter) .on(response_type, callback) .on([type1, type2], callback) .request();
Обмен сообщениями (двусторонний RPC)
RPC.any.on(type3, callback);
request_type & response_type значения enum MessageTypeparameter & response сообщения Protobuf
function callback(err, /** Type1 */ response1) { }
Message exchange
![Page 29: Эволюция клиентской разработки от веба ко всеобщей мобилизации или mobile-first на примере Badoo / Павел Довбуш](https://reader034.vdocuments.site/reader034/viewer/2022042605/586f915f1a28ab54768b7bf7/html5/thumbnails/29.jpg)
new Rpc(MT.SERVER_GET_USER_LIST, new ServerGetUserList()
.setFolderId(FolderTypes.FRIENDS)).on(MT.CLIENT_USER_LIST, onClientUserList).request();
function onClientUserList(err, clientUserList) {var users = clientUserList.getUsers();users[0].getName();
}
Обмен сообщениями (двусторонний RPC)
Message exchange