Binding és Model - bemutatkozik a bimo

Szinte minden népszerű JavaScript framework egyik fő ígérete valamilyen binding mechanizmus egy observable model és a HTML control-ok között. Megoldásból van bőven, de szerintem a legtöbbjük felesleges sallanggal érkezik - látványos funkciók, amelyekre sosem volt szükségem, túlméretezett implementációk, vagy csavart filozófiák (rád nézek, AngularJS és React).

A JavaScript model és a HTML közti binding egy határvonalat lép át, és minden framework, amit eddig láttam, az alkotója eredeti hátterét tükrözi:

• A designer-háttérből érkező alkotó olyan framework-öt ír, amely eltorzítja a model-t, és HTML-referenciákra épít fölé.
• A JavaScript-orientált alkotó számára pedig kényelmesnek tűnik a HTML feláldozása.

A Knockout, az Angular, React és számtalan más framework mind eltorzítja a markup-ot. Ez nem csak lassabbá teszi a framework-öt (a DOM olvasása és parse-olása az utasításokért lassú művelet), hanem bátorítja - sőt sokszor megköveteli -, hogy az alkalmazáslogika beszivárogjon a HTML tag-ekbe, vagy fordítva a Javascript kódban jelenjenek meg HTML, vagy HTML-nek tűnő elemek. Ezeket a tag-eket aztán nagyon nehéz vagy lehetetlen debug-olni, az eredeti markup elhomályosítása pedig jelentősen megnehezíti a UI designer-ek munkáját. Egy kis “papa-mama” boltban, egyetlen full-stack fejlesztővel ez még talán működhet is. Egy nagyobb vállalati környezetben, ahol a feladatok specializált csapatok között oszlanak meg, a problémák gyorsan kicsúsznak a kézből.

Amikor tehát kicsi framework-re volt szükségem (semmi felesleg!) a model–control binding kezelésére, egyik létező megoldás sem felelt meg. Akkoriban Hapi.js-vel és Dust.js-szal építettem isomorphic webalkalmazásokat (erről majd egy másik posztban), és megszerettem a hapi konfigurációs szemléletét: létező komponensek összerakásával aktiválod a funkcionalitást. A saját komponensemben minden természetes határvonalat tiszteletben akartam tartani - a binding utasítások se a markup tag-ekbe, se a model-be nem szivároghatnak be.

A méret számított. A zeró fűggőség számított. Az eredmény a bimo - egy apró framework, 100% tiszta vanilla JavaScript-ben írva:

• 2,5 kB tömörítve
• Nulla függőség
• Observable model többféle watch-stratégiával, Node-on és böngészőben egyaránt
• Binder objektum, amelyben a konfiguráció a model-en és a markup-on kívül tárolódik
• Konfigurálható two-way és one-way binding, néhány extra finomsággal

A csomag elérhető npm-en és Bower-en. Majdnem egy évtizeddel később még mindig production-ben használja a Realmonitor.