Naučte se YUI - Dan Wellman

Další kniha od PACKT Publishing vás naučí základy používání moderního JS frameworku pro návrh a vytváření uživatelského rozhraní, který je pod názvem Yahoo! User Interface Library k dispozici zdarma jako open-source pod licencí BSD.

Doby, kdy si každý smolil v JavaScriptu své vlastní hyperúžasné funkce pro uživatelské rozhraní webových aplikací je, zaplaťpámbu, minulostí. A jestli ne, tak brzy bude. Naštěstí totiž existují mocné frameworky, které řeší spoustu problémů, na něž člověk při návrhu uživatelského rozhraní narazí. Od velmi jednoduchých po komplexní, od jednoduchých "nadstaveb" nad HTML stránkou až po vlastní "systémy". Yahoo! User Interface (YUI) se řadí mezi ty komplexnější, po bok frameworků jako je Dojo nebo ExtJS (ExtJS z YUI do jisté míry vychází). O jeho schopnostech dává určitý přehled třeba stránka s příklady použití. Pokud se chcete věnovat tvorbě uživatelských rozhraní pro webové aplikace na nějaké solidní úrovni a nemastit si pro každý projekt vlastní ad-hoc knihovny, je YUI jednou z možností, kterou se vydat, bez ohledu na to, jestli jej nakonec použijete nebo jestli se jeho principy necháte inspirovat pro vlastní tvorbu či pro další hledání.

Pokud se chcete seznámit se světem UI frameworků pro webové aplikace, je pro vás kniha Learning the Yahoo! User Interface Library naprosto ideálním startovacím čtením. Kniha není pro úplné začátečníky, autor předpoklácá, že čtenář zná JavaScript, že zná CSS, HTML a vůbec základy webařského řemesla.

Autor začíná stručným úvodem k YUI – co to je, pro koho to je, kdo to využije, proč zrovna YUI, zmiňuje kompatibilitu napříč browsery (už jen kvůli tomu stojí za to nepatlat se s vlastním JS, ale využít hotový framework) a představuje jednotlivé součásti YUI. Zároveň popisuje základní techniky ("kodérské standardy") pro použití YUI, jako je vkládání kódu, používání komponent a nastavování jejich parametrů. Vše ilustruje na velmi jednoduchém příkladu: Rozšíření INPUT pole o kalendář pro snadné vložení data.

Jedním z klasických problémů při vytváření webových aplikací je rozdílné nastavení stylů v jednotlivých prohlížečích. K tomu, aby aplikace vypadala ve všech prohlížečích plusmínus stejně se používá technika, nazývaná CSS reset. Používá ji i Yahoo! UI. Zjednodušeně řečeno jde o sadu kaskádových stylů, které nastaví obecné vlastnosti obecných tagů na jednotné hodnoty, shodné pro všechny prohlížeče. Tvůrce pak ví, že mu u nějakého minoritního prohlížeče neuteče nějaká nečekaná vlastnost, kterou má tento prohlížeč nastaven jinak. YUI kromě resetovacích skriptů nabízí i základní CSS pro nastavení písem či pro snadné vytváření layoutu podle mřížky (grid layout). Věci okolo stylů popisuje druhá kapitola.

Třetí kapitola popisuje základ vnitřní logiky YUI, totiž jmenné prostory (namespaces), utility pro práci s DOM a model událostí (Events). Popis nejde nijak moc do hloubky, takže nehrozí, že byste odpadli u stopatnácté metody pro hledání potomků. Je jen vysvětlena logika a popsáno několik nejužitečnějších metod.

YUI samosebou řeší i přístup k fundamentálnímu prvku webových aplikací, totiž AJAX. Proto je čtvrtá kapitola věnována AJAXu a Connection Manageru, což je utilita pro snadnou správu spojení se serverem, která zapouzdřuje XHR tak, aby jeho volání bylo konzistentní s prací v YUI. Autor popisuje jednoduchou čtečku RSS a login systém, používající YUI.

Pátá kapitola pak trošku nelogicky spojuje dvě funkce YUI, totiž animace a správce historie prohlížeče. Animace jsou základem grafických efektů (v knize je jako příklad uveden pohyb čtverce) a animovaných prvků (akordeon např.) Druhá část kapitoly se věnuje funkci, která by spíš patřila k předchozí kapitole o AJAXu, totiž k utilitě BHM (Browser History Manager). BHM je, ve zkratce řečeno, to, co se stará o to, aby u webové aplikace fungovalo tlačítko ZPĚT tak jako u normální stránky.

Šestá kapitola nese prostý nadpis: Tlačítka a stromy. Autor probírá komponentu Button a její deriváty (např. tlačítko s výběrem) a komponentu TreeView – její vytváření, stylování, dynamické vykreslování, dynamické změny stromu a další užitečné věci. V další kapitole následuje popis dalšího grafického prvku (navigace pomocí menu) a velmi populární funkci automatického dokončovače (autocompleter). Kapitola osmá popisuje vizuální prvky pro logické členění uživatelského rozhraní, a to kontejnery (Content Containers) a záložky (Tabs). Do těchto prvků spadají i různé panely, okna, dialogy či tooltipy, takže je to jedna z nejobsáhlejších kapitol.

Devátá kapitola popisuje řešení Drag-and-Drop v YUI. Patří sem nejen to nejprostší "přetažení objektu po ploše" (např. zboží do košíku), ale i různé grafické prvky, v nichž se tahá, šoupá, posunuje, ... Popisem těchto prvků končí popis "toho, co je vidět". V poslední, desáté kapitole už autor nepopisuje žádné prvky uživatelského rozhraní, ale věnuje se věcem neméně důležitým, totiž ladění aplikace pomocí třídy Logger a -debugging verze knihovny.

A pak náhle kniha končí a čeká nás už jen rejstřík. Docela mi po takové náloži chyběla alespoň jedna stránka, která by oddělila vlastní text od indexu. Nějaké shrnutí, nějaké tipy pro další studium, užitečné odkazy a tak. Takto náročná a dlouhá kniha by si nějaký "chill-out" v podobě doslovu zasloužila.

Jinak knihu hodnotím velmi kladně. Po mnoha (marných) pokusech, kdy jsem se snažil donutit k přečtení (a pochopení) dokumentace od ExtJS, což je o něco mocnější sourozenec YUI, se mi konečně dostala do ruky kniha, která postupuje takovým způsobem, že mě neotrávila hned u třetí kapitoly, jak se to zatím podařilo všem tutoriálům a "the first steps in XYZ" návodům. Po obsahové stránce tedy nemám co vytknout.

Knihu mohu doporučit všem zájemcům o webové aplikace. I když vaší volbou nakonec nebude YUI, je jistě dobré právě tuto knihovnu znát. Jednak jde o velmi silný nástroj, používaný na profesionální úrovni, takže jeho znalost usnadní učení dalších nástrojů, jednak je od YUI odvozen framework ExtJS, který považuji za v současné době nejsilnější "heavy-weight" nástroj pro tvorbu webových aplikací.

Zdrojové kódy příkladů v knize jsou ke stažení na webu nakladatele. Knihu můžete zakoupit přímo na webu Packt Publishing za 40 dolarů. (Nezapomeňte: Poštovné zdarma!)

Learning the Yahoo! User Interface Library – Wellman, Dan – vydalo nakladatelství PACKT Publishing v roce 2008, 360 stran, 44.99 US$

Dne 19.04.2008

Twittni

Přidej do: asdf.sk StumbleUpon Toolbar Stumble It!

Komentáře

[1] (David Grudl - WWW) 19.04.2008, 15:35:16 [X] [D]
Arthure, lze nějak porovnat jQuery a YUI? Jestli to dobře chápu, jQuery je jádro, které YUI obsahuje také (samozřejmě jinak vyřešení), plus navíc sadu UI prvků? Je možné/vhodné oba frameworky kombinovat?

[2] (p - Mail - WWW) 19.04.2008, 16:05:34 [X] [D]
Mozne je kombinovat prakticky cokoliv (pokud tedy navzajem neprepisuji globalni prototypy), ale o vhodnosti pochybuju. Nicmene v tvem pripade YUI (jeji komponenty) pouziva vlastni "core" postupy/metody (podpora vseho od xmlhttp wraperu po drag & drop), jQuery vubec neni pouzito. Pouzivat oboji znamena linkovani dvou baliku navzajem nekompatibilnich knihoven. Slo by to, ale..

jQuery ma vlastni sadu UI komponent (analogicky k YUI jsou psany s podporou "core" jQuery). Osobni doporuceni: ja bych volil jQuery, J. Resig je genius, YUI je uz prilis nabobtnale a rozplizle.. Anebo mootools, to je v eleganci na urovni jQuery a novejsiho data navrhu, coz je obrovska vyhoda (vysosava z kazdeho frameworku to nejlepsi).

[3] (Arthur Dent [openID] - Mail - WWW) 19.04.2008, 18:04:42 [X] [D]
[1] Jak píše [2], možné to je, vhodné už míň. Doporučuju z "velkých" knihoven zkusit zmiňovanou ExtJS, což je knihovna, která používá YUI-like přístup a je k dispozici jako standalone nebo jako nadstavba nad jQuery / YUI / Prototype, můžeš si vybrat - viz zde: http://extjs.com/download/build

Jinak srovnávat light-weight jQuery s YUI je naprosto pomýlené, jediné co mají společného je to, že "to je v JS a je to na webové aplikace". jQuery je maličký základ, k němuž si přidáváš komponenty a máš pořád kontrolu nad tím, co tam máš. Platíš za to tím, že se ti občas komponenty nesnesou, a je s tím víc práce.

YUI či ExtJS jsou velké frameworky. Jsou nabobtnalé, komplexní, nejsou tak jednoduché, ale jejich výhodou je to, že obsahují vše podstatné, a je to navíc zpracováno jednotným způsobem, takže třeba taková věc, jako je "skinování", je řešena na úrovni frameworku jednotně pro všechny prvky, nemusíš si skinovat každou použitou komponentu zvlášť.

Pokud chceš "velký" framework, musíš holt přijmout jeho "štábní kulturu", to je jak se vším. A k tomu patří i to, že jej nelze jednoduše míchat s lowlevel knihovnami - je to jako psát v Delphi/VCL a kus si dobastlit v assembleru s voláním Win32API - pokud nerozumíš tomu, jak je to uděláno, opravdu do hloubky, tak zešedivíš při hledání podivných chyb.

Ale jak říkám - můžeš zkusit ExtJS, který toho umí hodně, vychází z podobného přístupu jako YUI (DOM, eventy apod.) a může mít "vespod" nějakou klasickou lightweight knihovnu, kterou můžeš při trošce dobré vůle použít. Já zájemcům o ExtJS ukazuju tyhle tři dema:

http://extjs.com...rtal/portal.html
http://extjs.com...top/desktop.html
http://extjs.com...viewer/view.html

a ptám se: Je to to, co chcete dělat? Jestli ano, tak nic lepšího nenajdete :) Jestli chcete jenom okořenit stránky nějakým efektem a AJAXem, tak to nemá smysl a vemte jQuery s pluginama.

[4] (David Grudl - WWW) 19.04.2008, 18:13:21 [X] [D]
[2][3] díky, přesně to jsem chtěl vědět.

[5] (karf [openID] - Mail ) 20.04.2008, 00:15:05 [X] [D]
Podstatný rozdíl mezi YUI - ExtJS a jQuery je v přístupu: YUI a ExtJS (mimochodem ExtJS bylo původně rozšířením-doplňkem YUI) používají hlavně "class based" přístup - čili simulují tvorbu objektů ze tříd jako v klasických OOP jazycích. jQuery je naopak psána spíš funkcionálně. Jinak ExtJS je v prvé řadě framework pro tvorbu uživatelských rozhraní na bázi widgetů, a samozřejmě je k tomu nutné jakési obecné jádro. jQuery je zase hlavně jádro postavené kolem manipulace s DOM a na něj se nabalují další funkcionality pomocí pluginů.

ExtJS (i YUI) je velmi pěkně navržené, ale je tam jedno úskalí: u takovýchto full-featured frameworků je nutné počítat s tím, že vše se bude odehrávat v javascriptovém front endu, který si vše bude řídit sám a bude si tahat data podle potřeby ze serveru (něco jako "pull proces"). Čili velká část aplikace se přesune na klienta. To nemusí být vždycky výhodné. Pokud má aplikace běžet spíš na straně serveru, který bude klientovi tlačit pouze nezbytně nutné komponenty a data pro zobrazení ("push proces"), není ExtJS moc vhodný. A pokud jde o vzhled aplikace - tam jste většinou odkázáni na pár dostupných skinů, udělat nový skin je docela pakárna a bude to většinou maximálně obarvení. Např. donutit skin v ExtJS, aby měl větší písmo, nebo aby nedej bože reagoval na zvětšení písma, to je peklo.

Osobně mi chybí v těchto knihovnách možnost deklarativního popisu změn GUI v XML posílaném ze serveru (něco jako XUL overlays). Většinou se to musí dělat programově v JS. Já jsem si oblíbil kombinaci jQuery + plugin Taconite (mimo jiné), který se tomuto principu trochu přibližuje (změny v DOM popsané v XML).

Jo jinak jQuery lze kombinovat celkem dobře se všemi ostatními frameworky, ta si žije ve svém jmenném prostoru a jinam neleze :)

[6] (Petr Staníček - Mail ) 21.04.2008, 09:31:30 [X] [D]
Já jsem zrovna nedávno docela intenzivně vybíral framework, na kterém budu stavět nějaké nové projekty, a YUI jsem ve finále vyřadil. Z několika důvodů, ale ten hlavní byla jeho, řekněme, mohutnost a zároveň roztříštěnost. Jinými slovy, vadilo mi, že buďto použiju YUI "en bloc" a musím linkovat do každé stránky objemný, několikasetkilový JS, nebo běžnější komponentovou variantu, a pak si to skládám jako stavebnici a linkuju do každé stránky mnoho (klidně i v řádu desítek) JS souborů.

extJS mi přišlo jako lepší volba, ale trochu mě na něm odrazuje silná unifikovanost (takhle to prostě bude vypadat a moc s tím nenaděláš). Sice je určitě možné nad tím dělat mocná kouzla s CSS, ale ještě jsem to nezkoušel a úplně triviální to asi nebude.

jQuery je vedle toho malá a jednoduchá "hračka" a víc než stavebnice je to spíš "nástroj na snadnou výrobu stavebnic". A to mi sedí víc. Už s ním pár měsíců dělám a sedlo mi do ruky jak ergonomicky ulitý nástroj.

Z mého pohledu ty věci, které jQuery oproti velkým frameworkům YUI a extJS nemá, se dají rozdělit v zásadě jen na dvě skupiny. 1) základní "gadgety" jako tlačítka, dropdowny, validace inputů atd., pro které se buďto dá najít plugin (kterých pro jQ existují spousty), nebo si to díky možnostem jQuery už poměrně snadno připravím sám (ne vše předchroustané je nejlepší); 2) složité konstrukce, jako viewporty, stránkované seznamy atd., které bych si tak jako tak chtěl dělat sám, protože ani sebelepší framework to neudělá právě tak, jak potřebuju a jak je nastavená komunikace se serverem (což je mimochodem pro mě největší vada extJS).