28. 3. 2015

Webové komponenty <budoucnost-webu>

Co jsou to webové komponenty a co nabízejí.

Chtěl bych vám přiblížit koncept webových komponent, který je momentálně ve fázi návrhu standardu HTML a drasticky změní způsob, jakým web vyvíjíme.

#Stávající web

Jazyk HTML v kombinaci s JavaScriptem si prošel již dlouhou cestou a vývojem. Čím více se začal web využívat k tvorbě komplexní aplikací a nejen obyčejných prezentačních stránek, začala vznikat potřeba na nové funkcionality. Pokud v dnešní době potřebujete vytvořit dynamickou webovou aplikaci bez nutnosti renderování šablon na straně serveru, musíte napsat hromadu JS kódu.

V případě, že potřebujete vytvářet znovupoužitelné komponenty – např. výpis položek či záložky, musíte tyto komponenty naprogramovat.
Samozřejmě toto usnadňuje mnoho frameworků, avšak uvnitř nich je to opět spousta kódu a pokud byste chtěli použít komponentu v jiné aplikaci, jste závislí na zvoleném frameworku.

#Co jsou to webové komponenty?

Lidé stojící za vývojem standardu HTML začaly přemýšlet. Došlo jim, že dnešnímu webu chybí nativní podpora pro znovupoužitelné komponenty.
Komponenty v běžném HTML známe velmi dobře a velmi často s nimi pracujeme. Například tagy input, select nebo textarea. Jedná se o samostatné komponenty, které mají své zobrazení a chování. Tyto komponenty řeší prohlížeč nativně sám.

Ovšem když srovnáte klasické programování UI s webem, tak např. takový výpis (ListView) a nebo sada záložek (Tabs) jsou též komponenty. Mají své typické zobrazení a chování. A zde přišla myšlenka, proč by tyto vlastní komponenty nemohly být v HTML nativně podporovány jako ty běžné.
Jak používáme webové komponenty v HTML? Stejně jako ty běžné, srovnejte následující.

<select name="items">
    <option value="item-1">Item 1</option>
    <option value="item-1">Item 1</option>
    <option value="item-1">Item 1</option>
</select>
 
<ui-tabs>
    <ui-tab>Úvod</ui-tab>
    <ui-tab>Produkty</ui-tab>
    <ui-tab>Kontakt</ui-tab>
</ui-tabs>

Velmi jednoduché a výstižné, že?

Koncept webových komponent se skládá z několika jednotlivých funkcionalit.

#Custom elements

Vlastní HTML elementy jsou základem webových komponent. Umožňují nám definovat vlastní element (tag), jeho vzhled a chování. Vlastní elementy se registrují pomocí JavaScriptu a poté jsou používány jako klasické HTML tagy – viz ukázka výše.

#HTML templates

Součástí konceptu webových komponent jsou šablony. Pomocí nativního HTML tagu <tempalate> můžeme definovat kus HTML kódu, který není vykreslen (ani vyparsován) a můžeme jej později tzv. materializovat – přidat do DOMu.

Příklad:

1
2
3

<template id="my-tpl">
    <p>Hello template!</p>
</template>

Díky HTML šablonám nám odpadá nutnost používat nepřirozený zápis, který aktuálně používají různé frameworky, a který se musí složitě zpracovávat.

1
2
3

<script type="text/template">
    <p>Hello template!</p>
</script>

#Shadow DOM

Představte si následující příklad. Máme nějaké CSS v dokumentu a přidáme vlastní komponentu, která vytváří svůj vlastní DOM. Následující kód reprezentuje již zpracovaný DOM.

<style>
    .tab {
        background: #f3f3f3;
    }
</style>
 
<ui-tabs>
    <style>
        .tab {
            background: #666666;
        }
    </style>
 
    <div class="tab">Úvod</div>
    <div class="tab">Produkty</div>
    <div class="tab">Kontakt</div>
</ui-tabs>
 
<ul id="my-tabs">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 1</li>
</ul>

Co se v tomto případě stane? Styly definované v našem dokumentu a ve webové komponentě budou kolidovat. A pokud bychom chtěli použít querySelector, tak nám bude hledat i elementy v naší webové komponentě, což nechceme. Pokud mají být webové komponenty samostatné a znovu použitelné, nesmí nám uvedené věci kolidovat.

Proto byl vymyšlen Shadow DOM, což je běžný DOM, který ovšem nepřejímá styly z běžného tzv. Light DOMu a nelze se k jeho obsahu dostat přes běžné metody, jako jsou document.getElementById či document.querySelector.

Díky tomu vlastní komponenty získávají na nezávislosti a mohou definovat svůj vzhled a chování bez závislosti na nadřazeném dokumentu.
Výchoze vlastní HTML elementy Shadow DOM nevytvářejí, můžeme jej ovšem velmi snadno vytvořit ručně a využít tak všech jeho výhod. Důležité je zmínit, že k Shadow DOMu se lze dostat pomocí JS a i přes nové CSS selectory, avšak trochu jinou cestou.

#HTML imports

HTML importy jsou ekvivalentem include nebo require, jak jej známe z jiných jazyků. Umožňují nám do aplikace načítat jednotlivé součásti.

Příklad:

1	<link rel="import" href="components/ui-tabs.html" />

Importovaný HTML dokument se nijak nezobrazuje, pokud se o to nepostaráme pomocí JS. Ovšem spuštěný JS kód v importovaném dokumentu nám umožňuje načítat skripty a hlavně registrovat vlastní HTML komponenty.

#Podpora a použitelnost

Aktuálně je koncept webových komponent ve fázi návrhu HTML standardu.

Webové komponenty jsou zatím plně nativně podporovány pouze v prohlížeči Google Chrome / Chromium, a to hlavně proto, že lidé z Googlu se na vývoji konceptu podílejí. Co se podpory v ostatních prohlížečích týče, existují tzv. Polyfills knihovny, které se snaží podporu webových komponent suplovat pomocí opravdu velké hromady JS kódu. V praxi ovšem příliš nefungují. Prohlížeč Firefox je hned za Chromem v nativní podpoře nejblíže a v blízké době bych očekával, že podpora bude plná. Chybí zde pouze HTML importy.

Osobně si myslím, že podpora v majoritních prohlížečích by mohla být kompletní do konce roku 2015.
Aktualizace (prosinec 2016): Podpora je stále stejně bídná.

V praxi jsou aktuálně webové komponenty použitelné pouze pro intranetové aplikace, kde můžete uživatele přinutit, aby aplikaci používali v Google Chrome, a nebo aplikaci můžete distribuovat například s portable verzí Chromu.

#Více informací a zajímavé zdroje

Tento příspěvek je spíše úvodní, a proto uvádím odkazy na podrobné popisy a návody. Časem bych rád sám napsal pár konkrétních návodů v češtině.