CodeFest 2019. Егор Банщиков, Владислав Сапожников (2ГИС) — Как сделать лучше

Мы делали фронтенд нового 2ГИС и хотели сделать всё как можно лучше. Но вдруг поняли, что взгляды на «лучшее» у каждого свои, а наши убеждения порой не помогают идти к общей цели.

В докладе мы расскажем, как задали сами себе правильные вопросы, которые поменяли наши взгляды на код, архитектуру, процессы и командную работу. Как мы стали писать на одном «языке», говнокодить и доверять чужим решениям. Как забили на битву фреймворков в 2к19 году и начали доставлять быстрее, больше и лучше.

Transcript

1. КАК СДЕЛАТЬ ЛУЧШЕ Влад Сапожников и Егор Банщиков из 2ГИС когда ты — фронтендер, и ты не один
2. ... и ещё 30+ 2ГИС.Онлайн поиск карта фотки отзывы реклама избранное
4. Делаем мобильный онлайн (2016–2017) % продукта время 100%
5. Делаем новый онлайн (2018–...) % продукта время 100%
7. Дэн Абрам
8. Влад Егор
9. Как сделать лучше?
10. КОД
11. КОД сделать код лучше
12. Фрустрация Искусство
13. Код — инструмент для решения проблем
15. ЧИСТЫЙ КОД ПРОСТОЙ КОД ПОНЯТНЫЙ КОД
16. DRY DRY DRY DRY DRY DRY DRY ПЕРЕИСПОЛЬЗУЕМЫЙ КОД
17. Влад делает логотипы фирм <Logo firm={firm} />
18. Егор делает аватарки юзеров <Logo user={user} isAnonymous={true} /> DRY DRY DRY
19. Влад добавляет иконки скидок <Logo firm={firm} discounts={discounts} />
20. Егор добавляет нотификации <Logo user={user} isAnonymous={true} notificationsCount={2} /> DRY DRY DRY DRY DRY DRY
21. interface Props { firm?: Firm; discounts?: Discounts; user?: User; isAnonymous?: boolean; notificationsCount?: boolean; } ??? ??? ??? WAT WAT ??? WAT
22. «Каждая часть знания должна иметь единственное, непротиворечивое и авторитетное представление в рамках системы»
23. Переиспользовать любой ценой?
24. Копипаста кода часто дешевле сложной и неправильной абстракции
25. Влад и Егор рефакторят на будущее
26. <AbstractRoundImage corners={createCornersIterator([{ angle: degreeToRadian(-45), node: <DiscountsIcon discounts={discounts} />, attack: 0, }])}> <FirmLogo firm={firm} /> </AbstractRoundImage> Влад, Егор и красивое решение
27. Олег и жестокая реальность Новые требования. В профиле аватарка квадратная.
28. <AbstractRoundImage isSharp={true}>
29. Можно ли всё предусмотреть?
30. Код должно быть легко удалять
31. Не трогайте мой изящный код
32. Код должен быть изящным?
33. $ git blame
34. «Спасибо за такой изящный код» (с) никто и никогда
35. На любой красивый код найдётся свой Олег
36. Говнокод — это то, что пишут джуниоры
37. А что пишут сеньоры, когда лучше наговнокодить?
38. Обозначить, в чём именно проблема /** * МЕСТО ДЛЯ УДАРА ГОЛОВОЙ * * Если трогаешь этот код, * найди все вызовы fetchMarkers. * Параметры должны совпадать. */
39. Описать трейдофф /** * Этот код может быть * либо быстрым, либо простым. * Он выполняется один раз в год, * но ломается два раза в год. * Поэтому выбираем простоту. */
40. Отбить желание пользоваться этим кодом import { UNSAFE_notifyDoNotUseItOrYouWillBeFired } from 'shared/utils; ЗАПРЕЩЕНО ШТРАФ 1500 РУБ.
41. Говнокодить надо уметь
42. Джуниоры говнокодят, потому что не умеют. А сеньоры — потому что умеют
43. Слышь, сюда иди Есть чо поревьюить
44. отступ Нет. Это неправильный код. по-моему, семантичнее будет обернуть это в скобки Думаешь, это норм? Ахаха Что за мода на такие конструкции кажется тут что-то не так
45. Кодревью курильщика Не даём задаче пройти дальше?
46. Код должен быть тебе понятен
47. Кодревью завязавшего 1. Помочь решить проблему 2. Что-то можно сделать потом 3. Что-то можешь сделать сам
48. Ревью — такая же работа, как и код
49. 1. Переиспользуем осторожнее 2. Всё не предусмотришь 3. Учимся говнокодить 4. Осознаём цель кодревью
50. Не ставь код выше других целей
51. КОД
52. КОД АРХИТЕКТУРА
53. АРХИТЕКТУРА как доказать, что ты сеньор сделать архитектуру лучше
54. Любая архитектура решит любую задачу
58. Проект Фича Багфикс
59. Любую задачу можно решить бесконечным количеством способов Это и есть проблема
60. Разработка
61. Кодревью
62. Тестирование
65. 3 ШАГА к АРХИТЕКТУРЕ ТВОЕЙ МЕЧТЫ
66. Выбрать удобную абстракцию, которая подходит твоему проекту 1. DATA UI
67. «Зачем что-то анализировать, если можно сделать первым попавшимся способом?» — Твоё подсознание, каждый чёртов раз
68. Создать абстракцию такую, чтобы было сложно и лениво делать иначе 2. DATA
69. «Вот будем делать проект с нуля, там всё предусмотрим» — Коллективное подсознание
70. Разочароваться и жить с этим 3.
71. Отрефакторить всё здесь и сейчас 3.
72. «В моей команде это невозможно» (с) ты или твой тимлид
73. А ты попробуй
75. Мы облажались месяц одного разработчика → 2 месяца работы всей команды
76. Если проект работает «как сложилось», то и задачи идут «как получится»
77. «Меня удивило, как всё просто заводится. Раньше было 500 вариантов, как сделать. И никто не знал, как правильно»
78. Чужие решения Чужой опыт
79. Архитектура — это когда команда говорит на одном языке
80. КОД АРХИТЕКТУРА
81. КОД АРХИТЕКТУРА ?
82. ПРОЦЕССЫ сделать доставку лучше
83. «Отлично. Работаем дальше» (с) Максим Хорошко
84. Очевидный подход к разработке Задача Требования Дизайны Разработка Тесты Релиз
85. Реальный подход к разработке Задача Требования Дизайны Разработка Тесты Релиз
86. Бардак везде Другое дело как ты с ним справляешься
87. AGILE SCRUM KANBAN LEAN SIX SIGMA PRINCE2 BF APF МЕТОД КРИТИЧЕСКОЙ ОЦЕНКИ CPM ECM XP PRISM WATERFALL PBPM
88. «Все счастливые продуктовые команды похожи друг на друга, каждая несчастливая команда несчастлива по-своему»
89. Олег делал приложение 3 года разработки • 233 коммита • 8 релизов 0 строк кода • 0% доставленного продукта Это по-настоящему реальная история
90. 2016: touch .jshintrc И это есть на гитхабе 2017: mv .jshintrc .jslintrc 2018: mv .jslintrc .eslintrc
91. 2016 2017 2018 Но, если честно, это не проект Олега
92. Но это все еще реальная история 2016: “ “ 2017: “ “ → ‘ ‘ 2018: ‘ ‘ → “ “
93. Похоже на твой pet-project?
94. Олег делал приложение Но не знал зачем и для кого ??? ??? ??? WAT WAT ??? WAT
95. Опытные команды тоже теряют фокус while (true) { }
96. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584
97. Как избавиться от бэклога Фибоначчи?
98. Владу надо сделать постраничную подгрузку фотографий
100. А какую проблему мы решаем?
102. 97% компаний с менее чем 20 фотографиями
104. Фокусироваться на проблеме лучше чем решать конкретную задачу Иногда сделать лучше значит ничего не делать
105. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 тикетов в бэклоге время ура, мы здесь? а нет :(
107. Самый лучший в мире калькулятор webpack • jest • enzyme • inferno • PWA • TensorFlow
108. 0 20 14 3 6 400 000
109. 20 20 14 3 6 400 000
110. 34 20 14 3 6 400 000
111. 37 20 14 3 6 400 000
112. 43 20 14 3 6 400 000
113. очень дорого 20 14 3 6 400 000
114. Как доставлять задачи быстрее и дешевле?
115. Анализируем задачи вместе и не теряем контекст problem.solve(); const solve = problem.solve; solve();
116. Декомпозируем задачи до 1sp Нет задач, которые нельзя декомпозировать
117. Optimistic merging Презумпция невиновности
118. Пессимистичный мерджинг
119. Оптимистичный мерджинг
121. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 тикетов в бэклоге время ура, мы здесь? а нет :(
122. БЭКЛОГ ПРОЕКТА
123. Как понять сколько задач брать в спринт?
124. Влад и Олег начали прогнозировать
125. коэффициент костылизации “нужен для упрощения модели оценки и считается только на основании опыта предыдущего спринта, и как цифра в виде коэффициента”
127. НИ Спринт 1
128. ЧЕ Спринт 2
129. ГО Спринт 10
130. Спринт 11 Спринт 21 ≈
131. Оцениваем емкость на исторических данных
132. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 тикетов в бэклоге время мы здесь
133. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 чёрт! Опять :( время
134. Егор перегорел Он больше не хочет быть фронтендером
136. Моя работа — это только про код
137. Чем больше задач я решу, тем круче как разработчик
138. Я машина. Могу работать 24/7
139. Если я чего-то не знаю, то я плохой разработчик
141. “Самая большая ошибка техлидов — это оценивание вклада разработчика по числу закрытых им тикетов” (с) Эрик Эллиот
142. Ввели ограничение по тикетам
143. Больше помогаем друг другу и не боимся просить о помощи
144. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 время мы снова здесь, вышли на плато
145. Нет лучших процессов Команда ко всему приходит сама
147. КОМАНДА Кто делает лучше КОМАНДА Кто делает лучше
148. Влад Егор Олег
150. Команда говорит на одном языке
151. Команда доставляет продукт, а не тикеты
152. Команда ко всему приходит сама
153. “Сегодня мы многое поняли”
154. Люди решают
155. Вы сами решаете как сделать лучше
156. «В моей команде это невозможно» (с) ты или твой тимлид
157. А ты попробуй
158. Влад Сапожников t.me: @lastwish vk.com/lastw Егор Банщиков t.me: @banschikov vk.com/yegorb