Mají budoucnost šablonovací systémy v JavaScriptu?

Dnešní článek patří do rubriky Subjektivně. Jejím cílem je zejména poskytovat prostor pro názory a pohledy na aktuální dění v oblasti webových technologií i na jejich vývoj do budoucna. Jedná se o osobní názory, které se nemusí vždy shodovat s názory redakce. Pokud máte co říct, pojďte k nám psát Subjektivně.

AJAX někdy použil snad každý (a kdo tvrdí, že ne, ten ho používá dodnes). Objevuje se několik scénářů s jeho použití, stále častěji ovšem narážím na následující scénář (kupříkladu v seriálu Davida Grudla zde na Zdrojáku):

1. Webová stránka na základě události vytvoří AJAXové volání na server.
2. Server vrátí data ve formátu HTML.
3. Webová stránka přijatý fragment HTML zobrazí.

Od začátku mi tomhle řešení připadlo svým způsobem nečisté. Ať už proto, že se zde obvykle neprovádí žádná kontrola přijatých dat (obdrží se fragment HTML, který „cosi“ obsahuje a ono „cosi“ se vloží kamsi do stránky). Ale i proto, že v takovém nemohu pracovat s daty, ale jen s jejich HTML výstupem  (pokud budu chtít použít stejnou AJAXovou službu na jiném webu, možná i na jiném místě webu stávajícího, je docela možné, že budu muset návratový HTML kód mého AJAXového volání trochu upravit, aby vyhovoval nové stránce).

Jako příklad si můžeme uvést anketu (a už jsem takové viděl), u které při hlasování uživatele dojde k AJAXovému volání na server a přijetí fragmentu HTML, který obsahuje kód HTML celé ankety v odhlasovaném stavu (tj. kód celé ankety se zobrazenými výsledky), a ten se vloží do stránky.

Jenže, jak to vyřešit líp?

Šablony v JavaScriptu

Zbystřil jsem, když jsem loni zaslechl o používání šablonovacích systémů v JavaScriptu. To mně totiž hned připadlo jako vhodné řešení.

Jak to funguje? V případě ankety zmiňované výše by odpověď serveru obsahovala data, např. ve formátu JSON (budou to opravdu jen data obsahující výsledky jednotlivých hlasování ankety, bez jakéhokoliv HTML kódu), na ty na straně prohlížeče aplikujete šablonu a vygenerovaný výstup vložíte do stránky.

Má to smysl? V případě, kdy AJAX na stránce používáte maximálně jen pro vyřešení takové ankety, je ve výsledku celkem jedno, které z uvedených řešení použijeme a nejspíš zůstanete u původního – obvyklejšího – řešení. Pokud ovšem plánujete vaši aplikaci na AJAXu postavit (lidově řečeno „aplikace typu Gmail“), pak se jistě vyplatí použití takového šablovacího systému minimálně zvážit.

Dalším krokem může být vložení validace dat mezi AJAXové volání a zobrazení výsledku. K tomu můžeme použít např. mechanismus JSON Schema (obdoba schémat z XML), který si pomalu nachází cestu do javascriptových frameworků. Tenký klient na straně prohlížeče nám v takovém případě maličko „ztloustne“, ovšem pokud tvoříte opravdovou RIA, tak se zmíněnému ztloustnutí stejně nevyhnete.

PURE – jednoduchý javascriptový šablonovací systém

Jedním ze systémů, které podporují šablony v JavaScriptu, je projekt PURE. Jedná se o jednoduchou knihovnu, která má podporu pro frameworky jQuery, MooTools a Prototype. Jeho základ tvoří metoda autorender, kterou si hned předvedeme. Mějme v dokumentu umístěn následující kód HTML:

<div id="output">
  <div class="item1">...</div>
  <div class="item2">...</div>
</div> 

Do něj můžeme vložit data (nebo přepsat data stávající) pomocí volání:

$("#output").autoRender({"item1" : "nějaký text", "item2" : "nějaký text" }); 

Argumentem funkce autoRender jsou data ve formátu JSON, které nám vrátilo nějaké AJAXové volání. V našem případě došlo přímo k nahrazení dat ve vybraném úseku stránky (data se na správné prvky napárovala pomocí hodnot atributu class). Můžeme ovšem použít i vlastní připravenou šablonu, kterou předáme metodě jako druhý parametr. Představení dalších možností PURE včetně snadné práce s tabulkami nebo vnořenými seznamy najdete v dokumentaci nebo na blogu projektu.

Domplate – šablonování ve Firebugu

Dalším javascriptovým šablonovacím systémem je projekt Domplate. Ten sice v jeho aktuálním stavu nebudete moci použít (funguje pouze ve Firefoxu, ačkoliv autoři přislíbili podporu dalších prohlížečů), přesto by mohl ukazovat směr, kterým se javascriptové šablonovací systémy mohou vydat, a proto si jej krátce představíme. Domplate pochází od tvůrců Firebugu, kteří jej používají v rámci Firebugu pro dynamicky generované části rozhraní.

Domplate na rozdíl od projektu PURE zavádí vlastní šablonovací jazyk, zápis šablon může vypadat následovně:

var template = domplate(
{
    tag:
        DIV(
            SPAN("Nějaký text: "),
            SPAN("$object.item1"),
            BR(),
            SPAN(class: "bold", "$object.item2")
        )
}); 

Všimněte si, že na rozdíl od projektu PURE, který pro označení míst v šabloně používal class atribut HTML, obsahuje Domplate vlastní mechanismus a na class se nespoléhá. Obsahuje dále podporu vnořených šablon, cyklů s možností tvorby vlastního iterátoru a další zajímavosti.

Domplate si můžete vyzkoušet online. Pokud vás projekt zaujal, více se o něm dočtete na blogu  Software is Hard od českého autora.

Další možnosti

Oba zmíněné příklady byly jen úvodem do problematiky. Existuje řada dalších projektů, které zmíním alespoň odkazem. Trochu podobný způsob jako project PURE zvolil i autor projektu Chain.js a spoléhá se na párování dat pomocí atributu class. Autoři systému jTemplates šli cestou vlastního jednoduchého šablonovacího jazyka obsahujícího mj. instrukce pro tvorbu cyklů nebo volání vnořených šablon. Součástí projektu TrimPath je projekt JST (JavaScript Templates), který obsahuje šablony s instrukcemi nejen pro tvoru cykly, ale také instrukce podmínek pro větvení kódu. Mezi další šablonovací systémy patří JStemplate a Patroon.

Budoucnost

Je vidět, že šablonovací systém v JavaScriptu řadě vývojářům chybí (jedná se ostatně o přirozenou evoluci související s častějším a častějším používáním AJAXu a přenosu části logiky ze serveru na klienta). Prohlížeče takový systém nenabízí, a proto si vývojáři tyto systémy sami vytváří.

Na druhou stranu přestože šablonovacích systémů existuje celá řádka, nemám pocit, že by jejich používání bylo příliš časté. Vlastně nevzpomínám si, že bych při zkoumání kódu nějakého projektu na používání javascriptových šablon kdy narazil. (Kromě již zmíněného Firebugu a prohlížeče Google Chrome – ta jeho část, která je postavená na JavaScriptu, šablony využívá, jak se v něm můžete sami přesvědčit, např. na stránce „view-source:chrome://new­tab/“.) Sám jsem zvědav, zda se to změní.

Šablonovací systémy jsou na tom dnes podobně jako javascriptové frameworky před několika lety. Existuje jich hodně, ale zatím se nevyprofilovaly ty hlavní, u kterých bychom mohli očekávat jistou spolehlivost a další vývoj. Pro vývojáře tak není snadné zvolit, který ze šablonovacích systémů vybrat, což je jistě mínus.

Na druhou stranu tu je vždy i další možnost, a to napsat si šablonovací systém vlastní. O tom, že se může jednat o slabých několik desítek řádků kódu, vás možná přesvědčí John Resig ve svém článku JavaScript Micro-Templating.