JavaScript utam React-al kövezve

Ez egy csöppet személyes lesz, de szerintem ez nem baj, mert pont azt szeretném bemutatni, hogy miként vergődtem át a JavaScript-es libeken és hogyan jutottam el a React.js-ig.

Elő-történelem

Réges-régen a JavaScript semmire se volt jo. Ez úgy 1998 környékén volt. Nem is foglalkoztam vele. Majd később rájöttem, hogy hiba volt hanyagolni, mert fejlődött én meg lemaradtam. Nehezen, de behoztam a lemaradásom és úgy érzem, már JavaScript-ben nem vagyok lemaradva.

Vanilla

Ugye először indult a JavaScript, hogy csak úgy kódolgatunk. Nem igazán voltak keretrendszerek, de még a segédkönyvtárak se voltak sehol. Jött pár dolog, mint a jQuery, Ext.js és még jó pár hasonló. Ebből a jQuery lett igazán populáris (a többit is sokan használják).

CoffeeScript

Miután nagyobb alkalmazásokat, már hosszas és fájdalmas volt Vanilla.js használatával írni, pont jól jött, hogy találkoztam a CoffeeScript-el. Nagyon örültem neki, mert sok segítséget adott. Később aztán rájöttem, hogy sok szemetet is tol a kódba, így elkeztem leszokni róla, de már amit tudást adott bőven megérte a belefektetett energiát.

Jött a robbanás

Kezdtek sorra megjelenni a különböző finomságok, Underscore.js, Backbone.js, AngularJs, Bacon.js… És még nagyon sok más. Csak a felsorolásuk lenne 3 oldal így próbáltam csak a nevesebbeket kiemelni. Nagyon sokukat ki is próbáltam. Mindegyiknek megvolt a maga előnye és hátránya. Underscore baromi jó dolog, mert rengeteg olyan függvényt ad, amit minden alkalommal meg kell ínri (egy tömbből egy elem törlése például).

Backbone.js

Backbone.js egy MVC logikát akar követni. Megy is neki. Nekem a problémám az volt vele, hogy túlzottan sokat kell ahhoz írni, hogy akár csak egy kis problémát megoldjon az ember. Egyszerűen feleslegesnek tartottam, hogy létrehozzak egy Model-t, egy Controller-t, egy Collection-t a Modellemhez, aztán még a Routing-ot is beállítsam. Jön a view, ami nem csak a HTML-ből áll, de kell hozzá egy külön objektum is, ami a View-t kezeli. Egyszóval nekem ez túl sok volt. Sok, mert nem lett tőle gyorsabb vagy jobb a munka egy Vanilla.js-hez képest.

AngularJs

Ekkoriban jelent meg az AngularJs is. Korábbi cikkekből látható, hogy ez jobban megtetszett és többet foglalkoztam vele. Baromi könnyen kezelhető, egyszerű és gyors. Nah mondjuk ez volt végül a veszte, mert annyira nem gyors. A legnagyobb problémám vele mindig is az integráció volt. Nehézkes volt meglévő rendszerbe szépen lassan berakni.

Mloc.js

Idén februárban voltam a mlock.js konferencián, ahol sok érdekes dolgot hallottam és láttam. A cikk szempontjából Daniel Steigerwald (@steida) előadása volt érdekes. Sok szempontból nem értettem egyet vele. Bemutatta az ES6 dolgait. Nagyon sokak munkájára beszólt, de mindenhol a Clean Coding és az egyszerűség volt a közeppont. Akkor nekem furcsa és egyben idegen volt, amit mondott. Nem tudtam és nem akartam elhinni, hogy nem jó logika amit az AngularJs vagy a Backbone.js követ. Pont ezekben láttam a jövőt. Később kicsit beszélgettem is vele, de nem győzött meg, amit mondott. Egy biztos: Elültetett a fejemben valamit.

Sebesség

Rendszeresen eszembe jutott, amit steida mondott. Ránéztem néha a React.js-re, de nagyon nem tetszett. Már csak az sem, hogy köze van a Facebook-nak hozzá. Utóbbit azért félre tudom tenni 🙂

Pár hete egy baromi nagy adathalmazzal kellett dolgoznom és sokat kellett számolnom. A kódrészt nem publikálhatom, mert nagyon erősen a cég-specifikus és nem tudom annyira kiszedni belőle a dolgokat, mint amennyire kellene, de megmaradjon a lényeg. Szóval ott ültem és láttam, hogy ezt Vanilla.js használatával nagyon hosszú idő lesz. Előkaptam az AngularJs-t, gyorsan készen volt. Egy probléma akadt. Lassú volt. Nagyon lassú. Úgy volt lassú, hogy még pár dolog kellett volna bele. Megnéztem és egy kis vizsgálódás után láttam, hogy a háttérben egy csomó dolog történik, amit én nem akartam. Például minden alkalommal újrarajzolta a DOM fát. No hát itt most nem 300-400 DOM elemről van szó, hanem sokkal többről. Alkottam új filtereket a beépítetten kívül. Gyorsabb lett, de még mindig lassú.

Jött az ötlet, hogy meg kellene nézni a React.js-t. Megnéztem és még mindig nem tetszett. Keresgéltem, olvasgattam és azt találtam, hogy gyorsabb és jobb. Megerőszakoltam magam és csináltam pár egyszerű példát magamnak. Nem tutoriálokat, mert pont az a lényeg, hogy a doksija alapján egy random dolgot meg tudok-e csinálni. Persze mindezt úgy, hogy előtte nem használtam. Igen meg tudtam csinálni. Meglepő módon, 2-3 példafeladat után rájöttem, hogy mennyire jó is ez. Ekkor fogtam fel, hogy mit mondott steida. Ekkora esett le, hogy miért sokkal jobb, ha nem a tetves View irányítja a logikát. Ha mindent, de tényleg mindent JavaScript-ből oldasz meg.

React.js

Mivel AngularJs használata mellett döntöttem annó, így ezzel hasonlítottam össze. Végeredményben sokkal, de sokkal könnyebb volt vele dolgozni, amint megszoktam. Sebességben is sokkal jobban teljesített és úgy általában kevesebbett kellett írnom. Ami viszont a legkényelmesebb volt, hogy egyszerűbb volt ugyan azt a kódrészt újra és újra felhasználni. A Filterem például vár egy onChange függvényt, alapértéket, placeholdert és class-nevet. Innentől kezdve már bármikor, bárhol be tudom húzni. Ugyan így az Edit link csak meghív egy megadott callback-et és majd az lekezeli, hogy mit szeretne csinálni.

Remélem hamarosan lesz időm egy olyan példa-kódrész összeállítására is, amin végig lehet venni az alapokat és értelmes is nem csak valami “ToDo lista”.

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these