Refactoring

Transcript

1. Как правильно заходить на рефакторинг, или Почему legacy не приговор Денис Красновский
2. 2 Красновский Денис Технический руководитель разработки ДомКлик jquery_dlya_slabih
5. 5 Как убедить коллег в том, что проект нуждается в рефакторинге?
6. 6 Вот так вот: Квота на выполнение технических задач Диалог за пользователя Диалог за сроки выполнения задач Аргументация невозможности реализации заказанной функциональности без рефакторинга
7. 7 Правила рефакторинга Собери цифры до и после Закрывай проблемы итеративно Меняй фокус
8. 8 Что будем делать? Сделаем полезный readme Удалим неиспользуемые файлы Поправим ошибки в коде Приведем code style в порядок Правильно настроим webpack-сборку Разберемся с зависимостями Настроим code splitting Начнем следить за ошибками у пользователей Проведем внешний аудит с помощью Google Lighthouse Сделаем CI
9. 9 readme.md
10. 10 README.md Отсутствие Нерелевантная информация
11. 11 README.md Название проекта, описание Контакты ответственных Работа с проектом
12. 12 README.md
13. 13 README.md Название и описание проекта Контакты ответственных Работа с проектом Описание команд
14. 14 README.md
15. 15 README.md Название и описание проекта Контакты ответственных Работа с проектом Описание команд Ссылки на стенды Полезные ссылки
18. 18 unused-files-webpack-plugin Неиспользуемые файлы
21. 21 статический анализ кода
22. 22 SonarLint Бесплатно Плагин на самые популярные IDE (Eclipse, IntelliJ, Visual Studio, VS Code) Анализирует код на предмет багов и уязвимостей sonarlint.org
23. 23 rules.sonarsource.com
25. 25 ESLint / Stylelint or Stylint Единый code style Анализирует код на предмет багов Помогает использовать лучшие практики Прививает использование синтаксического сахара Настраивается на вкусовщину Легко встраивается в пайплайн
26. 26 Отсутствие eslint-disable-line Отключение правил взамен настройки Не подключен к пайплайну Использование yaml вместо json ESLint / Stylelint or Stylint
27. 27 eslint-config-airbnb-base
28. 28 eslint-config-airbnb
29. 29 eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
30. 30 eslint-plugin-sonarjs
33. 33 static module bundler
34. 34 Webpack Поставить webpack Настроить сборку webpack.js.org
37. 37 webpack bundle analyzer
38. 38 Webpack bundle analyzer Посмотреть, что у нас под капотом Найти самые тяжелые зависимости Найти зависимости, которые не должны были попасть в сборку
40. 40 duplicate-package-checker-webpack-plugin Покажет дубли зависимостей Можно встроить в пайплайн
41. 41 Что делать с дублями Поднять версии всех пакетов Использовать аналог Написать функциональность самому Сделать пул реквест Продолжать жить с дублями
43. 43 улучшаем web-performance каждой отдельной страницы
44. 44 WEBSITE PAGE 3 PAGE 2 LOGIN … PAGE 10 MAIN.JS w/o code splitting MAIN.CSS VENDORS.JS VENDORS.CSS
45. 45 WEBSITE PAGE 3 PAGE 2 LOGIN … PAGE 10 LOGIN.JS code splitting by entries LOGIN.CSS VENDORS.JS VENDORS.CSS
46. 46 Динамический импорт
47. 47 Щепотка магии в webpack
48. 48 WEBSITE PAGE 3 PAGE 2 LOGIN … PAGE 10 LOGIN.JS code splitting by dynamic import LOGIN.CSS VENDORS~LOGIN.JS VENDORS~LOGIN.CSS MAIN.JS
51. 51 Sentry Устанавливай в html source-maps sentry.io
53. 53 Google Lighthouse
57. 57 CI-пайплайн eslint stylelint/stylint webpack build unused-webpack-plugin duplicate-package-checker-webpack-plugin
58. 58 "scripts": { "lint": "stylint src/ && eslint --ext .js,.jsx src/", "prod": "BABEL_ENV=production webpack --env=prod --progress", "build": "npm run lint && npm run prod" }
59. 59 Что мы получили: Разницу в цифрах между тем, что было и что сейчас CI Проект, с которым приятно работать
60. Спасибо за внимание, вопросы? jquery_dlya_slabih instagram.com/TheRealDenisKrasnovskiy facebook.com/TheRealDenisKrasnovskiy github.com/DenRedsky/frontend_live_2020_example