AJAX a eyecandies

Kdo nemá na webu něco od AJAXu, jako by nebyl...

Pokud čekáte řeči o tom, co je AJAX, proč je AJAX, proč je "na Západě populární a u nás nic" a "jak na AJAX", tak jděte, prosím, někam jinam...

-

Před časem jsem se rozhlížel po nějaké hezké JS dvanula knihovně, která by uměla trošku oživit web. Nechtělo se mi strávit spoustu času vymýšlením kola – a kupodivu jsem i našel! Jako nejlepší se v tu dobu jevila JS knihovna Prototype a její "grafická nadstavba" scriptaculous.

Nejprve jsem si říkal, že to stejně použiju "jen na ten AJAX a pár efektů", jenže jsem si po čase zvyknul třeba i na to psát $("prvek") místo document.getElementById("prvek"), nebo na form.serialize(). Zkrátka příjemná rozšíření, co ulehčí spoustu datlení. A i ten AJAX to umí...

-

Bohužel mám dojem, že v poslední době tahle dvojice trochu spí a zatím jí silně šlape na paty knihovna jQuery. Je mnohem menší (19 kB, co to je?) a množstvím různých pluginů odsouvá Scriptaculous na vedlejší kolej. Za mnohé snad jen Thickbox, což je taková variace na window.open s troškou těch vizuálních efektů.

I tady na Zápisníku můžete vidět dvě ukázky jQuery v akci. Například u oblíbených pravidel komentování. :)

-

Před několika dny jsem objevil příjemný efekt "navigace na stránce" – Auto Scrolling Page Navigation. Používá "minimal-obtrusive" techniku, to znamená, že do textu, který používá klasickou stránkovou navigaci přes anchors (odkazy na #jmeno), nemusíte vkládat nějaké DIVy ani připisovat všelijaké "onclick..." – stačí na začátek vložit JS kód a ze starého klasického poskakování po dokumentu se stane dynamický pohyb. Samosebou tam, kde JS nefunguje, zůstane zachována stará funkčnost. Tenhle efekt používá Prototype a knihovnu Effects ze Scriptaculous.

-

Pokud se vám z nějakého důvodu líbí "ušaté" stránky, tedy stránky se záložkami, můžete najít inspiraci u LivePipe Control.Tabs. I tenhle skript používá knihovnu Prototype a je "minimal obtrusive" – záložky jsou přístupné i pro prohlížeče s vypnutým JS.

- 

Na MiniAJAX najdete knihovnu různých AJAXích srandiček, efektů, triků či užitečností, jak kdo chce. Vše s ukázkou, vše ke stažení a prozkoumání, většina velmi efektní a "eye candy", přesně jak to nový web chce.

-

Užijte si to...

Dne 16.03.2007

Twittni

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

Komentáře

[1] (Richard - Mail - WWW) 16.03.2007, 16:40:11 [X] [D]
Prototype i jeho mladší bratr jQuery jsou sice velmi pěkné a elegantní frameworky, bohužel však jde o čisté zlo.
Dokud je taková knihovna v systému sama tak je to v pohodě a neškodí, nicméně jakmile by někdo chtěl něco takového integrovat třeba do existujícího systému kde již nějaký framework běží, se zlou se potáže.
Tyto knihovny se totiž chovají vandalsky ke svému "životnímu prostředí" - bez uzardění si modifikují tak základní prototypy jako je Object a Array, čímž úplně změní chování javascriptu.
Narazil jsem také na výkonnostní problémy, ale ty spočívají hlavně v tom že u hodně pomalých metod není napsané žádné varování.

[2] (Arthur Dent [openID] - WWW) 16.03.2007, 16:46:10 [X] [D]
[1] "Čisté zlo" vypadá trošku jinak, každopádně děkuji za upozornění, věřím že jsou lidé, co tyhle dva zkombinují a budou (na mne) křičet, že jim to nefunguje! :)

[3] (Richard - Mail - WWW) 16.03.2007, 17:08:36 [X] [D]
No já bych si nestěžoval kdyby to nešlo jinak, ale takhle bezohledně se chovají jenom frameworky odvozené od Prototype, třeba yui je v tomhle směru dost v pohodě.

[4] (Arthur Dent [openID] - WWW) 16.03.2007, 17:15:54 [X] [D]
[3] yui je trošku jiná váhová kategorie... O něm a dalších zas někdy příště, jo? :) Šlo mi jen o to "hodit do placu" pár odkazů a trošku čtenáře vyprovokovat, aby přestali o "novém webu" psát a začali na něm dělat, protože dokud o něm budou jen kecat a stěžovat si, jak "to u nás nejede", tak to opravdu nepojede... :)

[5] (karf - Mail ) 16.03.2007, 18:01:29 [X] [D]
Jen bych doplnil, že scrollovací efekt nabízí i jQuery, resp. jeho oficiální plugin interface (jde o pluginy ScrollTo a ScrollToAnchors: http://interface.eyecon.ro/docs/fx) – to jen že vidím, že je na tomto webu použitý. Stejně tak je to i se záložkami (http://www.stilbuero.de/jquery/tabs/).

[3] Je fakt, že tyto knihovny jsou myšleny samy jako základní framework, jako čisté zlo bych to neoznačoval, ve většině typických případů užití to nebude vadit. Sám preferuji jQuery a používám ji velmi často, ale samotnou. Míchat různé frameworky je vždycky trochu o hubu.

[6] (Arthur Dent [openID] - WWW) 16.03.2007, 18:45:15 [X] [D]
Richarde, promiň, smazal jsem tvůj komentář, už se to dostávalo hodně daleko od tématu. Jestli chceš, napiš na toto téma vlastní úvahu, já rád odkážu.

[7] (Petr Lněnička - Mail - WWW) 16.03.2007, 19:10:05 [X] [D]
JQuery je príma. My s ním frčíme už nějaký pátek. Třeba tady jako AJAX http://www.2mstudio.cz/pozice-ve-vyhledavacich/ , nebo to skrolovaní na # a ThickBox tady http://www.aquamarina.cz/cz/fotogalerie .

[8] (pixy ) 16.03.2007, 22:25:12 [X] [D]
Já jsem v tomhle asi příliš exot, ale nevzpomínám si, že bych kdy použil nějakou cizí JS knihovnu. Vždycky to "kolo" vymýšlím znova a všechno si napíšu sám. Mám nějakou utkvělou představu, že cizí kód, do kterého do detailu nevidím, se mi může příliš snadno pomlátit s tím mým, rozbít mi stránku, podělat pečlivě vyladěné konstrukce atd. Ale může za to podstata JS - v PHP nebo jiných jazycích cizí knihovny používám často a klidně. Ale JS vždy jen vlastní. Navíc tím mám jistotu, že mám v kódu jen funkce, které skutečně potřebuju, a ne padesát dalších, které se načítají jen "co kdyby"...

[9] (Arthur Dent [openID] - WWW) 17.03.2007, 00:06:03 [X] [D]
[8] No a já to mám naprosto stejně, jen mám prohozené PHP a JS... :)

[10] (Fred - Mail ) 17.03.2007, 08:20:26 [X] [D]
Taky mi tyhle knihovny připadají docela přerostlé. Čekal bych, že bude zmíněna knihovna mootools - http://mootools.net/
Příklady použití http://moofx.mad4milk.net/ http://www.nyokiglitter.com/tutorials/tabs.html
http://clientside.cnet.com/wiki/mootorial/05-effects

[11] (Richard - Mail - WWW) 17.03.2007, 08:22:30 [X] [D]
[6], [8] Asi o tom fakt něco napíšu - chápu sice Pixyho že se bojí kolizí ale pokud se dodržuje pár jednoduchých pravidel tak kolize v podstatě nehrozí. Možná by na to šel udělat nějaký certifikát "environment friendly javascript" :-)
Osobně taky používám hlavně vlastní knihovny ale to je spíš proto že v nich mám určité speciality na které jsem zvyklý a které třeba yui nemá.

[12] (Arthur Dent [openID] - WWW) 17.03.2007, 10:02:52 [X] [D]
[10] Nemůže tu být zmíněna, když jsem o ní jaktěživ neslyšel. :) Článek není "seznam existujících knihoven", v něm jsou knihovny, se kterými jsem se setkal. Na mootools jsem nenarazil.

Takže - děkuji za doplnění.

[13] (LLook - Mail - WWW) 17.03.2007, 12:54:47 [X] [D]
Souhlasím, že je lepší Ajax začít používat, než kecat o tom, jak by bylo fajn ho používat. Jako se vším. Hlavně to ale nepřehnat. Jako se vším.

Podíval jsem se na ten Thickbox, hned na první demo. Krom toho, že nemám rád lightbox jako takový, tahle implementace má u mě navíc trochu výkonostní problém v Opeře - když mám ten obrázek otevřený a hýbu myší, tak se kurzor hýbe po velkých skocích. Webmasteři by měli pamatovat i na to, že procesory s méně než 2 GHz jsou stále velmi rozšířené...

[14] (Arthur Dent [openID] - WWW) 17.03.2007, 13:15:11 [X] [D]
[13] Ano, to je druhá věc. Dneska má v Česku LightBox deset stránek, zítra dvacet a pozítří tisíc. Pak to opravdu poleze krkem všem. Ale tak je to s každou novinkou.

No a až si (třeba) LightBox projde kolečkem "Okouzlení - nadužívání - znechucení", tak zůstane tam, kde má smysl. Stejně jako AJAX a další vymoženosti. Já pouze upozorňuju na věci co můžou někoho inspirovat.

Mimochodem, moje výzva nezní "používejte AJAX", toho jsem dalek. Moje výzva je mnohem prozaičtější: "Přestaňte žvanit o 2.0, přestaňte si stěžovat na to, že 'zatímco na Západě do 2.0 investují, tak Češi jen kritizují a nechápou o co jde' a něco sami udělejte."
Ale to je asi normální... Psi štěkají, ale karavan táhneme dál.

[15] (Daniel Steigerwald - Mail - WWW) 18.03.2007, 11:56:18 [X] [D]
Add. Pixy, já měl to štěstí, že sem měl možnost napsat si poměrně sofistikovaný projekt bez JS knihovny a následně s ní. První AMapy.cz byly napsané úplně ručně a jen se potvrdilo pravidlo, že nejlepší analýza je projekt prostě napsat :-)
Po té co sem tak udělal, napsal sem AMapy celé znova ještě jednou, a MOO se hodil :-)
Add. Arthur Dent, máš pravdu, souhlasím s tebou a proto jsem mimojiné taky napsal AMapy api ,-)

[16] (Ladis - WWW) 21.03.2007, 00:07:06 [X] [D]
[8]To znám, klasický případ zapřísáhlého programátora, než se složitě prokousávat nějakou cizí dokumentací je lepší si to napsat sám :-) . Ale v případě AJAXU se nakonec použití knihovny (ať už externí nebo vlastní) stejně neobejdete.

První funkci pro AJAX si napíšete, pak zjistíte že tomu chybí ošetření chyb, k tomu se přibalí nějaké efekty, taky by se hodilo něco pro procházení polem tříd a až to celé napíšete, najednou zjistíte že už to někdo vyřešil naprosto elegantně v nějaké knihovně. Kdybych psal Bookmarky od začátku, tak asi koncem tohoto roku bych mohl mít půlku.

[17] (Michal Till - WWW) 20.04.2007, 05:33:17 [X] [D]
S tím čistým zlem je to víceméně pravda, ale je třeba vzít v potaz, že do velkých projektů nebudete dodatečně většinou integrovat knihovnu s tak základními funkcemi, stejně tak Mootools i jQuery jsou 'light' i cílením na vývojáře, pokud chcete něco brutálního a komplexního, zkuste YUI nebo Ext, specielně v tom prvním máte namespaců až se vám to nebude líbit =).

[18] (Arthur Dent [openID] - WWW) 20.04.2007, 12:22:34 [X] [D]
[17] K tématu: http://farm1.static.flickr.com/203/464449077_4c1202336a.jpg?v=0

[19] (Jenda - Mail - WWW) 05.05.2007, 15:37:22 [X] [D]
Já osobně bohužel JavaScript neumím, proto mi přijdou tyto knihovny opravdu super! Jenomže je tu jistý zádrhel. Nevím proč, ale například LightBox (knihovna Prototype) ani ThickBox (jQuery) mi nefungují v Opeře. Pokud stránky spouštím na svém počítači, tak šlape vše krásně, ale poté co je umístím na server, tak se v Opeře nezobrazí. Nemáte někdo ponětí, čím by to mohlo být?

[20] (Jenda - Mail - WWW) 06.05.2007, 10:14:45 [X] [D]
Omlouvám se. Vše se vyřešilo. Chyba bala na mém providerovi.

[21] (DFly - Mail ) 19.05.2007, 00:18:06 [X] [D]
Tak jsem se podival na "ujistěte se, že znáte pravidla." a na jejich spodku je tento link znovu - jenze po dalsim kliknuti uz se nic nedeje - bile okno ktere jde jen zavrit.
Takze bud tu sekci odpodminkovat nebo smaznout muj prizpevek a mas pokoj :-)))