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

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

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

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

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

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

Сьогодні у нас на розборі сайт-портфоліо від Данила.

«Написаний на Next.js 15rc, React Three Fiber (альфа-версія), Firebase як БД, Redux і там ще декілька не дуже важливих бібліотек», — як сказав автор.

Продуктивність.

В Readme до даного проєкту, автор вказує що обрав NextJS для кращої продуктивності.

Все було б добре, якби цей сайт нормально завантажувався у мене на ноуті. Я закрив усі вікна Chrome, увімкнув лише запис екрана та звуку і сайт перестав завантажуватись. Хром вижирає процесор, кулери гудять, а сайт не відпрацьовує. Це добре видно на відео. Над продуктивністю потрібно попрацювати.

Частини головної сторінки завантажуються динамічно і показуються коли користувач доскролив до них.

const Gallery = dynamic(() => import("@/ui/Home/Gallery/Gallery"), {
 loading: () => <Loading />,
});

const Reviews = dynamic(() => import("@/ui/Home/Reviews/Reviews"), {
 loading: () => <Loading />,
});

const MapSection = dynamic(() => import("@/ui/Home/Map/MapSection"), {
 loading: () => <Loading />,
 ssr: false,
});

Як результат, на односторінковому сайті ми бачимо одні лоадери при скролі вниз. Варто розглянути ідеї аналізу продуктивності та просто завантажувати усе відразу. Там не так багато важкого контенту.

По коду.

По коду дуже багато коментарів. Роберт Мартін зі своїм Чистим кодом не оцінив би. Там де є TODO — в ідеалі додати б посилання на тікети, які б відповідали за потрібний функціонал (звісно ніхто не веде список задач при розробці свого сайту-портфоліо).

Захардкожена адреса сайту:

metadataBase: new URL("https://commoner.vercel.app/"),

Зазвичай при розробці, сайт запускають локально, на дев чи стейтдж environment, продакшен. Адресу сайту потрібно брати або зі змінних оточення або ж реальну, де було запущено сайт.

Home сторінка складно реалізована і важко підтримувати. Автор намагався додати анімацій та покращити продуктивність підвантажуючи секції коли вони потрапляють на екран. Це погіршило читабельність коду. Прибравши цю логіку — там викинеться 80% коду, і не факт що впаде продуктивність.

Інструменти

Приємно бачити що додані лінтери. Є стандартний з NextJS ESLint, а також доданий Biome. Про Biome у мене нещодавно вийшло відео. Цікаво почути думку автора про даний інструмент.

Як менеджер пакетів — pnpm. Я, чесно кажучи, жодного разу його не використовував. Треба дізнатися більше.

Unit-тестів тут також нема. Як і в усіх попередніх проєктах.

Висновок

Оптимізації — це звісно добре, але перш ніж їх розпочинати, потрібно провести аналіз та зібрати метрики. Оптимізовану версію порівняти з попередньої. Можливо там і так все чудово працювало.