Рефакторінг фронтенду RubyCoin

Нещодавно до проекту RubyCoin долучився наш підписник, ентузіаст Олександр. Він виявив у фронтенд частині проекту ряд недоліків, зокрема у JS файлах був такий код (та й структура в цілому):

document.addEventListener("turbo:load", rerender);
document.addEventListener("turbo:frame-render", rerender);
document.addEventListener("turbo:render", rerender);

Цей код є проблемним, оскільки він використовує застарілі методи addEventListener(). Ці методи не є ефективними та можуть призвести до проблем із продуктивністю. При кожному завантаженні сторінки додаються eventListener-и, які, по-перше, не знімаються і тільки сумуються при кожному оновленні сторінки. По-друге, ці лістенери перехоплюють спільні події, зокрема load/render (немає значення, який рендер). По-третє, ставляться лістенери на ємітування подій, яких в принципі немає на сторінці, а саме, рендер відсутнього турбо-фрейма.

Олександр запропонував переписати логіку на Stimulus та реалізував це. Stimulus - це фреймворк, який дозволяє використовувати методи життєвого циклу для керування поведінкою елементів на сторінці. Методи життєвого циклу - це функції, які викликаються на певних етапах життєвого циклу елемента. У цьому випадку ми можемо використовувати метод connect(), щоб викликати функцію rerender() при завантаженні елемента. Це дозволить нам уникнути зайвих викликів функції rerender(). Переписування на Stimulus має ряд переваг, зокрема:

- Покращена продуктивність: методи життєвого циклу є більш ефективними, ніж застарілі методи addEventListener().
- Простіше читання та розуміння коду: методи життєвого циклу є більш чіткими та зрозумілими, ніж код, який використовує застарілі методи addEventListener().
- Покращена підтримка доступності: методи життєвого циклу підтримують доступність, а застарілі методи addEventListener() - ні.

Однак, через використання JS gem-ів, які були побудовані під sprockets (наприклад, gem 'tinymce'), нам довелося повернутися до sprockets для успішного інтегрування цих бібліотек. Це є компромісом, який дозволяє нам зберегти функціональність цих gem-ів у проекті.

Олександр також виявив та виправив ряд дрібних багів у проекті, що дозволило зробити нашу платформу більш стабільною.

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

Дякую Олександру за цінний внесок у розвиток проекту та вам, учасники RubyCoin, за вашу увагу та підтримку! Будьмо відкриті до нових ідей та постійно вдосконалюймо наш проект разом.

Посилання на Pull Request кому цікаво ознайомитися зі змінами.

#devnote