Názory k článku HTMX: knihovna pro tvorbu stránek pomocí mírně rozšířeného HTML

o HTMX uz jsem videl nejake video a je pekny, jak se snazi proste web stranku (i tu dynamickou) deklarativne popsat. Takovej React, ale technologicky opacne :)

Svelte je tiež silne deklaratívny.

Díky za článek. O HTMX sice vím, ale ještě jsem se nedostal k tomu jej více ošahat. Jinak ještě sleduji projekt MAVO s podobnou ideou.

Osobně jsem ale u sebe (zatím) nepřekonal předpojatost, že se (větší?) projekty lépe udržují v javascriptu (rozkouskování na menší funkce/komponenty alá React JS). Také už docela dost nasazujeme Webové komponenty, což zase také „mění hru”.

jj to HTMX se hodi spis na mensi veci s par komponentama. Vetsi veci nevim, radeji se takovemu frontendu vyhybam :)

htmlx a jeho předchůdce intercooler.js jsem si docela oblíbil. Použíme pro generování reportů a dashoboardů, dříve se to dělalo jako xlst nad xml, dneska jich část máme v htmlx. Výhoda je statická validace, snadné vykreslování a možná interaktivita.

Docela dobře to jde integrovat s elasticem nebo grafanou a dělat automatické status stránky pro aplikace/servery s vnořenými grafy.

Nevýhoda je vlastní syntaxe a tím nepodpora vyhledávačů a crawlerů, dělat v tom tedy běžný web se moc nedá, dělat v tom ale administrace či jiné věci může dávat smysl, tam jsou ale k dispozici daleko pokročilejší frameworky.

Co se týče nepodpory vyhledávačů etc, v čem se to liší oproti SPA?

Naopak si dovedu dobře představit, že když přijde js request, tak se vrátí fragment, když přijde normální click, tak to vrátí novou stránku. Mě to přijde elegantní a přímočaré.

Ale reaguji na základě zběžného seznámení. Třeba je tam nějaká past, která mi uniká.

tak na SPA s minifikovanym a obfuskovanym kodem si samozrejme vyhledavace a crawlery vylamou zuby (a to vetsinou nevadi, jen at si indexuji front page, ktera by naopak mela byt staticka)

ale jak crawler pozná, že má klikat na elementy, které mají nějaký atribut hx-*? Musí spustit JS a proklikat si vše, nepozná ani adresu, kam odkaz směřuje, což je běžný způsob podle čeho se vytváří plan tree pro crawler. Je to pro ně neviditelné.

Ano, i u SPA to je problém, ale občas to nějak řešit jde, tohle je ale o dost jednodušší než jaké se dělají SPA a řešitelný to za mě není.

Crawler nic klikat nemusí, když mu podstrčíš sitemap. Ono taky některý weby jsou tak obsáhlý, že by se v nich po chvíli ztratil - a i když se k němu bude opakovaně vracet, tak ho nikdy nebude schopen projít. Mimochodem crawlery spouští JS, v tom problém není.

tak si to vyzkoušej :).

Ano, sitemapa pomůže, ale pak ti budou chybět interní prolinky mezi stránkami, což je opět obrovský problém, v sitemapě prolinky a vazby neuděláš.

No, spouští JS, jak se to vezme. Google je asi nejdál, ale spíše než spouští, tak snaží se ho interpretovat a umí jen subset, však to mají popsané https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics a není to krátký návod. Ostatní vyhledávače tak daleko nejsou, bing, seznam jsou v háji, nejde jen o vyhledávače, ale třeba dneska jsou populární různé služby pro analýzu zpětných odkazů, kontrolu správnosti webu a linků, ty také selhávají.

Htmlx není pro SEO určený, nejspíš se to tam dá nějak dodělat, ale tím přicházíš o hlavní výhody htmlx a je pak asi lepší jít do frameworku, který tu podporu má už sám.

Neco podobnyho uz dela v js knihovne jQuery $.get(), pripadne taky fetch API a je to jen o trosicku slozitejsi na pouziti (nasledna prace s DOM). Je teda pravda, ze je tam trocha programovani v js, kdezto tady jsou pridany nove atributy do html...

To dnes ešte niekto používa jQuery? A prečo by som používal $.get(), keď existuje fetch()???

Pouziva, stale su poziadavky na webove rozhrania, ktore budu plne funkcne aj pri zakazanom javascripte, s tym ze bez js sa ozelie vedlajsia funcionalita ako naseptavace a pod.

právě, tím, že je to vlastně "součást HTML" je to zaprvé průchozí pro víc lidí a zadruhé si tvůrci HTMX myslí (a já souhlasím), že do HTML doplňují něco, co tam mělo být od začátku. Přece i normální [a href] nebo [img] nikdo netahá přes JS, ale je to přímo součást hypertextu*.

* no vlastně některý frameworky to takto tahají všechno a skládají si i "statickou" stránku programově. co na to říct...

Diky za odpoved, neco na tom je. Je to fakt jednodussi. Planuju to vyzkouset.

rozdíl v imperativním vs deklarativním stylu. Výslednou stránku v htmlx mohu snadno přes xsd zvalidovat, že neobsahuje syntax chyby, že má potřebné elementy, tj. základní validace při generování. Naproti tomu kód v jQuery $.get() nejsem schopný vůbec snadno validovat, musím ho spustit a výsledek nějak porovnávat, v tom je pak v praxi obrovský rozdíl.

To s sebou nese i další výhody pro práci v týmu, htmlx má vlastní dokumentaci a slovník, je jasně určen způsob jak co dělat, znalosti jsou lépe přenositelné, naproti tomu s jQuery $.get() musím vytvářet nějaká vlastní pravidla jak má kód vypadat, zaučovat to, vysvětlovat to, prostě práce navíc. Když jsi sám, je to jedno, když máš tým, který se občas mění, je to velká nevýhoda.

Nie je jednoduchsie proste za pomoci jquery zavesit event handler na prislusny element napr. $('button[hx-post]').trigger(­...) a potrebne udaje z relevantnych aributov ziskat zase cez jquery? Bude to stale deklarativne, validovatelne proti scheme a bez mnozstva zbytocneho kodu ktory sa nepouzije. JQuery je modularne, mozete si buildnut custom verziu, kde nepotrebne moduly vynechate...

> Bude to stale deklarativne, validovatelne proti scheme
Že tě huba nebolí.

Já mám jQuery rád, a rád si zaprasím. Ale takhle prášit, to bych nemohl.

Co to melies?

krom include par js suborov v html kode nemusi byt ani ciarka JS kodu. To je vdaka selektorom normalna vlastnost JQuery. To ze v prikladoch v dokumentacii je spolu s HTML, nie je podmienka, je to len nazornejsie pre pomalsie chapajucich. Tolko k deklarativnosti.

pre validaciu html rozsireneho sa pouzije vlastna schema, ta tam bude musiet byt aj v pripade HTMX. Pripadne je mozne pouzit pre atribut prefix "data-<my attr name>" to je validne v standartnej scheme.

to zaveseni handleru, jak jsi psal ($('button[hx-post]').trigger(­...)) mi tedy pripadne jako radna javascriptovina. Ale mozna jsi to myslel jinak.

Mas pocit ze HTMX nejako modifikuje chovanie prehliadaca, alebo si tiez vesia handlery na konkretne udalosti elementov? Ty asi memas moc tusenie o com sa tu bavime a o com je ten clanok...

Tady se výjimečně musím dw zastat - HTML bude vypadat úplně stejně, jen místo jednoho script tagu s htmlx budou dva (jeden jquery a jeden s custom skriptem) a u tagů ubudou hx- atributy (místo nich to tan navěsí a bude handlovat ten custom skript).

Teda co se týče deklarativnosti a validovatelnosti. Že je to jednodušší bych se tvrdit neodvážil...

Je to validovatelne? (tedy tady to asi nevadi, malokdo si asi validuje HTMLka vuci spravne scheme :)

Ano je, ale proti custom scheme, rovnako ako HTMX. Alebo v pripade ze bude v nazv atributu prefix "data-" tak aj proti standartnej scheme.

To zalezi na tom aka jednoducha bude aplikacia. V pripade jquery a vlastnej extension (ktoru sice lopata nenapise) bude HTML jednoduchsie, pretoze chovanie specificke pre aplikaciu popisem v extension a chovanie specificke pre element bude popisane v atributoch elementu. Naproti tomu v pripade HTMX bude treba v elementoch deklarovat aj chovanie specificke pre aplikaciu, spolu s chovanim specifickym pre elementy...

No, takováhle je obvyklá praxe. Rozdělíš si aplikaci na deklarativní "počůrávání kódu", a pak to počůrávání oživuješ pomocí javascriptu. To je skvělá a známá věc o tom žádná. Ale HTMX jde dál. Tam jsou předem známé značky, a ty žádný javascript nemusíš psát. Což znamená, že ta validace má mnohem větší váhu, než nějaký vlastní řešení, který si kolega junior zpatlal.

Preveze nie, XSD a extension pre jquery napise senior, ktory bude mat na starosti zrejme aj backend. Tym patlal koder dostane do ruky sadu, ktora sa bude chovat presne definovanym sposobom.

Naproti tomu v pripade HTMX dostane nastroj, ktorym bude ohybat HTML elementy, bez toho aby vobec tusil co pacha.

Vyhoda HTMX je jedina, umoznuje aby lopaty, ktore nedokazu definovat XSD ani pisat slusny javascript, nadalej vyzerali ako seniori, i ked si svoju poziciu neyasluzili svojimi vedomostami ale len tym ze prasili 3 roky kod.

Udělal jsem si podle prikladu jednoduchou stranku

<html>
<head>
<meta charset="utf-8">
<title>
HTMX - elementary example
</title>
<script type="text/javascript" src="js/htmx.min.js">
</script>
<link rel="icon" type="image/x-icon" href="/HTMX/favicon.ico">
</head>
<body>

<button hx-post="cgi-bin/answer"
    hx-trigger="click"
    hx-target="#answer-div"
>
    Retrieve answer!
</button>

<div id="answer-div">
    Tady by se měl načíst seznam souborů
</div>

</body>
</html>

ale pri zmacknuti tlacitka se nic nedeje, stranka (podle wiresharku) neodesle na server zadny request. V developer konzoli F12 mi to ukazuje chybu:

Uncaught SyntaxError: expected expression, got '<'

co muze by spatne?

Me to funguje, devel konzole je prazdna (resp. si stezuje na neexistujici doctype, ale to tady neni problem).

Tu cestu k js to najde dobre? Mate me to, ze favicon ctes z absolutni cesty, JS z relativni

Este k tym HTML metodam. Problem nie je ich absencia.

Daleko vacsi problem je ze sa casto nespravne pouziju. Prilis casto vidim kod typu <a href="/article/de­lete?id=12345"­>Zmazat</a>. Ak na to pustite crawler ktory ma nejaky JS na haku a HTMX atribut ze ide o post duplom, tak zacne riadna komedia. Toto je bohuzial dost caste aj v kode od cloveka ktory sa oznacuje ako senior.

27. 11. 2022, 17:02 editováno autorem komentáře

jakoze problem je v tom, ze HTML krome <form> nepodporuje metodu DELETE?

Vy skutocne nemate ani len tusenie o co go... Anchor ma standartnu metodu GET, ktory nesmie modifikovat udaje na servri, k tomu je urceny POST (DELETE, PUSH, etc...) ktory si preto crawlery nevsimaju. Pre posielanie dat na server, ktore nejakym sposobom menia stav na servri je urceny form, ktory ma metodu post, ktora je dostatujuca.

ja vim, proto se ptam, jestli ten problem vidite v pouziti hrefu nebo toho, ze semantika je zapsana do URI (a nepouziva se tedy spravne HTTP metoda)

ale diky za odhaleni, ze netusim, diskuze tim dostala zcela novou uroven

Ak to viete, tak vasa otazka nejako postrada zmysel, malo vam to byt jasne z postu ktorym toto vlakno zacinalo. Ibaze by ste chcel prudit, ale kedze mam dnes dobru naladu a chcem verit v dobre umysli ludi, tak budem predpokladat ze nie ste trol ale len jednoduchsi jedinec...

28. 11. 2022, 15:08 editováno autorem komentáře