Moja pierwsza apka z Hotwire

TL;DR: Spróbowałem nastawionego na server-side rendering Hotwire i spodobało mi się.

Jak wiecie, od długiego czasu rozmyślam na temat korzyści płynących z server-side renderingu i rodziła się w mojej głowie idea napisania libki, która pomagałaby łączyć zalety SSR z niektórymi zaletami SPA.

Na szczęście ktoś mnie wyręczył :smiley: Ekipa od Basecamp/Hey (z DHH na czele) wypiściła Hotwire (HTML Over The Wire). Idea w skrócie polega na tym, że renderujemy apkę i każdy jej widok po stronie backendu, a Hotwire pomaga ją przyspieszyć i wzbogacić w drobne interakcje.

Główną technologią zawartą w Hotwire jest Turbodrive, który robi kilka korzystnie wpływających na wydajność aplikacji rzeczy:

  1. Gdy klikam w link do nowej podstrony, Hotwire przechwytuje to kliknięcie, ładuje URL do którego prowadzi ten link za pomocą AJAX-a i wrzuca jego HTML do DOM-u. Dzięki temu przeglądarka nie “miga” i nie musi na nowo parsować CSS, JS, itp. Ale to już od dawna potrafił robić Turbolinks. Nowością w Turbodrive jest

  2. Możliwość podziału HTML-a strony na “ramki”. To nie są ramki w znaczeniu <frame> lub <iframe>, ale mają podobne działanie. Turbodrive pozwala np. “odświeżać” content tylko w jednym, wskazanym div-ie.

Ich oficjalna strona zawiera całkiem zwięzłe wprowadzenie - które pomimo używanego na backendzie Ruby On Rails było dla mnie zrozumiałe :wink:

Na szybko stworzyłem demonstracyjną apkę z backendem w Sealiousie i muszę przyznać, że moje wrażenia są pozytywne. Podoba mi się, jak mało warstw abstrakcji jest pomiędzy backendem a tym, co renderuje przeglądarka!

Zrobiłem krótki screencast demonstrujący apkę i jej kod (sorry za nieprzyzwoicie słabą jak na podcastera jakość dźwięku):

Kod tej sealiousowej apki jest na branchu ‘hotwire’ repo sealious-playground, ciekawskich zapraszam do wczytywania się :wink:

2 Likes

Dla mnie mega spoko :slight_smile:, nie wiem o jaki projekt chodzi natomiast, widzę ogromny potencjał na budowanie jeszcze szybszych apek :slight_smile:

edit: z naszym mikrofonem taki screencast byłby bez błędny i czysty w przekazie :slight_smile:

1 Like