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

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

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

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

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

Критична помилка в коді вартістю в декілька тисяч доларів

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

Сьогодні у нас на ревю код від Станіслава — проєкт «Камінь, Ножиці, Папір», реалізований на React. Дякую автору за код. Знайдені помилки та проблеми будуть хорошим прикладом для інших та навчанням для автора. Впевнений, що це рев`ю допоможе автору покращити якість його коду та уникнути критичних помилок, які коштували б купу грошей.

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

Розпочнемо з аналізу package.json. Першим, що ми побачимо — це використання Create React App програми для генерації проєкту. Це старий підхід, і після оновлень в React, офіційна документація каже, щоб не використовувати create-react-app. Потрібно переходити на Next, Remix або Vite. Я про це розповідав в цьому відео.

Критична помилка

Найбільша помилка та проблема в цьому коді — доданий в Git файл змінних оточення — .env з API_KEY для firebase. Ніколи, повторю, ніколи не замітьте файли .env.(*) у Git. Вони стають доступними всім і будь-хто може використати ваш ключ для доступу до ресерсів.

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

З особистого досвіду скажу. Коли ми використовували Google Cloud Platform були випадки, що наші сервери зламували та запускали там свій код. За використаний процесорний час нам приходили рахунки на лишні сотні чи навіть тисячі доларів.

Псевдооптимізації

Практично по всьому коді можна побачити спроби оптимізації ререндерів за допомогою useCallback та useMemo. От проблема лише в тому, що в більшості випадків використання цих хуків лише погіршували продуктивність. Наприклад:

​​const toggleInputType = useCallback(() => {
// function to switch between password and text type of the input field
dispatch({ type: 'toggleShowPassword' });
}, []);

Викликається на кнопці:

<button
type="button"
onClick={toggleInputType}
className={styles.togglePasswordIcon}
>
{showPassword ? <IoMdEye /> : <IoMdEyeOff />}
</button>

Який сенс нам зберігати посилання на фунціїю за допомогою useCallback, якщо ми його далі не передаємо пропсом в дочірні компоненти? Замість опитмізації ми отримали вдвічі складнішу реалізацію, адже потрібно ще викликати useCallback та зберегти посилання.

І таких прикладів по коду безліч.

Окремо хочу зазначити використання png-зображень по 30KB для іконок каменя, руки та ножиць. Навіщо додавати оптимізацію в коді за рахунок колбеків, якщо ми в цей же код тягнемо 100KB картинок, які явно мають бути векторними — svg? Про правильну роботу з SVG можна глянути ось це відео.

Робота зі стилями

Тут в коді взагалі мікс двох підходів: звичайні css-файли та css-modules. Якщо ми вже використовуємо модулі, то потрібно підтримувати цей підхід по всьому коду. Звісно, бувають випадки, коли можна додати якісь класи, але в цьому проєкті занадто багато намішано.

Окрема проблема з префіксами для стилів. Ось приклад:

-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);

Таке враження, що коду 10 років. Зараз Webpack, який є в Create React App, що тут використовується, автоматично за потреби додає ці префікси.

Окремо хочу згадати media queries в CSS. Погляньмо на ці брейкпойнти. Я тут промовчу.

@media (min-width: 319.98px) {
@media (min-width: 359.98px) {
@media (min-width: 427.98px) {
@media (min-width: 767.98px) {
@media (min-width: 991.98px) {
@media (min-width: 1199.98px) {
@media (min-width: 1399.98px) {

Підсумки

Я тут ще не згадую про самий код і, особливо, про хуки. Там є просто «знахідка». Більше можна побачити у відео огляді. Мене не вистачило на весь код. Проблем там занадто багато. Огляд і так вийшов найдовший за всю історію.

Зрозуміло, що код написаний початківцем. І це цілком нормально, що він не ідеальний і є над чим працювати. Не в кожного є ментор, який міг би проаналізувати код та допомогти, але у всіх є я та наша рубрика Show Your Code Saturday.

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