Nytt verktyg lovar snabbare webbplatser med strömlinjeformad server-renderad UI

Hej alla! I den här artikeln skulle jag vilja berätta om starten av projektet, som jag tror kan vara av intresse för dig. Arbetet med koden pågick under lång tid, jag fick även hjälp av bidragsgivare, men nu tror jag att den är klar för produktionsversionen.

Okej, faktiskt skulle det vara riktigt intressant att visa ett projekt som heter HMPL . Det är ett litet mallspråk för att visa UI från server till klient. Den är baserad på anpassningsbara förfrågningar som skickas till servern via hämtning och bearbetas till färdig HTML.

Faktum är att det är riktigt bra som ett alternativ till moduler som htmx och alpine.js , eftersom det låter dig skapa dynamiska gränssnitt med ett minimum av konfigurerbara parametrar, såväl som storleken på utdatafilerna. Detta uppnås genom att arbeta med servern, när vi förbereder UI där, och vi överför det endast till klienten via API.

Hur fungerar detta i kod?

Låt oss ta som exempel ett litet e-postregistreringsformulär, där det helt enkelt kommer att finnas en inmatning och en knapp:

 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);

Resultatet av koden:

En hel del tecken spenderades på den här formen, och om vi nu föreställer oss att vi skulle göra samma sak på ramverk som Vue, då skulle vi behöva ansluta pinia i samband med servern, skapa ett gäng komponenter och detta skulle ta upp mycket diskutrymme.

Vikten av ett tillvägagångssätt på serversidan

Föreställ dig nu att vi har en sida med dussintals sidor och en massa formulär, knappar, karuseller, menyer, undermenyer och allt. I det här fallet får vi ett stort antal filer och moduler, som i slutändan kommer att laddas av slutanvändaren i den byggda versionen. Detta kan pågå i flera dussin sekunder, och om en person besöker sajten för första gången kommer chansen att stänga sajten att vara stor.

Därmed kan konverteringen falla och försäljningstratten som säljaren har byggt kan vara ineffektiv bara på grund av detta. Därför kan det här projektet verkligen hjälpa, eftersom sidorna kommer att kunna laddas mycket snabbare (eftersom hela användargränssnittet finns på servern), och på klienten kommer användaren att se samma sak som skulle ha gjorts på ramverket.

Fördelar med modulen jämfört med andra:

Först och främst, om vi tar HTMX, så är det här naturligtvis värt att påpeka att modulen fungerar på hämtning och är helt anpassad. Det vill säga, du kan skicka en förfrågan som du vill, var som helst och skapa så många noder i DOM som du vill. Jämfört med alpine.js kan du skapa dynamik, men i kombination med servern, vilket gör att du inte kan inkludera ytterligare moduler i ditt projekt.

Du kan också arbeta med enskilda filer med tillägget .hmpl, men för närvarande bara för webpack.

Lite om resultat och utveckling

Jag hoppas att du är intresserad av projektet. Det skulle vara coolt att veta din åsikt om det i kommentarerna. Det tog lång tid att arbeta på det, en cool hemsida, arkiv och mycket mer byggdes. Jag hoppas att om det inte är för mycket besvär för dig, kan du delta i utvecklingen av projektet! Varje vecka försöker jag publicera öppna nummer där jag skulle behöva hjälp. Det skulle vara kul att jobba tillsammans :). Dessutom, sedan jag precis började, finns det inte många stjärnor på GitHub och det skulle vara coolt om du gillade projektet, så att du skulle betygsätta det med en stjärna. Tack!