Mein neuer Freund Sammy

18. März 2013

div class=”articleAbstract”>In der Webentwicklung wandert immer mehr Logik vom Server in den Client. Das hat unter anderem den Vorteil, dass zum Beispiel Validierungen direkt auf dem Client gemacht werden können und damit keine langen Antwortzeiten vom Server entstehen. Das schont a) die Serverressourcen und b) freut sich der Benutzer, dass er sofort Feedback bekommt und nicht etwa erst dann, wenn er das Formular mit 20 Feldern ausgefüllt hat 😉

Das Beispiel mit der Validierung zeigt, dass es wichtig ist auch im Browser eine kurze Reaktionszeit der UI zu haben. Also hat man begonnen nicht nur Validierung im Browser, sondern ganze Anwendungslogiken abzubilden. Für den Benutzer sieht es dann so aus, als würde er sich nur auf einer Seite befinden. Im Zuge sog. Single-Page Application kommt man schnell an den Punkt, an dem man eine Navigationsmöglichkeit von “Seite zu Seite” benötigt. Im klassischen ASP.NET MVC hat man einfach einen Link/Controller aufgerufen, der auf eine neue Seite gesprungen ist. Dadurch wurde immer ein Request an den Server durchgeführt, der die neue Seite gerendert und zurückgeliefert hat.
Bei der Single Page Application hat man allerdings alle “Seiten” in einer HTML-Seite. Die Inhalte der “Seiten” sind in der Regel in div-Elemente gekapselt und werden über einen Mechanismus sichtbar und/oder unsichtbar geschaltet.
Über dieses Schalten der Sichtbarkeiten kann man nun seine Navigation abbilden. Die Frage ist nur wie?

Sammy to the Rescue

Sammy ist ein kleines JavaScript Framework, das den URL-Hash (#) benutzt, um darüber eine Navigation abzubilden. Jeder der mit dem MVC-Framework arbeitet ist bestimmt schon mal über das Konzept der Routen gestoßen. Dieses Konzept findet sich auch in Sammy wieder. Mit Sammy kann man Routen und dazugehörige Aktionen definieren. Wird eine URL aufgerufen, die mit einer konfigurierten Route übereinstimmt, wird die entsprechende Aktion aufgerufen. Beispiel:

1: this.get('#:page', function () { 

2:     var page = this.params.page; 

3:     alert(page); 

4: });

Ruft man im Browser nun folgende URL http://www.mypage.de/#About auf, so trifft diese unsere Route und es wird “About” in einer Message-Box ausgegeben.
Komplettes Beispiel:

1: // Client-side routes 

2: Sammy(function () { 

3:     this.get('#:page', function () { 

4:         var page = this.params.page; 

5:         alert(page); 

6:         // Hide all divs 

7:         // Show div that hold the Page
                        Content 

8:     }); 

9:     // Start initial Page 

10:     this.get('', function () { 

11:         this.app.runRoute('get', '#Startpage'); 

12:     }); 

13: }).run(); 

Wie man sieht, nutzt Sammy das Hash-Tag (#), um seine Navigation zu verwalten. Damit ist es auch möglich im Browser den Vor- und Zurückbutton zu verwenden. Der Browser navigiert dadurch nicht auf die zuletzt besuchte Internetseite, sondern auf die zuletzt sichtbare “Seite” in der Single-Page Application.

Diese Methodik ist auch praktisch bei WebApps. Beim Drücken der Zurücktaste auf dem Handy wird damit auch hier in der Single-Page Application zurückgeblättert und nicht die zuletzt besuchte Internet Seite geladen.

Fazit

Wer demnächst also eine Single Page Application entwickeln möchte, sollte unbedingt mal einen Blick
auf Sammy werfen. Eine gute Einstiegshilfe bietet im Übrigen die knockoutJS Tutorial Seite.

Quellen: http://sammyjs.org/http://learn.knockoutjs.com/#/?tutorial=webmail