Ako sa píše moderný web

14.6.2015 19:30 | Přečteno: 7350× | Web | | poslední úprava: 14.6.2015 19:26

Už pomerne dlho pracujem ako webový vývojár. Svoje osobné projekty mám zvyčajne riešené minimalisticky s pár riadkami JS a pár pravidlami CSS. Mladší weboví vývojári ma zrejme považujú už za technologického dinosaura. Tento blog píšem aby som dokázal, že tiež dokážem písať moderný web :-P

HTML5

Každý moderný web dnes musí používať HTML5. HTML5 je najlepšie definovaný štandard na svete. Perfektne zrozumiteľný, logický ... Veľkou výhodou je, že tagy už nie je nutné uzatvárať:

<p> Odstavec
<p> druhý odstavec

Platí len ak za p nasleduje niektorý z týchto tagov: address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, ul.

Pre fanúšikov xml syntaxe: áno stále je možné uzatvárať tagy. Teda platí pre vybrané tagy, niektoré ako napr script sa nedajú zapisovať ako <script src="" /> čo je logické.

HTML5 je tak dokonalé, že v hlavičke už nepotrebuje ani verziu.

CSS3

Moderný web sa nezaobíde bez CSS3. V dobách dinosaurov (CSS2) predsa nebolo možné bez tabuliek vytvoriť layout a všetky tie haranaté jednofarebné plochy.

Pomocou CSS 3 sa dajú napr. vytvoriť hranaté alebo zaoblené farebné štvorce, to je skvelé, nie? Stačí použiť flex box. A samozrejme prefixovať prefixovať prefixovať:

button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -ms-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -apple-border-radius: 3px;
  -rim-border-radius: 3px;
  border-radius: 3px;
}

CSS sa samozrejme nepíše od základov, ale použije sa nejaký framework (napr. bootstrap). Nevadí, že stačí pár pravidiel, pripojenie na internet je v súčasnosti rýchle, procesory tak isto, takže tých 3000 nepoužitých pravidiel vôvec nevadí.

Layout pomocou CSS frameworkov je omnoho sémantickejší a prehľadnejší než tabuľkový layout. Ukážka:

Starý layout:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>


Moderný neporovnateľne lepší layout s dokonalým oddelením obsahu od prezentácie:

<div class="container">
  <div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
  </div>
</div>

Pri použití CSS frameworku začne väčšina nástrojov na analýzu stránok kričať, že CSS blokuje vykresľovanie (v skutočnosti sa CSS načítava na pozadí, ale to je implementačný detail). V takom prípade je podľa googlu odporúčaný postup načítať web s malým inline CSS a zvyšok dotiahnuť pomocou javascriptu:

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

Web sa bude takmer okamžite tváriť ako načítaný, všetky nástroje budú spokojné. Nevadí, že užívateľ najskôr uvidí holé html bez CSS. Tak isto nevadí, že sa CSS začne načítavať až po načítaní celého webu namiesto toho aby sa sťahovalo paralelne. Keď Google PageSpeed Insights tvrdí, sa má načítať javascriptom tak to tak má byť. Google sa predsa nemýli.

Fonty

Všetky systémové fonty sú nekompletné a zle čitateľné. Preto sa na každom modernom web musia používať webové fonty. V ideálnom prípade tak 12 rôznych fontov (2 druhy písma, každé light, medium, bold, light/italic, medium/italic, bold/italic a každý aspoň v 5 rôznych formátoch, teda dokopy asi 60 súborov).

Aby to išlo pekne rýchlo (lebo kým sa nenačítajú fonty zostáva na webe prázdne miesto) z fontov sa vyhádžu zbytočné znaky ako napr Č, Ď, Ľ ... Samozrejme vyhodiť sa musia aj všetky informácie o hintingu a rôzne ďalšie metadáta ktoré výrazne zhoršujú čitateľnosť.

Skripty

V dobách dinosaurov mali všetky prehliadače jednotný interpret js. Preto bolo možné javascript písať tak aby fungoval na všetkých možných browseroch aj bez frameworku. Dnes už browsery tak jednotné nie sú a preto je potrebné používať knižnice ako napr. JQuery 2. Okrem kompatibility prináša aj množstvo užitočných funkcií ktoré vanilla js nemá (napr. efektívne získanie elementov pomocou CSS selektorov, animácie ...).

Do moderného webu sa musí vložiť veľké množstvo skriptov. Na každú malú animáciu, tooltip ... na všetko nejaký skript. Občas sú skripty závislé na konkrétnej verzii jQuery. To však nevadí, s AMD môžme do webu vložiť toľko verzií jQuery naraz bez toho aby medzi sebou kolidovali.

Priemerná veľkosť webovej stránky nám v roku 2014 dosiahla 1600kB, takže skriptov môžme do takejto veľkosti napchať dosť.

Sledovanie používateľov

Používatelia sa musia sledovať, proste musia. Poriadna webová stránka musí mať facebook, twitter, rôzne analyticsy ... Ako ukážku tu dám napr. zoznam rôznych sledovacích kódov na telegraph.co.uk:

[x+1]
Adap.tv
Adobe TagManager
Advertising.com
Audience Science
Criteo
Disqus
DoubleClick
DoubleClick Floodlight
Effective Measure
Facebook Social Plugins
Google Adsense
Google Analytics
InSkin Media
Krux Digital
Media Optimizer (Adobe)
NetRatings SiteCensus
Omniture (Adobe Analytics)
Optimizely
Outbrain
Parse.ly
Polar Mobile
Quantcast
Qubit Opentag
ScoreCard Research Beacon
Twitter Button
Visual Revenue
VisualDNA
WebTrends

Popupy

Kedysi dávno v dobách dinosaurov sa robili popupy pomocou window.open. Žiaľ prehliadače sa naučili túto skvelú funkciu blokovať. Ak by sa niekomu popupy nepáčili tak tento text vás presvedčí. Obzvlášť zaujímavé sú komentáre. Takže prečítané? Fajn, som rád, že všetci pochopili, že je správne zobrazovať používateľom popupy.

Je super, že vďaka všetkým tým skvelým opatreniam ako napr. načítavanie css pomocou javascriptu sa stanú popupy neblokovateľné.

---

Dúfam, že po tomto blogu už nebude mať nikto pochybnosti o tom, že ešte nepatrím ešte do starého železa a viem ako robiť moderné weby

       

Obrázky

Komentáře

[Andrtalec]

A toto všetko pod kapotou nech slúži pekným zrozumiteľným webom, ktoré nezaťažujú pozerača nejakým textom.

[pavelk]

Přemýšlím, jestli jsi to myslel vážně nebo jako ironii.

[mirec]

To som nečakal že som to až tak zle napísal. Samozrejme, že je to myslené ironicky. Možno to chcelo viacej smajlíkov.

[coder]

jQuery a priama manipulacia s DOMom v roku 2015? odporucam upriamit pozornost na React a virtual dom, Flux, Immutable.JS, Flow... skus babel, ktory umoznuje pisat isomorfne appky v ECMA Scripte 6-7 uz dnes. A tiez by stalo za to vyskusat css preprocessory (Stylus)

[mirec]

Som rád, že bol spomenutý react a nie bloatware angular. Čo sa týka preprocesorov zvyknem odporúčať skôr sass / scss. Referenčná implementácia je síce v ruby, ale libsass je v C++ a ide pekne rýchlo.

[kotrcka]

dakujem. chystam sa pisat web a je dobre mat take zaklady niekde zhrnute. mozem poslat prispevok v modernej mene, napriklad dogecoine?

[mirec]

Ja mám dogecoimov dosť, ale majiteľom portálu by sa možno oplatilo dať zopár na odblšenie portálu :)

[Jendа]

Modernosti: bez JS se nezobrazí ani obsah (např. některé blogy na Blogspot nebo kde), čím dál tím větší móda používat pro hlavní dlouhý text šedé tenké písmo na bílém pozadí.

[Kvakor]

K první modernosti prý u někteých webů pomůže vydávat se za Googlebota nebo podobného webcrawlera, ale osobně jsem to nikdy nezkoušel. No a na tu druhou modernost stačí mít buď nějaký nástroj na modifikování CSS, případně něco, co barvy učiní "příčetnými" (jako doplňky typu Readability) nebo je vypne úplně (to umí třeba Web Developer pro FF).

[chrono]

Každý normálny vývojár dnes vie, ako sa používa Scss/Less, takže nemá problém s tým, že má 3000 nepoužitých pravidiel v Bootstrap (na napr. pri Bootstrap nie je problém priamo na ich stránkach, vygenerovať css súbor, v ktorom budú len potrebné veci).

Mimochodom naozaj ešte niekto vytvára css bez Scss/Less? Ja napr. Scss používam len na to, aby som nemusel, pri zmene nejakej farby, hľadať, kde všade som ju použil a na vytváranie odvodených farieb (funkcia, ktorá mi generuje odvodenú farbu, zároveň kontroluje kontrast vygenerovanej farby).

[mirec]

Áno da sa vyklikať napr. len grid. Napriek tomu u väčšiny bootstrapových webov vidím full. Ja osobne ak používam nejaký framework tak foundation (len v SCSS includnutý grid).

[Václav "Darm" Novák]

Takže stejně jako u desktopového software, za vším hledej lenost. Zrovna si (jako naprostý amatér) píšu první rozsáhlejší aplikaci v Rails a bootstrap používám full. Díky tomuhle článku ho nakonec, až budu vědět co použít a co ne, ořežu :)

[mirec]

U začiatočníkov je to normálne. Ja som tiež natočil tutoriál ako zbúchať blog za 15 minút a použil som pri tom bootstrap lebo to bolo najrýchlejšie riešenie

[Václav "Darm" Novák]

Já ještě přemýšlel nad Foundation. Každopádně… Musím říct že když si vzpomenu na své experimenty v PHP před patnácti lety lety a srovnám to s možnostmi co mám k dispozici teď… SASS, HAML, pořádný MCV framework v jazyku co mi narozdíl od PHP sedne… Kdysi jsem webařinu zavrhoval jako něco co bych dělat nechtěl. Teď mě tvorba toho webu dokonce baví :)

[Michal Karas]

V takom prípade je podľa googlu odporúčaný postup načítať web s malým inline CSS a zvyšok dotiahnuť pomocou javascriptu.

Aha, tím by se asi dalo vysvětlit, proč se mi hromada "moderních" webů po povolení JS v NoScriptu přenačte s jiným fontem.

Jinak ještě k těm fontům jsi zapomněl zmínit, že používat dneska obrázky je taky pěkně oldschool, když může mít člověk vlastní font a v něm "unést" libovolný Unicode znak pro svou potřebu. Tady se asi pro změnu na nějaký obsah vs. forma moc nehraje.

[chrono]

Naozaj nejaké písmo obsahujúce obrázky mení náhodné znaky? (pretože vždy som si myslel, že všetci na také niečo používajú Unicode Private Use Area).

[Josef Kufner]

Přesně tak. Ty fonty (FontAwesome určitě) to tak mají.

Navíc i samotné Unicode má v sobě kopec obrázků a většina fontů je opravdu v sobě má.

Například ✂✓✗✈✉✎❄✻❀❃➀➋➤➳➿❤❕ ①⑴⒈⒜Ⓐⓐ⓵ ☀☁☂☃☄☏☕☺☼☢♙♕♞♜♥⚐⚓⚔⚖⛂⛔⛑⛵⛲⛭ ⌨⏏⏳⏰⏱⏲⏭⏚⍿⍾ ↺⇲▒▜╭╒╓┌┮╆▧◍◒◙⫷⫸⩩⩨⩶⬪⬩⬧⬣⬢ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ

[Jendа]

Třeba mapy.cz nebo czc.cz to dělají. Dělají to vlastně skoro všichni. A mně se nepovedlo Firefox nastavit aby to fungovalo, takže místo ikon vidím hovadiny.

[Josef Kufner]

V defaultní konfiguraci to funguje. Stačí jí moc nezmršit

[Jendа]

V defaultní konfiguraci fungují custom ikony, ale taky funguje, že si stránka nastaví Times, švabach nebo Comic Sans. Nastavit to tak, aby fungovaly ikony a současně se stránka nemohla rozhodnout, že použije nějaké nečitelné písmo, se mi nepovedlo. (ono to asi ani z principu moc nejde, maximálně zkoušet uhádnout, co je ikona a co text)

[coder]

Asi tě bude zajímat tenhle uživatelský styl: Disallow web page fonts, except FontAwesome et al
Jen si tam budeš muset v průběhu života ručně přidávat desítky retardovaných fontů.

[Jendа]

Jé, díky!

[Bill Gates]

Taky delam tabulky pomoci divu, nekdy pouziju i ul a li .. nicmene ten rozdil udelat tabulku z divu a nebo postaru z table tr td ... tohle mi prijde uhozene. V cem je vlastne dnes problem s table, tr, td, kdyz z divu delame pomoci stylu totez a navic je to co se kodu tyce delsi ? Diky za objasneni. Nejak jsem ten odpor k tabulkam nepochopil. Drive to smysl melo kvuli renderovani, ze prohlizec cekal nez se nacte tabulka cela, coz brzdilo. Nejsem si jist jestli to dnesni renderovaci jadra nedelaji lepe.

table => div style="display: table"
tr => div style="display: table-row"
td => div style="display: table-cell"

V cem je to lepsi?

[Josef Kufner]

Oba ty příklady v článku jsou blbě. Smutné je, že ten druhý je často používaný.

HTML5 na toto přináší kopec tagů, jako je <section>, <header>, <footer>, <nav> a další. CSS je dost mocné na to, aby ty šílené konstrukce nebyly většinou potřeba, ale většina kodérů to neumí používat.

[mirec]

Oni sú blbé naschval. V každom prípade s tým druhým sa stretávam každú chvíľu. Prišlo mi vtipné ako sa všetci bili za to, že treba oddeliť obsah od formy (teda nedávať konkrétny layout do html) a zrazu tu prídu frameworky ktoré robia v HTML rovnaký bordel ako tabuľky. Samozrejme aspoň sémanticky je to iné, div nemá žiaden sémantický význam na rozdiel od table.

[pavlix]

Mně se nejvíc líbilo, jak všichni chtěli dělat sémantický web a rendrovat ho pomocí CSS, nejlépe CSS2 a ještě k tomu v době, kdy žádný browser nerenderoval správně. Dost jsem si s tím ve své době hrál.

Dneska si udržuju (teď spíše neudržuju) akorát svůj minimalistický web, který funguje mimojiné i jako hromosvod na debily (lidi si ho vybírají jako cíl kritiky, posměchu nebo nabídek webařských prací).

V době největšího honu na čarodějnice tabulkový layout jsem si důkladně ověřil, že jsou tabulky stokrát schopnější než CSS layout a hlavně jsem zjistil, že Microsoft na jednu stranu špatně interpretoval standard pro box layout, ale na druhou stranu byla ta jeho interpretace lepší než originál. A všecho je to způsobeno tím, že si ve W3C honili ego nad sémantikou, zatímco ignorovali základní potřeby webů s layoutem.

A to ještě všechno šlo nějak ochcat, kromě formulářů, které jediné měly výchozí šířku včetně výplně nikoliv elastickou přes celou šířku, ale danou tím, jak se vývojář browseru vyspal. A vzhledem k tomu, že šířka (width) nešla ani specifikovat vzorcem ve stylu (100% − padding), sloužil javascript hlavně k opravě všech nesmyslů ve standardech a prohlížečích.

[Josef Kufner]

Jo, tabulky mají mnoho výhod oproti CSS2. Vlastně CSS layouty jsou použitelné až od doby, kdy v nich začaly fungovat tabulky

Co se problémů s box modelem týče, W3C to udělalo Microsoftu na truc. IE a Netscape se oba shodly na "špatném" box modelu, pak přišlo W3C, standardizovalo jiný boxmodel, Netscape to respektoval a IE ne. A na další dekádu bylo o zábavu postaráno. Dnes už máme CSS vlastnost box-sizing, takže si to lze nastavit, jak se to zrovna hodí. Btw, HTML5 je úspěšné hlavně kvůli tomu, že s ním W3C nemá nic společného (narozdíl od XHTML).

[pavlix]

To mi chceš říct, že W3C byli takoví kreténi, že úmyslně standardizovali ve své podstatě chybný a špatně použitelný box model v době, kdy se implementace shodovaly na modelu, který funguje? A pak se roky hustilo do lidí, jak je Microsoft špatný, protože nerespektuje standardy? Jestli je to tak, tak je největší problém webu to, že nebyla W3C včas rozpuštěna.

[abc123]

V tomhle hezkém článku se o tom píše podrobně.

[webař]

webylon? achjo

[Josef Kufner]

Přesně tak.

In 1996, CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.

At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0 and Internet Explorer 4.0 both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.

[pavlix]

Tak to mě opravdu rozesmutnělo, zvlášť když jsem se sám účastnil toho hanění Microsoftu kvůli nedodržování standardů. Tím neříkám, že bych chtěl Microsoft hájit, ale v tomhle konkrétním případě by snad šlo W3C označit za to větší zlo.

[Josef Kufner]

Ono totiž mnoho lidí nechápe, že změnou syntaxe nezmění sémantiku. Stejný problém je i v šablonách na straně serveru, kde je ze stejného důvodu často zavrhováno PHP jako šablonovací jazyk a prosazují se různé podivné syntaxe s chlupatýma závorkama (ne že by neměly opodstatnění, ale ta argumentace je zcestná).

Škoda je, že CSS nemá nějaký mechanismus, který by přiřazoval styl podle sémantického významu. Často by se jedna vrstva mapování navíc hodila, neboť pokud se třídy přiřazují sémanticky, selectory ve stylech docela nakynou.

[chrono]

Rozdiel je v tom, že tie div elementy sa pri úzkej obrazovke môžu zoradiť pod seba.

[Josef Kufner]

To ta tabulka taky, pokud je vhodně nastylovaná.

[finc]

Mohl bys uvest priklad, jak udelas to, aby se nektere sloupce tabulky "spravne" posunuly dolu? To jako na td element dam "float"? Nerozsype se nahodou ta tabulka? :)

[Josef Kufner]

table, thead, tfoot, tbody, tr, th, td {
    display: block;
}

… A z tabulky je pár odstavců. Dál můžeš stylovat dle libosti stejně, jako by to byly divy.

[chrono]

Čiže pri tabuľke je normálne použiť display a urobiť z tých elementov niečo iné, ako tabuľku, ale pri div sa to urobiť nesmie?

[Josef Kufner]

Nikde netvrdím, že to je takto správně. Jen ukazuji, že to jde. Slušný markup vypadá úplně jinak (to jsem zmiňoval na začátku).

[mirec]

Nie všetky takéto triky fungujú. Nedávno som sa k niečomu snažil pomocou CSS ohnúť django admin a vo firefoxe to malo poriadne problémy. IE radšej ani nebudem spomínať Na zopár škaredých bugov s renderovaním tabuliek som narazil aj vo webkite, neviem teraz či sú už opravené, keď som na to pozeral tak v bugzille boli zaznamenané chyby.

[Kvakor]

Nejak jsem ten odpor k tabulkam nepochopil.

Prvně to bylo "Nepoužívejte tabulky na layout!", protože staré prohlížeče neuměly dynamicky překreslovat stránku během načítání, což ve spojení s pomalým připojením způsobovalo to, že uživatel čučel do čisté stránky, dokud se nenačetl celý obsah (tedy, ono těch problémů s layoutem pomocí tabulek bylo trochu víc, ale tento je asi ten nejdůležitější). No a někteří to pochopili jako "Tabulky jsou Zlo! ZLO!!!" a ve své snaze být papežštější než papež přestali tabulky používat úplně, včetně případů, kdy jejich použití je vhodné a naprosto logické.

Osobně se domnívám, že existuje velmi jednoduché pravidlo, kdy použít tabulku, a to tehdy, pokud by mělo smysl, aby uživatel přislušná data označil a nakopíroval si je do svého Oblíbeného Tabulkového Procesoru (TM).

[finc]

Chapu, ze je to cele ironie, ale na druhou stranu tyhle nove pristupy prave umoznuji z webu vymackat maximum. Navic nevim jak ty, ale ze by se mi chtelo nejak zdlouhave ladit to, aby web byl responzivni se mi tedy nechce. Bootstrap je skvely pomocnik, protoze diky tomu i "lama" muze vytvorit validni web, ktery nebude slozen s humusu jako table-tr-td-table....

Navic vizualizace pomoci font-awesome ci glyphicons preci umoznuji s obrazkem pracovat jako s fontem. Nevim nakolik jsi webovy vyvojar, ale ja osobne tenhle zpusob dost preferuji, protoze si muzu odpustit spoustu trablu :)

A samotne jQuery? Prijde mi, ze se stalo modou na jQuery hrozne nadavat, ale samotny selector v jQuery je tak mocna vec, ze nakonec i ti zariti odpurci po nem proste sahnou. Osobne jsem si nevsiml, ze bych nekdy musel silene hackovat nekolik verzi jQuery.

Jak uz zde nekdo zminil, pomoci LESS ci SASS mam moznost si vybrat jen to, co opravdu chci.

S cim osobne urcite souhlasim je AngularJS vs ReactJS. A to z nekolika duvodu:

• Angular je vymysl Googlu a ten ho nema problem kdykoli zastavit, stejne jako to delal v minulosti s jinymi projekty. Staci se podivat, kde je dneska Dart (ano, Dart proste umira)
• Google Angular ani jednou nepouzil v produkci
• Angular verze 1.x je naprosto rozdilna od toho jak bude vypadat verze 2.x
• Angular vsadil na HTML a DOM, coz je sice pro webare dobre, ale na druhou stranu ho to take dost omezuje

Dalo by se najit asi spoustu dalsich veci, ale tohle mi prijde jako dostatek argumentu k tomu, abych si Angular dost rozmyslel :)

Jinak tvorba webu se v poslednich letech dost zmenila a je to jen dobre. Tenhle trend je sice pouze o abstrakci nad puvodnim navrhem, ale diky te abstrakci odpada spoustu zbytecnosti a clovek se muze zamerit na to dulezite. Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny. Tyhle casy jsou davno pryc :)

[mirec]

Bootstrap je skvely pomocnik, protoze diky tomu i "lama" muze vytvorit validni web

Mne vadí keď je tam pár tisíc nepoužitých pravidiel. Ak niekto ide na web bootstrapu, zvolí custom build, vyberie si len grid nič zásadné proti tomu nemám. Vadí mi však, že ľudia sú už tak leniví, že tam hodia celý bootstrap a všetky elementy pracne preštýlujú pričom by im skutočne stačil grid.

Navic vizualizace pomoci font-awesome ci glyphicons preci umoznuji s obrazkem pracovat jako s fontem.

V niečom je to dobré, v niečom nie. Na telefóne mi napr. z default konfiguráciou väčšinu webových fontov zobrazuje ako štvorčeky a ak tam nie je text musím si domyslieť na čo klikám. Kým je to len ako doplňujúca ikona k tlačidlu nevadí mi to.

A samotne jQuery? Prijde mi, ze se stalo modou na jQuery hrozne nadavat, ale samotny selector v jQuery je tak mocna vec, ze nakonec i ti zariti odpurci po nem proste sahnou. Osobne jsem si nevsiml, ze bych nekdy musel silene hackovat nekolik verzi jQuery.

Na pracovné veci jQuery používam, na osobné nie. jQuery nemám rád, je plné antipatternov, neskutočne pomalé a katastrofálne sa ladí. Dostávam však hotovú šablóny s javascriptom takže nemám moc na výber.

Za seba spomeniem pár vecí ktoré mi na jQuery zásadne vadia:

• $('#neexistujuciprvok').plugin() nevyhodí chybu (viem, je to filozofia jQuery, nevyhovuje mi to, radšej new Plugin(_.id('neexistujuciprvok')))
• eventy sa príšerne ladia, jQuery pri .on neregistruje funkciu ale registruje niekde svoj kód aby to dispatchoval a je pekne ťažké nájsť samotného pôvodcu eventu
• .on je v niektorých prípadoch hrozne neefektívne (kvôli dispatchom, ale neplatí vždy, treba na to dávať pozor)
• katastrofálna práca s dátovými typmi, ako príklad uvediem $.get, alebo $(..).data() ktoré v prípade, že premenná začína na znak '[', alebo '{' vrátia JSON. Môžte si skutočne vyskúšať vrátiť z webovej aplikácie plain text a $.get ho automaticky parsuje ako JSON. Tak isto <div data-premenna="{}"> parsuje ako JSON čo je často nebezpečné
• kopa ďalších malých drobností ktoré robí implicitne a so správnym vstupom spôsobia pád aplikácie, neskutočne ma to vytáča

Čo sa týka angularu vadí mi viacej vecí. Asi najviac ma vytáčalo, že nemá žiaden fallback pre browsery bez js (unobtrusive js). Nie že by to v dnešnej dobe až tak vadilo, ale ak ten web má prechádzať google musí sa mu servírovať statický obsah. Oficiálne riešenie od googlu: nainštalovať na webserver webkit browser, automaticky prechádzať web a ukladať statické súbory. Fakt super. React aspoň ráta s nejakým fallbackom, takže nemusím sa starať zvlášť o službu ktorá je tam len kvôli indexácii webu.

Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny.

Na googlackych produktoch sa mi dosť často stáva, že vďaka ich asynchrónnej inicializácii mám web načítaný tak za 5s. Teda tvári sa tak. Ďalších 25s čakám až môžem na niečo kliknúť. Ak je na nejakých elementoch href="#" tak je to celkom super lebo môžem naň kliknúť aj keď ešte nie je načítaný web a nič sa nestane. Ak je tam skutočný odkaz tak mi otvorí nejaký web a ja musím stlačiť späť a počkať až sa to znovu natiahne. Najlepšie na tom je, že netuším či sú všetky skripty natiahnuté lebo sa načítavajú asynchrónne (takže ani v hlavične tabu nevidieť načítavanie).

K samotnej použiteľnosti .. neviem ako je to v česku. Kde sa pohybujem ja ide internet väčšinou do 20kB/s. Čoraz častejšie narážam na weby ktoré sa načítavajú 5-10 minút.

[finc]

Ze je Bootstrap moloch vime asi vsichni. Nicmene, mas nejake statistiky, o kolik se web "zpomali", pokud necham cely bootstrap? Nicmene souhlas, ze je urcite vyhodnejsi si zachovat pouze to, co skutecne potrebuji. A pokud je to jen trochu mozne, tak at je toho co nejvice. Duvodem uz je samotny fakt, ze bych se casem stejne dostal do faze, kdy budu psat neco, co uz v tom Bootstrapu davno je.

Co se tyce font-awesome, tak se priznam, ze tuhle chybu jsem nezaznamenal. Testovali jsme aplikace i na mobilnim zarizeni a nic takoveho se nam v defaultnim nastaveni nestalo. Jakym prohlizecem jsi web oteviral?

jQuery ma asi milion chyb. Je pomaly, protoze ... DOM :)) Nicmene, pokud se nekdo upnul k html, tak asi moc jinou volbu nema. Spoustu veci, vcetne eventu lze nahradit prave zminovanym Reactem. Ono vubec jQuery v takovem pripade neni potreba. Pokud se teda clovek nedostane do faze, kdy potrebuje vyuzit pluginy, ktere jsou prave jQuery. Holt se stale jedna o nejrozsirenejsi platformu a v budoucnu se to zatim asi moc nezmeni. I weby s Angularem s nim v drtive vetsine pripadu pocitaji.

Startup webu, hlavne tech angularovskych je skutecne problem. To je take jeden z argumentu, proc je Angular jen hloupa moda :)

Nevim jak ostatni, ale rychlost 20kB/s je spise historii, ne? I kdyz chapu, ze jsou situace, kdy je clovek rad i za tuto rychlost. Nicmene tyhle nove javascriptove aplikace (s REST backendem) jsou proste trend a kdyby se prilis ohybali vuci vnejsim vlivum, jako je rychlost internetu, tak z toho opet vznikne kockopes. Stejne jako navrhy pred nimi :)

Jedna vec, ktera tady asi nebyla brana v potaz je to, ze pokud se podari co nejvice prosadit HTTP/2, tak to pro takovyto druh aplikaci bude jen vyhra. Binarni protokol, HTTP push, paralelni nacitani, apod. Ne nadarmo je spoluautorem i Roy Fielding, coz je ten chlapik, co napsal dizertacni praci, ze ktere vznikl ten dnesni buzzword REST :))

S Javascriptem se do budoucna pocitat musi, zatim nic lepsiho nikdo nevymyslel. Sice tady byly pokusy jako Google Dart, ale proste ostatni to ignoruji. Zejmena Microsoft proste toto akceptovat nebude. Je to ta dan za to, ze webove technologie nejsou zavisle prostredi. Neumim si predstavit situaci, kdy by se treba Facebookovsky React dostal do faze, kdy ho Microsoft bude podporovat. Nebo treba, ze by Facebook podporoval Angular :)

Kazdopadne ja mam javascript rad a i kdyz jsem v nem videl uz hodne prasackeho kodu, tak to neni chybou jazyka, ale pouze tech, kteri ten jazyk vyuzili. Javascript neni Java ci C#, coz si spoustu lidi holt nechce priznat :)

[mirec]

Jakym prohlizecem jsi web oteviral?

Safari. Ale mám iphone 3G takže podporu fontov tam mám slabú (myslím, že len SVG).

Pokud se teda clovek nedostane do faze, kdy potrebuje vyuzit pluginy, ktere jsou prave jQuery.

Toto ma tak trochu štve, lebo všetci píšu pre jQuery aj keď v súčasnosti už browsery podporujú pekne hračky ako selectory, aj forEach funguje dobre ... nevidím dôvod kvôli nejakému malému efektu tam dávať celé jQuery.

Startup webu, hlavne tech angularovskych je skutecne problem.

Štart je ešte v pohode keď tá aplikácia aspoň funguje. Ako užívateľovi sa mi často stávalo, že ten kto písal angular aplikáciu niečo nemal ošetrené a v istom momente prestala reagovať na udalosti. Teda v istom momente = asi po 10s používania :D Takže f5 a zase si počkať až to celé natiahne ...

Nevim jak ostatni, ale rychlost 20kB/s je spise historii, ne?

Vyššie rýchlosti sú v mestách. Ja som na Slovensku. Je to celkom hornatá krajina. Ak chytím 20kB tak som celkom rád. Tu v horách by musel byť vysielač na každom kopci čo je trochu ťažko realizovateľné.

Kazdopadne ja mam javascript rad a i kdyz jsem v nem videl uz hodne prasackeho kodu, tak to neni chybou jazyka, ale pouze tech, kteri ten jazyk vyuzili.

S týmto neviem či môžem súhlasiť. Čo je to prasácky kód? Keď sa snažím písať objektovo? Keď dedičnosť riešim prekopírovaním property? JS nemá definovaný žiaden coding štandard, takže všetci píšu hlava nehlava, nikto nevie poriadne vysvetliť na čo je prototypová dedičnosť dobrá ...

[Radek Miček]

S Javascriptem se do budoucna pocitat musi, zatim nic lepsiho nikdo nevymyslel.

Lepších jazyků je celá řada, JavaScript totiž patří mezi ty horší jazyky. Osobně bych upřednostnil, kdyby prohlížeče podporovali například LLVM IR.

[kralyk z abclinuxu]

Osobně bych upřednostnil, kdyby prohlížeče podporovali například LLVM IR.

WebAssembly

[Radek Miček]

Pěkné, ale v instrukční sadě momentálně chybí goto (LLVM má br). Kompilátory tedy budou muset přeložit goto na nějaké jiné konstrukce – například na while s vnořeným switchem nebo implementovat relooper jako má Emscripten.

[kralyk z abclinuxu]

Viz Why not just use LLVM bitcode as a binary format? Hlavní problém je zřejmě v tom, že LLVM IR není protable.

Proč nemají goto, nevim, asi protože v high-level jazycích většinou není. Kromě toho koukáš na naprostý prototyp, finální standard se imho bude ještě dost lišit...

[Radek Miček]

Proč nemají goto, nevim

Hádám, že proto, aby se to snadno přeložilo do JS nebo asm.js.

v high-level jazycích většinou není

To ano, ale některé jiné konstrukce z high-level jazyků se překládají na kód s goto – například pattern matching.

Kromě toho koukáš na naprostý prototyp, finální standard se imho bude ještě dost lišit

To je pravda, přidat goto v budoucnu zvažují jako možnost.

[kralyk z abclinuxu]

Mne vadí keď je tam pár tisíc nepoužitých pravidiel. Ak niekto ide na web bootstrapu, zvolí custom build, vyberie si len grid nič zásadné proti tomu nemám. Vadí mi však, že ľudia sú už tak leniví, že tam hodia celý bootstrap a všetky elementy pracne preštýlujú pričom by im skutočne stačil grid.

Když už musim dělat něco pro web, používám PureCSS, většinou to stačí a grids má imho lepší než bootstrap.

[chrono]

PureCSS má možnosti pre grid viac-menej rovnaké ako Bootsrap, jediný rozdiel je, že má stĺpcov viac (a teda prípadne oveľa viac nepoužitých pravidiel). ;)

[mirec]

Rozumnejšie by bolo keby to bolo spracované nejakým CSS preprocesorom a vygenerovalo by sa ich len toľko koľko je potrebných.

[finc]

Ale tech sloupcu nemusi byt 12. To je jen cislo, podle ktereho muzu fyzicky rozdelit bloky. Ve finale muzu mit v jednom radku 2 sloupce nebo klidne 400. Funguje tam zanoreni, takze v kazdem bloku mam opet tech 12 sloupcu.

Jinak proc, je to zrovna 12 a ne 5 ci 100 je asi jasne. 12 lze delit na poloviny, ctvrtiny ci tretiny :)

[ET]

a ja mel za to, ze nejdulezitejsi je obsah...

[⧠ A = 0]

Kdy žiješ?

[finc]

Pokud pises webovou aplikaci, dejme tomu na spravu dat z databaze, tak obsahem je preci dana databaze a ne text, ktery si tam pripises. Web ma dnes dve zakladni vyuziti. A to jako informacni medium a jako platforma pro aplikace. V nekterych pripadech se muzou prekryvat, v nekterych nikoli.

[rADOn]

Chapu, ze je to cele ironie, ale na druhou stranu tyhle nove pristupy prave umoznuji z webu vymackat maximum.

Me teda "moderni" web moc maximalni nepripada. Jenom se veci ktery driv delal browser presunuji do javascriptu, protoze autori webu jsou prece mnohem chytrejsi a lip vedi jak delat UI.

[Radek Miček]

Jenom se veci ktery driv delal browser presunuji do javascriptu

Teď se do JavaScriptu přesouvá ledacos. Za chvíli bude internetový prohlížeč poskytovat víc funkcionality než operační systém.

[mirec]

Samozrejme, hlavne zbavili používateľov tej zbytočnej histórie a tlačidla späť. Ved načo keď používateľ môže nekonečne scrollovať a keď na niečo klikne môže začať znova.

[pavlix]

A hlavně se nesmí implementovat vyhledávání. To už by se uživatel choval divně a stálo by to přinejmenším za hlídání tajnou policií.

[Jendа]

Existuje na to rovnák na vohejbák.

[mirec]

Existuje, sám som ho pár krát implementoval. Myslel som skôr toto.

[Kvakor]

Webove prohlizece jsou na takove urovni, ze i moloch bootstrap+jquery+angular+XXpluginu neznamena, ze by web byl pomaly ci nepouzitelny. Tyhle casy jsou davno pryc :)

Na desktopu možná, ale dnes leze dost velká část uživatelů na web ze zařízení, které rozhodně nemají výkonu nazbyt a pokud ano, tak je draze vykoupen zkrázením provozní doby při běhu na baterie. Použít takovýto obludný moloch na stránku, kterou by jako čisté HTML zobrazil snad i lepší jednočip, je jako vzít si na kopání brambor bagr (a u některých webů by to bylo spíš důlní rypadlo ).

[finc]

Opět jsou dve pohledy na web. Jedna je, ze tvorim verejnuu website, u ktere pocitam s tim, ze k ni pristupuje mnoho lidi pres mobilni zarizeni skrz mobilni data. V takovem pripade budu resit datovou velikost.

V pripade druhem, kdy tvorim webovou aplikaci, ke ktere se nejvice pripojuji lide z intranetu ci stolnich PC, protoze se jedna o slozitejsi aplikaci, tak resim spise efektivitu vyvoje a uzivatelske prostredi.

[rADOn]

Jo, jenze vetsina dnesnich webaru by nepochopila co to je "uzivatelske prostredi" ani kdyby je jedno prejelo autobusem. Ty tvoje dva pohledy jsou jen zpusob jak si pohodlne zduvodnit vymysleni (a placeni!) narovnavaku na ohejbak.

[finc]

Mozna mas pravdu. Mozna vsichni plati za neco, co bys udelal lepe, efektivneji, levneji a rychleji. Nam ostatnim staci fakt, ze vyvoj webu se meni a meni se k lepsimu :)

[mirec]

Myslím, že budeme mať problém aj s definíciou lepšieho ;) Dnes som napr. hľadal chybu v kóde a objavil som tam použitie značiek spam. Kedysi by na to validátor niečo vypísal, lenže HTML5 ;)

[finc]

Za to muze HTML5? Tag spam je validni? To preci nema co delat s html5 ci starsi verzi. Stale je vydana specifikace, ktera jasne urcuje, ktere tagy a ktere atributy jsou validni. U html jen prislo navic k tomu, ze lze pouzivat atribut data-*, kde za hvezdicku si clovek mohl dosadit cokoli. Pokud nekdo pouziva jine tagy ci atributy, tak k tomu asi nelze co rict... Samozrejme existuji frameworky, jako zminovany Angular, ktery do tagu cpe svoje atributy, ale nakolik je to spravny pristup, tot otazka. Me osobne se tenhle pristup prici...

[mirec]

OK beriem späť, teraz som to revalidoval a HTML parser sa správa trochu inak než som čakal. Keď som opravil ostatné chyby tak spam už zobrazuje ako chybu.

[rADOn]

K lepsimu? Pred deseti lety jsem mohl mit v prohlizeci libovolne mnozstvi tabu, stranky se renderovaly rychleji, fungovalo skalovani, web se dal pouzivat na libovolnem zarizene vcetne treba brailovych terminalu, fungovaly klavesove zkratky… Dnes se povazuje za uspech kdyz funguje zpatecni tlacitko. Technologie se mozna zlepsuji, ale ten "lepsi" web jsem prilis nezaznamenal.

[kralyk z abclinuxu]

Blbost, to je akorát nostalgie.

Stránky se psaly prasácky vždycky. Pamatuju se okolo roku 2005 na některý weby - zejména asijské MMORPG tím byly proslulé - většinu webu tvořily obrázky, hlavní nadpis + grafika byly ve flashi, na stránce bylo ještě několik dalších flashů a celé to bylo optimalizováno pro IE a rozlišení 1024×768 (tj. v ostatních browserech nefungovaly náhodně různé věci). V porovnání s nějakým blbým Bootstrapem byla ta stránka mnohem větší a to ještě na tehdejším připojení. Místo JS animací jsi tam měl animovaný gify - to bylo fakt o hodně lepší.

A to nezmiňuji takové věci jako frames (které mimochodem kurvily tlačítko zpět kolikrát víc než dnešní JS), Java applets, VBScript a poobné technologie, které jsou naštěstí dávno pryč.

Jasněže dneska umožňují technologie prasit weby, ale tak to bylo vždycky. Dnes máme imho lepší možnosti, jak se s tím vyrovnat. Když si ve vlaku při průjezdu Pardubicema nebo nějakou takovou p*delí zapnu tethering a dává to 500 kB/s, tak mě nějakej Bootstrap nebo jQuery absolutně nezajímaj.

[finc]

A co se tyce onech tabu.

Tak napriklad Chrome je povazovano za zrout pameti. A je to pravda, jenze...

Jsou dva pristupy:

1. Bud tedy budu setrit pamet, zpomalim renderovani, zpomalim javascript, zmensim cache a budu uzivatele prudit.

2. Budu pocitat s tim, ze pamet je dnes tak levna zalezitost, ze radeji budu ukousavat vic a uzivateli prinesu rychlejsi prostredi.

...

Je to asi jako se bavit, proc lide nepisi v asembleru? Vsak je to rychlejsi nez Java :)) Myslim, ze je treba trosku slezt ze stromu a podivat se co je za rok.

Osobne si pamatuju doby, kdy 1MB RAM stala pres tisic korun. A dnes? Jestli mi Chrome "spapa" 1GB nebo 5GB je mi uplne jedno. Pamet temer nic nestoji...

[mirec]

Hmm čo také úžasné robia webové aplikácie že sú tak náročné na výkon?

Pamätám si časy keď sa js intepretoval 100x pomalšie ako dnes. Pamätám si časy keď som mal 10x slabší stroj.

Otvorím si napr http://ckeditor.com/builder. V stĺpci Available plugins napíšem "aaaa" a čakám 10s až mi vyhodí, že môjmu vyhľadávaniu zodpovedá 0 pluginov (zatiaľ CPU na 100%). Vyhľadávanie v necelých 150 položkách! To už ide tak pomalý, že by som mohol očami prejsť a vybrať tie položky a budem približne rovnako rýchly.

[finc]

Zkousel jsem ten web, ktery jsi poslal a za prve necekam 10 vterin, cca 1 vterinu a za druhe mam pocit, ze krome toho leveho okna to filtruje i v pravem. Nicmene to vyhledavani mohlo byt o mnoho rychlejsi, protoze tam nedochazi k zadnemu volani na server, ale vse se zpracovava na klientske strane.

Vyzkousej vyhledavani treba zde: http://jrowny.github.io/react-absolute-grid/demo/

Provede mnohem vice operaci a rychlostne je to nekde jinde :)

[mirec]

OK, mám možno starý stroj, o to nejde. Chcel som tým povedať, že väčšina ľudí píše ako prasce. Ó tom, že sa to dá napísať dobre ma netreba presviedčať, ja sa tou prácou živím.

Vyvíjať sa dá dnes omnoho lepšie než pred 10 rokmi, nástroje sú neporovnateľne lepšie, podpora prehliadačov o ktorej sa nám ani nesnívalo ak nie je potrebné optimalizovať pre IE6. Napriek tomu si ľudia nedajú ani trochu námahy optimalizovať.

[Václav "Darm" Novák]

Napsal jsem aaaa, okamžitě mi to vyfiltrovalo těch 0 pluginů a load stoupl na okamžik z 7% na 13% CPU. Firefox, Core 2 Duo T8100, 4GB RAM.

[mirec]

Dobre, trochu preháňam, 1.2s na znak. Core(TM)2 Duo CPU T5250, firefox. Mimochodom v tom super vyhľadávaní nefunguje ani paste ;) Čakal by som že zaregistrujú aspoň oninput.

[Václav "Darm" Novák]

Je fakt že každý stisk klávesy způsobí lehčí zadrhnutí, trochu otravné. Ale paste mi funguje… Fakt zvláštní :D Každopádně to není zrovna ukázka příjemně fungujícího rozhraní. Mimochodem, ještě jednou díky za blog. Člověk se i z diskuze dozví zajímavé věci. Třeba o react.js bych vůbec nevěděl.

[mirec]

Paste klávesovou skratkou funguje, ale myšítkom alebo cez kontextové menu nie keďže majú registrované len onkeyup. Chápem, že niekto registruje onkeyup kvôli kompatibilite, ale v súčasnosti by sa už malo registrovať hlavne oninput, ktoré rieši všetky možné spôsoby zadávania textu.

[mirec]

Aj dnes môžem otvoriť koľko chcem tabov. Kým je to číslo menšie než 5.

[finc]

Promin, ale tohle nejsou argumenty, to je jen nesmyslne tlachani. Vubec neni pravda, ze drive by web fungoval lepe. Prave naopak: java aplety, flash, nevalidni html, frames, apod.

Zkus si prosim nastudovat nejake novejsi veci, mozna zmenis nazor. Mozna ne, ale alespon budes vedet vice o novych pristupech.

Ta "tuna" javascriptu, o ktere se zde nekdo zminoval, ma totiz hlavni efekt a to je v tom, ze diky tomu UI funguje pomoci AJAXu, coz prave onen web dost zrychluje.

Jinak dalsi blbosti, typu: tlacitko zpet.... Staci se podivat na jednoduchy example treba od AngularJS, kde je krasne ukazano, ze prave ono tlacitko zpet funguje a pocita se s nim. Nikoli, ze autor webu zprasi javascript a napise: "nepouzivejte tlacitko zpet". Tyhle casy jsou uz diky bohu pryc.

Takze znovu: Je skvele, ze se vyvoj webu posunul a to spravnym smerem :))

[mirec]

Niekedy funguje, niekedy nie. Upravoval som po bývalom kolegovi angular aplikáciu a fungovalo to ... no niekedy áno niekedy nie. Pri kliknutí na niečo kým niečo iné nebolo načítané spôsobovalo krásny race condition, takže sa celá aplikácia rozletela. Vlastne stačilo 2x stlačiť späť pred tým než sa stihol načítať obsah a celé sa to rozpadlo.

Toľko k výhodám. Samozrejme angular mal aj svoje temné stránky napr. nefungujúce otvorenie na novej karte a podobne.

[finc]

Chapu, nekdy se veci "poserou" behem procesu :)

Nicmene v zakladu se s tlacitkem zpet pocita, takze pokud je v aplikaci nefunkcni, tak je to problem autora aplikace. Je to to same, jako kdyby desktop aplikaci nebylo mozne ukoncit :))

[rADOn]

Promin, ale to neni tlachani, to je popis - subjektivniho - faktu. Kdyby se mi web pouzival lip nez driv tak nemam duvod si stezovat ne?

Ano, flash, ramce a podobny hruzy byly problem vzdycky. Ale taky vzdycky platilo ze lidi co se k tomu uchyluji jsou amateri a jejich dila jsou prasarny. Zatimco dneska tyhle prasata jsou "vyvojari" pokud prasi v angularu. To co popisujes jako "reseni" zpatecniho cudliku nazorne ukazuje kde cokl zakopany: dnesni "webovi" "vyvojari" vubec nechapou zakladni principy na jakych byl web postaven, pocinaje oddelenim prezentacni vrstvy.

Ta "tuna" javascriptu, o ktere se zde nekdo zminoval, ma totiz hlavni efekt a to je v tom, ze diky tomu UI funguje pomoci AJAXu, coz prave onen web dost zrychluje.

S tim jsem ted udelal zajimavou zkusenost - procitam si nejaky historicky dokumenty na webu NASA na ktery evidentne nikdo nesah od vynalezu Mosaicu - a je to skvely. Da se to bez problemu cist na mobilu v metru: stranky se stihaj dotahnout behem cekani ve stanici, nezere to baterky ani pamet, necha se to pohodlne ovladat z displeje… Zadny ajaxovy web mi nefungoval tak dobre. Tak kde je ten spravny smer?

[#Tom]

Díky, moc pěkný článek.

Správně napsaný web by měl mít oddělený obsah od formy. Třeba tak, že server sestaví XML dokument s obsahem a pomocí XSLT šablony jej převede na (X)HTML stránku (klidně s celou tou moderní kupou hnoje, je-li to nutné), PDF dokument, TeXový zdroják nebo něco úplně jiného.

[vlastikroot]

Taky bych mohl psat web v brainfucku, ktery by se prelozil v javascriptu a renderoval celou stranku do webgl.