201131Jul

Agility.js: MVC-Bibliothek als jQuery-Plugin

Das Entwickeln von sauberem und gut strukturiertem Code ist wichtig, wenn es darum geht, Anwendungen pflegbar und zugänglicher zu machen. Gerade wenn mehrere Entwickler an einem Projekt arbeiten, ist eine Dokumentation ebenso wichtig wie eine durchdachte Struktur im Quelltext.
Die Trennung von Darstellung, Logik und Inhalt kann hierbei eine gute Lösung darstellen, da durch die Einhaltung von Regeln entsprechende Strukturen entstehen. Prinzipiell bietet sich ein Paradigma wie die MVC-Struktur dann an, wenn Benutzereingaben entgegengenommen werden oder Daten aus einer Datenbank stammen und präsentiert werden sollen.
Da das MVC-Entwurfsmuster in der letzten Zeit des Öfteren erwähnt wurde und die Funktionsweise nicht unbedingt leicht verständlich ist, könnte ein jQuery-Plugin wie Agility.js" interessant sein: Dadurch lässt sich die MVC-Struktur sehr einfach in JavaScript einbinden. Ein weiterer Aspekt stellt die Dokumentation von Agility.js dar, denn sie stammt von Artur Adib, der auch schon ein gelungenes Backbone.js-Tutorial veröffentlicht hat. In der Dokumentation wird daher nicht nur das Plugin, sondern MVC im Allgemeinen beleuchtet.

Agility.js - Javascript MVC library

Die Agility-Bibliothek erlaubt also verschiedene Binding-Arten (Model-View, Controller-Event), prototypische Vererbung und eine Syntax, die an jQuery angelehnt ist somit einfach zu verstehen ist. Zudem können in einem Schritt Objekte erstellt werden, die bei der Erzeugung Models, Views und Controller erhalten können:

  • var clock = $$({
  • model: {
  • time: '12:00:00'
  • },
  • view: {
  • format: '<span data-bind="time" />',
  • style: '& { color:white; background:#88f; }'
  • },
  • controller: {
  • 'create': function(){
  • var self = this;
  • setInterval(function(){
  • self.model.set({time: (new Date()).toLocaleTimeString()});
  • }, 1000);
  • }
  • }
  • });
  •  
  • $$.document.append(clock);

Durch HTML5-Data-Bindings können also Elemente über die Controller angesprochen werden. Die eigentlichen Inhalte (das Model) bleiben also getrennt von der DOM-Präsentation und die Programmlogik findet sich im Controller. Ob zu Experimentieren mit MVC oder zum produktiven Einsatz in größeren Anwendungen — Agility ist eine interessante Bibliothek, die im Hinterkopf behalten werden sollte.