Hotwired Turbo і використання разом з Laravel

Загалом що таке Hotwire Turbo своїми словами? Це невелика JS бібліотека, котра займається перехопленням подій, таких як клік за посиланням, підвантаженням контенту в фоні та заміні контенту на новий, отриманий з сервера. Якщо просто, то це бібліотека яка може зробити зі звичайного сайту SPA (сайт без перезавантажень сторінки), не прикладаючи значних зусиль.

Я вже описав основний принцип, але повторю в деталях. Припустимо, у мене є традиційний сайт зі звичайними посиланнями на інші сторінки сайту. Я підключаю Turbo, додаючи тег script з посиланням на скріпт. Цей скріпт додає обробник click, котрий перехоплює події і змінює звичну поведінку посилання. Скріпт HTML нової сторінки по URL, шукає в HTML спеціальні теги turbo-frame або turbo-stream і міняє HTML поточної сторінки на новий у місцях, поміченних цими тегами.

Переваги Turbo це мінімальний поріг входу, мінімальні зусилля щоб перетворити існуючий сайт на SPA, основа це прості, зрозумілі технології, сайт залишається оптимізованим для пошуковиків. Недоліки - Turbo все ще залишається нішевою технологією, потребує переробки JS. Я рекомендую Turbo для контентних сайтів, для котрих залишається критичним індексація контенту. Або сайтам, котрі потребують оптимізації за рахунок того, що Turbo дозволяє частково підвантажувати частини сторінки: відпадає потреба віддавати в кожному запиті данні для навігації, профілю, що економить запити до БД.

Turbo виріс як доповнення до фреймворку Ruby on Rails, проте залишається повністю самостійною бібліотекою. Тому Turbo використовується з іншими backend фреймворками. Я використовую його разом з Laravel і вже маю комерційний проект, оснований на Turbo. Проте в той час я ще не знав, що є пакет Turbo-Laravel, котрий додає функції для управління Turbo з бекенду. Давайте розберемо які саме функції зацікавили мене в цьому пакеті.

Сам пакет знаходиться за адресою turbo-laravel.com. Ставиться декількома командами. Загальна інформація про те як працює Turbo дуже добре описана на сторінці Overview. Тепер, що сподобалося.

Автоматична генерація ID для турбо-фреймів, дозволяє тримати ID у передбачуваному вигляді:

<x-turbo::frame :id="[$post, 'comments']">
    <!-- Comments -->
</x-turbo::frame>

Хелпери-скорочення для контролю над кешуванням, оновленнями:

<x-turbo::exempts-page-from-cache />
<x-turbo::refresh-method method="morph" />
<x-turbo::refresh-scroll scroll="preserve" />
<x-turbo::page-requires-reload />

Функція-білдер для Turbo Stream, дозволяє створити стрім, накшталт того, як ми наповнюємо response() в Laravel:

turbo_stream()
    ->before($comment)
    ->view('comments.partials.flash_message', [
        'message' => __('Comment created!'),
    ]);

Додаткові методи для Request, які дозволяють перевіряти з якого фрейму відправлено Request і інші речі:

if ($request->wasFromTurboFrame(dom_id($post, 'create_comment'))) {
    // ...
}

if (request()->wantsTurboStream()) {
		return turbo_stream($comment);
}

Додані додаткові перехоплення, які стосуються валідації. Наприклад, при відправці форми, якщо Request не пройшов валідацію, то повернеться HTML з помилками. Також є можливість розпізнавати запити від Hotwire Native.

Hotwite Turbo не лише окрема бібліотека, поряд є додаткові інструменти котрі дозволяють: Hotwire Stimulus - динамічно чепляти JS контроллери до DOM елементів. Hotwire Native - обгортка на основі WebView, котра дозволяю створити гібридний додаток для iOS та Android.