Show your code Saturday: код-рев’ю #9

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Коментар редакції. Вітаємо вас у рубриці Show your code Saturday! Це інтерактивна рубрика, у якій кожен охочий може поділитися власним проєктом, написавши про нього в коментарях. А ми натомість щосуботи обираємо найцікавіший і розповідатимемо детальніше.

Сьогодні ми хочемо поділитися з вами роботою Volodymyr Gerun.

Дисклеймер: я не є автором коду і не знаю причин реалізації будь-якої частини коду таким чином, як це є. Стиль написання коду без ознайомлення з Code Style та Code Convention проєкту не можу критикувати, може це так було задумано.

Автор сьогоднішнього проєкту дуже ждав цього розбору. Писав мені в YouTube та в Telegram групі, щоб я не пропустив його проєкт. Приємно бачити коли твоя робота цінна іншим, враховуючи що розробники беруть до уваги рекомендації та покращують якість своїх проєктів.

Сьогодні у нас на розборі код від Volodymyr Gerun — фінансовий проєкт для відстеження витрат і надходжень (Explend App). Що цікаво, автор стверджує що почав робити 19 травня, по 6-10 годин кожен день. Десять годин на день — це багато, дуже багато. Це чудово показує скільки часу повинні тратити початківці, які прагнуть якомога швидше увійти в ІТ. Автора коду не можу віднести до початківців. Він або уже досвідчений розробник або передивився усі мої відео на каналі))

Проєкт дуже великий вийшов. Все-таки, 6-10 годин на день даються в знаки. Почнім з цікавенького.

Інструменти забезпечення якості.

Перше на що звертаємо увагу — налаштовані GitHub Actions. Є workflow що проганяє лінтинг та тести. Автор трохи знайомий з Continious Integration (CI) процесами. Це однозначно плюс.

Наступним приємним сюрпризом є наявність Unit тестів. І особливо важливо, що вони є частиною CI. Тут варто зауважити, що автор, скоріш за все, послухався моєї поради — налаштував тестування і додав лише кілька тестів. Просто щоб впевнитись що все працює. Очевидно, що при самостійній розробці проєкту в стислі терміни мало хто може дозволити витрачати час на написання тестів. Особливо коли кодова база дуже часто змінюється.

На проєкті налаштовані ESLint та Pritter. Найпопулярніші інструменти перевірки та форматування коду. По Pritter є питання. В package.json маємо наступні команди:

"prettier": "prettier --c \"**/*.{js,jsx,ts,tsx,json,md}\"",
"prettier:fix": "prettier --w \"**/*.{js,jsx,ts,tsx,json,md}\"",

І при цьому в Husky, який також доданий, на pre-comming хуку викликається команда:

yarn typecheck && yarn lint && yarn prettier

Схоже що автор не довіряє даному інструменту, адже він лише перевіряє код перед комітом, а не форматує.

Приємні бонуси

Автор додав і лінтінг, і форматування, і тести — думаю за що ж можна причепитися до проєкту. Зазвичай, у всіх попередніх проєктах не було аналітики чи системи трекінгу помилок.

Тут я був знову ж таки приємно здивований. Автор додав обидві системи.

За аналітику відповідає пакет @vercel/analytics. Я б все-таки рекомендував би розглянути інший, незалежний від Versel інструмент. Зараз код привʼязаний до хостингу.

За помилки відповідає Sentry. Sentry: Application Performance Monitoring & Error Tracking система. Пропоную читачам розглянути цей або аналогічні сервіси. Sentry пропонує FREE план для розробників.

Висновок

В проєкті використано велику кількість інструментів та підходів, що будуть корисними як початківцям, так і досвідченим розробниками. Про більшість цих інструментів розповідаю у відео.

Проєкт вийшов дуже великий, а часу на огляд в мене мало. Якщо я пропустив щось цікаве чи якісь проблеми в коді — пишіть в коментарях на YouTube.

Щоб більше дізнатися про Web-розробку та Front-end конкретно — підписуйтесь на Телеграм групу.