Денис Паясь
TRANSCRIPT
Конструктор
4
Команда
МоскваСанкт-Петербург
Екатеринбург
Симферополь
Минск
Киев
35 Фронтэндеров 6 городов
Источник: http://giphy.com/posts/10-best-minions-gifs
Source
Source
priv.js браузер пользователя Report
…
Source
Backend Frontend
Разработка: v.0
Собираем данные
10
{ "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/...", }]}
Фича: колдунщик новых девайсов
Разработка: v.0
Собираем данные
Рисуем дизайн
12
{ "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/...", }]}
Фича: колдунщик новых девайсов
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем комопнент
Базовые блоки
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем комопнент
Базовые блоки
Тестируем
Тестирование
1. Все браузеры и платформы (Десктоп, планшеты, телефоны).
2. Счетчики
3. Поведение фичи на реальных данных
15
Разработка: v.0
Собираем данные
Рисуем дизайн
Создаем комопнент
Базовые блоки
Тестируем В продакшен!
Фича: колдунщик новых девайсов/blocks /feature-new-devices
17
Прошёл месяц
Фича: Колдунщик Одежды
19
{ "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/…”, }] }}
20
21
/blocks /feature-new-devices /feature-clothing
Проходит время…
Фича: Еще один колдунщик
23
{ "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", }] }}
/blocks /feature-new-devices /feature-clothing /feature-vendor
24
и ещё…
/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something …
26
и опять…
/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something /feature-oh-shi …
28
Источник: pinterest.com/pin/166140673726880415/
В чем проблема то ?
1. Фичи делаются ДОЛГО.
2. Приводить их к одному виду - АД.
30
Почему ?
Компоненты которые мы пишем невозможно реиспользовать.
32
Почему?
А почему ?
В чем проблема то ?
Нет эталона в дизайне. Дизайн всегда разный, и есть сильные сомнения что отличия всегда осознанные.
34
Дизайн
Решения
1. Дизайн начинает делать прототипы.
36
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
37
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент.
39
Разработка: v.1
Собираем данные
Прототипируем дизайн
Создаем комопнент
Construct
Тестируем В продакшен!
Depot
41
Фича: колдунщик туров
Время для следующей фичи
43
Фича: маркет
Источник: http://replygif.net/1288
Почему так произошло ?
Решения: Дизайн
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & Cинхронизация
46
Разработка: v.2
Собираем данные
Прототипируем дизайн
Создаем компонент
Construct
Тестируем В продакшен!
Depot
Все в Depot!
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & синхронизация
5. Адаптеры.
50
Адаптеры
Адаптер
1. Чистая функция
2. Один адаптер - одна фича.
3. Абсолютно независим от других адаптеров.
52
Адаптеры
Код бэкэнда Адаптер Конструктор
Произвольные данные
Данные в формате API конструктора
Браузер польователя
Разметка
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & синхронизация
5. Адаптеры
6. Разработка компонентов, и фич - раздельные процессы
54
Разработка: v.3
Собираем данные
Прототипируем дизайн
Construct
В продакшен!
Depot Тестируем В продакшен!
ТестыАдаптер
А зачем фронтам писать адаптеры ?
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент для нас
4. Версионирование & синхронизация
5. Адаптеры.
6. Разработка блоков и фич - раздельные процессы.
7. Адаптеры для всех :)
57
Не все менеджеры умеют git и вот это всё.
Менеджеры и код
1. Web Морда через которую можно просто прокинуть данные и написать адаптер
59
Менеджеры и код
1. Web Морда через которую можно просто прокинуть данные и написать адаптер
2. Документация чтобы менеджеры знали что собственно писать :)
60
Веб интерфейс
Документация
К чему мы в итоге пришли
Профиты
1. Вместо недель фича делается за часы
2. И зачастую даже не нами :)
3. Полная синхронизация с дизайном.
66
Разработка: v.3
Собираем данные
Прототипируем дизайн
Construct
В продакшен!
Depot Тестируем В продакшен!
ТестыАдаптер
Решения
1. Дизайн начинает делать прототипы.
2. Depot - реестр компонент для дизайнеров.
3. Construct - библиотека компонент
4. Версионирование & синхронизация
5. Адаптеры.
6. Разработка компонент и фич - раздельные процессы.
7. Адаптеры для всех :)
68
Вы можете использовать наш опыт
70
Денис Паясь
Разработчик интерфейсов
Контакты
+7 (966) 384 88 44
[email protected] источник: http://gif-finder.com/wp-content/uploads/2014/08/Minions-Joy.gif