Web Development. Ein Frontend mit Yeoman

von Henry Zeitler

Ich wollte mir Yeoman, ein Tool zur Optimierung und Erleichterung des Workflows für die Entwicklung von Web-Apps, mal etwas genauer ansehen. Daraus wurde dann doch ein (fast *) komplettes, responsives Frontend. Hier ein kurzer Erfahrungsbericht über Yeoman auf Ubuntu…

* Ein fast komplettes Frontend, denn die meisten Buttons, Links und Features sind nur Dummies und funktionieren nicht. Dieses Frontend ist lediglich ein Entwurf und Testprojekt.

Diesen Artikel direkt im Test-Frontend lesen »

Zuerst einmal: Guten Tag Yeoman!

Logo von Yeoman

Ich will gar nicht alles vorweg nehmen, aber Yeoman macht echt Spaß. Und wenn ein Werkzeug Spaß macht, dann funktioniert es in der Regel auch gut. Ich habe mir Yeoman auf Ubuntu 12 installiert und nach ein paar Turbulenzen im Einstieg lief es dann endlich. Endlich deswegen, weil das Tool eine Menge Vorinstallierungen verlangt. Um euch einen Vorgeschmack zu geben, unten die Komponenten mit den benötigten Konsolen-Befehlen in nicht-chronologischer Reihenfolge, denn diese müssen noch manuell installiert werden.

Der Headless-Browser | sudo apt-get install libqtwebkit-dev
✓ curl is present, phew.
✓ git smashing! | yum install git
✓ NodeJS check. | sudo apt-get install nodejs npm
✓ ruby check. | sudo apt-get install ruby1.9.1
✓ RubyGems check.
✓ Compass check. | sudo gem install compass
✓ PhantomJS check. | sudo apt-get install phantomjs
✓ jpegtran check. | sudo apt-get install libjpeg-progs
✓ optipng check. | sudo apt-get install optipng
✓ yeoman global npm module extraordinary! | sudo npm install -g yeoman

Aber Yeoman bringt dafür auch eine Menge mit. Es gibt einen Live-Compiler für Compass sowie Coffee-Script und mittels LiveReload und dem integrierten Vorschau-Server wird jede Änderung direkt im Browser angezeigt. Dadurch vereinfacht und verkürzt sich die Entwicklungsarbeit ungemein und man kann sich daran durchaus schnell gewöhnen. Allerdings verliert der Entwickler auch schnell den Bezug zum Backend.

Startet der Webdeveloper ein neues Projekt, sammelt Yeoman alle gewünschten Komponenten und erstellt einen fertigen Projektordner. Alles geschieht mit einen einzigen Befehl (yeoman init) über die Konsole.
Ein absolutes Highlight ist auch das integrierte Build-Script, welches automatisch die Bilddateien komprimiert, Files minifiziert und die JS-Dateien zusammenfasst wenn der Entwickler seine Arbeit abschliesst und das Werk wieder über die Konsole mit yeoman build exportiert. Das spart eine Menge Hantier, wenn es Stück-für-Stück gemacht werden muss.

Allerdings gibt es auch noch ein paar ernsthafte Bugs. Zum Beispiel wurde durch ein Installation über Bower der Script-Ordner ordentlich aufgemischt und die wichtigen Backbone und Lodash-Dateien einfach gelöscht. Ein Backup von Zeit zu Zeit ist deshalb unbedingt anzuraten.

Während der Testphase wuchs das Projekt immer mehr zu einem Frontend zusammen und so stand ich bald vor der Frage, ob und wie ich die Navigation erstellen soll…

Immer eine Herausforderung – die Navi

Als Fan von listenbasierten Tab-Navigationen und Responsive Webdesign wollte ich eine Lösung finden, die sich via Media Query in ein Akkordeon verwandelt, ohne dabei display: none für die wichtigen Hauptkomponenten zu benutzen.

Mal laut gedacht: Ein Akkordeon-Menü hat das entscheidende Mermal, dass es erst beim anklicken den versteckten Hauptteil ausklappt (oder ausfährt) um Platz in vertikaler Richtung einzusparen. Leider greifen hierbei viele Lösungen auf besagtes display: none zurück um den Hauptteil zu verbergen. Auch viele jQuery-Plugins und UI-Komponenten arbeiten so. Aber auch im Responsive Webdesign sollte unbedingt Wert auf Accessibility gelegt werden, weil z. B. Media Queries natürlich auch auf Desktop-Computern ausgelöst werden, und deshalb eine Barrierefreiheit nicht immer hundertprozentig sicher gestellt werden könnte (ein User könnte den Browser kleiner skalieren, um mehrere Programme nebeneinander anzuordnen). Zudem ist es durchaus Vorstellbar, dass Screenreader demnächst auch Internetseiten auf Mobile-Devices vorlesen und natürlich nicht zu vergessen SEO und die Suchmaschinen, die Zugänglichkeit ebenfalls mögen.

Nach ein paar Tests und Recherchen habe ich mich für folgende Lösung entschieden. Hier eine kurze Erläuterung wie sie funktioniert und warum.

Im Grunde genommen besteht die Navigation aus zwei Komponenten. Den Toggle-Button für kleine Ausgabegeräte um die Navigation vollständig einzublenden und eben die Navigation selbst. Wie oben bereits erwähnt besteht die Überlegung darin, die eigentliche Navigation bei kleinem Viewport zu verbergen ohne sie unzugänglich zu machen und beim Klicken auf den Button dann wieder einzublenden. Es gibt hierfür diverse Ansätze mit gefakten Viewportabfragen mittels Javascript aber die Lösung ist viel einfacher.

Der Toggle-Button wird im Urzustand (Desktop) mit display: none ausgeblendet, denn er besitzt keine relevanten Informationen und ist deshalb für niemanden von Interesse. Die Navigation bekommt die Klasse “.hide”, die erst über das Media-Query angesprochen wird und die Navigation mit Hilfe von position: absolute ausblendet. Ein modifiziertes Javascript-Snippet, dass von Aaron Gustafson ursprünglich zum ein/ausblenden von Textboxen gedacht war, erzeugt den Akkordeon-Effekt beim Anklicken indem es die Klasse “.hide” dem Zielelement (Hauptnavi) entzieht bzw. zuteilt und die Navigation mit SlideUp/Down animiert auf- und zurollt.

Eigentlich war es das schon, denn auf die Erstellung eines Tab-Menüs und seines Verhaltens im Responsive Webdesign möchte an dieser Stelle nicht näher eingehen. Das Resultat seht ihr hier im Frontend und der Einfachheit halber habe ich die Navi auf JSFiddle noch einmal extrahiert. Responsive Tab to Accordion Navigation.

Der Umstand, dass ich auf meinem Ubuntu-Rechner kein Photoshop und mich nie wirklich mit Gimp beschäftigt habe, erklärt den nächsten Absatz. Allerdings verwende ich Icon-Fonts schon länger und kann ihre Anwendung nur empfehlen…

Icon-Fonts. Yeah!

Ok, es gibt Rendering-Schwierigkeiten. In erster Linie auf älteren Browsern, deren Engine noch keine fortgeschrittene Schriftenglättung kennt. Unschön aber zu verschmerzen, denn auf der anderen Seite sehen Icon-Fonts in allen modernen Browsern und (vor allem) auf mobilen Endgeräten hübsch aus und stehen den Images in nichts nach.

Und die Vorteile überwiegen. Font-Icons lassen sich einfärben, vergrößern, verkleinern, mit Transparenz versehen, drehen, verschlagschatten, sie haben eine geringe Dateigröße und sind gerade deswegen gut für die Performance und für mobile Devices. Vergrößern ist dabei ein sehr wichtiges Stichwort, denn Icon-Fonts halten den Anforderungen der Retina-Displays (doppelte Auflösung) problemlos Stand und somit spart sich der Webdesigner ein zusätzliche Icon-Sets. Und dann ist da noch die Nachhaltigkeit, denn wer weiß schon welche monströsen Display-Auflösungen uns im nächsten Jahr erwarten.

Doch zurück zum Frontend. Einmal abgesehen von den Bildern in den Fliesstexten gibt es hier nur ein Image. Richtig, das Hintergrund-Bild im Body-Tag. Alle Icons stammen aus Icon-Fonts und werden mit :before im Stylesheet eingebunden. Eine Alternative dazu wäre data-icon im HTML zu benutzen. Chris Coyier gibt dazu praktische Beispiele in seinen Demos Icon Fonts are Awesome.

Quellen für Icon-Fonts gibt es hier:

Fazit

Das Projekt hat nicht nur Spaß gemacht, sondern mich (und ich hoffe auch euch) dem Yeoman näher gebracht und um ein paar Erkenntnisse und Snippets bereichert. Ich denke, dass ich Yeoman in Zukunft intensiver nutzen und testen werde. Ein nächster möglicher Schritt wäre auch das Frontend in ein Template (z. B. für ModX) zu verwandeln. Mal sehen, wie ich Zeit finde…

comments powered by Disqus