Machaq Herramienta ukax juk’amp jank’ak sitios web ukanakaruw arsuwayi, ukax UI Servidor-Rendered agilizar ukampiw lurasi

¡Taqiniruw aruntt'apxsma! Aka qillqatanx proyecto qalltawip yatiyañ munapxsma, ukax jumatakix wali askïspawa sasaw amuyta. Código ukan irnaqawipax jaya pachaw lurasiwayi, nayax yanapt’asirinakat yanapt’a katuqaraktwa, ukampis jichhax versión de producción ukatakix wakicht’ataw sasaw amuyta.

Sumakiwa, chiqans chiqpachans mä proyecto uñacht’ayañax wali askïspawa HMPL . Mä jisk’a plantilla aru UI uñacht’ayañataki servidor ukhat cliente ukar. Ukax servidor ukar fetch tuqi apayat mayiwinak personalizable ukarjam luratawa ukatx HTML wakicht’at ukar luratawa.

Chiqansa, chiqpachansa wali askiwa mä alternativa ukhama módulos ukanakaru htmx ukhamaraki alpine.js ukanakaru , kunatixa interfaces dinámicas ukanaka lurañatakixa mä jisk’a conjunto de parámetros configurables ukanakampi, ukhamaraki salida archivonakan jach’atapampi. Ukax servidor ukamp irnaqasaw phuqhasi, kunawsatix UI ukan wakicht’ktan ukhaxa, ukatx API tuqikiw cliente ukarux apayapxtanxa.

¿Kunjamsa akax código ukan irnaqaski?

Mä uñacht’äwix mä jisk’a formulario de registro de correo electrónico ukar apsuñäni, ukanx mä entrada ukat mä botón ukax utjani:

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

Ukax akham sañ muniwa:

Mä qawqha chimpunakax aka formulario ukanx apthapitaw, ukatx jichhax Vue ukham marcos ukanx pachpa lurañaw sasin amuyt’añäni ukhax pinia ukarux servidor ukamp chikt’ataw conectañasa, mä qutu componentes ukanakaw lurañasa ukat akax apthapispawa walja disco ukan chiqanakapa.

Servidor-side ukan uñakipañax wali wakiskiriwa

Jichhax amuyt’añäni, mä sitio ukanx tunka tunka pankanakaw utji ukat mä qutu formularios, botones, carrusels, menús, submenús ukat taqi kunaw utjistu. Ukhamäpanx mä jach’a jakhüwiw archivonaka ukat módulos ukanakax utji, ukax qhipharux tukuyir apnaqiriw lurat versión ukanx apkatasini. Ukax walja tunka segundos ukjaw utjaspa, ukatx maynitix nayrïr kuti uka chiqar visitt’ani ukhax uka chiqar jist’antañax wali ch’amawa.

Ukhamatwa, turkakipäwix jaqukipaspa ukat aljirix lurat embudo de ventas ukax uka laykukix jan askïspawa. Ukatwa, aka proyectox chiqpachapuniw yanapt’aspa, kunatix pankanakax juk’amp jank’akiw apkatasispa (kunatix taqpach UI ukax servidor ukankiwa), ukatx cliente ukanx apnaqirix pachpa uñjani kunatix marco ukan lurasispäna.

Mayninakamp chikachasiñatakix módulo ukax kuna askinakas utji:

Nayraqatax HTMX ukx apsuñäni ukhax akanx chiqans uñacht’ayañax wakisiwa, uka módulo ukax fetch ukan irnaqaski ukatx taqpach personalizado ukhamawa. Mä arunxa, mä mayiwix kunjamtix munkta ukhamarjamaw apayanisma, kawkhans ukat DOM ukanx walja nodos ukanakaw lurasispa. alpine.js ukar uñtasitxa, dinámicas ukanakaw lurasispa, ukampis servidor ukamp chikt’ata, ukax proyecto ukan jan yaqha módulos ukanakamp chikancht’asiñapatakiw yanapt’ätam.

Ukhamaraki sapa mayni qillqatanakampixa .hmpl extensión ukampiwa irnaqasma, ukampisa jichhaxa webpack ukatakikiwa.

Mä juk’a uñakipt’añatakix kunatix luraski ukat nayrar sartawi

Nayax suyt’twa jumanakax uka proyecto ukar munapxañamataki. Uka tuqit amuyunakam comentarios ukan yatiñax wali askïspawa. Ukan irnaqañatakix walja pachaw munasïna, mä suma sitio web, imañ uta ukat juk’ampinakaw lurasiwayi. ¡Jumatakix jan sinti jan walt’awinak utjkchi ukhax proyecto ukan nayrar sartawipanx chikancht’asipxasmawa sasaw suyt’askta! Sapa semanaw jist’arat revistanak uñt’ayañ yant’ta, kawkhantix yanapt’a munaskirista. Mäkiw irnaqañax wali askïspa :). Ukhamarakiw, kunatix jichhakiw qalltawayta, janiw walja warawaranakax GitHub ukan utjkiti ukat jumatix proyecto ukar munassta ukhax wali askïspawa, ukhamat mä warawaramp uñt’ayañataki. Pay suma!