201126Apr

JavaScript: MVC kompakt mit Spine

In JavaScript kommen Klassen in ihrer eigentlichen Form nicht zum Einsatz, da das Klassen-Model so nicht in JavaScript integriert ist und die Architektur erst simuliert werden muss. Auch eine Model-View-Controller-Struktur (MVC) muss erst entwickelt werden, damit sich entsprechende Szenarien umsetzen lassen. Dass sich das in einem kompakten Framework umsetzen lässt, beweist die Bibliothek Spine, die eben das MVC-Modell sehr elegant in JavaScript implementiert.

Spine

Mit Spine stehen Modelle zur Verfügung, mit denen sich Datensätze erzeugen und ausgeben lassen. Zudem können Elemente validiert und serialisiert werden, wodurch beispielsweise die Verarbeitung von JSON-Daten ermöglicht wird. Weiterhin stehen Routing- und Proxy-Module bereit, was die Verwendung von Hash-Fragmenten und verknüpften Abfragen erleichtert, da eben ein Proxy-Element mit einem entsprechenden Event belegt werden kann. Spine bietet schließlich auch noch Ajax- und HTML5-Local-Storage-Adapter an, mit denen Daten persistent gespeichert werden können.
Wer also eine objektbasierte Webanwendung mit JavaScript entwickeln und die MVC-Ebene einsetzen möchte, sollte auf jeden Fall einen Blick auf das kompakte Framework werfen.

Kommentare

CodeZero schrieb am 27.04.2011 #1

Ich finde den Blog super! :) Es gibt immer wieder etwas Intressantes zu lesen und zudem ist er auch schön anzusehen ;)

Diese 3D angehauchten Bilder in deinen Blogposts gefallen mir besonders. Wie machst du das?

Webmasterle schrieb am 28.04.2011 #2

@CodeZero: Eine Möglichkeit für solche Bilder wäre z.B. ein einfacher Screenshot, dann mit Photoshop über die "perspektivisch verzerren Transformation" zwei Ecken rausziehen und schliesslich bei http://tiltshiftmaker.com/ online entspr. "verunschärfen" ;-) Das Resultat sähe dann so aus: http://imgur.com/MBQQk

Matthias schrieb am 28.04.2011 #3

Danke für die netten Worte!
Webmasterle, den Link kannte ich noch gar nicht! Das ist ja mal eine interessante Anwendung :-)
Im Endeffekt sind das genau die Schritte, die ich durchführe: Transformieren (mit STRG werden die Ecken verzerrt), anschließend Beleuchtungseffekte (bei Bedarf auch mit Pinsel) und abschließend noch eine Weichzeichner-Ebene. Ich hatte zum Experimentieren den Monitor auch schon einmal fotografiert, aber das Resultat war ähnlich.

CodeZero schrieb am 29.04.2011 #4

@Webmasterle & Matthias:
Vielen Dank für die Tipps! :). Das muss ich gleich bei meinem nächsten Artikel einmal ausprobieren ;)

CodeZero schrieb am 29.04.2011 #5

Hat geklappt ;) http://codezero.ch/wp-content/uploads/2011/04/spriteme.png