В перерывах между опен-сорсом и изобретением собственных велосипедов, мы все ходим на работу, где занимаемся разработкой продуктов, которые делают мир лучше. В какой-то момент результат труда, становится нашим ребенком, за которым мы следим и, как настоящие родители, пытаемся защитить от предстоящих угроз. Но мир жесток, и нашему малышу пытаются навязать ненужный функционал или улучшить без того уже прекрасный текущий. В докладе речь пойдет о том, как мы разрабатывали продукт, запускали эксперименты, наступали на грабли и героически добивались увеличения конверсии.

1. Гриша Шехет 🖖
@AGambit95
Software Engineer / Project Lead @
Коммичу в MobX и
Автор Front-End дайджеста на
Пишу на JavaScript, ReasonML, Elm, PureScript,
Scala, Haskell, Swift…
Люблю Функциональное программирование

2. https://www.grammarly.com/

3. Растим детей.
Или как Иван Васильевич
запускал эксперименты?

4. Чего ожидать
от доклада:
Надеюсь оправдать хоть грамм ваших ожиданий!
• Правду о смысле жизни разработчика интерфейсов.
• ПОЧТИ отсутствие кода!
• Реальный экспириенс и боль.
• Кучу воды, так что смотри между строк.
• МНОГО СЛЕНГА и отсылок!

5. Lifestyle “типичного”
разработчика интерфейсов
Глава 1

6. Чем мы занимаемся?

7. Сидим за компьютером!
Лучше на завод пошли бы!

8. Почему интерфейсы?

9. Клуб анонимных
разработчиков интерфейсов!

10. Любил рисовать
Занимался дизайном

11. Иконки
должны быть
красивыми

12. 40-60% тратим
на взаимодействие с
интерфейсами

13. Мы делаем мир лучше!

14. Каждый день
мы ходим на работу

15. Запускаем
космические корабли!

16. Продукт === Ребенок

17. Растим детей

18. Архитектура

19. Зоопарк
технологий

20. Быть Хипстером
или не быть?
Не ХипстерХипстер

21. Родители
как дети

22. Менеджеры

23. Первые правки

24. Героически
Решаем
Проблемы

25. Допустим,
ты красавчик 😎

26. Проблемы решены!
Продукт готов!

27. Проведем ретроспективу:
• Архитектура – это важно!
• Быть хипстером не всегда круто!
• Каждый инструмент должен быть
оправдан!
• Думай о своем продукте! Он твое
наследие!

28. Миша, денег никто не даст!
Глава 2

29. “Страшная” тайна!
Но…

30. Любой продукт
это 💰 Деньги 💰

31. Конверсия

32. Конверсия

33. Отношение числа посетителей
сайта, выполнивших на нём
какие-либо целевые действия к
общему числу посетителей
сайта, выраженное в процентах.
Конверсия

34. Пример №0

35. Сайт

36. 500 уникальных посетителей
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$

37. 60 совершают покупку
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$

38. 💰 Конверсия: 💰
(60 покупок / 500 посетителей) × 100% = 12 %

39. Зачем нам это нужно?!

40. Время
экспериментов

41. Пример №1

42. Лендинг

43. Лендинг
Нужно поднять
конверсию!🤔

44. Чем занимается
Front-End разработчик?

45. Меняет цвет кнопочек

46. Фиолетовая кнопка

47. Зеленая кнопка

48. Тестируем

49. Создание
эксперимента
Трафик
Эксперимент

50. Создаем тестовые группы
33.33% 33.33%33.33%
Контрольная группа А B

51. 0
30
60
90
120
Красная Фиолетовая Зеленая
Тестируем
(Контрольная группа)
100% 70% 120%
А B

52. Конверсия с
зеленой
кнопочкой
выше!

53. Скучно…
Нет вызовов

54. Что это значит для
инженера?

55. Всего лишь
кнопка!

56. Нужно изменить на всех страницах

57. Нужно изменить на всех страницах
Нужно создать
тестовую группу!

58. const { btnExperimentGroup } = cookie.parse()
const className = do {
if (btnExperimentGroup == 'green') {
style.greenButton
}
else if (btnExperimentGroup == 'purpul') {
style.purpulButton
}
else {
style.redButton
}
}
const Button = props =>
<div className={className} … >
{props.children}
</div>
Достаем
тестовую
группу

59. const { btnExperimentGroup } = cookie.parse()
const className = do {
if (btnExperimentGroup == 'green') {
style.greenButton
}
else if (btnExperimentGroup == 'purpul') {
style.purpulButton
}
else {
style.redButton
}
}
const Button = props =>
<div className={className} … >
{props.children}
</div>
Выбираем
класс

60. const { btnExperimentGroup } = cookie.parse()
const className = do {
if (btnExperimentGroup == 'green') {
style.greenButton
}
else if (btnExperimentGroup == 'purpul') {
style.purpulButton
}
else {
style.redButton
}
}
const Button = props =>
<div className={className} … >
{props.children}
</div>
Рисуем
компонент

61. Всего лишь
кнопочка!

62. Понимаем:
• Наших детей пытаются использовать!
• Простые задачи могут добавить оверхеда!
• Балансируем между добром и злом. Нужно
научиться говорить НЕТ и Да!

63. Когда их стало
слишком много!
Глава 3

64. Пример №2

65. Форма регистрации

66. Форма регистрации
Нужно поднять
конверсию!🤔

67. Было:

68. Эксперимент №1

69. Эксперимент №2

70. Эксперимент №3

71. Эксперимент №4

72. Эксперимент №5

73. Но…
Это еще не все

74. Шаги регистрации

75. Шаги регистрации CMD +

76. Шаги регистрации
Что бы с ними
сделать?🤔

77. Эксперимент №6

78. Что имеем на выходе?
+ ) × 2 =( 12

79. Когда
экспериментов
слишком много

80. Каждый
эксперимент –
это новый IF

81. Как решать проблему?

82. …
Использовать Вендоров

83. https://help.optimizely.com/Build_Campaigns_and_Experiments/Six_steps_to_create_an_experiment_in_Optimizely_X_Web
Создаем эксперимент

84. https://help.optimizely.com/Build_Campaigns_and_Experiments/Six_steps_to_create_an_experiment_in_Optimizely_X_Web
Выбираем трафик

85. https://help.optimizely.com/Build_Campaigns_and_Experiments/Six_steps_to_create_an_experiment_in_Optimizely_X_Web
Меняем интерфейс

86. Но, не подходит!

87. • Функционала порой не хватает.
• Хочется больше гибкости.
• Много логики в экспериментах.
• Хотим, чтобы продукт был
производительным!
Почему?

88. https://twitter.com/ZackArgyle/status/831383233111535616/
Делаем IF
красивым

89. <ExperimentSwitcher>
<Experiment groupName="A">
<ComponentA {...props} />
</Experiment>
<Experiment groupName="B">
<ComponentB {...props} />
</Experiment>
</ExperimentSwitcher>
К примеру

90. <ExperimentSwitcher>
<Experiment groupName="A">
<ComponentA {...props} />
</Experiment>
<Experiment groupName="B">
<ComponentB {...props} />
</Experiment>
</ExperimentSwitcher>
Switcher –
оптимизирум
ренедер

91. <ExperimentSwitcher>
<Experiment groupName="A">
<ComponentA {...props} />
</Experiment>
<Experiment groupName="B">
<ComponentB {...props} />
</Experiment>
</ExperimentSwitcher>
Рендарим
эксперименты

92. Одна страница – легко
Что делать, если мы
хотим полностью
изменить страницу?🤔

93. Пример №3

94. Лендинг

95. Делаем эксперимент

96. У нас есть два лендинга
/ /

97. Как работает кухня?
S3 Статика
Nginx
Сервер Клиентский
Роутер
Результат
Статичный
Файл
Проблема

98. Нужно разделять страницы
/ /1

99. Еще один эксперимент

100. Добавляем еще один лендинг
/ /1 /2?

101. Ожидание!
/ / /

102. Реальность!
/ /1 /2

103. Иван Васильевич,
что же делать?

104. Строить свой
космический корабль!

105. Нужно решить проблему!
S3 Статика
Nginx
Сервер Клиентский
Роутер
Результат
Статичный
Файл
Проблема

106. Сделаем сервер умным!
S3 Статика
Статичный
Файл
Умный
Сервер Клиентский
Роутер
Результат
Проблема
Сервера

107. Прокачаем клиент!
Умный
Сервер
S3 Статика
Статичный
Файл
Клиентский
Роутер
Результат
Данные о эксперименте!
Результат
Умный
Сервера

108. О чем-то забыли?

109. Умный
Сервер
S3 Статика
Статичный
Файл
Клиентский
Роутер
Результат
Ходим за данными дважды
Сервера
Данные о эксперименте!

110. Умный
Сервер
S3 Статика
Статичный
Файл
Клиентский
Роутер
Результат
Используем
серверные данные 🤔
Cервера
Данные о эксперименте!Данные с сервера!

111. • Показываем эксперименты без боли
• Ускорили производительность рендера
• Уменьшили количество запросов на сервер
Результат

112. Посмотрим с
другой стороны!
Глава 4

113. Эксперименты
как исследования

114. Запускали ли вы
когда-нибудь бизнес?

115. Нужно исследовать рынок!

116. Пишем свой Mock

117. Пример №4

118. Запуск сложной Фичи

119. Делаем эксперимент
A B

120. Тестируем наш Mock

121. Понимаем, что работает –
запускаем фичу

122. Работа в команде
Глава 5

123. Пример №5

124. Экран установки расширения

125. Хотим поднять конверсию

126. Казалось бы,
все просто!
Хотим поднять конверсию

127. Mac OS

128. Windows

129. Посмотрим
внимательно

130. Mac OS

131. Windows

132. Все пропало?!

133. Было!

134. Стало!

135. Разрешили
ситуацию!

136. Тестировка важна!

137. Зачем нужны *?

138. Один в поле не воин!

139. Мы – команда!

140. Работать вместе,
создавая крутые идеи!

141. Быть инициативным!

142. Нужно подключаться с
самого начала!

143. Лоббировать себе задачи!

144. Все будут довольны!

145. Эпилог

146. 10 Выводов

147. 10 Правил Джедая

148. Продукт свой чти!
Правило 1

149. Про архитектуру
думай сперва!
Правило 2

150. Не будь хипстером,
когда неоправданно это!
Правило 3

151. Балансируй между
написанием своего и
использованием вендора!
Правило 4

152. Оберегай продукт свой
от внешних угроз!
Правило 5

153. Чти качество кода
наследия своего!
Правило 6

154. Вникай в задачу перед
тем, как выполнить ее!
Правило 7

155. Вызовы себе создавай, потому
что так работа твоя становится
интересной!
Правило 8

156. В команде работая можна
просветления достичь!
Правило 9

157. Превращай баги в
фичи!
Куда без этого, падаван мой!
Правило 10

158. Желаю
творческих
достижений

159. Разработанных
кораблей!

161. Senior
Front-End Engineers
grammarly.com/jobs
Мы в ищем

162. AGambit95
gregory.shehet
Спасибо за
внимание