easySYS Relaunch: App & Webseite in einem neuen Look (Teil 2)
Was steckt hinter der Entwicklung der neuen easySYS Benutzeroberfläche? Wir werfen einen Blick auf die technischen Finessen beim neuen Interface.
Im Rahmen des easySYS Relaunchs wurde die Benutzeroberfläche komplett neu konzipiert und überarbeitet. Im ersten Teil des Artikels wurden die Änderungen des Interfacedesigns näher betrachtet. Für den Benutzer oftmals verborgen bleiben die Optimierungen unterhalb der Benutzeroberfläche. In diesem zweiten Teil des Artikels werden einige dieser Optimierungen aufgegriffen und deren Folgen für den weiteren Verlauf der Entwicklung aufgezeigt.
Twitter Bootstrap
Bei der Realisation des neuen Frontends wurde auf das Frontend-Framework Bootstrap zurückgegriffen. Das Framework bietet eine Vielzahl von Komponenten und kann einfach verwendet und angepasst werden. Neben den Komponenten werden zusätzlich einige dynamische Komponenten wie die Anzeige eines Tooltips durch die mitgelieferten Javascripts ermöglicht.
Dank Bootstrap können Templates wesentlich schneller erstellt und angepasst werden. Im Schnitt benötigen die Entwickler dadurch nur noch einen Drittel des Aufwands der vorher notwendig war. Ein weiterer Pluspunkt ist die breite Browserkompatibilität. Dadurch wird der Zeitaufwand für Browsertests minimiert.
Responsive Design
Der Gebrauch mobiler Geräte stieg in den letzten Jahren stetig an. Während die Navigation mit einem Tablet (wie beispielsweise dem iPad) zuvor nur mühselig von statten ging, wurde bei der Gestaltung der neuen Benutzeroberfläche von Anfang an Wert auf eine Tabletkompatibilität gelegt.
Die Darstellungsform verhält sich dabei proportional zur Bildschirmgrösse. Hierfür müssen alle verwendeten Komponenten in der Breite prozentual skalierbar sein. Aufgrund dieser Änderung nutzt die Applikation die verschiedenen Stärken der Geräte aus. Auf einem Tablet wird die Seite kompakt aber immer noch übersichtlich dargestellt, während auf einem grossen Bildschirm eine grössere Arbeits- und Darstellungsfläche zur Verfügung steht. Bei einer datenintensiven Applikation wie easySYS können die Templates dadurch wesentlich übersichtlicher gestaltet werden.
Gerätespezifische Anpassungen können direkt in den Templates vorgenommen werden. So werden auf kleineren Geräten wie einem Tablet nur die notwendigen Spalten einer Ansicht angezeigt, während auf einem grösseren Display weitere zusätzliche Informationen dargestellt werden.
Spritemaps
Professionelle Icons und Grafiken sind ein wichtiger Bestandteil einer modernen Webapplikation. Sie schaffen Klarheit bei Aktionen und helfen bei der Seitennavigation. Bei einem Seitenaufruf wird vom Browser jede auf der Seite vorhandene Grafik angefordert. Dies kann bei einer grösseren Anzahl an vorhandenen Grafiken in einer längeren Ladezeit resultieren.
Um diesem Problem entgegenzuwirken, können so genannte Spritemaps verwendet werden. Dabei fügt ein Tool mehrere Grafiken zu einer einzelnen grossen Grafik (siehe Abbildung 3) zusammen. Mit der Hilfe einiger CSS-Anweisungen kann dann ein Ausschnitt der Spritemap ausgewählt werden. Dadurch kann die einzelne Grafik wieder isoliert betrachtet werden.
Anstelle vieler kleiner Grafiken muss der Browser nun lediglich eine grössere Grafik vom Server anfordern. Dies entlastet zum einen den Server und resultiert zum anderen in einem schnelleren Seitenaufbau der Webseite.
Stylesheets und Javascripts
Eine moderne und intuitive Benutzeroberfläche kommt nicht mehr ohne den Einsatz von Stylesheets und Javascripts aus. Während Stylesheets das Erscheinungsbild verändern, fügen Javascripts der Webseite dynamische Elemente hinzu.
Javascript Optimierungen
Die easySYS-Applikation verwendet sowohl selbst programmierte wie auch aus öffentlicher Quelle stammende Javascripts. Um die Übersicht bei der Programmierung dieser Javascripts zu vergrössern, werden diese idealerweise in mehrere Dateien aufgeteilt. Dies führt zu einem ähnlichen Problem wie bei den Grafiken. Bei einem Seitenaufruf werden viele separate Anfragen an den Server gesendet, um all diese Javascript-Dateien anzufordern.
Die Lösung dieses Problems ist die Zusammenführung sämtlicher Javascript-Dateien in eine separate Datei. Dieser Schritt kann mittels verschiedener Tools automatisiert werden. Dabei werden die Dateien nicht nur zusammengeführt, sondern im gleichen Schritt auch auf Fehler überprüft und komprimiert. Bei der Komprimierung werden dabei unter anderem überflüssige Leerzeichen entfernt und Referenzen verkleinert. Dadurch wird die Grösse der Javascript-Datei verringert, was wiederum in einer kürzeren Ladezeit resultiert.
Neben dieser Methode setzt easySYS bei der Auslieferung der Javascript-Dateien auf sogenannte Content Delivery Networks (CDN). Dabei können populäre Javascript-Bibliotheken über fremde Anbieter bezogen werden. Im Falle von easySYS wird so beispielsweise die Bibliothek jQuery via das CDN von Google geladen. Hier wird die Datei beim Benutzer zwischengespeichert und muss so bei einem Besuch einer anderen Webseite nicht erneut angefordert werden. Dies reduziert wiederum den Datentransfer und ist insbesondere auf mobilen Geräten mit Datenvolumen nützlich.
Stylesheets und LESS
Bei den Stylesheets wird ein nahezu identisches Verfahren wie bei den Javascripts angewandt. Wiederum werden mehrere Dateien zu einer einzelnen zusammengefügt und dann komprimiert. Unter der Zuhilfenahme von LESS können zudem dynamische Komponenten hinzugefügt werden. Anhand des folgenden Beispiels wollen wir einen der vielen Vorteile von LESS gegenüber normalen Stylesheets aufzeigen:
Bei einer Tabelle sollen die Ecken mit einer Abrundung dargestellt werden. Dies ist normalerweise ein einfacher CSS-Befehl. Da die verschiedenen Browser diesen Befehl aber alle leicht modifiziert unterstützen, wären insgesamt vier CSS-Befehle notwendig. Mittels LESS kann nun ein sogenanntes Mixin erstellt werden. Wird dieses Mixin aufgerufen, werden diese vier CSS-Befehle verwendet. Dadurch muss der Entwickler lediglich einen Befehl anstelle der vier Befehle absetzen. Dies spart nicht nur Zeit, sondern vermeidet auch unnötige Fehler.
Build-Skript
Die im Text beschriebenen Methoden zur Optimierung von Icons, Javascripts und Stylesheets finden ihre Verwendung in einem sogenannten Build-Skript. In diesem Skript werden die Anweisungen für die Optimierungsprogramme unter der Zuhilfenahme einer Auszeichnungssprache vermerkt. Auf Knopfdruck eines Entwicklers werden dann die folgenden Schritte automatisiert ausgeführt:
- Erzeugung einer Spritemap
- Komprimierung sämtlicher Javascripts
- Konkatenation dieser komprimierten Dateien
- LESS-Kompilation sämtlicher Stylesheets
- Komprimierung des neu erzeugten Stylesheets
- Kopieren der erzeugten Spritemap, Javascripts und Stylesheets in einen öffentlich zugänglichen Ordner
- Anpassung der Referenzen innerhalb der easySYS-Applikation
Fazit
Durch den Einsatz moderner Tools und Prozesse können ein Teil der Entwicklungsarbeit vereinfacht und optimiert sowie Fehlerquellen systematisch ausgeschlossen werden. Aufgrund der im Artikel beschriebenen Optimierungen konnte die Anzahl durchschnittlicher Anfragen an den Server drastisch reduziert werden.
