Chishandiso Chitsva Anovimbisa Kukurumidza Mawebhusaiti ane Yakakwenenzverwa Server-Rendered UI

Mhoroi mose! Muchikamu chino ndinoda kukuudza nezvekutanga kwepurojekiti, iyo yandinofunga kuti inogona kukufarira. Basa rekodhi rakaitwa kwenguva yakareba, ndakagamuchirawo rubatsiro kubva kune vanopa, asi ikozvino ndinofunga kuti yakagadzirira shanduro yekugadzira.

Zvakanaka, zvingave zvinonakidza chaizvo kuratidza chirongwa chinonzi HMPL . Idiki template mutauro wekuratidza UI kubva kune server kuenda kune mutengi. Izvo zvinoenderana nezvikumbiro zvinogoneka zvinotumirwa kuseva kuburikidza nekutora uye kugadziriswa kuita yakagadzirira-yakagadzirwa HTML.

Kutaura zvazviri, zvakanaka chaizvo seimwe nzira kune ma modules akaita se htmx uye alpine.js , nokuti inokubvumira kuti ugadzire nzvimbo dzekushandura dzine simba shoma rekugadzirisa zvigadziriswe, pamwe chete nehukuru hwemafaira ekubuda. Izvi zvinowanikwa nekushanda nevhavha, patinogadzira UI ipapo, uye tinongoendesa kune mutengi kuburikidza neAPI.

Izvi zvinoshanda sei mukodhi?

Ngatitorei semuenzaniso fomu diki rekunyoresa email, uko kuchangove nekupinza uye bhatani:

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

Mhedzisiro yekodhi:

Mazhinji mavara akashandiswa pane iyi fomu, uye zvino kana tikafungidzira kuti isu taizoita chinhu chimwe chete pazvimiro seVue, saka isu taizofanira kubatanidza pinia pamwe nesevha, kugadzira boka rezvikamu uye izvi zvaizotora. yakawanda disk nzvimbo.

Kukosha kweServer-side Approach

Zvino fungidzira kuti isu tine saiti ine akawanda emapeji uye boka remafomu, mabhatani, carousels, menyu, submenus uye zvese. Muchiitiko ichi, tinowana nhamba huru yemafaira nemamodule, ayo anozopedzisira atakurwa nemushandisi wekupedzisira mune yakavakirwa vhezheni. Izvi zvinogona kugara kwemasekonzi gumi nemaviri, uye kana munhu akashanyira saiti kekutanga, ipapo mukana wekuvhara saiti uchave wakakwira.

Nokudaro, kutendeuka kunogona kuwira uye kutengesa kwekutengesa kwakagadzirwa nemutengesi kunogona kusashanda nekuda kweizvi. Naizvozvo, iyi purojekiti inogona kubatsira chaizvo, nekuti mapeji anozokwanisa kurodha nekukurumidza (nekuti UI yese iri paseva), uye pamutengi mushandisi achaona chinhu chimwe chete chingave chaitwa pahurongwa.

Zvakanakira zvemodule zvichienzaniswa nevamwe:

Chekutanga pane zvese, kana tikatora HTMX, saka pano hongu zvakakodzera kuratidza kuti module inoshanda pakutora uye yakanyatso gadziridzwa. Ndokunge, iwe unogona kutumira chikumbiro sezvaunoda, chero kupi uye kugadzira akawanda nodes muDOM sezvaunoda. Kuenzaniswa nealpine.js, unogona kugadzira dynamics, asi pamwe chete nevhavha, iyo ichakubvumira kuti usaisa mamwe ma modules muprojekti yako.

Unogonawo kushanda nemafaira ega ega ne .hmpl extension, asi parizvino chete pawebpack.

Zvishoma nezve mhedzisiro uye budiriro

Ndinovimba urikufarira chirongwa. Zvingava zvakanaka kuziva maonero ako pamusoro pazvo mumashoko. Zvakatora nguva yakareba kushanda pairi, webhusaiti inotonhorera, repository uye zvimwe zvakawanda zvakavakwa. Ndinovimba kuti kana isiri dambudziko rakawandisa kwauri, unogona kutora chikamu mukuvandudza chirongwa! Vhiki rega rega ndinoedza kuburitsa nyaya dzakavhurika kwandingade rubatsiro. Zvingava zvakanaka kushanda pamwe chete :). Zvakare, kubvira ndichangotanga, hapana nyeredzi zhinji paGitHub uye zvingave zvakanaka kana iwe wakafarira chirongwa, kuti ugochiyeresa nenyeredzi. Ndatenda!