Javascriptaření: nejen jQuery živ je JavaScriptař

Po poměrně urputném odporu JS vývojářů proti jakýmkoli cizím knihovnám (ještě před několika lety) se situace pomalu obrací a jQuery dnes naleznete téměř na každém webu. Ovšem jQuery není jediná JS knihovna, která může ušetřit práci. Ukažme si některé další, které poměrně úspěšně táhnou světem.

Seriál: Javascriptaření (9 dílů)

  1. Javascriptaření: hrajte si s funkcemi! 31.1.2011
  2. ECMAScript Strict mode ve Firefoxu 4 8.2.2011
  3. Javascriptaření: nejen jQuery živ je JavaScriptař 8.3.2011
  4. Javascriptaření: fyzika, grafika a společenská konverzace 23.3.2011
  5. JavaScriptaření: drátujeme, překládáme, spojujeme 31.3.2011
  6. Javascriptaření: ukažte mi, označte mě, opravte mě 13.4.2011
  7. Kontrola JavaScriptu s JSLint a JSHint 14.7.2011
  8. Základní vzory pro vytváření jmenných prostorů v JavaScriptu 10.10.2011
  9. Javascriptaření: překladače, pakovače 9.11.2011

V tomto Javascriptaření vynecháme velké frameworky a knihovny jako YUI či Closure a zaměříme se na menší, ale nikoli méně zajímavé. Pokud sledujete zahraniční zdroje, jistě vám neuniklo, že se o nich v poslední době píše nejen jako o zajímavostech, ale čím dál častěji v souvislostech jako „v nové webové aplikaci jsme použili knihovnu XYZ, a ušetřilo nám to spoustu práce…“

Pojďme si tedy představit ty nejznámější knihovny a říct si, k čemu je můžete použít.

Backbone.js

Pokud je řeč o webových aplikacích běžících v prohlížeči, nelze začít jinou knihovnou než právě touto. Backbone.js (název „páteř“ je zvolen velmi přiléhavě) je knihovna, která by měla tvořit základ celé aplikace, resp. její JS části. Zajišťuje práci s modely (modely jsou provázány s akcemi UI), nabízí práci s kolekcemi, umožňuje zpracování #fragmentů URL pomocí metod připomínající kontroléry a routování, obsahuje základ pro vytváření pohledů, a  usnadňuje navázání celé klientské aplikace na existující serverové rozhraní (AJAJ/RESTful). To vše v cca 10 kB minifikovaného kó­du.

Autoři knihovny píší: Když pracujete na webové aplikaci, která hojně využívá JavaScript, první věc, kterou se musíte odnaučit, je snaha spojovat data s DOMem. Je velmi snadné napsat JS aplikaci jako hromadu zašmodrchaných jQuery selektorů a callbacků, které se zběsile snaží udržet synchronizaci mezi daty v HTML/DOMu, v proměnných JS a v databázi na serveru. Pokud má být klientská aplikace opravdu „rich“, pomůže strukturovanější přístup. S Backbone popisujete svá data pomocí modelů, které mohou být vytvářeny, ověřovány, rušeny či ukládány na server. Když požaduje UI změnu některého atributu, spustí model událost „change“, což mimo jiné způsobí, že všechny pohledy, které zobrazují data daného modelu, budou vědět o změně a mohou se překreslit. Nemusíte psát spojovací kód, který bude sledovat DOM, v něm najde konkrétní element se zadaným ID a upraví ručně HTML: když se změní model, pohledy se jednoduše překreslí samy.

Knihovna je navržena tak, aby mohla spolupracovat s dalšími knihovnami, např. s jQuery/Zepto či s Underscore. Zdrojové kódy Backbone jsou k dispozici na GitHubu pod volnou BSD-like licencí.

Underscore

Knihovna Underscore je uvozena sloganem: je-li jQuery váš oblek do společnosti, je Underscore vázankou. Tato knihovna nedělá vlastně nic „přímo viditelného“, jen zjednodušuje práci v některých oblastech, které by šlo zahrnout mezi „výrazové prostředky jazyka“ – například práci s kolekcemi, s poli, s objekty a funkcemi.

Některé funkce, které Underscore nabízí (např. map a reduce – více viz minulé Javascriptaření) jsou už v novějších interpretech JavaScriptu implementovány. Underscore v takovém případě nevymýšlí kolo a přenechá práci nativní implementaci. Výhodou je jednotná práce s těmito funkcemi bez ohledu na konkrétní verzi prohlížeče či JS engine.

Underscore nabízí, jak jsme si už řekli, řadu funkcí pro práci s kolekcemi, poli a dalšími prvky jazyka. Mezi ně patří např. funkce map, reduce, each, select, max, min, select, reject a další pro práci s kolekcemi, zip, flatten, first, rest nebo last pro pole, keys, values či extend pro objekty, a v neposlední řadě bind, memoize či defer pro funkce (výčet možností samozřejmě není kompletní). Pokud vám chybí v JavaScriptu nějaký výrazový prostředek pro práci s datovými strukturami, je pravděpodobné, že jej v Underscore naleznete.

Underscore nabízí okolo 60 funkcí, které zahrnují jak pomůcky pro funkcionální programování, tak obecné utility a speciální pomůcky pro JavaScript, jako jsou šablony či binding. Funkce knihovny Underscore lze volat jak funkcionálním, tak objektovým způsobem – následující řádky jsou tedy ekvivalentní:

_.map([1, 2, 3], function(n){ return n * 2; });
_([1, 2, 3]).map(function(n){ return n * 2; });

Existuje implementace Underscore pro jazyk LuaUnderscore.cof­fee (původně demo možností CoffeeScriptu). Pro samotnou knihovnu je k dispozici i plugin pro práci s řetězci Underscore.strin­gs. K dispozici je i dokumentovaný zdrojový kód a kompletní sada testů a benchmarků.

Netestujete? Proč?

Když jsem vybíral z přehršle možných knihoven těch několik, které dát do tohoto článku, byly první dvě jednoznačné – o nich se hovoří, píše, jsou zkrátka hot. Ale kterou vybrat dál? Dát grafické Processing.js či EaselJS? Nebo vybrat spíš komunikační utility jako Socket.IO? Nakonec zvítězila trojice nástrojů, které jsou spíš nenápadné, přesto by se měly stát trendem roku 2011, byť ne tak spektakulárně jako grafické knihovny či různé mobilní frameworky.

Jakou používáte výmluvu pro to, že nepíšete testovací kód?

Naši trojici tvoří QUnit, FireUnit a JSUnit. Jak už názvy napovídají, jedná se o nástroje k jednotkovému (unit) testování, volně odvozené z nástroje JUnit.

Princip jednotkového testování snad není potřeba na těchto stránkách podrobněji rozepisovat. V zásadě se jedná o to, že ze speciálního kódu („testu“) zkusíme zavolat všechny funkce v nějaké jednotce (soubor, knihovna, unit, …) a otestovat, zda na správné vstupy dají správné výstupy, a také zda na nesprávné vstupy korektně zareagují (výjimkou, speciálním návratovým kódem apod.) Výhoda jednotkového testování je v tom, že testy pokrývají oblasti, které kód dělat musí, i oblasti, které kód dělat nesmí. Pokud kód později upravíme, např. přidáme novou funkci, snadno pomocí existujících testů zjistíme, zda jsme si nerozbili něco, co už dřív fungovalo (což je funkce k nezaplacení).

Jednotkové testování můžeme použít pro každý moderní jazyk; některé mají testovací nástroje přímo ve standardní knihovně. Běžný klientský JavaScript, který především obsluhuje události, je pro automatizované strojové testování poměrně nepraktický – nástroje, kterými bychom automaticky testovali správnou reakci na kliknutí nebo (např.) to, zda se po najetí myši správně změní barva, jsou zatím v plenkách. Pro testování UI je vhodné např. Selenium. Ale přesto je spousta kódu, knihoven, utilit a helperů, které jsou jako stvořené pro automatické testování nějakým unit testem.

JSUnit je silně inspirován JUnitem. Umožňuje vytvářet testy v JavaScriptu, testovat jejich běh v prohlížeči a dokonce umožňuje získané protokoly posílat na server. Můžeme tak zařídit distribuované testování mezi uživateli, v různých prohlížečích a systémech.

FireUnit je, jak už název napovídá, určen pro prohlížeč Firefox, resp. pro nástroj Firebug. Přidává do panelu Firebugu záložku „Testy“, ze které můžete spouštět připravené testy a kontrolovat jejich výsledek.

QUnit vytvořil tým kolem jQuery právě pro testování tohoto frameworku. Opět vychází ideově z nástroje JUnit a usnadňuje strojové testování JS kódu přímo v prohlížeči. Hezký návod jak začít s testováním v QUnit nabízí NetTuts+.

K testování též: ScriptJunkie – Unit Testing 101

Kuriozitka na konec

Roli zvířátka na závěr Televizních novin tentokrát převezme Emscripten. Tento nástroj je zatím možná kuriozitou, hlavně kvůli rychlosti provádění a objemu kódu, ale boří hranice mezi prohlížečem a operačním systémem. Nesimuluje žádné běhové prostředí, ale překládá kód pro LLVM do JavaScriptu.

LLVM je virtuální běhové prostředí (obdoba JVM či .NET Runtime). Princip práce s LLVM je podobný práci např. s JVM – překladač z vyššího jazyka vytvoří bajtkód, který je prováděn výkonným jádrem LLVM. Umožňuje to snadnou přenositelnost takového bajtkódu mezi platformami, kde je LLVM implementované. Pro LLVM existuje řada překladačů, optimalizátorů a dalších nástrojů…

Emscripten vezme přeložený bajtkód (např. z překladače llvm-gcc) a tento bajtkód přeloží do JavaScriptu (není to tedy interpret LLVM, ale obdoba JIT kompilace). Výsledek lze spustit přímo v prohlížeči. Znamená to tedy, že můžete vzít hotové programy v C/C++/ObjC a dalších jazycích, pro které je LLVM překladač, a „přechroupat“ je pro prohlížeč.

Výsledná rychlost není nijak ohromující, což je pochopitelné. Rozhodně se tedy nejedná o nástroj, vhodný pro produkční nasazení. Jeho současné možnosti ukazuje třeba ukázkový Python. Jde o zdrojové kódy Pythonu, přeložené pomocí překladače do LLVM bajtkódu a Emscriptenem překonvertované do JavaScriptu. Načítání nějakou dobu trvá, ale výsledkem je – inu, Python, jak jej známe, ale běží v prohlížeči.

Dnes je to kuriozita, časem se možná dočkáme zabudovaného LLVM engine přímo v prohlížeči, kdo­ví?

Příště…

Příště si představíme další JavaScriptové knihovny – co byste řekli třeba fyzikálnímu engine či nadstavbě nad WebGL, která usnadní psaní 3D akcelerovaných grafických aplikací?

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Komentáře: 36

Přehled komentářů

asdasd Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Martin Malý Re: Javascriptaření: nejen jQuery živ je JavaScriptař
asdasd Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Martin Malý Re: Javascriptaření: nejen jQuery živ je JavaScriptař
asdasd Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Martin Malý Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Kára Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Martin Malý Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Augustýn Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Kára Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Augustýn Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Kára Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Michal Augustýn Re: Javascriptaření: nejen jQuery živ je JavaScriptař
jos Re: Javascriptaření: nejen jQuery živ je JavaScriptař
František Kučera testování
Martin Malý Re: testování
Franta Re: testování
anonymous Re: testování
anonym Re: testování
František Kučera Re: Javascriptaření: nejen jQuery živ je JavaScriptař
Martin Malý Re: Javascriptaření: nejen jQuery živ je JavaScriptař
joey Jakou používáte výmluvu pro to, že nepíšete testovací kód?
Martin Malý Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
Martin Soušek Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
jos Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
olin Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
MilosNemec Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
Martin Malý Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
MilosNemec Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
Martin Malý Re: Jakou používáte výmluvu pro to, že nepíšete testovací kód?
Radek LLVM
Jakub Bouček Head JS
Martin Soušek Re: Head JS
djax Smartclient
backup Re: Smartclient
Djax Re: Smartclient
Zdroj: https://www.zdrojak.cz/?p=3448