70

Денис Паясь

Embed Size (px)

Citation preview

Page 1: Денис Паясь
Page 2: Денис Паясь

Конструктор

Page 3: Денис Паясь
Page 4: Денис Паясь

4

Команда

МоскваСанкт-Петербург

Екатеринбург

Симферополь

Минск

Киев

35 Фронтэндеров 6 городов

Page 5: Денис Паясь

Источник: http://giphy.com/posts/10-best-minions-gifs

Page 6: Денис Паясь
Page 7: Денис Паясь
Page 8: Денис Паясь

Source

Source

priv.js браузер пользователя Report

Source

Backend Frontend

Page 9: Денис Паясь

Разработка: v.0

Собираем данные

Page 10: Денис Паясь

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/...", }]}

Фича: колдунщик новых девайсов

Page 11: Денис Паясь

Разработка: v.0

Собираем данные

Рисуем дизайн

Page 12: Денис Паясь

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/...", }]}

Фича: колдунщик новых девайсов

Page 13: Денис Паясь

Разработка: v.0

Собираем данные

Рисуем дизайн

Создаем комопнент

Базовые блоки

Page 14: Денис Паясь

Разработка: v.0

Собираем данные

Рисуем дизайн

Создаем комопнент

Базовые блоки

Тестируем

Page 15: Денис Паясь

Тестирование

1. Все браузеры и платформы (Десктоп, планшеты, телефоны).

2. Счетчики

3. Поведение фичи на реальных данных

15

Page 16: Денис Паясь

Разработка: v.0

Собираем данные

Рисуем дизайн

Создаем комопнент

Базовые блоки

Тестируем В продакшен!

Page 17: Денис Паясь

Фича: колдунщик новых девайсов/blocks /feature-new-devices

17

Page 18: Денис Паясь

Прошёл месяц

Page 19: Денис Паясь

Фича: Колдунщик Одежды

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/…”, }] }}

Page 20: Денис Паясь

20

Page 21: Денис Паясь

21

/blocks /feature-new-devices /feature-clothing

Page 22: Денис Паясь

Проходит время…

Page 23: Денис Паясь

Фича: Еще один колдунщик

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", }] }}

Page 24: Денис Паясь

/blocks /feature-new-devices /feature-clothing /feature-vendor

24

Page 25: Денис Паясь

и ещё…

Page 26: Денис Паясь

/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something …

26

Page 27: Денис Паясь

и опять…

Page 28: Денис Паясь

/blocks /feature-new-devices /feature-clothing /feature-vendor /feature-something /feature-oh-shi …

28

Page 29: Денис Паясь

Источник: pinterest.com/pin/166140673726880415/

Page 30: Денис Паясь

В чем проблема то ?

1. Фичи делаются ДОЛГО.

2. Приводить их к одному виду - АД.

30

Page 31: Денис Паясь

Почему ?

Page 32: Денис Паясь

Компоненты которые мы пишем невозможно реиспользовать.

32

Почему?

Page 33: Денис Паясь

А почему ?

Page 34: Денис Паясь

В чем проблема то ?

Нет эталона в дизайне. Дизайн всегда разный, и есть сильные сомнения что отличия всегда осознанные.

34

Page 35: Денис Паясь

Дизайн

Page 36: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

36

Page 37: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

37

Page 38: Денис Паясь
Page 39: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент.

39

Page 40: Денис Паясь

Разработка: v.1

Собираем данные

Прототипируем дизайн

Создаем комопнент

Construct

Тестируем В продакшен!

Depot

Page 41: Денис Паясь

41

Фича: колдунщик туров

Page 42: Денис Паясь

Время для следующей фичи

Page 43: Денис Паясь

43

Фича: маркет

Page 44: Денис Паясь

Источник: http://replygif.net/1288

Page 45: Денис Паясь

Почему так произошло ?

Page 46: Денис Паясь

Решения: Дизайн

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент для нас

4. Версионирование & Cинхронизация

46

Page 47: Денис Паясь
Page 48: Денис Паясь

Разработка: v.2

Собираем данные

Прототипируем дизайн

Создаем компонент

Construct

Тестируем В продакшен!

Depot

Page 49: Денис Паясь

Все в Depot!

Page 50: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент для нас

4. Версионирование & синхронизация

5. Адаптеры.

50

Page 51: Денис Паясь

Адаптеры

Page 52: Денис Паясь

Адаптер

1. Чистая функция

2. Один адаптер - одна фича.

3. Абсолютно независим от других адаптеров.

52

Page 53: Денис Паясь

Адаптеры

Код бэкэнда Адаптер Конструктор

Произвольные данные

Данные в формате API конструктора

Браузер польователя

Разметка

Page 54: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент для нас

4. Версионирование & синхронизация

5. Адаптеры

6. Разработка компонентов, и фич - раздельные процессы

54

Page 55: Денис Паясь

Разработка: v.3

Собираем данные

Прототипируем дизайн

Construct

В продакшен!

Depot Тестируем В продакшен!

ТестыАдаптер

Page 56: Денис Паясь

А зачем фронтам писать адаптеры ?

Page 57: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент для нас

4. Версионирование & синхронизация

5. Адаптеры.

6. Разработка блоков и фич - раздельные процессы.

7. Адаптеры для всех :)

57

Page 58: Денис Паясь

Не все менеджеры умеют git и вот это всё.

Page 59: Денис Паясь

Менеджеры и код

1. Web Морда через которую можно просто прокинуть данные и написать адаптер

59

Page 60: Денис Паясь

Менеджеры и код

1. Web Морда через которую можно просто прокинуть данные и написать адаптер

2. Документация чтобы менеджеры знали что собственно писать :)

60

Page 61: Денис Паясь

Веб интерфейс

Page 62: Денис Паясь
Page 63: Денис Паясь

Документация

Page 64: Денис Паясь
Page 65: Денис Паясь

К чему мы в итоге пришли

Page 66: Денис Паясь

Профиты

1. Вместо недель фича делается за часы

2. И зачастую даже не нами :)

3. Полная синхронизация с дизайном.

66

Page 67: Денис Паясь

Разработка: v.3

Собираем данные

Прототипируем дизайн

Construct

В продакшен!

Depot Тестируем В продакшен!

ТестыАдаптер

Page 68: Денис Паясь

Решения

1. Дизайн начинает делать прототипы.

2. Depot - реестр компонент для дизайнеров.

3. Construct - библиотека компонент

4. Версионирование & синхронизация

5. Адаптеры.

6. Разработка компонент и фич - раздельные процессы.

7. Адаптеры для всех :)

68

Page 69: Денис Паясь

Вы можете использовать наш опыт

Page 70: Денис Паясь

70

Денис Паясь

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

Контакты

@twitter

facebook

+7 (966) 384 88 44

[email protected] источник: http://gif-finder.com/wp-content/uploads/2014/08/Minions-Joy.gif