Moderný frontend - ako na to?

[unixuser]

Moja otázka bude skôr filozofická... ale možno z istej miery aj praktická 
Štve ma JS ekosystém a celý moderný frontend. Zamýšľam sa či sa oplatí písať frontend vo vanilla JS, čo myslíte? A namiesto vue, react použiť napr. HTMX alebo inú lightweight libku. Veľké firmy určujú trend v písaní moderného frontendu ale príde mi to čoraz zložité až zložitejšie. Komu tento stav vyhovuje? Kedysi sa používalo jQuery aj na veľké projekty a život bol oveľa jednoduchší. Som zvedavý aký máte názor vy na túto tému. Ďakujem.

[Reklama]

[Kit]

Frontend se píše hlavně v HTML. Stylování a pozicování v CSS. I s touto kombinací se dá udělat hezký web. Pokud to chceš oživit, můžeš přidat vanilla Javascript. Pokud chceš interaktivně komunikovat se serverem, můžeš přidat AJAX, který se s jQuery dělá o něco pohodlněji. Možná ještě nějaká specifická knihovna k tomu, ale víc už většina tvůrců nepotřebuje. Frameworky se hodí k tomu, abys to měl rychle hotové a poslal to klientovi.

[hknmtt]

SSR je primitivny sposob servirovania webstranok z roku 2000. Servirovat serverom staticke html je proste archaicke.  Dnesny web je velmi dynamicky a preto je JS naprosta nutnost. Preto su SPA dnes najlepsi format kedy backend serviruje iba JSON cez API vrstvu a ziaden archaicky REST(ktory aj tak nikto v reale nepouziva spravne) a co navyse umoznuje pouzit rovnaky backend pre dalsie frontendy, ako mobilna aplikacia napriklad. Frontend teda riesi cisto len dynamicke renderovanie dat z backendu. Dnes su moderne pc a mobily dostatocne vykonne a internet dostatocne rychly, aby mohol klient zase splnat narocnejsiu funkciu nez kedysi. Stazovat si na komplexitu dnes nema vyznam, web sa proste pohol dopredu a clovek sa musi prisposobit. Nikto nikomu nebrani pouzivat staticke html ale proste je to ako sa premavat po meste na koni. JS sa da trochu obmedzit, kedze CSS dnes je silnejsie a umoznuje rozne animacie a kondicne selektory, ktore suploval JS, v pripade nutnosti.

[Standa Blábol]

A co je, probuh, na Vue3 sloziteho?
Prumernemu gibbonovi na pochopení staci dopoledne a Vetur plugin ve VSCode si vsecko pohlida.
Vue ma jediny problem a to zastarale turorialy roztahane po webu.
Staci se ucit z oficialnich zdrouju, tedy script-setup a s typescriptem, k tomu router a pinia, opet trivialni, a mam luxusni komponentove orientovany nastroj.

Navic pro to existuje hromada hotovych komponent, treba PrimeVue.

Chapu, ze nekdo neni nadseny z Reactu, protoze to splacali matlaci, ale VUE navrhoval clovek s Computer science backgroundem a je to videt

[Ondrej Nemecek]

Můj osobní názor: Pro weby, které nemají charakter aplikace (=dokumentově orientovaný web), je ideální dobře ostylované čisté HTML, může být krásně responsivní, mít i různé CSS efekty, animace, pokud se bez nich neobejdeme. Nedivil bych se, pokud bychom se dočkali renesance, s trochou nadsázky ve smyslu https://justfuckingusehtml.com/cs-CZ Ať se celé html posílá ze serveru, může to být extrémně rychlé, extrémně dobře cachovatelné, strojově dobře zpracovatelné. Takový měl web původně být!

Pro weby, které mají charakter aplikace (=uživatel se naloguje a vidí data, která jsou unikátní s ohledem na provedené interakce), je podle mě ideální použít js framework typu Vue, Angular. Pak se webové aplikace programují podobně jako desktopové aplikace, data se tahají přes REST API a komponenty webového GUI v reálném čase zobrazuje data aktuálně obsažená v modelu. Stačí se naučit knihovnu widgetů a pak se programuje dost vysokoúrovňově, člověk neřeší implementační detaily, což by jako aplikační vývojář ani řešit neměl. Ideálně použije  Typescript. Čistý javascript má přínos právě v tom, že to je dnes už dobrý podvozek pod ty js frameworky a umí v základu vše, co dříve řešilo JQuery, které už je však dnes jednoznačně přežitek.

Nevýhoda js frameworků a celého JS světa byl překotný vývoj, použitý vývojový stack zastaral klidně během pár měsíců. To se ovšem zlepšilo, protože dnes už se z celého odvětví stal mainstream a konzervativní volba.

[Reklama]

[peete]

Je komicke za autor chce mit moderni frontend ale za kazdou cenu bez moderniho pristupu. V cistem HTML a pod udelate vsecko mozne, ale rozhodne to nebude "moderni". Resenim je uplne to cele predelat. Prohlizec nebyl urceny na zobrazovani aplikaci, takze je to vsecko spatne. To chce od nuly se nad tim zamyslet, ale to nikdo neudela, tak se to ruzne lepi novyma a novyma zaplatama. Typescript, do ktereho jsou vsichni tak strasne zamilovani nevim proc, je jenom zase takova dalsi zaplata v rade. A jeste jich spoustu prijde. Nakonec mit nejaky ten framework neni tak spatne, protoze je to takova high-level zaplata, ktera prekryje vsechny nesmysly pod tim, takze se da aspon trochu normalne pracovat.

[martyd420]

Spousta lidí má svůj js framework jako náboženství. Nevědí proč ho používají, nedokážou si zdůvodnit proč je technologicky zrovna tento framework vhodná volba zrovna pro tento projekt. Horší je, že někteří méně nadaní pak dokážou tvrdit, že s html nic neuděláš (prostě nevědí, že tím javascriptem generujou/manipulujou HTML a CSS) a že react je programovací jazyk. Dělají v reactu a neuvědomují si, že je to javascript. Spousta jich žije v bludu, že jsx není HTML. Takže vznikají zrůdnosti, které bez 5MB externě načítaných scriptů (bez integrity hashe samozřejmě) a náročnosti jako průběrná 10 let stará 3d střílečka nezvládnou ani vypsat hello world.
Pro drtivou většinu běžných webů je js fw typu vue/react naprostý nesmysl (zčásti i proto, že to ti lidi zmrví. Nefunguje navigace, mizí data z formulářů, po přihlášení nedokážou vrátit na původní místo, apod.)
S čistým HTML / CSS, někdy s pomocí HTMX udělám často "lepší" (rychlejší, spolehlivější, v prohlížeči plně funkční) aplikaci a to rychleji. A funguje to ve vyhledávačích, aniž by headless chrome musel sežrat kilowathodinu, aby to vůbec vyrenderoval.
Vue taky používám celkem často - je to pro mě jednoduchá cesta jak si v electronu, apod. splácat aplikaci do androidu. Že by to dávalo smysl na běžném webu, na to jsem zatím nenarazil.

https://justfuckingusehtml.com/cs-CZ

Tohle je dělo

[Ondrej Nemecek]

Přesně tak, geneze současného stavu vznikla tristním zneužitím html zobrazovadla k něčemu, k čemu rozhodně nebyl určen. Problémy jsou s tím dodnes. Ale na druhou stranu to doiterovalo do stavu, který je na všech GUI platformách skoro stejný a vypadá takto:

- nějaký značkovací jazyk, který popíše GUI
- nějaký stylovací mechanismus, kterým lze v GUI upravit vzhled
- mechanismus observerů, lisnererů a životního cyklu, kterými se na GUI navěsí...
- ...třídy, které poskytují data a aplikační funkčnost

JavaFX, QT, GTK Glade, XCode Interface Builder i webové frameworky to mají všechny +- stejně. A v těch webových frameworcích se dnes píšou i desktopové aplikace. Takže na druhou stranu si není moc na co stěžovat, ta architektura je docela dobrá.

[Ondrej Nemecek]

Spousta lidí má svůj js framework jako náboženství (...)  S čistým HTML / CSS, někdy s pomocí HTMX udělám často "lepší" (rychlejší, spolehlivější, v prohlížeči plně funkční) aplikaci a to rychleji (...) Vue taky používám celkem často - je to pro mě jednoduchá cesta jak si v electronu, apod. splácat aplikaci do androidu. Že by to dávalo smysl na běžném webu, na to jsem zatím nenarazil.

Proto jsem pomyslně rozdělil weby na dokumentové weby (= např. zpravodajský portál) a aplikační weby (= github).

[registrovany123]

Já jsem dělal 2 roky solo vývoj na backend software, který měl moderní a netriviální, intranetový frontend v reactu. Obsahoval asi 6 pages a 10 subpages, a myslím, že jsem to měl udělané celkem pěkně. Schválně jsem ani nepoužil store.

A po těch 2 letech jsem zjistil, že víceméně k podobnému výsledku bych se dobral s SSR, a vlastně možná i k lepšímu - kdybych na SSR měl specializaci, což já nemám, protože řada věcí se v tom dělá jinak, v poněkud jiném paradigmatu.

A přesto, příště bych opět pro vývoj pro zákanzíka použil React, a ten důvod je, že SSR už je poněkud... kontroverzní bych řekl, a navíc nemám jistotu, jestli zákazník nevymyslí nějakou kravinu, načež potom já budu za pitomce.

[registrovany123]

A teď dělám na svojem projektu, který by někdy, snad, mohl něco vydělávat, a protože se bojím, že by moje práce přišla v niveč, tak používám nejmodernější Next.js a k tomu Tailwind.

Načež prio. no 1 je Tailwind, ikdyž bych toho samého docílil s CSS - a proč. Protože nemůžu umět všechno, a v CSS mi přijde, že nacházím dost nekvalitní šablony. Přitom cokoliv jde v Tailwind, jde i v CSS.

Takže kdybyste někdo věděli, kolik tak stojí grafik a výstupy od grafika, tak bych klidně dal 10k za grafika, ať mi udělá pořádný design - a nemusím platit amerikánům 7500,- Kč za Tailwind. Ale bohužel grafika žádného neznám a nevím, kolik stojí a jak vypadají jejich výstupy - mám podezření, že by mě grafik přišel o dost dráž.

Jinak celkem "žeru" na forum.root.cz ten Heading - udivuje mě, jak jeden černý obdelníček a k tomu pěkně zvolený font a další věci, dokáže vypadat dobře. To je přesně to, co umí udělat grafik...

[Ondrej Nemecek]

A teď dělám na svojem projektu, který by někdy, snad, mohl něco vydělávat, a protože se bojím, že by moje práce přišla v niveč, tak používám nejmodernější Next.js a k tomu Tailwind.

Načež prio. no 1 je Tailwind, ikdyž bych toho samého docílil s CSS - a proč. Protože nemůžu umět všechno, a v CSS mi přijde, že nacházím dost nekvalitní šablony. Přitom cokoliv jde v Tailwind, jde i v CSS.

Takže kdybyste někdo věděli, kolik tak stojí grafik a výstupy od grafika, tak bych klidně dal 10k za grafika, ať mi udělá pořádný design - a nemusím platit amerikánům 7500,- Kč za Tailwind. Ale bohužel grafika žádného neznám a nevím, kolik stojí a jak vypadají jejich výstupy - mám podezření, že by mě grafik přišel o dost dráž.

Jinak celkem "žeru" na forum.root.cz ten Heading - udivuje mě, jak jeden černý obdelníček a k tomu pěkně zvolený font a další věci, dokáže vypadat dobře. To je přesně to, co umí udělat grafik...

Přesně od toho CSS frameworky jsou, aby zajistili s minimum práce a trochou poučenosti kvalitní výstup. Já bych grafika najímal leda na tvorbu vizuální identity - logo, font, barvy, ukázkové aplikace. Jinak bych najmul spíš CSS kodéra, který použije můj oblíbený CSS framework a pomůže mi v něm pracovat efektivně a který mě poučí o základních pravidlech UX/UI. Když bude kvalitní, tak se i dokáže přizpůsobit odvětví, pro které je aplikace určená - a nebude mi nutit něco, co nechci. Pak už bych si jako backend vývojář dokázat UI komponenty dělat sám, protože by mě od většiny nepříjemných implementačních detailů CSS framework odstínil. S tímto přístupem začal Bootstrap, ale dnes už budou asi i lepší alternativy. Zda se to bude renderovat na klientovi nebo na serveru je vedlejší, tam bych se rozhodoval podle požadavků na interaktivitu.

[m1sfit]

Zdějši komunitě se to pravděpodobně líbit nebude, ale stejného efektu jako Javascriptové frameworky můžeš docílit například pomocí Nette(+ nějaká knihovna k tomu, ale nevybavuju si, jak se jmenuje) a před nějakou dobou tohle implementovalo i Symfony - Turbo UX. V podstatě máš předpřipravenou javascriptovou knihovnu, která za tebe vyřeší AJAX komunikaci(+ nějaké routování atd) a na pozadí to funguje tak, že renderuješ vše na backendu a do front-endu se jen dosadí výsledné vyrenderované HTML, které se tahá přes AJAX. Funguje to jako SPA aplikace, máš tam své pohodlí toho, že se nemusíš učit frontendový framework a děláš pořád na backendové části. Samozřejmě nějaké specifické věci si můžeš doprogramovat. Na menší weby určitě stačí, na větších projektech s tím nemám zkušenost.

[oss]

Moj nazor je, ze by si mal kaslat hype driven development, lebo ked si zacnes citat internety, tak zistis, ze vsetky JS kniznice sami seba oznacuju za moderne. Ale moderne neznamena lepsie, alebo vhodne na tvoj projekt.

Osobne React povazujem za PHP dnednych dni, rovnako ako PHP bolo pred dekadov vsade, kazdy s nim robil, bolo cool a moderne, ale bola to ta technologicky najhorsia moznost v porovnani s konkurenciou.

Ked som tu na roote objavil HTMX, ach Boze, to bol uplne novy svet. Sice som si pri prvom projekte rozbil nos, lebo lebo som nachytal navyky z SPA frameworkov, ale ked som do tej paradigmy presil, tak som dokazal spravil webovu aplikaciu len cistim HTTP, HTML a modernym CSS (a 5 riadkov JS pre ochranu proti XSRF).

Potom je este moznost Blazor a tym mat v prehliadaci normalny staticky typovi jazyk, ktory je typovy aj v runtime a nie tu parodiu. To bol tiez uzasny zjav, s nim som zacal v roku 2017 a bol som slobobodny. Dnes sa uz posunul niekde inde a mozes mat hybridny mod, takze niektore komponenty funguju na klinetovi, ine na serveri a ine dokazu aj tam (po donacitani komponentu sa switchne zo server interactivity na kloientsku interaktivitu).

Ono je tak super, tam nemat node, netaha to polku internetu, npm install netrva pol hodinu, update kniznice o verziu 0.0.1 vam nerozbije celu aplikaciu do neskompilovatelneho stavu a dokonca si netreba strazit ci mam spravnu verziu node, lebo jeho aktulizacia spravi projekt nebuldnutelny.