Nový nástroj slibuje rychlejší webové stránky se zjednodušeným uživatelským rozhraním vykresleným na serveru

Zdravím všechny! V tomto článku bych vám rád přiblížil začátek projektu, o kterém si myslím, že by vás mohl zajímat. Práce na kódu probíhaly delší dobu, dostal jsem i pomoc od přispěvatelů, ale nyní si myslím, že je připraven pro produkční verzi.

Dobře, vlastně by bylo opravdu zajímavé ukázat projekt nazvaný HMPL . Je to malý šablonový jazyk pro zobrazení uživatelského rozhraní ze serveru na klienta. Je založen na přizpůsobitelných požadavcích odeslaných na server prostřednictvím načtení a zpracovaných do hotového HTML.

Ve skutečnosti je opravdu dobrý jako alternativa k modulům jako htmx a alpine.js , protože vám umožňuje vytvářet dynamická rozhraní s minimální sadou konfigurovatelných parametrů a také velikostí výstupních souborů. Toho je dosaženo tím, že pracujeme se serverem, kdy tam připravíme UI a teprve přes API ho přeneseme na klienta.

Jak to funguje v kódu?

Vezměme si jako příklad malý emailový registrační formulář, kde bude jednoduše vstup a tlačítko:

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

Výsledek kódu:

Na tuto formu bylo vynaloženo poměrně dost postav a teď, když si představíme, že bychom to samé dělali na frameworkech jako Vue, pak bychom museli propojit pinia ve spojení se serverem, vytvořit hromadu komponent a to by zabralo hodně místa na disku.

Důležitost přístupu na straně serveru

Nyní si představte, že máme web s desítkami stránek a hromadou formulářů, tlačítek, karuselu, menu, podmenu a všeho možného. V tomto případě získáme obrovské množství souborů a modulů, které si nakonec načte koncový uživatel ve postavené verzi. To může trvat několik desítek sekund, a pokud osoba navštíví web poprvé, šance na uzavření webu bude vysoká.

Konverze tak může spadnout a prodejní trychtýř, který prodejce vybudoval, může být neefektivní jen proto. Proto tento projekt může skutečně pomoci, protože stránky se budou moci načítat mnohem rychleji (protože celé uživatelské rozhraní je na serveru) a na klientovi uživatel uvidí to samé, co by bylo provedeno na frameworku.

Výhody modulu oproti ostatním:

Za prvé, když vezmeme HTMX, tak zde samozřejmě stojí za zmínku, že modul funguje na fetch a je plně přizpůsoben. To znamená, že můžete poslat požadavek, jak chcete, kamkoli a vytvořit tolik uzlů v DOM, kolik chcete. Oproti alpine.js můžete vytvářet dynamiku, ale ve spojení se serverem, což vám umožní nezahrnout do projektu další moduly.

Pracovat lze i s jednotlivými soubory s příponou .hmpl, ale zatím pouze pro webpack.

Něco málo o výsledcích a vývoji

Doufám, že vás projekt zaujal. Bylo by skvělé znát svůj názor na to v komentářích. Dlouho se na tom pracovalo, vznikly skvělé webové stránky, úložiště a mnoho dalšího. Doufám, že pokud to pro vás nebude příliš velké potíže, mohli byste se podílet na vývoji projektu! Každý týden se snažím zveřejňovat otevřená čísla, kde bych potřeboval pomoc. Bylo by skvělé spolupracovat :). Také, protože jsem právě začal, na GitHubu není mnoho hvězdiček a bylo by skvělé, kdyby se vám projekt líbil, abyste ho ohodnotili hvězdičkou. Děkuju!