Weblabor

Avagy JavaScript programozásban kezdő, és abban különösebben elmerülni nem is kívánó (ezt az attitűdöt egyébként hatékonyságnak nevezzük) előadó öt percben átadja az összes tapasztalatát a témával kapcsolatban.

Mint az alcímből is látszik, ez az írás a budapest.js meetup 2010. áprilisi összejövetelén elhangzott kiselőadásom úgymond sajtó alá rendezett változata.

Mint arra már finoman utaltam, nem kívánok JavaScript guruként tündökölni, látványos JS tippeket-trükköket tőlem ne várjatok, kérdezzetek inkább a C++ programozásról, vagy a dataflow architektúráról, ezekben sokkal jobban otthon vagyok.

Mivel azonban a webes alkalmazások előnyei vitathatatlanok, úgy alakult, hogy kb. tavaly meg kellett írnom első JavaScript/AJAX rendszeremet. Ez egy faszerkezetű űrlap-adatbázis rendszer volt, bal oldalt az elemek címei hierarchikusan, jobb oldalt az űrlap, alul nagy OK gombbal. Meg lehetett volna csinálni sima HTML-ben is, de mindig is szerettem a kalandot.

Tudtam, hogy vannak ilyen képződmények JS alá, hogy framework, meg sejtettem is, hogy mit tudnak, de az egész még nagyon homályos volt. Azt láttam, hogy rengeteg framework van, és szinte mindenki használ valamilyet, még az olyan nagy cégek is, mint pl. a Google, így a sejtésem az volt, hogy valószínűleg okos dolog frameworköt használni.

Mivel a projekt jellege megengedte a kísérletezést, azt gondoltam, mégis inkább mezítlábas JS-ben fogom megírni az UI-t. Egyrészt először magát a JavaScript nyelvet szerettem volna megtanulni: az interpreteres varázslatokat, az eseményközpontú vezérlést, és ezt a – számomra – fura OOP-t. Másrészt a DOM-ot szerettem volna kitapasztalni, hogyan épül fel, miként kell bánni vele, illetve hogy milyen lehetőségeket kínál megjelenítésre, és persze mindezek közben meg akartam ismerni az aktuális HTML és CSS divatot, melyek követését az utóbbi időkben kissé hanyagoltam. Arra gondoltam, hasznos lesz, hogy ha végigjárom ezt az utat, mert majd beleesek jópár csapdába, amibe az JS keretrendszerek írói beleestek, és abból sokat tanulok.

Ez utóbbi tervem elég jól megvalósult, elég, ha annyit mondok, hogy „MSIE box modell”. Csináltam még rejtett frame-es AJAX-ot is, tetszett, hogy ha nem rejtem el, akkor ott mocorog a betöltött anyag. Belesétáltam abba a csapdába is, hogy kétszer írtam meg az adatok listázását: induláskor a szerveren PHP állítja össze, a használat során bevitt adatokat meg JS illeszti be – ígérem, soha többé nem teszek ilyet, megtanultam a leckét.

Ebből ennyi elég is volt, elhatároztam, hogy következő JS projektemhez keresek egy frameworköt.

Tudtam, ha elkötelezem magam valamelyik mellett, arról nehezen fogok átváltani másikra, így megfogalmaztam a követelményeket, amelyekből aztán nem is engedtem: legyen jól átlátható felépítésű, jól dokumentált, instant bevethető. Nem akartam egy új rendszert megtanulni. Mivel a projektem kicsi volt, és grafikus varázslatokra nem volt szükség, így azt is eldöntöttem, hogy először lightweight framework kell nekem, ha majd más projekthez kell több csiricsáré, ráérek akkor választani grafikus keretrendszert.



Ahhoz képest, hogy nem akartam sok energiát belefektetni, egy hónapig keresgéltem. Rengeteg rendszert átnéztem, pontosabban csak rájuk néztem, mert a legtöbbet 1-2 perc után skippeltem. Találtam olyat, amelyik egy saját nyelvet definiált a JS fölé, amelyben C++/Java-szerű OOP volt, hát, ez nagyon tetszett, mint elméleti dolog, de semmi kedvem nem volt megtanulni, illetve teljesen feleslegesnek tartottam, mert sima JS-ben is meg lehet mindent csinálni (lám, még egy Java-szerű nyelvet is). Más frameworkök, amelyeket megnéztem, bizonyára nagyszerűek, de kezdő JS-esként erre a leírásból nem jöttem rá. Nem azt mondom, hogy nem tudtam, mire jó egy JavaScript keretrendszer, de egy rövid API leírás akkor még nem volt elégséges. Már ott tartottam, hogy azon agyaltam, mit is kell tudnia egy JS frameworknek, mert hátha magamnak kell megírni, amikor rátaláltam a DOMAssistantre.

Ahogyan a többi framework esetén elég volt 1-2 perc arra, hogy kidobjam őket, itt elég volt 20 másodperc, hogy tudjam: ez az. Még csak görgetni sem kellett a böngészőben, és már két olyan dolgot lehetett látni, amit másutt nem. Először is, ott van egy korrekt önmeghatározás. Két mondat, ennyi elég bárminek a leírására. Próbáljátok ki, írjatok két mondatot az Unicumról, az iPhone-ról, a kislányotokról – nem könnyű, de annál hasznosabb. Aztán még mindig az első közcím alatt, az első bekezdés végén, van 3 sornyi példa. Ez is telitalálat, hiszen egy JS framework programozóknak készül, az ő részükre történő bemutatásnak nincs célszerűbb eszköze, mint pár rövid, de életszerű példa. Innentől már fáklyás menet volt, elolvastam szépen az API dokumentációt, és bólogattam végig. Mondanom sem kell, hogy az API leírás is rendben van.

Ahogy az előadásomon is mondtam, itt kellene abbahagynom, mert a site-hoz képest sem újat nem tudok mondani, sem jobban nem tudom bemutatni, de azért megpróbálom, flekkben fizetnek.

A DOMAssistant most 6 modulból áll:

• a Core tartalmazza azokat a metódusokat, amelyek a hívásláncok bal oldalán szoktak szerepelni, az elemek előkeresését;
  
• az AJAX-ban néhány egyszerűbb, és egy fullextrás AJAX hívás szerepel;
  
• a Contenttel lehet HTML elemeket létrehozni, módosítani;
  
• a CSS modullal a CSS-be túrhatunk bele;
  
• az Event hivatott az egységes eseménykezelést megoldani;
  
• a Load pedig csak egy apróság, ami a fentiek közül egyikbe sem illik.
  

DOMAssistant Core

Lehet

• keresni okosan – $(), valahogy így: $("#container input[type=text]"),
  
• id szerint – $$(),
  
• de akár class – elmsByClass(),
  
• attribútum – elmsByAttribute(),
  
• vagy tag szerint elmsByTag().
  

A találatokból előszedhetjük az

• elsőt – first(),
  
• az utolsót – end(),
  
• vagy mindet – each(),
  
• lépkedhetünk rajtuk előre – next(),
  
• vagy visszafelé – prev().
  

DOMAssistantAJAX

Vannak egyszerű funkciók, úgy mint

• get(),
  
• post(),
  
• és a DOM-ba azonnal beíró load() – $$("list").load("list.php").
  

Ha mindez nem elég, akkor van az ajax() hívás, ahol mindent meg lehet adni, callbackeket, egyedi fejléceket, timeoutot, ahogy azt kell.

DOMAssistantContent

Ezekkel a funkciókkal tudunk

• kreálni tageket – create(), create(name [, attr, append, content]),
  
• attribútumokat beállítani – setAttributes(),
  
• tartalmat hozzáadni – addContent(),
  
• vagy átírni – replaceContent().
  

DOMAssistantCSS

Ez hasonló az előzőhöz, ezzel a CSS-sel kapcsolatos dolgokat tudjuk piszkálni, úgy mint

• hozzáadni osztályt – addClass(), $$("x").addClass("selected"),
  
• elvenni – removeClass(),
  
• ellenőrizni – hasClass(),
  
• valamint egyedi stílusokat beállítani – setStyle(), $$("x").setStyle("color", "red"),
  
• vagy lekérdezni – getStyle().
  

DOMAssistantEvents

Eseménykezelés:

• esemény hozzárendelése elemhez – addEvent() – $$("x").addEvent("click", function() {...}),
  
• levétele egyesével vagy mindet – removeEvent(),
  
• kiváltása – triggerEvent().
  

DOMAssistantLoad

Ebben csak egy funkció van, a DOMAssistant.DOMReady(funct), amely a DOM betöltésekor indítja el a callbacket.

Felsorolásom nem teljes, főleg a 2.8 verzióban belekerült funkciókat hagytam ki, tessék megnézni a dokumentációt.

Végül néhány bulletpointban egy kis marketing:

Miért használjunk DOMAssistant-et:

• kicsike (10K gzippel, 50K natív), gyors (azt írják róla);
  
• nem kell tanulni, természetes, egyszerű;
  
• kiváló a dokumentációja, sallangmentes a site.
  

Kinek való:

• első frameworkként, JS tanulásához,
  
• de haladóknak is, ha nincs grafikus-animációs elem az alkalmazásban, vagy saját van.

A projektet Robert Nyman kezdte, most Lim Cheng Hong vezetésével Pelle Wessman és Gustaf Lindqvist viszi. Van HTML és PDF doksi angol, francia és kínai nyelven, levelezőlista, blog RSS-sel. MSIE 5.5+, Firefox 1+, Chrome 1+, Safari 3+ és Opera 9+ a támogatott böngészők.