Xitirhisiwa Lexintshwa Xi Tshembisa Tiwebsite To Hatlisa Hi UI Leyi Olovisiweke Hi Sevha

Miri yini hinkwenu! Eka xihloko lexi ndzi lava ku mi byela hi ku sungula ka phurojeke, leswi ndzi ehleketaka leswaku swi nga ha mi tsakisa. Ntirho wa khodi wu endliwile nkarhi wo leha, ndzi tlhele ndzi kuma mpfuneto eka vahoxi va xandla, kambe sweswi ndzi ehleketa leswaku wu lunghekele vuhundzuluxeri bya vuhumelerisi.

Okay, kahle kahle swi nga tsakisa swinene ku kombisa project leyi vuriwaka HMPL . I ririmi ra xifaniso lexitsongo xo kombisa UI ku suka eka sevha ku ya eka xitirhisiwa. Yi sekeriwe eka swikombelo leswi nga cinciwaka leswi rhumeriweke eka sevha hi ku tirhisa fetch naswona swi phurosesiwa eka HTML leyi lunghekeleke.

Entiyisweni, i swinene hakunene tanihi ndlela yin’wana eka mimojula yo fana na htmx na alpine.js , hikuva yi ku pfumelela ku tumbuluxa swihlanganisi leswi cinca-cincaka leswi nga na sete ya le hansi ya tipharamitha leti nga lulamisiwaka, xikan’we na vukulu bya tifayela ta vuhumelerisi. Leswi swi fikeleriwa hi ku tirha na sevha, loko hi lunghiselela UI kwalaho, naswona hi yi hundzisela ntsena eka xitirhisiwa hi ku tirhisa API.

Xana leswi swi tirha njhani eka khodi?

A hi tekeni tanihi xikombiso fomo leyitsongo yo tsarisa imeyili, laha ku nga ta va na ntsena ku nghenisa na buti:

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

Vuyelo bya khodi leyi:

Swimunhuhatwa swi nga ri swingani swinene swi tirhisiwile eka fomo leyi, naswona sweswi loko hi ehleketa leswaku hi ta endla leswi fanaka eka swivumbeko swo fana na Vue, kutani hi ta boheka ku hlanganisa pinia hi ku tirhisana na sevha, hi tumbuluxa ntlhambi wa swiphemu naswona leswi swi ta teka ndhawu yo tala ya disk.

Nkoka wa Ndlela ya le tlhelo ra Sevha

Sweswi anakanya leswaku hi na sayiti leyi nga na matluka yo tala na ntlhambi wa tifomo, swikomba-nkarhi, ti-carousel, timenyu, timenyu letitsongo na hinkwaswo. Eka xiyimo lexi, hi kuma nhlayo leyikulu ya tifayela na mimojula, leswi eku heteleleni swi nga ta layicha hi mutirhisi wo hetelela eka vuhundzuluxeri lebyi akiweke. Leswi swi nga teka tisekoni to hlayanyana, naswona loko munhu a endzela sayiti ro sungula, kutani nkarhi wo pfala sayiti wu ta va wu ri ehenhla.

Xisweswo, ku hundzuka ku nga ha wa naswona funnel yo xavisa leyi muxavisi a yi akeke yi nga ha va yi nga tirhi ntsena hikwalaho ka leswi. Hikwalaho, phurojeke leyi yi nga pfuna hakunene, hikuva matluka ya ta kota ku layicha hi ku hatlisa swinene (hikuva UI hinkwayo yi le ka sevha), naswona eka xilayenti mutirhisi u ta vona nchumu lowu fanaka lowu a wu ta va wu endliwile eka rimba.

Swipfuno swa modyuli loko yi pimanisiwa na swin’wana:

Xo sungula, loko hi teka HTMX, kutani laha hakunene swi fanerile ku kombisa leswaku modula yi tirha eka fetch naswona yi endleriwe hi ku helela. Hi leswaku, u nga rhumela xikombelo hilaha u lavaka hakona, kun’wana na kun’wana ivi u tumbuluxa ti-node to tala eka DOM hilaha u lavaka hakona. Loko u pimanisiwa na alpine.js, u nga tumbuluxa dynamics, kambe hi ku fambisana na sevha, leswi nga ta ku pfumelela ku nga katsi mimojula yo engetela eka phurojeke ya wena.

U nga ha tlhela u tirha na tifayela ha yin’we-yin’we hi xiengetelo xa .hmpl, kambe sweswi ntsena eka webpack.

Swintsongo hi mbuyelo na nhluvukiso

Ndza tshemba leswaku wa tsakela ntirho lowu. Swi nga va swinene ku tiva mavonelo ya wena hi swona eka ti comments. Swi teke nkarhi wo leha ku tirha eka yona, ku akiwile webusayiti yo kufumela, vuhlayiselo na swin’wana swo tala. Ndza tshemba leswaku loko ku nga ri xiphiqo lexikulu eka wena, u nga hlanganyela eku hluvukiseni ka phurojeke! Vhiki rin’wana ni rin’wana ndzi ringeta ku kandziyisa minkandziyiso leyi pfulekeke laha a ndzi ta lava mpfuno. Swi nga va swinene ku tirha swin'we :). Nakambe, tani hi leswi ndzi nga sungula, a ku na tinyeleti to tala eka GitHub naswona swi nga va swinene loko u tsakela phurojeke, leswaku u ta yi pima hi nyeleti. Inkomu!