Jak se dneska dělají weby, které si zákazník může editovat?

V minulosti se klasicky udelal obycejny web za pomoci html a css, dodal se zakaznikovi, a ten si, mel-li alespon zakladni orientaci, mohl web sam modifikovat - menit obrazky, pridavat clanky atp.

Alespon si to myslim, ze tak to bylo...

Jenze dneska uz se weby skoro neobejdou bez Javacriptu, staly se slozitejsimi, nektere se dokonce i kompilujou a jsou treba v Reactu.

Jeste bych pochopil, ze v PHP muze zakaznik web trochu menit, ze to jeste pro nej bude pochopitelne alespon trochu. Ale kompilovany React web v Javascriptu?

Tzn. jakym zpusobem dneska pracuje vyvojar webovych stranek, aby mel spokojene zakazniky?
« Poslední změna: 15. 10. 2022, 13:41:06 od Petr Krčmář »


Mlocik97

  • *****
  • 891
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak se dneska delaji weby, ktere si pak zakaznik muze sam editovat?
« Odpověď #1 kdy: 15. 10. 2022, 13:15:49 »
Svelte je taktiež kompilér, ale nebeží v run-time, tzv. Svelte samotný vôbec prehliadač nesťahuje, sťahuje len čistý HTML/CSS a JS (ktorý vylepšuje možnosti webu, ale zároveň dokáže web fungovať úplne bez JS), existujú aj CMS nad tým postavené, alebo je možné postaviť si vlastné, a je to veľmi jednoduché, prepojíš to s nejakou databázou, v hooks vykonáš všeobecnú logiku pre všetky requesty (načítanie cookies, overenie používateľa, ich práv aťď) a následne cez resolve zavoláš logiku v endpoint, ten sa zavolá už pre konkrétnu podstránku s konkrétnou metódou (alebo využiješ page endpoint, takže cez actions vieš veľmi elegantne prepojiť back-end a front-end), po vykonaní logiky na konkrétnej substránke (pridanie postu, upravenie článku, pridanie komentára, atď) returnom vojdeš späť do handle hooku, kde vrátiš odpoveď klientovy. Klient (browser) stiahne pár kB (alebo len bajtov), a máš plne funkčný interaktívny web, ktorý funguje bez JS, a je drobný veľkosťou, výkonovo optimalizovaný atď... pred určitou zmenou (ktorá pridala trocha boilerplatu), bolo možné v tom implementovať chatovú aplikáciu s 1 riadkom JS kódu na client-side (šialenstvo), a výsledkom bola plnefunkčná chatová interaktívna webová aplikácia.

VueJS taktiež prechádza na compile-time a experimentuje s tzv. Vapor. To umožní ešte vyšší výkon než čo generuje Svelte (je to dosť inšpirované od SolidJS), nie je to až v takom štádiu ako Svelte, že by si dokázal implementovať dynamický web bez JS s podporou hybridného renderingu a mnohých featúr čo Svelte má, ale tiež to umožňuje veľa krásnych vecí.

Dnes sú pre mňa Angular a React už mŕtve technológie
« Poslední změna: 15. 10. 2022, 13:19:21 od Mlocik97 »

Re:Jak se dneska delaji weby, ktere si pak zakaznik muze sam editovat?
« Odpověď #2 kdy: 15. 10. 2022, 13:34:06 »
Možná Hugo?
https://gohugo.io

Re:Jak se dneska delaji weby, ktere si pak zakaznik muze sam editovat?
« Odpověď #3 kdy: 15. 10. 2022, 13:38:25 »
wordpress a věci jako https://www.elegantthemes.com/gallery/divi/

https://elementor.com/features/theme-builder/

Varianta, kdy udělám databázi, k ní administraci pro editaci uživateli a k tomu vykreslování podle šablon pořád funguje. Jen dneska kromě html se generuje css i js.

L..

  • ****
  • 310
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #4 kdy: 15. 10. 2022, 15:58:37 »
V minulosti se klasicky udelal obycejny web za pomoci html a css, dodal se zakaznikovi, a ten si, mel-li alespon zakladni orientaci, mohl web sam modifikovat - menit obrazky, pridavat clanky atp.

Dělám weby už skoro čtvrt století, ale tohle jsem teda nikdy nedělal. Pokud se to někdy používalo, tak jen v hodně specifických případech, kdy se zákazník vyznal v tom, co dělá. Jinak by jsi každou chvíli řešil telefonát "mě se ten web nějak rozbil a nevím co s tím".

Ve skutečnosti se na tohle už hooodně dlouho používá CMS, buď custom, nebo nějaký obecný, asi nejznámější je WordPress.

... Klient (browser) stiahne pár kB (alebo len bajtov), a máš plne funkčný interaktívny web, ktorý funguje bez JS,

A ten request na server a následny patch HTML zajišťuje co? Že by JS? ;-)


Zopper

  • *****
  • 753
    • Zobrazit profil
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #5 kdy: 15. 10. 2022, 19:17:42 »
V minulosti se klasicky udelal obycejny web za pomoci html a css, dodal se zakaznikovi, a ten si, mel-li alespon zakladni orientaci, mohl web sam modifikovat - menit obrazky, pridavat clanky atp.

Dělám weby už skoro čtvrt století, ale tohle jsem teda nikdy nedělal. Pokud se to někdy používalo, tak jen v hodně specifických případech, kdy se zákazník vyznal v tom, co dělá. Jinak by jsi každou chvíli řešil telefonát "mě se ten web nějak rozbil a nevím co s tím".
Levná kodérská síla študáků na přelomu základka/střední. Aneb "ten tvůj kluk se vyzná v počítačích, neudělal by mi za web za pětilitr?" Taky jsem si tak na pár korun přišel.

L..

  • ****
  • 310
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #6 kdy: 15. 10. 2022, 19:34:19 »
No jasně, ale jak to souvisí s tím, že si web upravuje zákazník sám, když chce třeba přidat článek? To je to, co IMO rozhodně nebyl mainstream.

Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #7 kdy: 15. 10. 2022, 19:40:08 »
Nekomplikoval bych to: Wordpress

Velká vývojářská základna (témata, pluginy atd.), lokalizace, mnoho webhostingů (není nutné řešit aktualizace).

Mlocik97

  • *****
  • 891
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #8 kdy: 15. 10. 2022, 23:02:24 »
Všetci tu odporúčajú wordpress, ktorý je nekvalitný, zagizdený CMS, plný sajrajtu, čo na client-side posiela kopec JS a zvyčajne používa aj jQuery,... to by som fakt nepoužíval. Sú výrazne lepšie a modernejšie CMS.

A ten request na server a následny patch HTML zajišťuje co? Že by JS? ;-)

Request na server je vykonaný pomocou HTML forms (teda môže byť aj plne bez JS, konkrétnejšie vo Svelte máš `use:enhance` action, ktorý na form element používaš. Ak je JS k dispozícii, tak sa využije poslanie FormData cez fetch, a pri response sa volá invalidate funkcia, ktorá spustí load (ten nemusí byť ani explicitne definovaný, pri page endpointoch je injektnutý samotným Svelte), následne získané dáta sa hydratujú do DOM. V prípade ak JS nie je k dispozícii, sa využije poslanie FormData cez štandardný natívny HTML (žiadny JS), a odpoveď sa nehydratuje (teda sa nevolá ani invalidate), namiesto toho sa vráti nové celé HTML mapujúce k aktuálnej verzii DOM (prehliadač pri tom vie stále držať ostatné súbory stále načítané, takže skutočne stačí stiahnuť jeden jediný HTML súbor, nič iné (ak nie je potreba, teda ak daná verzia HTML neodkazuje napríklad na obrázok (img tag), ktorý ešte nebol loadnutý).

Takto vie Svelte skutočne fungovať aj úplne bez JS.

L..

  • ****
  • 310
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #9 kdy: 16. 10. 2022, 07:55:11 »
V prípade ak JS nie je k dispozícii, sa využije poslanie FormData cez štandardný natívny HTML (žiadny JS), a odpoveď sa nehydratuje (teda sa nevolá ani invalidate), namiesto toho sa vráti nové celé HTML

Díky za potvrzení, že jsi lhal, když jsi psal:

a máš plne funkčný interaktívny web, ktorý funguje bez JS, a je drobný veľkosťou

BUĎ máš web, kde se posílají jen malé patche, ale to vyžaduje JS
NEBO máš web, co funguje bez JS, ale musíš vždycky přenést celou stránku
Žádná možnost "a" neexistuje.

Mimochodem, jak Svelte řeší problém paralelních requestů, kdy může přijít request z už neexistujícího prvku?
« Poslední změna: 16. 10. 2022, 07:57:43 od L.. »

Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #10 kdy: 16. 10. 2022, 09:46:52 »
Na tohle se používají redakční systémy – WordPress, Drupal apod. Pokud chcete, můžete redakční systém používat jen jako backend a generovat z něj statický web. Buď na to jsou nějaké nástroje i pro ty redakční systémy, nebo před to dáte třeba Next.js (nebo Gatsby nebo některý z mnoha dalších nástrojů, tady máte neúplný přehled: Static Site Generators), který si v okamžiku generování sahá pro data do toho redakčního systému. Existují i headless redakční systémy – tedy jen ten backend, o vyrenderování se ten redakční systém nestará, to si musíte zajistit typicky něčím založeným na Jamstacku jako třeba ten Next. No a pokud je to opravdu jednoduchý web a zákazník zvládne třeba Markdown, dá se to udělat i bez toho redakčního systému, jenom se samotným Nextem (Gatsby atd.). Prostě bude mít přístup do repository na GitHubu, když tam oedituje nějaký soubor, pustí se automaticky build a vypublikuje se nová verze webu.

Mlocik97

  • *****
  • 891
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #11 kdy: 16. 10. 2022, 11:19:14 »
Díky za potvrzení, že jsi lhal, když jsi psal:
a máš plne funkčný interaktívny web, ktorý funguje bez JS, a je drobný veľkosťou

nelhal, ale uznávam že sa to dá pochopiť dvomi spôsobmi, asi keby som tam napísal "aj bez JavaScriptu" bolo by to lepšie (s tým slovom "aj").

BUĎ máš web, kde se posílají jen malé patche, ale to vyžaduje JS
NEBO máš web, co funguje bez JS, ale musíš vždycky přenést celou stránku
Žádná možnost "a" neexistuje.

Tu lžeš ty, alebo vôbec nerozumieš ako to funguje. Presveč sa sám, Svelte demo aplikácia (alternatíva ku Wordle) používa možnosť "a". Taktiež to máš vo viacerých videách. Napríklad:

https://youtu.be/A8jkJTWacow?t=28835
alebo zo staršej verzii:
https://www.youtube.com/watch?v=qSfdtmcZ4d0 (odporúčam toto video pozrieť celé, a hovorí podrobnejšie o tom)

Ďalšia vec je že so streaming API má prísť aj jedna špecifická featura, ktorá umožní hydratovať len časť "HTML" (konkrétne jeden element pre request, samozrejme to nie je stále to ono čo s JS, lebo môžeš chcieť hydratovať 2 HTML tagy, a medzi nimi môže byť kopec iných, ktoré nechceš, takže by si musel vymeniť celý parent, ale je to možné).

Btw. vieš o tom že je možné naprogramovať webstránku aj úplne bez HTML, CSS, JS (a tým nemyslím že to bude generovať server-side, ale že klient reálne nič také nedostane), ale len čisto v JSON?
« Poslední změna: 16. 10. 2022, 11:23:53 od Mlocik97 »

Mlocik97

  • *****
  • 891
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #12 kdy: 16. 10. 2022, 11:40:34 »
oh ten druhý link je na nesprávne video, tam o tom nehovorí, ok, pozri to prvé.

Mlocik97

  • *****
  • 891
  • Ubunťák, JS dev.
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #13 kdy: 16. 10. 2022, 11:50:41 »
aha, tak to nie je ani v tom prvom videu zo Svelte Summit... dozadeke, to nájsť to video kde to ukazoval je hrozné, keď je tu tých videí toľko veľa, a ja nemám teraz čas ti pozrieť všetky a hladať kde to ukazoval. Ale skutočne to funguje hybridným spôsobom. Vyskúšaj si demo aplikáciu, a vypni si JS, uvidíš že tá Wordle hra čo vo videu ukazoval bude fungovať aj tak.

none_

  • ***
  • 104
    • Zobrazit profil
    • E-mail
Re:Jak se dneska dělají weby, které si zákazník může editovat?
« Odpověď #14 kdy: 16. 10. 2022, 13:15:27 »
Ja bych cekal, ze na vetsinu jednoduchych webu se pouzije neco jako: https://www.squarespace.com/

Popripade podobne sluzby. Existuje jich nekolik i ceskych.

Podle me na jednorazove akce/vizitky idealni.