Hotwire: Ze serveru na klienta a zase zpět

Hotwire je „krásná nová věc“ ze světa frameworku Ruby on Rails. Jde o zastřešující název pro balíček knihoven. To podstatné je řečeno hned zkraje:

Hotwire jde proti aktuálnímu trendu javascriptových klientských aplikací (SPA), které se naopak snaží klienta vytěžit co nejvíce.

Do architektury moderních webových aplikací, ať už jde o server nebo klienta, zase tak moc nevidím, ale velmi mě to zajímá z pohledu toho, co mě živí – rychlosti, nebo chcete-li performance. Ještě jsem neviděl web, kde by tuny JavaScriptu zpracovávané na klientovi, vedly k pěknému uživatelskému zážitku, minimálně ne při prvním vstupu.

Ještě dál jde Matt E. Patterson v zajímavém textu s poněkud provokativním titulkem The Future of Web Software Is HTML-over-WebSockets. Autor se pohybuje ve světě Ruby on Rails, takže titulek (a vlastně všechno) berte s rezervou, ale určitě je zajímavé si to přečíst.

Javascriptové frameworky s příchodem Angularu a Reactu umí vyřešit problémy, které jsme dříve řešit neuměli, „reaktivita“ při interakcích s aplikací přinesla zásadní benefity z pohledu UX a na fakturách za servery viditelně šetříme:

„Server“ byl odsunut výlučně k hostování datové služby API, přičemž většina business logiky a veškerého vykreslování HTML se děje na klientovi.

Jenže náklady dnes netvoří ani tak infrastruktura jako platy vývojářů. U složitějších aplikací potřebujeme kromě frontendistů ještě backendisty, což komplikuje komunikaci a zvyšuje náklady. A pak je tu ten vliv JS frameworků na rychlost.

Co nabízí Hotwire?

Programátoři backendových aplikací ze světa Ruby on Rails s pomocí balíčku knihoven z Hotwire budou prý schopni dosáhnout podobné interaktivity jakou zajišťují javascriptové SPA.

Je to založené na WebSockets, které umožňují rychlý oboustranný přenos dat. Na klientovi neparsujeme JSON, ale do stránky prostě vkládáme kousky HTML, což je samozřejmě výkonnostně pro klienta daleko méně náročné.

Matt E. Peterson uvádí příklad s našeptávačem: Při každém stisknutí klávesy odešlete dotaz na server přes WebSockets, zpět do klienta dostáváme změněnou sadu značek <option>.

Silný server, tenký klient. Takže jsme tam, kde jsme byli. Tyto technologie i postupy jsou známy a používány už léta. Tak jasně, málokdo má koule, aby takové věci říkal NEW MAGIC jako David Heinemeier Hansson, že ano:

Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 https://t.co/Pa4EG8Av5E

— DHH (@dhh) December 22, 2020

Ale znáte to – staré technologie se objevují v nových kontextech, aby další generaci vývojářek a vývojářů otevřely oči. Proč ne, když to něčemu pomůže:

Progressive enhancement gets repackaged and released as “new magic” time and time again, but seriously if it gets more people doing it, it’s a good thing.

— Jake Archibald (@jaffathecake) December 23, 2020

A co ta rychlost?

Srovnání vstupní rychlosti Gmailu a Hey.com

Gmail asi znáte, ale možná nevíte, že je to klasická klientská javascriptová SPA. Klient stáhne HTML, v něm skoro nic není, jen javascriptový soubor, ten začne stahovat další JS soubory, spoustu JSONů…

No a výsledek je takový, jaký byste čekali.

Hey.com je e-mailový klient z dílny Basecamp, kde dámy a pánové implementovali právě sadu Hotwire.

Výsledek je trapně dobrý, jako z nějaké korporátní případovky o rychlosti webu.

Vy, kteří umíte číst výsledky Lighthouse, asi od boku řeknete: Ano, ty rozdíly tady dělá JavaScript. Vy ostatní se podívejte na metriku Total Blocking Time.

Tohle srovnání je dělané opravdu z voleje. První, které mě napadlo. Pravděpodobně porovnávám z pohledu performance špatně napsanou klientskou javascriptovou aplikaci (Gmail stahuje přes 8 MB dat, z toho 2,5 MB v JS), s odladěným Hey.com, který autoři používají jako případovku pro svůj devstack. Aplikaci, která umí běžet offline (Gmail) s aplikací, která to neumí. A tak dále. Ale i tak… z pohledu rychlosti to rozhodně zajímavé je.

Jsem fakt zvědavý, jak na to budou reagovat vývojáři a další frontendové i backendové frameworky.

Pokud bychom se dívali na vývoj webů jako jednolitý proud a Hotwire jako nový „trend“, pak jde o zpátečku a přesun zpět na server. Jenže takhle to není.

Weboví vývojáři už jsou dneska uzavření ve světech svých platforem – máme tu frontendisty (mezi nimi angularisty, vuečkaře, reactisty…), péhápkáře, vývojáře na technologiích Microsoftu a pak vývojáře ze světa Ruby on Rails.

Takže vlastně by mě nejvíc zajímalo, jestli jsou myšlenky z technologie jako je Hotwire přenositelné do jiných světů.

Dodatek: Čtenář Jan Oppolzer píše, že v ekosystému péhápkovského frameworku Laravel se objevilo podobné řešení jménem Livewire.