Самая умная вечеринка

1.

UIC DEV 2023
ТА САМАЯ УМНАЯ
ВЕЧЕРИНКА
Игорь Калугин
Server-driven UI
в Android разработке
Как перестать беспокоиться
о Google Play review и начать жить
30 СЕНТЯБРЯ 2023
ИЖЕВСК

2.

● Разработчик с опытом
коммерческой разработки более 10
лет, из которых 6+ лет посвятил
мобильной разработке.
● Ключевые навыки:
Игорь
Калугин
Android разработка
.NET, MS SQL
● Основной фокус:
Разработка приложений под ОС Android

3.

План
01
Причины для использования Server-Driven UI
02
Какие решения рассматривались
03
Внедрение Yandex DivKit на проекте
04
Пример использования на экране приложения
05
Как мы ускоряли разработку
06
Вопросы и ответы

4.

Почему Server-driven UI
Первая версия каталога

5.

Традиционное взаимодействие с бэком
https://some.base.com/catalog
Server
Data:
Data

6.

Вторая итерация каталога
Добавление рейтинга и информации о скидках

7.

Этапы обновления приложения
1) Разработчики внесли необходимые изменения
2) Произведенные в пункте 1 изменения протестированы QA инженерами
3) Новая версия отправлена на ревью в Play Store
4) Google производит ревью изменений
5) Пользователи обновляются на новую версию (ну или не обновляются).

8.

Третья итерация каталога
Добавление тематических блоков

9.

Проблема версий
Версия 1 - 10% пользователей
Версия 2 - 20% пользователей
Версия 3 - 70% пользователей

10.

Постановка проблемы
1) Задержка обновления и получения фидбэка от
пользователей
2) Проблема фрагментации версий
3) Необходимость дублировать верстку для iOS и Android
4) Сложности в согласовании релизов под iOS и Android
5) Отказ в публикации в Google Play/App store

11.

Очевидное решение
https://some.base.com/catalog
Server
Data + UI

12.

Муки выбора программиста
Third-Party
Libraries
Свое
решение

13.

Яндекс DivKit
1) Клиентская часть для Android, iOS и веб
2) Большой набор стандартных компонентов
3) Возможность расширения
4) Открытый исходный код под лицензией Apache 2.0

14.

Основы Яндекс DivKit
Группировка часть 1
1) Container
2) Grid
3) Pager

15.

Основы Яндекс DivKit
Группировка часть 2
4) Gallery
5) Tabs

16.

Пример верстки

17.

Использование шаблонов

18.

Отображение Div в Android
Android App
Backend
DivParsingEnvironment
Templates
Библиотека
шаблонов
Div2Context
DivData
CardJson
Div2View

19.

Пора взяться за бэк
Лирическое отступление

20.

Рецепт нашего бэкенда
Базовые факты
Бэкенд на основе Express
Node.js в качестве runtime
Основной язык разработки Typescript
routing-controllers для маршрутизации

21.

Схема обработки запроса
HTTP-запрос
Маршруты
Чтение/
модификация
данных
Backend
Модель
Отправляет запрос
контроллеру
Контроллеры
Представления
Данные для
отображения
пользователю

22.

Внешний вид экрана объекта

23.

Формирование UI экрана объекта
С точки зрения бэка
Мобильный
клиент
Object
controller
Object
mapper
Get (…/objects/{id})
Get (…/objects/{id})
Object data
Create div request
Div
Div
Data source

24.

Верстка карточки объекта

25.

Подробнее про actions
Структура action:
“url”: “div-action://<action_description>?other/parameters
Стандартные actions:
1) set_state
2) download
3) set_variable
4) set_current_item, set_next_item, set_previous_item
5) и т.д.

26.

Обработка custom actions

27.

Как мы ускоряли разработку
Live update в debug режиме
Save
project
Show
new
data

28.

Настройка live update
ProfileView
ProfileViewModel
ConnectionDispatcher
<<Event>>
Connection lost
reconnect ()
startConnection()
<<Event>>
Reconnected
reload ()
<<Event>>
ShowData
connection started
DebugTcpClient

29.

Как мы ускоряли разработку
Возможность просматривать объекты в debug режиме
Открыть
экран

30.

Вместо послесловия
Используйте правильные инструменты

31.

СПАСИБО ЗА ВНИМАНИЕ!
Игорь Калугин
[email protected]