Денис Паясь

Конструктор

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

Денис Паясь

Разработчик интерфейсов

Контакты

@twitter

facebook

+7 (966) 384 88 44

lostsoul@yandex-team.ru источник: http://gif-finder.com/wp-content/uploads/2014/08/Minions-Joy.gif