Jaký zvolit framework při dlouhodobé strategii?

Bootstrap, jednoznačně.

Už jsem to psal ve FB vlákně, možnosti jsou:

- žádný framework
- Bootstrap (standard)
- UIkit

Pokud budeš používat YOOtheme, pak samozřejmě UIkit, jinak standardně Bootstrap.

Musíme si uvědomit, že tyto frameworky (Bootstrap, UIkit) se vyvíjejí mnoho let a velká řada specialistů se věnuje těm nejjemnějším detailům. Ano, dnes díky novým CSS technikám (flexbox, grid) je možné postavit vše na čistém CSS, ale asi nikdy nepokryjeme všechna možná řešení a všechny možné problémy. Oproti vývojářům frameworků, kteří se tím zabývají mnoho let, na to prostě nemáme kapacity.

Tailwind je trochu jiná kategorie. Jde proti principům CSS. Ti, co zažili zrod CSS, nechápou, proč se někdo vrací zpět k zápisu podobnému inline stylům, proč opět zavádět problémy, které CSS vyřešilo. Navíc, Tailwind se generuje a tedy je velmi těžký na údržbu. Pokud se k vašim stránkám postavených na Tailwindu dostane jiný vývojář, v podstatě nemá šanci tu stránku udržovat a navázat na práci předchozího vývojáře (protože prostě nebude mít totožné prostředí pro generování Tailwind kódu, jako předchozí vývojář). Tailwind v podstatě neoděluje design od dat. Zatímco všude jinde je možné HTML výstup předesignovat na milion způsobů, u Tailwindu, kde HTML obsahuje instrukce pro design, těžko.

Tedy, jak se píše v přechozím příspěvku: Bootstrap.

Mimochodem, jestli si někdo myslí, že vývojáři těch frameworků žijí v nějaké bublině a nepozorují svět kolem, tak je na omylu. I vývojáři těchto frameworků moc dobře vědí, jak je rychlost načítání webu důležitá.

Takže např. v prostředí UIkit/YOOtheme se toto řeší velmi intezivně a u Bootstrapu to nebude jiné.

Ten screenshot je z diskuze na Mattermostu (skupina YOOtheme), máš tam jako kdokoliv jiný přístup, můžeš se tam zeptat na detaily. Zavádějící je vybrat si stránku, která si neklade za cíl být nejrychlejší (už jen google adsense, google fonts a google analytics výrazně zpomalují danou stránku) a která běží na víceméně bezplatném, zastaralém a pomalém serveru a navíc neběží vůbec na YOOtheme frameworku, o kterém se zde bavíme.

Poprosil bych všechny, aby četli vlákna důkladně a nevytvářeli tady nesmyslné posty. Pro ty, co neumí číst, budu interpretovat to, co bylo napsáno (a raději vícekrát za sebou, aby to bylo opravdu jasné):

Mimochodem, jestli si někdo myslí, že vývojáři těch frameworků žijí v nějaké bublině a nepozorují svět kolem, tak je na omylu. I vývojáři těchto frameworků moc dobře vědí, jak je rychlost načítání webu důležitá.

Takže např. v prostředí UIkit/YOOtheme se toto řeší velmi intezivně a u Bootstrapu to nebude jiné.

Tedy, jinými slovy:

Uživatelé např. UIkit/YOOtheme řeší rychlost načítání a tím tlačí na vývojáře YOOtheme, aby toto řešil také. A on to řeší. A proto i s frameworkem jako je YOOtheme se dají dosáhnout skvělé výsledky. A ten screenshot je z Mattermost chatu (místnost YOOtheme), kde jeden německy mluvící uživatel děkuje vývojářům YOOtheme zato, že dosáhl skvělých výsledků.

Tedy, cílem tohoto postu je oznámit uživatelům, že i vývojáři frameworků na toto myslí a jejich uživatelé to také vyžadují a zároveň i pomocí frameworků dokážou docílit skvělých výsledků. Každý má přístup na Mattermost chat a může se zeptat na více detailů.

Tento post rozhodně není o tom porovnávat si stránky, které se tímto vůbec nezabývají a hrát si na velké kluky, co si porovnávají vlastní výtvory. Myšlenka tohoto postu je oznámit uživatelům, že i vývojáři frameworků na toto myslí a jejich uživatelé to také vyžadují a zároveň i pomocí frameworků dokážou docílit skvělých výsledků.

Prosím nepřekrucovat to, co bylo napsáno a číst a porozumět textu.

Konkrétně, bavíme se zde o YOOtheme/UIkit frameworku, vůbec nerozumím, proč sem dáváš link na Gantry šablonu: phoca.cz/phocacart4demo/1-baby-food/1-batela-apple-pear

Jak Gantry šablona souvisí s YOOtheme/UIkit frameworkem? Čemu přesně nerozumíš v postu, který má sdělit to, že i vývojáři frameworků se zabývají Lighthousem (performance, accessibility, best practices, seo)? Pokud dychtíš po senzacích, můžeš se v Mattermost chatu uživatele zeptat na konkrétní screenshot. Myslím, že to byl jeden uživatel z vídeňské JUG, takže se ho můžu zeptat. A ano, myslím, že to byl výsledek desktopu. Ale to pořád nemění nic na vyjádření, že myšlenka tohoto postu je oznámit uživatelům, že i vývojáři frameworků na toto myslí a jejich uživatelé to také vyžadují a zároveň i pomocí frameworků dokážou docílit skvělých výsledků.

Prosím, buď konkrétní a vysvětli mi, čemu přesně nerozumíš v tom postu, který pojednává o tom, že i pomocí frameworku dokážeš dosáhnout dobrých výsledků?

Pro úplnost dodám screenshot celého postu na Mattermostu, i když stále nerozumím tomu, jak může doprovodný obrázek v někom vyvolat tolik nenávisti proti postu, který se snaží vyjádřit to, že i vývojáři frameworků myslí na Lighthouse výsledky. Opravdu tomu nerozumím.



Ještě pro úplnost dodám, že já nejsem vývojář YOOtheme ani Bootstrapu, nemám žádnou speciální motivaci tyto frameworky nějak obhajovat nebo vyzdvihovat, dokonce já osobně nejsem ani uživatel prvně jmenovaného frameworku a mým cílem bylo pouze sdělení, že i tyto frameworky se zabývají Lighthousem a že jejich použití rozhodně nemusí znamenat horší výsledky. Pokud tomu ještě někdo nerozumí, rád to po sedmé zopakuji.

V krátkosti:
1) obrázek je doprovodný, ale validní
2) vlákno vůbec nesouvisí s Gantry šablonou
3) cílem vlákna není vyzdvihovat konkrétní framework (jeden byl vybrán jako příklad toho, že i frameworky se zabývají Lighthousem)
4) pokud chce znát někdo více detailů, i když to není podstatou tohoto vlákna, mohu zprostředkovat

Děkuji.

Obecně 
- jakýkoliv CSS framework NEzlepší hodnoty pro lighthouse apod. To je nesmysl. Naopak je může lehce zhoršit (hodně nevyužitého CSS, popř. JS)
- jakýkoliv Framework slouží primárně pro vývojáře, aby si ulehčil práci s některými věcmi a nasekal web rychleji.
- bohužel jdou dnes framework proti původní logice oddělení HTML a CSS a jsou založeny na úpravách HTML, místo na úpravách CSS (musí se doplňovat různé třídy apod.). To znesnadňuje jednoduchý přechod z jednoho Framework na druhý. Tailwind je úplný extrém.
- Uživateli může být úplně putna, jaký CSS framework web používá, rozdíl v ničem nepozná.

Použití frameworku (Bootstrap, UIkit) je primárně o tom, že to člověku ušetří např. 10 let práce, navíc díky široké komunitě jsou řešeny všechny možné problémy, které sám vývojář není schopen obsáhnout.

Osobně si nedokážu představit, že bych sám psal vlastní čisté CSS, kde bych řešil vlastní grid (pro různé zařízení), formuláře, dropdowny, modaly, navigaci, offcanvas, pagination, collapse, carousel, cards, popovers, tooltips, atd. atd.). I kdybych byl expert na CSS, nikdy nepodchytím všechna možná řešení a problémy, které takový framework už přes deset let ladí (společně s širokou komunitou uživatelů). Ten vtip je v tom, že např. Bootstap připraví navigaci, ale nepřipraví ji jen tak pro zobrazení - on zajistí, aby se zobrazila správně na všech zařízení, aby byla vhodně navržena vzhledem k přístupnosti, atd., atd.

Každý k tomu přistupuje jinak. Já bych si ušetřil 10 let práce, použil framework a pak bych strávil např. týden/měsíc na doladění a dostal ty nejlepší možné výsledky. A těmi nejlepšími možnými výsledky bych nemyslel 100%, ale kompromis mezi rychle načtenou stránkou a použitými vlastnostmi. Příkladem může být např. grafik, který, i když ví, že se mu stránka bude načítat o pár milisekund déle, stejně použijie "náročný" font, protože prostě ten font zapadá do jeho návrhu.

Stejně tak je to s frameworkem, ten se primárně nenasazuje kvůli zrychlení, ale kvůli ušetření 10 let vývoje (i když osobně věřím, že framework bude mít v 97% lepší Lighhouse výsledky, než práce jednotlivců - bez použití frameworku).
 

Ne, to není 10 let práce Třeba grid systém je dnes otázkou opravdu pár řádek kódu. Pointa je v tom, že většina webů postavených na Bootstrap z toho Bootstrap použije právě jen ten grid systém a pár základních prvků. Takže ano, CSS framework je nějaké ušetření práce, ale za určitých předpokladů
1/ Nemám grafický návrh, který se znatelně od standardního bootstrap liší
2/ jsem spokojen s tím, jak fungují a vypadají bootstrap komponenty používající JS (modal, carousel apod.)
3/ nepoužívám bootstrap tak jak je, ale umím si ho zkompilovat ze SASS, vyhodit nepotřebné věci, poupravit proměnné apod.
4/ nepoužívám samostatné styly dodané s každým modulem / pluginem / komponentou, ale mám jeden styl pro celý web v rámci šablony
5/ jsem smířen s tím, že musím upravit HTM podle bootstrapu (to v základu Joomla už má)

V metrikách lighthouse nemá moc co CSS famework nabídnout, snad jen dobře ošetřenou metriku CLS (content layout shift), i když i ta je spíš o html (uváděné rozměry obrázků) plus věci kolem přístupnosti, ale i ty jsou hodně o HTML.

CSS framework je tedy o ušetření si práce, rozhodně ne ale 10ti leté, ale žádná magie se nekoná a je potřeba ho uměnit správně použít a uchopit

V rámci Joomly je použití Bootstrap asi nejrozumější, protože
- Jádro Joomly jede na Bootstrap, tzn. má HTML výstupy upravené pro Bootstrap
- vývojáři dalších rozšíření s tím počítají, tzn. také mají v základu HTML syntax pro Bootstrap.

PS: z aktuální zkušenosti je to vše stejně jedno, protože pak přijde markeťák, nasází na web 20 analytických skriptů a celé pracně budované skóre na lighthouse jde do kopru

Pokud tady ( www.phoca.cz/jtd/ ) vyhodím reklamy, analytics, a další nepotřebné věci, dostanu zde (a to i na ecommerce stránce!) kolem 100% ze tří z celkově čtyř měřítek (Accessibility, Best practices, SEO). A ten celý vtip je v tom, že jsem se o to vůbec nestaral a nic v tom z mé strany nepodniknul. Vše za mě vyřešil Bootstrap, protože ten už v sobě obsahuje aria-labels a podobné techniky, které by mě osobně vůbec nenapadlo použít.

Do 10 let započítám vše kolem (od CSS po Javascript, přepis jQuery do Vanilla JS, všechny ty dlouhosáhlé diskuze o použití nejlepších technik pro např. přístupnost, všechny ty feedbacky a ladění, řešení všech možných drobností, které samotný uživatel nemá šanci otestovat - tisíce různých prostředí, atd. atd.).

Pro mě osobně prostě hrajou i maličkosti velkou roli. Bootstrap mi pomohl nastavit nějaké standardy ohledně přístupnosti. Bez Bootstrapu bych vůbec netušil, že kód by měl být nějak poskládán, měl by obsahovat různé atributy, atd. A ano, i já se dokážu objeít bez frameworku, díky CSS gridu a flexboxu je dnes vše jednodušší, jenže pak se dostanu k tomu, že na stránkách potřebuji modal, nebo offcanvas, případně dropdown, sticky header, apod. a už prostě, než vymýšlet své kostrbaté řešení, šáhnu raději po osvědčených řešeních.

A samozřejmě, pokud má někdo sebevědomí na to, dělat vše sám a testovat si vše sám na stovkách/tisících různých zařízení, nemám nic proti, moje doporučení ohledně frameworku je v podstatě typu poměr cena/výkon.

H13 napsal:

Vše za mě vyřešil Bootstrap, protože ten už v sobě obsahuje aria-labels a podobné techniky, které by mě osobně vůbec nenapadlo použít.

To už ale přeci není Bootstrap, to je HTML, které produkuje Joomla, a že obsahuje ty věci kolem aria atributů dle doporučení Bootstrap je druhá věc  
Pokud na to HTML navěsím libovolné nebo žádné CSS, požadavky na přístupnost to bude splňovat stejně (tedy pak až na kontrasty apod. které se definují v CSS).
Ale jak už jsem psal, souhlasím, v rámci Joomly je rozumné použít Bootstrap, už jen z důvodu, že není třeba přepisovat výstup pro každou komponentu (krom PhocaCart, který to umí jednoduše přepnout )