- Parema jõudluse ja voogedastusvõimaluste saavutamiseks migreeriti XMLHttpRequestilt natiivsele fetch() API-le.
- Üleminek selgesõnalise atribuutide pärimise ja standardiseeritud sündmuste nimetamise konventsiooni suunas.
- Morph-vahetuste ja hx-partial sildi tutvustus keerukate DOM-i värskenduste jaoks.
- Ajaloo haldamise kapitaalremont, asendades kohalikud hetktõmmised reaalsete serveripäringutega.
Kui oled veebiarenduse maailmas juba mõnda aega ringi jälginud, siis ilmselt tead, et htmx on sisuliselt HTML-i võlutrikk. See võimaldab teha asju, mis tavaliselt nõuavad tohutut JavaScripti raamistikku – näiteks lehe värskendamist ilma täieliku uuesti laadimiseta –, lisades vaid siltidele mõned atribuudid. htmx 4 väljalase on suur asi, sest see ei lisa lihtsalt mõnda kella ja vilet, vaid see sisuliselt ümber programmeerib mootori, et muuta teie rakendused kiiremaks ja palju usaldusväärsemaks.
Põhifilosoofia jääb samaks: hoida loogika serveris ja kasutada rakenduse oleku mootorina (HATEOAS) hüperteksti . JSON-i edasi-tagasi vahetamise asemel küsib htmx 4 serverilt HTML-fragmente ja lisab need otse DOM-i. See on värske õhu hingus kõigile, kes on väsinud tänapäevaste esiotsa tööriistade keerukusest, keskendudes käitumise lokaalsusele , et saaksite HTML-i vaadates tegelikult aru, mida teie kood teeb.
Suur toomine
Kõige olulisem sisemine muudatus on see, et htmx on lõpuks XMLHttpRequestist loobunud ja selle asemel kasutanud natiivset fetch() API-t . Kuigi see võib tunduda igava ja pealiskaudse detailina, on see tegelikult mängu muutja. Fetchi kasutamine muudab teeki lihtsamaks ja avab ukse täiustatud HTML-i voogedastusele . See aga tähendab, et XHR-spetsiifilised sündmused on kadunud ja märkate, et päringute ajalõpud on nüüd vaikimisi 60 sekundit, mitte lõputult rippumas.
Pärimisharjumuse murdmine
Üks suurimaid takistusi versioonilt 2 versioonile 4 üleminekul on see, kuidas atribuudid edasi antakse alamelementidele. Varem oli pärimine kaudne – kui lisasite div-ile kinnitusdialoogi, sai iga selle sees olev nupp selle dialoogi. Nüüd peate olema selgesõnaline, lisades atribuudile modifikaatori :inherited . Näiteks hx-confirm:inherited kasutamine ütleb htmx-ile, et see käitumine peaks DOM-puus allapoole liikuma. See peatab tüütu „tegevuse kaugjuhtimise” tunde ja muudab kasutajaliidese silumise palju lihtsamaks.
Nutikamad vahetused ja mitme sihtimise funktsioon
Sisu vahetamine on htmx-i tõeline eelis ja versioon 4 tutvustab morfimisvahetusi (innerMorph ja outerMorph). Selle asemel, et lihtsalt leheosa välja rebida ja uus HTML sisse pritsida, kasutab morfimine muudatuste ühendamiseks idiomorfi algoritmi. See on päästerõngas sisendfookuse säilitamiseks või video esitamise jätkamiseks, samal ajal kui ülejäänud sisu uueneb. Lisaks võimaldab uus <hx-partial> silt ühel serverivastusel värskendada lehe mitut erinevat osa, andes teile rohkem kontrolli kui vanad ribavälised (OOB) vahetused.
Vigade ja ajaloo käsitlemine
Varasemates versioonides ignoreeris htmx sageli 400 või 500 veavastust. Enam mitte. htmx 4 vahetab veavastused vaikimisi välja , mis on suurepärane serveripoolsete valideerimisvigade kuvamiseks. Selle haldamiseks saate kasutada atribuuti hx-status, et suunata konkreetsed koodid (näiteks 422) spetsiaalsesse veadiv-i. Ajaloo osas on teek lõpetanud DOM-hetktõmmiste tegemise localStorage'i. Nüüd, kui kasutaja vajutab tagasi-nuppu, laadib htmx lehe lihtsalt serverist uuesti , tagades, et olek on alati värske ja mitte eelmise seansi aegunud kummitus.
Sündmused, laiendused ja skriptimine
Sündmuste süsteem on täielikult puhastatud, et see järgiks mustrit htmx:phase:action . See järjepidevus muudab päringu elutsükliga ühendamise palju lihtsamaks. Laienduste osas on meil nüüd esmaklassiline tugi SSE-le (Server-Sent Events), WebSocketsile ja mitmeosalistele/segatud vastustele , mis muudab reaalajas armatuurlaudade loomise imelihtsaks. Neile, kes vajavad kliendipoolset reageerimisvõimet, pakub hx-live DOM-põhist skriptimislahendust, mis tundub nagu Alpine.js ja jQuery segu, võimaldades teil elemente manipuleerida lihtsa q() selektoriga.
Installi- ja uuendamistee
Kui alustate uut projekti, hankige lihtsalt uusim versioon 4 CDN-i või NPM-i kaudu. Olemasolevate rakenduste jaoks on meeskond pakkunud käsurea uuendamise tööriista (npx-i kaudu), mis skannib teie malle aegunud atribuutide ja vanade sündmuste nimede suhtes. Kui te pole täielikuks hüppeks valmis, saab htmx-2-compat laiendus ajutiselt vanad käitumisviisid taastada. Tasub märkida, et versioon 2 jääb toetatuks ja jääb NPM-is sildiks „uusim“ kuni 2027. aasta alguseni, et vältida miljonite saitide kogemata rikkimist, mis kasutavad versioonimata CDN-linke.
Turvalisus ja parimad tavad
Kuna htmx võimaldab HTML-i otse sisestada, on kasutajasisu varjamine XSS-rünnakute vältimiseks vältimatu. Atribuut hx-ignore on siin suurepärane tööriist; see käsib htmx-il konkreetse konteineri sees olevate atribuutide töötlemise täielikult vahele jätta, mis sobib ideaalselt kasutaja loodud toorsisu turvaliseks renderdamiseks. Kõrge turvalisusega keskkondade puhul aitab hx-csp laiendus integreeruda rangete sisuturbepoliitikatega, hallates nonse ja piirates päringute saatmise kohta.
See htmx-i areng muudab teegi nutikast utiliidist pikaajaliste veebiteenuste tugevaks aluseks. Omaks võttes fetch API, selgitades atribuutide pärimise viisi ning tutvustades keerukaid morfimis- ja osalisi värskendusi, kõrvaldab see serveri ja brauseri vahelise hõõrdumise. Olenemata sellest, kas ehitate lihtsat CRUD-rakendust või keerukat reaalajas liidest, muudab lihtsustatud sündmuste süsteemi ja võimsate voogedastuslaiendite kombinatsioon dünaamiliste kogemuste loomise lihtsamaks kui kunagi varem, ilma et peaksite loobuma HTML-i mugavusest.
