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

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

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

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

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

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

Сьогодні у нас на огляді не просто проєкт, а цілий діамант у веброзробці. Рідкість, на яку важко натрапити в наші часи — часи фреймворків і бібліотек. Розглянемо сайт-портфоліо написаний на Vanilla JS.

Підхід до написання коду на JavaScript без використання будь-яких фреймворків або бібліотек називається Vanilla JavaScript.

Переваги такого підходу:

• максимальне розуміння всього, що відбувається в проєкті. Кожен компонент і складова написана самотужки;
• чудова практика для розуміння JavaScript core та роботи з DOM-деревом;
• максимальна продуктивність сайту. За умови, що розробник не натупить.

Недоліки:

• важко підтримувати. В таких проєктах практично ніколи нема архітектури або стандарту, як в тих самих фреймворках, яку знали б інші розробники;
• більший час на освоєння проєкту. Мені потрібен був певний час, щоб зрозуміти, як все влаштовано;
• необхідність самому писати бойлерплейт та рішення, які уже давно всі зробили.
• складність розробки, адже в більшості потрібно працювати з DOM-деревом, а не даними. Ну як мінімум у цьому проєкті дуже багато роботи з DOM.

Сайт має складні та водночас важливі функції для портфоліо — підтримка кількох тем та мов. Це показує уміння автора реалізовувати відносно складний функціонал. Беремо до уваги що це все-таки сайт-портфоліо.

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

HTML-шаблон розбитий на окремі «компоненти» — partials, які підвантажуються за допомогою Vite плагіна vite-plugin-html-inject.

Коду написано багато, але чого я тут не знайшов, так це інструментів для автоматичного форматування коду. Ні Pritter, ні лінтерів я не побачив. Скоріш за все, автор вручну все форматує (налаштував свій IDE). Доки працюєш самотужки на проєктом, то це не проблема. Якщо підключаться інші люди — серйозна проблема. Кожен пише, як хоче, а це треба регулювати.

Щодо чистоти коду

• чудовий приклад для наслідування початківцям;
• код форматований, є всі потрібні відступи для зручності читання. Я б лише прибрав коментар-лінію після імпортів. Вона зайва;
• по коду проскають коментарі. Їх не багато, але і ті примудряються «брехати». Я притримуюсь думки, що коментарі в коді — це зло. Краще перейменувати функцію або винести логіку в окрему функцію з назвою, яка сама за себе говорить. Тут Роберт Мартін зі своїм «Чистим кодом» в допомогу.
• дублікати коду. Постійно повторюється рядок визначення локалі:

const locale = window.locale ? window.locale : 'en';

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

Окремо варто відзначити, як автор реалізував завантаження зображень. Про це детальніше у відео.

І ще хочу зазначити важливий нюанс. Список проєктів захардкожений в .json файлі. За потреби додавання або зміни проєкту потрібно відкривати код, вносити зміни, комітити та деплоїти їх. Це погана практика і краще розглянути можливість використання Headless CMS, яка вже й буде відповідати за контент.

Висновок

Чудовий приклад проєкту на Vanilla JS. Я особисто давно не бачив і не робив такі проєкти, тому це як ностальгія. Початківцям особливо рекомендую ознайомитись, адже сайти можна писати й на чистому JS, а не лише на фреймворках.

Якщо сподобався розбір, то підписуйтесь на мій YouTube-канал або ставте питання в телеграмі.