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

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

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

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

Наш активний учасник спільноти Максим Рудний зробив код-рев’ю проєкту! Тож далі передаємо слово Максиму 👇

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

Сьогодні у нас на розборі проєкт від Євгена — сайт піцерії з можливістю замовлення піци. Проєкт реалізований на NextJS + MongoDB для збереження даних.

Хоч проєкт і написаний на Next (фреймворк), де вже базово передбачена файлова структура, даний проєкт має декілька відхилень, які краще б виправити. Давайте уважніше глянемо на структуру та самий код.

Ось структура проєкту. Що тут може не подобатись?

Звісно, треба детальніше заглянути в кожну папку, але скажу наступне. Папка modules — обманює. Там не модулі а компонент для корзини та списку продуктів. Чому вони не в components? Самі ж компоненти розбиті ні 2 частини: components та UI. Схоже що намір був розділити компоненти, що відповідають за бізнес-логіку та за UI.

Компоненти для UI тут потрібні, адже не використовується жодна бібліотека готових компонентів, які можна кастомізувати. Для такого маленького проєкту, створення власних компонентів типу Input, CheckBox, TextArea може зайняти більше часу та зусиль ніж якби було обране готове рішення.

Стилізація

Для стилізації обраний підхід SCSS модулів. Підхід робочий, питань нема. Є питання до стилізації сторінок та компонентів. Зазвичай, при роботі з SCSS (CSS) модулями, файл з стилями кладуть поруч з основним файлом, якому він і належить. Для компонентів це і реалізовано, а для сторінок чомусь стилі лежать в іншому місці. Шукати їх і редагувати стає складніше і більше затратніше по часу.

Шрифти

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

SVG зображення

Окремо хочу похвалити за використання SVG-спрайтів для оптимізації роботи з SVG. Всі картинки зібрані в одному файлі та в коді використовуються по ID. Про цей підхід я детально розповідав у своєму відео — Ви неправильно використовуєте SVG зображення в React! Правильні методи оптимізації

Якість коду

Тут є багато питань та зауважень. Більшість можна побачити у відео, а тут згадаю лише ось цей приклад:

Назва функції максимально не відповідає, тому що вона робить. Сам код можна оптимізувати.

Ще більше питань до коду компонента ProductFooter. Прокидати пропси в компонент, щоб передати їх у колбек функції яка також прокидається в цей компонент — типова помилка початківців. Ми не прокидаємо пропси в компонент, коли вони там не використовуються безпосередньо або хоча б не прокидаються далі по компонентах.

Висновки

Проєкт сирий і над структурою та кодом потрібно працювати. Бажано працювати під наглядом більш досвідченого розробника.

В проєкті є хороші рішення, наприклад використання react-hook-form для роботи з формами. Якби ще для валідації полів використати Zod чи Yup — було б добре. Також чудово до для деяких полів використовуються маски — react-input-mask.

Щоб більше дізнатися про React та як покращувати свій код — заходьте в мою телеграм групу, де я публікую детальніші пояснення типових помилок.