SproutCore: MVC für Web-Anwendungen

In letzter Zeit machen immer mehr Web-Anwendungen auf sich aufmerksam, die zumindest andeuten, dass bestimmte Desktop-Anwendungen zukünftig überflüssig werden könnten. Apple arbeitet sogar mit daran, eine Zeitenwende einzuleiten.

Öl ins Feuer der Web-Anwendungen goss Apple beispielsweise mit der Vorstellung von MobileMe. Anwendungen für Kalender, Adressbuch, E-Mail und Photos machen die Mac-OS-X-Pendants Mail, iCal, Adressbuch und in gewissem Umfang auch iPhoto plattformunabhängig und weltweit verfügbar.

Im Rahmen der diesjährigen WWDC drang dann das quasi offene Geheimnis an die Öffentlichkeit. Apple beteiligt sich an der Entwicklung von SproutCore. Das Javascript-Framework steht unter der freien MIT-Lizenz und erweitert Javascript um das von Cocoa bekannte Model-View-Controller-Paradigma (MVC).

Was kann SproutCore?

SproutCore wurde ursprünglich von Charles Jolley entwickelt. Inzwischen arbeitet er bei Apple und war dort zunächst im .Mac-Team aktiv. In dieser Zeit erfuhr das Framework einen deutlichen Schub. Inzwischen erweitert SproutCore Javascript um Bindings, Controller, Key-Value-Observation und stellt zahlreiche Views (Buttons, Textfelder, Labels etc.) zur Verfügung.

Auch wenn SproutCore von manchen Entwicklern schon euphorisch in Anlehnung an Ruby on Rails als „Javascript on Rails“ bezeichnet wird, ist es etwas anderes. Wir warfen einen genaueren Blick auf das Javascript-Framework und zeigen Euch, wie es funktioniert.

Bevor es los geht

Um mit SproutCore beginnen zu können, muss man auf seinem System Ruby und die Erweiterung Gems installieren. Denn die SproutCore-Werkzeuge sind in Ruby geschrieben. Zudem wird das Framework mit Hilfe der Paketverwaltung Gems installiert. Eine detaillierte Anleitung, wie Ihr die benötigten Ruby-Komponenten auf Eurem Mac installiert, findet Ihr online.

Anschließend installiert Ihr SproutCore mit dem Terminal-Befehl sudo gem install sproutcore installiert.

Hello World

Die ersten Schritte mit SproutCore sind sehr einfach. Mit dem Befehl sproutcore hello_world legt Ihr im aktuellen Verzeichnis ein Projekt mit dem Namen „hello_world“ an. Nach einem Wechsel in das „hello_world“-Verzeichnis startet Ihr mit dem Befehl sc-server den integrierten Webserver von SproutCore. Dieser ist auf dem lokalen Rechner über den URL „http://localhost:4020/hello_world“ erreichbar.

Auch wenn SproutCore vielleicht einen anderen Eindruck erweckt, erzeugt es die HTML-Seiten nicht dynamisch. SproutCore erzeugt stattdessen statische HTML-Seiten und entsprechende Javascripts. Während andere Web-Anwendungen intensiv auf AJAX setzen, wird hier die Kommunikation zwischen Client und Server auf ein Minimum reduziert.

Der Aufwand bei der Ausführung einer mit SproutCore erstellten Web-Applikation liegt daher auch beim Browser. Hier wird deutlich, wie wichtig künftig ein schneller Browser sein wird. Mit SquirrelFish legt Apple bereits die Grundlage für zukünftige Verbesserungen der Javascript-Performance von Safari.

SproutCore-Features

SproutCore verwendet für HTML-Vorlagen die Vorlagensprache Erubis, die von Ruby abgeleitet ist. In der Vorlage definiert man die Elemente, die die Webseite später anzeigt, sowie bestimmte Eigenschaften des Objekts. Die folgende Zeile, erzeugt ein Label und bindet den vom Label angezeigten Text an die greeting-Variable des HelloWorld-Controllers.

<%= label_view :my_label, :tag => 'h1', :bind => { :value =>
HelloWorld.appController.greeting' } %>

Der Controller wird im Projektverzeichnis mit dem Befehl sc-gen controller hello_world/app erzeugt. Dabei wird im Unterverzeichnis „clients/hello_world/controllers“ die Datei app.js angelegt. Darin implementiert SproutCore den Controller.

HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController */ {
greeting: "Hello World!"
}) ;

Aufgabe des Controllers ist es die Daten zwischen Modell (Datenspeicher) und dem View (Anzeige der Daten) synchron und konsistent zu halten. Ändert sich jetzt der Wert der greeting-Variablen, dann sorgt das Binding dafür, dass der Label-View auf der Webseite automatisch aktualisiert wird. Wer Firefox mit der Erweiterung FireBug installiert hat, kann auf der Konsole anschließend den folgenden Befehl eingeben HelloWorld.appController.set('greeting', 'I am changing!') und die Änderung des Label-Textes im Browser beobachten.

Key-Value-Observing (KVO) ist eine Methode aus Cocoa, über die ein Objekt andere Objekte über Änderungen seines Objektzustandes informieren kann. Damit kann beispielsweise bei der Änderung eines Werts automatisch eine Funktion aufgerufen werden. Der folgende Code überwacht die Eigenschaft isClockShowing und immer wenn sich diese Eigenschaft ändert, wird die definierte Funktion ausgeführt.

isClockShowingObserver: function() {
var isClockShowing = this.get('isClockShowing') ;
var newGreeting = (isClockShowing) ? 'CLOCK!' : 'Hello World!' ;
this.set('greeting', newGreeting) ;
}.observes('isClockShowing')

Clever ist in SproutCore das Handling von Timern und Timeouts gelöst. Wer schon Erfahrung mit Timern in Javascript hat, der weiß, dass bei der Verwendung mehrerer unterschiedlicher Timer die Performance einer Anwendung drastisch einbricht. Um das zu vermeiden verwendet SproutCore eine Timerliste. Diese arbeitet es periodisch ab und löst anstehende Timeouts aus.

Multilingual

SproutCore unterstützt die Entwicklung mehrsprachiger Web-Anwendungen. Ähnlich wie bei der Entwicklung von Mac-OS-X-Anwendungen erfolgt die Lokalisierung über sprach-spezifische Dateien, die in einem entsprechenden Unterverzeichnis (z. B. „english.lproj“ oder „german.lproj“) abgelegt werden.

Wenn man bei der Entwicklung mal nicht weiter weiß oder etwas nachschauen möchte, so hilft die Dokumentation von SproutCore weiter. Diese ist direkt in SproutCore integriert und lässt sich im Browser über die URL „http://localhost:4020/sproutcore/-docs“ aufrufen.

Die Dokumentation von SproutCore basiert auf JSDoc, welches analog zu HeaderDoc oder Doxygen bestimmte Tags im Quellcode auswertet und daraus die Dokumentation erstellt. Praktischerweise kann man dieses Feature auch gleich für sein eigenes Projekt nutzen und hat damit auch für die eigenen Projekte die Dokumentation gleich zur Hand.

Veröffentlichung

Habt Ihr eine eigene Web-Anwendung fertiggestellt, wollt Ihr sie veröffentlichen. Dazu hat man bei SproutCore zwei Möglichkeiten. Entweder man verwendet den sc-server direkt weiter oder man erzeugt mit dem Befehl sc-build alle statischen HTML-, CSS- und Javascript-Dateien, die man anschließend auf einen Server hochladen kann. Die statischen Dateien lassen sich dann z. B. mit einem für statische Inhalte optimierten Webserver (z. B. lighthttpd) ausliefern.

Fazit

Anders als z. B. 280 North mit dem Cappuccino-Framework implementiert SproutCore nicht die Cocoa-Frameworks für Javascript bzw. Objective-J. SproutCore erweitert Javascript um grundlegende Cocoa-Konzepte. Der Vorteil ist, dass der Entwickler keine neue Programmiersprache erlernen muss und es daher für bereits aktive Web-Entwickler gut geeignet ist. Hervorzuheben ist, dass SproutCore ein rudimentäres Build-System mitbringt. Die integrierten Werkzeuge ermöglichen den Einstieg innerhalb weniger Minuten selbst für einen Neuling.

Die Entwicklung von SproutCore schreitet schnell voran und wöchentlich werden weitere Funktionen dem Framework hinzugefügt. Daher lohnt sich hin und wieder ein Blick ins Blog der Entwickler.

Ähnliche Nachrichten