Musuq Llamkana Aswan utqaylla Web kitikunata Prometikun Servidor-Rendered UI kaqwan allinchasqa

Hola todos! Kay qillqasqapiqa willayta munani proyecto qallarisqanmanta, chaymi piensani interesasunkiman. Código nisqapi llamk'ayqa unay pacham ruwasqa karqan, yanapakuqkunamantapas yanapayta chaskirqani, kunanmi ichaqa yuyaykuni chay versión de producción nisqapaq listoña kashasqanmanta.

Allinmi, chiqaptaqa ancha sumaqmi kanman huk proyecto HMPL sutiyuqta qawachinapaq. Huk uchuy plantilla simim UI servidormanta clienteman qawachinapaq. Chayqa ruwasqa mañakuykunapi ruwasqa kachkan, chaymanta servidorman fetch kaqninta apachisqa chaymanta wakichisqa HTML kaqman ruwasqa.

Chiqamanta, chiqamanta allin huk alternativa hina htmx hinallataq alpine.js hina módulos kaqkunaman, imaraykuchus interfaces dinámicas ruwayta atikun huk aswan pisi huñusqa ruwanapaq parámetros kaqwan, chaymanta lluqsiy willañiqikunap sayayninwan. Kayqa servidorwan llamk'aspa chayakun, chaypi UI wakichiyku, chaymanta API kaqnintakama clientemanlla t'inkiyku.

¿Imaynatataq kayqa código nisqapi llamkan?

Huk ejemplo hina huk huch'uy correo electrónico registro formulariota hap'isunchis, maypichus huk yaykuylla kanqa chaymanta huk botón kanqa:

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

Chay código nisqapa rurunmi:

Bastante pisi runasimikuna kay formulariopi gastakurqanku, kunantaq sichus yuyaykusunman Vue hina marcokunapi kaqllata ruwananchista, chaymanta piniata servidorwan kuska tinkinanchis kanqa, huk huñu componentekunata ruwananchis kanman hinaspa kay hap’inman achka discopi espacioyuq.

Servidor-ladopi Enfoquepa Importancian

Kunanqa yuyaykuy huk sitio chunka chunka p'anqakunayuq kasqaykupi chaymanta huk qutu formulariokunayuq, botonesniyuq, carruselkunayuq, menúkunayuq, submenúkunayuq chaymanta tukuy imayuq. Kayhina kaqpi, huk hatun yupay willakuykunata chaymanta módulos kaqmanta jap'iyku, mayqinkunachus qhipaman tukukuy ruwaqwan ruwasqa laya kaqpi kargasqa kanqa. Kayqa achka chunka segundosniyuq kanman, chaymanta sichus huk runa chay sitiota ñawpaq kutita watukun, chaymanta chansa sitio wichq'anapaq hatun kanqa.

Chayhina, tikrayqa urmaykunman chaymanta rantiqpa ruwasqan embudo rantiq mana allinchu kanman kayraykulla. Chayrayku, kay ruwayqa chiqamanta yanapayta atin, imaraykuchus p'anqakuna aswan utqaylla cargayta atinqa (imaraykuchus tukuy UI servidorpi kachkan), chaymanta cliente kaqpi ruwaq kikinta rikunqa mayqinchus ruwasqa kanman karqa marco kaqpi.

Hukkunawan tupachisqa módulo nisqapa allinninkuna:

Ñawpaqta, sichus HTMX hap'iyku, chaymanta kaypi sut'imanta vale señalayta chay módulo llamk'an fetch kaqpi chaymanta tukuyninpi ruwasqa kachkan. Chayqa, huk mañakuyta munasqaykiman hina, maymanpas apachiyta atinki chaymanta DOM nisqapi munasqaykiman hina achka nodukunata ruwayta atinki. alpine.js kaqwan tupachisqa, dinámica ruwayta atikunki, ichaqa sirwiqwan tinkisqa, mayqinchus mana yapasqa módulos proyectoykipi churayta atikunkichu.

Sapa willañiqikunawanpas llamk'ayta atinki .hmpl mast'ariywan, ichataq kunankama webpack kaqllapaq.

Asllatapas chay ruwasqakunamanta, wiñariymanta ima

Suyachkani chay proyectopi interesakunaykichikpaq. Allinmi kanman chaymanta rimasqaykita yachayqa comentarios nisqapi. Unay pachata hap'irqan chaypi llamk'anapaq, huk q'uñi web kiti, waqaychasqa chaymanta aswan achka ruwasqa karqan. ¡Ojala, mana ancha sasachakuychu qampaq kaptinqa, chay proyectopa wiñayninpi participanaykipaq! Sapa semanan kallpachakuni kichasqa revistakunata horqonaypaq, chaypin yanapayta necesitasaq. Kuska llamk'ayqa q'uñi kanman :). Hinallataq, chayraq qallarisqaymanta, mana achka quyllurkuna GitHub kaqpi kanchu chaymanta q'uñi kanman sichus proyecto gustasunki, chaymanta huk quyllurwan chaninchanki. Riqsikuyki!