VUT v Brně — case study
Redesign webu Vysokého učení technického v Brně je s počtem 85 statických šablon jeden z největších projektů, který jsme v SUPERKODERS kódovali. Proto by byla velká škoda, kdybychom se tu nepodělili o některé zajímavosti z jeho tvorby.
Příprava a počáteční strasti
Hned první výzva, před níž jsem na začátku stáli, způsobily samotné grafické podklady. Ty nám od Jirky Tvrdka dorazily v programu Adobe XD (toho času ještě v beta verzi), se kterým nikdo z nás neměl žádnou zkušenost. Přes prvotní nejistotu a drobné obtíže musím ale s odstupem uznat, že se mi nakonec s Adobe XD pracovalo velmi dobře. Pokud s ním přijdete někdy do styku, nemusíte se ho příliš obávat.
Podruhé nám život zkomplikoval fakt, že v momentě startu projektu nebyla velká část designů stránek hotová. Projekt byl tedy v té době již ve skluzu, a to jsme nenapsali ještě ani řádku kódu.
Dvakrát měř a jednou řež
O to pečlivější pak musela být příprava před samotným kódováním. Co nejlépe si rozvrhnout obecné styly, layout a jednotlivé komponenty tak, aby bylo jednoduché dodatečně připravit jejich modifikace. O těch jsme věděli, že s dalšími navrhovanými stránkami určitě přijdou. Netušili jsme ale, jak budou přesně vypadat.
Nad jednotlivými vytisknutými stránkami jsme si v sedli ve třech lidech a snažili se vymyslet co nejlepší architekturu. Víc hlav opravdu víc ví a nezaujatý kolega mnohdy dokáže do diskuze přinést podnětný návrh, nad kterým by jiného člověka třeba vůbec nenapadlo přemýšlet.
Technologický stack a cíle projektu
Naše statické šablony měl na starost napojit na redakční systém interní tým VUT pod vedením Marka Strakoše, takže bylo nutné se s ním nejprve spojit a zjistit případná technická omezení a požadavky, abychom mohli vhodně vybrat nástroje do devstacku.
K našemu štěstí a spokojenosti jsme dostali úplně volnou ruku a zvolili tedy námi již mnohokrát prověřenou sestavu — Stylus, ES6, SVG ikony, Nunjucks a další — poháněnou Webpackem a Gulpem.
Na projektu jsme si stanovili následující cíle:
- Rychlost načítání,
- modulárnost komponent a snadná rozšiřitelnost,
- jednoduchá tvorba nových stránek z již existujících komponent,
- plná podpora funkčnosti napříč zařízeními,
- vybudování style guide všech použitých komponent.
Vynikající rychlost načítání je u nás základ
Po zkušenostech z tvorby front-endu pro iRozhlas jsme samozřejmě chtěli, aby byl i nový web VUT pekelně rychlý. Opět jsme se tedy rozhodli ušetřit pár Kb a vyhnuli se jQuery. Dopředu jsme věděli, že některé části původního webu, které se budou na ten nový přesouvat, jQuery využívají. Do budoucna se ale bude jQuery odstraňovat, takže jsme s tím chtěli počítat již od začátku.
Nápad to byl sice skvělý a nakonec to i dobře dopadlo, ale nejednou jsem se zapotil při hledání vhodného pluginu pro nějakou komplexnější potřebu jako je carousel, či datepicker. iRozhlas je v tomto ohledu poměrně jednoduchý a skoro všechny skripty jsme si psali sami, ale pro web s různým typem obsahu a velkým množstvím komponent by to nebylo moc možné.
Vanilla JS pluginů je samozřejmě spousta, ale těch kvalitně napsaných a datově nenáročných už tolik není. jQuery opravdu stále celkem jednoznačně dominuje. Namátkou zmiňujeme pár pluginů, které se nám nakonec osvědčily, a třeba tím někomu ušetřím nějaký čas hledáním a zkoušením:
- Flatpickr — klasický datepicker s možností výběru času a jazykovou lokalizací.
- Headroom.js — umožňuje skrývání / zobrazování hlavičky při scrollu.
- Tippy.js — tooltip s opravdu velkým množstvím možných nastavení.
- Macy.js — jednoduché vytváření layoutů ve stylu Masonry s možností definování různého nastavení napříč breakpointy.
- Choices.js — selectbox s našeptávačem a možností vlastní HTML šablony pro jednotlivé položky.
- basicLightbox — velmi jednoduchý lightbox pro zobrazení obrázků, iframů či vlastního HTML.
Modulárnost a skládání komponent
Všechny stránky se obecně snažíme kódovat co nejvíce modulárně. Jednotlivé designové bloky drobíme na úrovni HTML na co nejmenší, samostatně použitelné komponenty. Toto nám umožňuje z malých částí kódu skládat komponenty komplexnější, a až pak i celé stránky (vycházíme z obdobné filozofie, na které stojí atomic design).
Drobné odlišnosti v různých kontextech použití komponenty (zejména různá odsazení) pak řešíme na konkrétních místech pomocí vlastních utilit tříd podobných třeba těm v Bootstrapu 4.
Komponenty, které se na stránkách opakují a mají pouze drobné odlišnosti a různý obsah, je vhodné dát do samostatné šablony, a tu pak na potřebných místech includovat s různými daty. Templatovací jazyk Nunjucks v tomto ohledu skvěle pomůže a případné úpravy velmi zjednoduší. Můžete totiž sebemenší změny editovat na jednom místě a ne třeba v desítkách různých šablon.
Jednoduchá šablona pro hero box může vypadat takto:
<div class="b-hero">
<div class="b-hero__content holder holder--lg">
<h2 class="b-hero__title">{{ hero.title | safe }}</h2>
<p class="b-hero__subtitle">{{ hero.subtitle }}</p>
</div> <div class="b-hero__img">
<img src="{{ assets.images }}illust/{{ hero.image }}">
{% if hero.video %}
<a href="#" class="playlink b-hero__playlink">
<span class="vhide">Přehrát</span>
</a>
{% endif %}
</div>
</div>
A použití v šabloně je pak velice jednoduché:
{% set hero = {
title: '98 % absolventů sežene do roka práci',
subtitle: 'Rozhovor s rektorem VUT',
image: 'b-hero--03.jpg'
} %}{% include 'parts/b-hero.njk' %}
Podobné workflow pak dokáže na velkém projektu při refaktoringu ušetřit hodiny práce.
Podpora moderního JS i ve starších prohlížečích
Při psaní moderního javascriptu a nutnosti podporovat starší prohlížeče, které neznají některou novější syntaxi a funkce, se nedá vyhnout použití transpilátoru a polyfillů. Transpilaci nám hravě zařídí pomocí Webpacku Babel, na tom není nic složitého.
U polyfillů jsme si ale lámali hlavu nad tím, zda je opravdu nutné podsouvat spoustu kódu navíc všem prohlížečům, tedy i těm moderním s nativními funkcemi. Naštěstí není.
Existuje totiž skvělá služba Polyfill.io, která dokáže ad hoc detekovat použitý prohlížeč a dynamicky uživateli servírovat pouze ten kód, který potřebuje. Ve většině případů stačí na stránku vložit následující snippet a není třeba se o nic dalšího starat:
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>Polyfill.io defaultně podsouvá sadu nejčastěji použivaných polyfillovaných funkcí. V případě potřeby je možné samozřejmě vynutit i další funkce, a to pomocí parametru v url adrese skriptu. Třeba na VUT používáme oproti defaultu navíc ještě Array.prototype.find a Array.prototype.includes. Zápis skript tagu pak tedy vypadá takto:
<script src="//cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>Seznam všech jednotlivých feature, pro které Polyfill.io umí nabídnout polyfill (včetně informace, zda je zahrn defaultně a datové náročnosti), je pak přístupný tady.
Style Guide komponent
Web VUT je v podstatě pouze začátek, do budoucna se plánuje postupný přechod na nový design i u stránek jednotlivých fakult a pracovišť. Aby si to každé pracoviště mohlo udělat samo, bylo nutné vytvořit přehledný style guide s ukazkámi použití jednotlivých komponent.
Různé automatické generátory typu Pattern Lab, Atomic Docs, či SC5 samozřejmě známe, ale zatím jsme nenarazili na takový, který by plně vyhovoval našim potřebám. Kolega Tomáš Krejčí měl v minulosti podobný problém a u jednoho projektu se rozhodl vytvořit style guide ručně.
Nakonec jsme na VUT tedy zvolili stejné řešení. Díky použití Nunjucků a rozdělení komponent na samostatné includy to vlastně nebylo moc složité, a co se časové náročnosti týče rozhodně srovnatelné s tím, pokud bychom použili nějaký výše zmíněný nástroj.
Na stránce se tedy includuje komponenta v různých variantách do připraveného divu, skript si to zparsuje a postará se o vytvoření náhledového snippetu s HTML kódem a případným komentářem.
Na VUT jsme odvedli opravdu velký kus práce a získali větší přehled ve vanilla JS pluginech. V tomto rozsahu projektu jsou ale nejcennější zkušenosti z oblasti organizace kódu a komponent.
