РИТ++ 2017, Frontend Сonf Зал Мумбаи, 6 июня, 17:00 Тезисы: http://frontendconf.ru/2017/abstracts/2523.html Это история о том, как вести параллельную работу над дизайном и frontend нескольких десятков систем, представляющих из себя единую экосистему. Как от “стихийной” разработки и уймы повторяющегося кода перейти к написанию библиотек для самих себя, сделать своими пользователями своих же разработчиков, а что-то даже выложить в open source. И почему выкладывать в open source важно, и вам тоже следует это делать. ...

1. Экосистема или зоопарк?
Как работать с дизайном и frontend
десятков связанных систем
Фёдор Щудло
@fshchudlo

2. Основано на реальных событиях
2

4. План доклада:
4
2. Первый шаг в лучшую жизнь
3. Рефлексия
4. Последующие шаги
1. Последствия стихийной разработки

5. Часть 1
Последствия стихийной разработки
5

6. Пример 1
Внимание к деталям
6

8. 8

10. 10

11. Первая система лучше второй?
11

14. Уровень качества
носит случайный характер
14

15. Пример 2
Работа в потоке
15

17. В состоянии потока люди испытывают
сильную концентрацию и
удовольствие, работая на пике
возможностей
17
goo.gl/VoD6AT – статья про поток

18. Пример 3
Везде как дома
18

26. Дизайн должен быть
спроектирован,
а не нарисован
26

27. Пример 4
Жестокая реальность
27

29. Часть 2
Первый шаг в лучшую жизнь
29

30. Хороший эргономичный дизайн
Локализация, валидация, http, формы, списки и т. д.
Конвенции по организации кода
Best practices, performance, утечки памяти и т. д.
Интеграция с MV*-фреймворком
30
Концентрируемся на повторном
использовании кода

31. 31

33. Часть 3
Рефлексия
33

34. Разработчики не хотят
делать проекты слабее
разработанного
Что изменилось?
Заказчик не хочет
получать системы слабее
разработанной
34

35. Не организовали reuse стилей/верстки
35
Нужна центральная точка обновления дизайна
«Фреймворк» стал проблемой
Дизайнерам не стало легче
Какие проблемы остались?

36. Часть 4
Последующие шаги
36

37. 1. Выбрать новые технологии
37
2. Убрать рутину в работе дизайнеров
3. Дизайн → Разработка
4. В корне пересмотреть «фреймворк»
Новые задачи

38. 1. Выбрать новые технологии
38

39. Выбрать основную технологию-долгожитель
39
Не делать этот выбор обязательным
Как выбирали технологии

40. 2. Убрать рутину
в работе дизайнеров
40

41. 41
UI Kit

42. Еще один шаг к унификации UI/UX
Продумываются лишь уникальные моменты
Что изменилось?
Больше времени на проектирование
42
goo.gl/Pz5vJZ – статья про то, как мы делали UI Kit

46. 3. Дизайн → Разработка
46

47. Bootstrap

48. Bootstrap + S7 UI Kit

49. Кроме bootstrap
Но из bootstrap берем только CSS
Jquery
В будущем bootstrap
Никакой привязки к библиотекам
Что важно в библиотеке UI Kit:
49

50. Что важно в разработке:
goo.gl/5LiL2t – статья про тулинг на хабре 50
Git
Тулинг
Semver

51. Простые проекты делаем без дизайнеров и верстальщиков
51
Что изменилось?

53. Простые проекты делаем без дизайнеров и верстальщиков
53
Единая точка обновления дизайна
Что изменилось?

55. Что важно в приложении ui-kit-demo:
Версионирование синхронно с UI Kit
Простота развертывания
Не пишем документацию
55

56. Что изменилось?
56
Возможность «пощупать» новую идею до ее внедрения
Единый и пополняемый источник информации
Тренировочный стенд в виде реального приложения

57. 4. Пересмотреть «фреймворк»
57

58. В корне пересмотреть «фреймворк»
Хороший эргономичный дизайн
Локализация, валидация, http, формы, списки и т.д.
Конвенции по организации кода
Best practices, performance, утечки памяти и т. д.
Интеграция с MV*-фреймворком
58

59. Хороший эргономичный дизайн
Локализация, валидация, http, формы, списки и т.д.
Конвенции по организации кода
Best practices, performance, утечки памяти и т. д.
Интеграция с MV*-фреймворком
59
В корне пересмотреть «фреймворк»

60. <grid-component [dataSource]="data">
<grid-column-component fieldName="Id" title="Id">
</grid-column-component>
<grid-column-component fieldName="Name" title="Name">
</grid-column-component>
<grid-column-component field="Price" title="Price" width="230">
</grid-column-component>
<grid-column-component field="IsDiscounted" title="Is Discounted" width="120">
<row-template let-dataItem>
<input type="checkbox" [checked]="dataItem.IsDiscounted" />
</row-template>
</grid-column-component>
</grid-component>
Как выглядит типичный грид на angular
60

61. <table class="table table-striped" [rtList]="getData" #list="rtList">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price in USD</th>
<th>Is Discounted</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of list.items">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td><input type="checkbox" [checked]="item.IsDiscounted" /></td>
</tr>
</tbody>
</table>
goo.gl/XqiHI4 – статья про right-angled
Как выглядит grid на right-angled
61

62. goo.gl/xQyxSj - это приложение в web

63. Что изменилось?
63
Полностью обновили технологии и подходы
Выбрались из «кокона» своих поделок
Библиотека проста и применима на других проектах

64. Подводим итоги
64

65. Обновляемый дизайн
Качество выпускаемых систем
Для заказчика
Скорость обучения
Скорость внесения изменений
65

66. Меньше «обезьяньей» работы
Для нас
Легче вливаться новичкам
66

68. Спасибо!
Фёдор Щудло
@fshchudlo
goo.gl/Y2Oyzf - слайды

69. Ссылки
goo.gl/Y2Oyzf — слайды
goo.gl/Pz5vJZ — статья про ui kit
goo.gl/5LiL2t — статья про тулинг
goo.gl/xQyxSj — right-angled demo app
goo.gl/XqiHI4 — статья про right-angled
goo.gl/fXezrE — right-angled на github