ugrás a tartalomhoz

Egy lightweight framework: DOMAssistant

ern0 · 2010. Ápr. 19. (H), 19.43
Egy lightweight framework: DOMAssistant
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 classelmsByClass(),
  • 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.
 
ern0 arcképe
ern0
Zalka Ernő aka ern0: C16-os, amigás, majd PC-s zenész-coder scener. Autodidakta. Széles spektrumú dolgozó: ügyviteli MUMPS programozó, textilgyárban informatikai vezető, Nokiánál futószalagos Java fejlesztő, mono és poly ringtone-gyártó, belekóstolt a SEO-ba is, PHP webfejlesztő, architekt (feature-ök kihúzásának nagymestere), elfogadható színvonalú technikai dokumentációk írója, jelenleg C++ Linux szerver programozó. Tudja, hány bit van egy byte-ban.
1

MCB - Nautilus

nevemrock · 2010. Ápr. 20. (K), 06.38
Bravo ern0 tényleg hasznos leírás!
Ismerlek, de azt nem gondoltam volna hogy 1 hónapig keresel egy JS keretrendszert, ez egy új szegmensed.

Nem volt sok az 5 perc?

Kérdés:
Mikor csinálod meg a Szilárd +/4-es ét? :)
3

Mindig más nick

ern0 · 2010. Ápr. 20. (K), 21.27
Látom, megint nicket váltottál, már kezdem azt hinni, a névadó ünnepségeken ingyen pia van, azért csinálod.

Azért a JS framework kiválasztása elég hosszú távú döntés, nem kapkodhattam el, meg aztán nem is értettem a többit, mire való. Egyszerűen nem volt leírva, miből mi lesz, itt meg igen.

Képzeld, kb. 2 éve találkoztam párszor HARDWORX-szel, pár hónapja meg KALI-val, őt baromira nem ismertem fel kapásból. A pincében meg találtam egy C16-ot, és egy VC1541 is van, ezt sem tudom, honnan, kábel vagy floppy persze sehol. Mindegy, van jó kis emulátor.

És nézd, milyen frappánsan összehozom a JavaScript meg a C16 topikot, ezt skubizd meg: http://6502asm.com/ - akkora agyament baromság, hogy muszáj volt írnom hozzá egy játékot (Skier).
4

Nick váltáska

nevemrock · 2010. Ápr. 21. (Sze), 06.54
Már régóta ez a Nicknevem a weblaboron, nem történt válltáska.

Ez a JS framework nekem nagyon hasonlít a Prototype-ra. Én jQuery használok most, előtte Prototype-ot használtam. A jQuery úgy érzem jó döntés volt. Az átállás kb annyi időt vett igénybe amennyit Te a keresésre fordítottál. (csak ezért írtam)

Ern0: 1 kérdés Miért nem jQuery? (api.jquery.com; jqueryui.com)

------------------------
Commodore világ
http://pcvilag.muskatli.hu/irodalom/CoV/ujcov.html

Te ez +/4 ASM ez azért már durva. JavaScript ASM fordító? Erre cseresznye koromban még gondolni sem mertem volna. Kéne vennem egy +/4-est :). Hát ilyen az igazi Commodore Fan mint Te.

Néhány éve én is átkonvertáltam PC-n egy c:64-es játékot +/4-re de aztán rájöttem hogy ennek semmi értelme. Megfigyelés: most már van egy rakat dokumentáció, könyv ehhez a dologhoz.

Nemrég adtam el egy régi Amigámat, egy 60 év körüli tag vette meg, csak lestem. (Zene szerzésre használja :)
5

MIért nem jQuery

ern0 · 2010. Ápr. 21. (Sze), 09.12
Lehet, hogy tévedek, de mintha úgy emlékeznék, tavaly még nem volt ilyen jó a jQuery site. Szóval a DOMAss a doksival nyert. Legyen ez intő példa.

A JavaScript kezd elszaladni egy olyan irányba, aminek nem látom a végét (Firefox vagy Chrome kell hozzá):
- szétróbbanó
- 3D

Ezek mellett egy 6502 compiler és emulator nem is tűnik olyan merész húzásnak.
2

kicsit megnéztem, én maradok

Crystal · 2010. Ápr. 20. (K), 20.21
kicsit megnéztem, én maradok inkább a jQuery-él:) majdnem ugyanilyen, szintén nagyon gyorsan tanulható, de rengeteg plugin van hozzá
6

Mindennek megvan a helye

Kevlar · 2010. Júl. 6. (K), 13.14
Ennek pl kisebb projectekben, ahol csak ilyesmi kell. Felesleges jQuery-vel terhelnem egy oldalt, ahol az a fontos, hogy gyors és egyszerű legyen minden.