MACNOTES

Veröffentlicht am  2.07.08, 10:50 Uhr von  ml

SproutCore: MVC für Web-Anwendungen

SproutCore In letzter Zeit machen immer mehr Web-Anwendungen auf sich aufmerksam, die zumindest andeuten, dass bestimmte Desktop-Anwendungen zukünft überflüssig werden könnten. Öl ins Feuer der Web-Anwendungen hat auch Apple mit der Vorstellung von Mobile Me gegossen. 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, dass Apple an der Entwicklung von SproutCore beteiligt ist an die Öffentlichkeit. Das Javascript-Framework steht unter der freien MIT-Lizenz und erweitert Javascript um das von Cocoa bekannte Model-View-Controller-Paradigma (MVC).

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 SproutCore etwas anderes. Wir haben einen genaueren Blick auf das Javascript-Framework geworfen 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 installiert haben, denn die SproutCore-Werkzeuge sind in Ruby geschrieben. Zudem wird das Framework mit Hilfe der Paketverwaltung Gems installiert. Eine detailierte Anleitung, wie man die benötigten Ruby-Komponenten auf seinem Mac installiert, findet man hier.

Anschließend wird SproutCore mit dem Terminal-Befehl

sudo gem install sproutcore

Sony
installiert.

Hello World
Die ersten Schritte mit SproutCore sind sehr einfach. Mit dem Befehl

sproutcore hello_world

Sony

legt man im aktuellen Verzeichnis ein Projekt mit dem Namen hello_world an. Nach einem Wechsel in das hello_world-Verzeichnis startet man mit dem Befehl

sc-server

Sony

den integrierten Webserver von SproutCore. Dieser ist auf dem lokalen Rechner über die URL http://localhost:4020/hello_world erreichbar.
[singlepic id=1259 w=400] Auch wenn SproutCore vielleicht einen anderen Eindruck erweckt, werden die HTML-Seiten bei SproutCore nicht dynamisch erzeugt. 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, welche von Ruby abgeleitet ist. In der Vorlage definiert man die Elemente, die später auf der Webseite angezeigt werden sollen, 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' } %>

Sony

Der Controller wird im Projektverzeichnis mit dem Befehl

sc-gen controller hello_world/app

Sony

erzeugt. Dabei wird im Unterverzeichnis clients/hello_world/controllers die Datei app.js angelegt. Darin wird der Controller anschließend implementiert.

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

Sony

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!')

Sony

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')

Sony

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 wird periodisch abgearbeitet und anstehende Timeouts werden ausgelöst. Weitere Details dazu findet man in einem detailierten Blogpost im SproutCore-Blog.

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.
[singlepic id=1258 w=400]

Veröffentlichung
Wenn die eigene Web-Anwendung fertiggestellt ist, dann soll sie veröffentlicht werden. Dazu hat man bei SproutCore zwei Möglichkeiten. Entweder man verwendet den sc-server direkt weiter oder man erzeugt mit dem Befehl

sc-build

Sony

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 Cappucino-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.

 Und wie ist deine Meinung?  Schreib uns einfach!

 9 Kommentar(e) bisher

  •  sandro sagte am 2. Juli 2008:

    Super Artikel, Danke!
    Habe mich schon für sproutcore interessiert aber bisher noch nicht genau eingelesen, dieser Artikel bot ein super Einstieg :) danke.
    leider scheint ja http://www.sproutcore.com seit einiger zeit “tot” zu sein ;)

    aber trotzdem, sproutcore hört sich echt interessant an. die bindings sind toll und auch wie das mit den timern gelöst ist hört sich gut an.
    bin gespannt wie das weiter geht.

    Antworten 
  •  ml sagte am 2. Juli 2008:

    Was meinst du mit “tot”? Bei mir funktioniert die Seite nach wie vor.

    Antworten 
  •  sandro sagte am 2. Juli 2008:

    ok ich nehms zurück :) bei mir war sie vor ein paar tagen tot und war wohl noch so im cache.

    Antworten 
  •  Tekl sagte am 2. Juli 2008:

    Wenn ich jetzt eine App wie iPhoto für’s Web entwickle und diese dann mit sc-build veröffentliche ist dann alles immer statisch oder wie werden notwendige dynamische Zugriffe geregelt? Benötige ich dann Ruby auf meinem Webserver?

    Antworten 
  •  ml sagte am 2. Juli 2008:

    @Tekl: SproutCore ist kein AJAX-Framework, d.h. die asynchrone Kommunikation mit dem Server musst du selbst implementieren. SproutCore unterstützt dich darin allerdings mit CoreData-ähnlichen Modellen. Einfach mal in der Doku nach SC.Record und SC.Store schauen.

    Antworten 
  •  Wuschab sagte am 2. Juli 2008:

    Ich glaube, JsExt ist da schon weiter.

    Antworten 
  •  Tekl sagte am 3. Juli 2008:

    @ml: Also kann ich auch SproutCore mit PHP nutzen? Es handelt sich doch um ein JavaScript-Framework. Was soll dann das Gefummel am Terminal mit Ruby?

    Antworten 
  •  ml sagte am 3. Juli 2008:

    Die Build-Tools von SproutCore sind in Ruby geschrieben, deshalb benötigst du Ruby auf dem Entwicklungssystem. Die fertige Web-Anwendung benötigt natürlich kein Ruby mehr und besteht nur noch aus HTML-, CSS-, und Javascript-Dateien.

    Antworten 
  •  Tekl sagte am 3. Juli 2008:

    Ok, danke.

    Antworten 

Kommentar verfassen

Werbung
© 2006-2013 MACNOTES.DE. Made with insanely great for all things Mac. Apple.de