Конструктор / Денис Паясь (Яндекс)
TRANSCRIPT
1
Конструктор
2
3
Команда
МоскваСанкт-Петербург
Екатеринбург
Симферополь
Минск
Киев
35 Фронтендеров 6 городов
4
Источник: http://giphy.com/posts/10-best-minions-gifsИсточник:http://img0.ndsstatic.com/wallpapers/c42ac6a0c2aaee69c79955d1d32c54b4_large.jpeg5
6
7
Source
Source
priv.js браузер пользователя Report
…
Source
Backend Frontend
8
Разработка: v.0
Собираем данные
9
{ "type": “new-devices" "models": [{ "category_id": "91491", "img_src": "//mdata.yandex.net/i?...", "name": "Apple iPhone 6 Plus 16Gb", "url": “//market.yandex.ru/product/...", }, { "category_id": "91491", "img_src": "//mdata.yandex.net/...", "name": "Apple iPhone 5S 32Gb восстановленный", "url": "//market.yandex.ru/product/...", }]}
Фича: колдунщик новых девайсов
10
Разработка: v.0
Собираем данные
Рисуем дизайн
11
{ "type": “new-devices" "models": [{ "category_id": "91491", "img_src": "//mdata.yandex.net/i?...", "name": "Apple iPhone 6 Plus 16Gb", "url": “//market.yandex.ru/product/...", }, { "category_id": "91491", "img_src": "//mdata.yandex.net/...", "name": "Apple iPhone 5S 32Gb восстановленный", "url": "//market.yandex.ru/product/...", }]}
Фича: колдунщик новых девайсов
12
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем компонент
Базовые блоки
13
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем компонент
Базовые блоки
Тестируем
14
Тестирование
1. Все браузеры и платформы (десктоп, планшеты, телефоны)
2. Счетчики
3. Поведение фичи на реальных данных
15
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем компонент
Базовые блоки
Тестируем В продакшн!
16
Фича: колдунщик новых девайсов/blocks /feature-new-devices
17
Прошёл месяц
18
Фича: Колдунщик Одежды{ "type": "clothing" "data": { "category_name": "Женские платья", "clusters": [{ "currency": " руб.", "picture": “//0.cs-ellpic.yandex.net/…”, "price": "7483", "url": “//market.yandex.ru/product/1642…”, }, { "currency": " руб.", "picture": “//0.cs-ellpic.yandex.net/…”, "price": "805", "url": “//market.yandex.ru/…”, }] }}
19
20
/blocks /feature-new-devices /feature-clothing
21
Проходит время…
22
Фича: Еще один колдунщик{ "type": “yet-another-feature“ "data": { "clusters": [{ "currency": “руб.", "model": “Lumia 920", "img": “//0.cs-ellpic.yandex.net/…”, "price": "16100", "url": “//market.yandex.ru/product/1642…”, "feedback_count": "10", }, { "currency": “руб.", "model": “808 Pure View", "img": “//0.cs-ellpic.yandex.net/…”, "price": "16100", "url": “//market.yandex.ru/…”, "feedback_count": "1032", }] }}
23
/blocks /feature-new-devices /feature-clothing /feature-vendor
24
и ещё…
25
/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something …
26
и опять…
27
/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something /feature-oh-shi …
28
В чем проблема-то?
1. Фичи делаются ДОЛГО.
2. Приводить их к одному виду - АД.
30
Почему ?
31
Дизайн
32
Решения
1. Дизайнеры начинают делать прототипы.
33
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
34
35
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент.
36
Разработка: v.1
Собираем данные
Прототипируем дизайн
Создаем компонент
Construct
Тестируем В продакшн!
Depot
37
Фича: колдунщик туров
38
Время для следующей фичи
39
Фича: маркет
40
Источник: http://replygif.net/1288Источник: http://memesvault.com/wp-content/uploads/What-Meme-Face-08.jpg 41
Почему так произошло ?
42
Решения: Дизайн
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & Cинхронизация.
43
44
Разработка: v.2
Собираем данные
Прототипируем дизайн
Создаем компонент
Construct
Тестируем В продакшен!
Depot
45
Все в Depot!
46
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & синхронизация
5. Адаптеры.
47
Адаптеры
48
Адаптер
1. Чистая функция.
2. Один адаптер - одна фича.
3. Абсолютно независим от других адаптеров.
49
Адаптеры
Код бэкенда Адаптер Конструктор
Произвольные данные
Данные в формате API конструктора
Браузер
Разметка
50
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка компонент и фич - раздельные процессы.
51
Разработка: v.3
Собираем данные
Прототипируем дизайн
ConstructDepot Тестируем
В продакшн!
ТестыАдаптер
52
А зачем фронтам писать адаптеры ?
53
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка блоков и фич - раздельные процессы.
7. Адаптеры для всех :)
54
Не все менеджеры умеют git и вот это всё
55
Менеджеры и код
1. Web Морда, через которую можно просто прокинуть данные и написать адаптер.
56
Менеджеры и код
1. Web Морда, через которую можно просто прокинуть данные и написать адаптер.
2. Документация, чтобы менеджеры знали, что, собственно, писать :)
57
Веб интерфейс
58
59
Документация
60
61
К чему мы в итоге пришли
62
Профиты
1. Вместо недель фича делается за часы.
2. И зачастую даже не нами :)
3. Консистентность дизайна.
63
Разработка: v.3
Собираем данные
Прототипируем дизайн
ConstructDepot Тестируем
В продакшн!
ТестыАдаптер
64
Решения
1. Дизайнеры начинают делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент.
4. Версионирование & синхронизация.
5. Адаптеры.
6. Разработка компонент и фич - раздельные процессы.
7. Адаптеры для всех :)
65
Вы можете использовать наш опыт
66
Денис Паясь
Разработчик интерфейсов
Контакты
+7 (966) 384 88 44
[email protected] источник: http://gif-finder.com/wp-content/uploads/2014/08/Minions-Joy.gif
67