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

Усі статті, обговорення, новини про 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-тестів тут також нема. Як і в усіх попередніх проєктах.

Висновок

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

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Я думаю якщо сайт не працює — не треба його ревьювіти взагалі.

Якщо він працює нормально але коли включити запис екрану на Mac то він повністю ломається — про це треба сказати в відео. Томущо таке вийшло враження ніби сайтом ніяк не можна користуватись.
Записувався екран на декількох Windows компьютерах, iOS і Android девайсах — все було нормально.

Я думаю якщо знаєш що сайт ломається так як було показано на відео — постійний показ лоудерів це найменша проблема. Лоудери не заважають так сильно коли люди не записують екран на MacOS.

Я вважаю це неправильним критикувати перформанс сайту коли явно видно що воно працює в 1 fps саме через запис екрану на MacOS.

Так, lazy-loading простих реакт компонентів на скролі це трішки занатто, але моя ціль була first contententful paint в лайтхаусі, і це 0,9 секунд.
Взагалі сайт такий як є томущо мені було цікаво зробити швидке преше завантаження на сайт з використанням Next 15 rc при цьому маючи достатньо важкий контент який потім підгружається на скролі.

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

Це і було зроблено:
x.com/...​tatus/1805339789807202648
Ось і старий SPA сайт зроблений за допомогою VITE і простого JS.
commoner-spa.vercel.app

І, так, навіть без запису відео, перформанс сайту взагалом не ідеальний (все ж таки навіть без 3D Об’єктів використовується важкий css фільтр backdrop-filter: blur) але я думаю він достатньо швидкий щоб нормально користуватись на айфонах 7ми річної давності.

Я не кажу що це крутий проект технічно, або великий, або супер оптимізований. Це взагалом проект якогось початківця.

Але я вважаю що цей проект заслуговує на те щоб в відео сказати що він буде працювати нормально якщо не записувати екран на MacOS.

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

Проблема не в записі екрану. Сайт сам по собі дуже багато ресурсів ноута вижирає. 3D моделька красива, але вона не оптимізована. До ресурсів сайту додались ще запис екрану і ноут не потягнув. Це і було показано у відео. Можна сказати що не повезло. У будь-якому випадку, це треба виправити.

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

first contententful paint

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

Підписатись на коментарі