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

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

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

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

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

Цього я не очікував побачити

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

Сьогодні у нас на розборі проєкт від користувача з ніком jonathan rogers — клон відомої платформи для відео конференцій Zoom — Yoom. Проєкт великий, коду написано багато. Перше питання, що виникло в мене: «Для чого створювався цей проєкт?». Як POC — дуже багато написано. Як MVP — то для якого проєкту і чому тоді він потрапив нам розбір.

Стек доволі стандартний — NextJS + Tailwind. Це вже, напевно, стандарт у розробці, або, як мінімум, стандарт проєктів, що ми розбираємо в цій рубриці. Для роботи з базою даних (тут це MongoDB) використовується Prisma ORM. Ще мені сподобалось, що автор для авторизації не вирішив винаходити велосипед, а взяв готове протестоване рішення. У цьому випадку це User management system — Clerk.

Чистота коду

Тут є питання. Оскільки коду багато, то аналізувати його почав за допомогою статичного аналізатора SonarQube. При дефолтних налаштуваннях отримуємо такий результат:

Критичних зауважень нема. В основному є імпорти, що не використовуються та React.Fragment з одним дочірнім елементом. Ще є кілька зауважень до семантики та accessibility. Більше про це у відео. Про SonarQube можна буде прочитати в моєму телеграм каналі.

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

Наприклад:

const ParticipantList = 
({showList,setList}:{showList:boolean,setList:Dispatch<SetStateAction<boolean>>})=>{
   const transition  = clsx(showList?['w-[25%]','opacity-1']:['w-[0%]','opacity-0'])

Також в коді часто відсутні «крапка з комою» в кінці рядка.

Важливо, що всі ці дрібниці легко виправляються, наприклад, за допомогою Pritter. У продакшин-проєктах, де відбувається професійний Code Review, проблеми з форматуванням повинні виправлятися ще на моменті коміта в Git.

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

Корисні інструменти

У цьому коді використовується декілька корисних інструментів, відсутність яких погіршувала якість попередніх проєктів що були на огляді.

Class-variance-authority — дозволяє створювати варіанти відображення комопнентів, наприклад, кнопки. Якщо треба передати різні стилі або розміри — це реалізовується просто.

Tailwind-merge — дозволяє мержити Tailwind класи з кастомними.

Clsx — в принципі полегшує роботу зі стилями в React.

Prisma — уже згадував раніше. Спрощує роботу з базами даних.

Що цікаво. У проєкті відсутні стейт-менеджери — що дуже круто. Якщо можна щось викинути — треба від цього здихатись. Також відсутні бібліотеки для роботи з RestFull. Нема Axios або аналогів. Натомість використовуються React Server Actions.

Висновок

Коду написано багато. Він структурований та організований. Реалізовано багато складного функціоналу. Видно, що проєкт розроблявся доволі довго та з професійним підходом. Використані інструменти, що спрощують життя. Гадаю, тут є чому повчитися початківцям, що прагнуть підняти якість свого коду.