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

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 06, 2019

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

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

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

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 06, 2019
Tweet

Transcript

  1. КАК СДЕЛАТЬ ЛУЧШЕ Влад Сапожников и Егор Банщиков из 2ГИС

    когда ты — фронтендер, и ты не один
  2. ... и ещё 30+ 2ГИС.Онлайн поиск карта фотки отзывы реклама

    избранное
  3. None
  4. Делаем мобильный онлайн (2016–2017) % продукта время 100%

  5. Делаем новый онлайн (2018–...) % продукта время 100%

  6. None
  7. Дэн Абрам

  8. Влад Егор

  9. Как сделать лучше?

  10. КОД

  11. КОД сделать код лучше

  12. Фрустрация Искусство

  13. Код — инструмент для решения проблем

  14. None
  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. Любая архитектура решит любую задачу

  55. None
  56. None
  57. None
  58. Проект Фича Багфикс

  59. Любую задачу можно решить бесконечным количеством способов Это и есть

    проблема
  60. Разработка

  61. Кодревью

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

  63. None
  64. None
  65. 3 ШАГА к АРХИТЕКТУРЕ ТВОЕЙ МЕЧТЫ

  66. Выбрать удобную абстракцию, которая подходит твоему проекту 1. DATA UI

  67. «Зачем что-то анализировать, если можно сделать первым попавшимся способом?» —

    Твоё подсознание, каждый чёртов раз
  68. Создать абстракцию такую, чтобы было сложно и лениво делать иначе

    2. DATA
  69. «Вот будем делать проект с нуля, там всё предусмотрим» —

    Коллективное подсознание
  70. Разочароваться и жить с этим 3.

  71. Отрефакторить всё здесь и сейчас 3.

  72. «В моей команде это невозможно» (с) ты или твой тимлид

  73. А ты попробуй

  74. None
  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. Владу надо сделать постраничную подгрузку фотографий

  99. None
  100. А какую проблему мы решаем?

  101. None
  102. 97% компаний с менее чем 20 фотографиями

  103. None
  104. Фокусироваться на проблеме лучше чем решать конкретную задачу Иногда сделать

    лучше значит ничего не делать
  105. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21,

    34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 тикетов в бэклоге время ура, мы здесь? а нет :(
  106. None
  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. Оптимистичный мерджинг

  120. None
  121. Бэклог Фибоначчи 1, 1, 2, 3, 5, 8, 13, 21,

    34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584 тикетов в бэклоге время ура, мы здесь? а нет :(
  122. БЭКЛОГ ПРОЕКТА

  123. Как понять сколько задач брать в спринт?

  124. Влад и Олег начали прогнозировать

  125. коэффициент костылизации “нужен для упрощения модели оценки и считается только

    на основании опыта предыдущего спринта, и как цифра в виде коэффициента”
  126. None
  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. Егор перегорел Он больше не хочет быть фронтендером

  135. None
  136. Моя работа — это только про код

  137. Чем больше задач я решу, тем круче как разработчик

  138. Я машина. Могу работать 24/7

  139. Если я чего-то не знаю, то я плохой разработчик

  140. None
  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. Нет лучших процессов Команда ко всему приходит сама

  146. None
  147. КОМАНДА Кто делает лучше КОМАНДА Кто делает лучше

  148. Влад Егор Олег

  149. None
  150. Команда говорит на одном языке

  151. Команда доставляет продукт, а не тикеты

  152. Команда ко всему приходит сама

  153. “Сегодня мы многое поняли”

  154. Люди решают

  155. Вы сами решаете как сделать лучше

  156. «В моей команде это невозможно» (с) ты или твой тимлид

  157. А ты попробуй

  158. Влад Сапожников t.me: @lastwish vk.com/lastw Егор Банщиков t.me: @banschikov vk.com/yegorb