Mit Angular.js lassen sich wunderbar Apps nach dem MVC-Pattern erstellen. Ein nicht zu vernachlässigender Teil ist hierbei das „V“, nämlich die View. Gutes Design und eine gute User Experience sind bei jeder App enorm wichtig. Hierzu gibt es eine Vielzahl an CSS-Frameworks, die das Designen vereinfachen. In einem Projekt habe ich zwei davon unter die Lupe genommen und untersucht, welches wann das geeignete ist.
Besonders wichtig war bei diesem Projekt die Unterstützung von Angular in Version 1 und das „responsive Design“. Also die Möglichkeit die App auf allen Bildschirmgrößen sinnvoll anzeigen zu können.
Zwei geeignete Frameworks sind Angular Material und UI Bootstrap. Im Rahmen eines SharePoint Add-Ins habe ich beide Frameworks genutzt, um die Oberfläche meiner Angular App zu gestalten.
Frontend Showcases
Meine App sollte wie ein soziales Netzwerk aufgebaut sein. Das heißt, man sollte ein Profil besitzen und Profile miteinander verknüpfen können. Die App besteht aus drei Ansichten:
- eine Ansicht für ein einzelnes Profil,
- eine Übersicht über alle Profile,
- und eine Seite zum Erstellen neuer Profile.
In der Einzelansicht werden Details angezeigt, wie z.B. Hobbys, Geburtsdatum oder die verknüpften Kontakte. Mit Hilfe der Übersicht über alle Profile kann man zu den einzelnen Profilen gelangen und sie außerdem als Favoriten hinzufügen. Mit der Ansicht zum Erstellen neuer Profile ist es möglich, ein neues Profil anzulegen, das in einer SharePoint-Liste gespeichert wird.
Angular Material
Angular JS Material ist ein UI-Framework, das Googles Material Design Spezifikation implementiert. Damit lassen sich vor allem responsive Web Apps entwerfen. Die Komponenten sind wiederverwendbar, getestet, barrierefrei und bieten eine ausgezeichnete UX.
UI Bootstrap
Bootstrap ist eines der beliebtesten Frameworks für die Entwicklung von mobile first Webseiten. Allerdings benötigt es jQuery, was Probleme mit Angular verursachen kann. Die Lösung dafür bietet UI Bootstrap. Es enthält Angular-Direktiven, die auf Bootstraps Markup und CSS basieren. Daher werden jQuery und Bootstraps JavaScript nicht benötigt, aber das komplette Bootstrap CSS kann verwendet werden.
Vergleich
Vorteile UI Bootstrap
UI Bootstrap ist vor allem für das Gestalten von Webseiten nützlich. Denn es stellt z.B. Elemente wie die Navigation und ein „Carousel“ für Bilder bereit. Weiterhin gibt es einen simpel verwendbaren Datepicker. Dieser kann ohne viel Aufwand das deutsche Format und deutsche Labels verwenden. Mit 375 KB inklusive Glyphicons ist UI Bootstrap relativ leichtgewichtig für ein UI-Framework. Das Grid-System zum responsiven Design der Seite ist einfach zu verstehen.
Nachteile UI Bootstrap
Jedoch hat es den Nachteil, dass die Implementierung nicht mit der Flexbox umgesetzt ist. Diese gibt es in CSS3, um flexible Layouts zu erstellen. Da diese moderne Möglichkeit nicht genutzt wird, können Darstellungsprobleme entstehen, wenn etwa Columns zu breit sind.
Beim Vergleich von zwei Frameworks wird man immer sagen können, bei dem einen fehlt mir jene Funktionalität des anderen. Und umgekehrt. Jedoch fehlen mir bei Bootstrap einige elementare Input-Elemente. Für einen Slider muss man auf den HTML-Standard zurückgreifen und auch bei Selects und Checkboxen fehlt eine eigene hübsche Umsetzung. Ein weiterer Kritikpunkt sind die, im Vergleich, wenigen Icons, die man bei Bootstrap benutzen kann. Trotz der immerhin 260 Glyphicons muss man manchmal kreativ werden, um etwas darzustellen. Eine kostenlose Icon-Alternative mit 675 Icons bietet Fontawesome.
Insgesamt habe ich für die UI Bootstrap Ansichten mehr eigenes CSS schreiben müssen.
Nachteile Material
Bei Angular Material kommt man allerdings auch nicht ohne custom CSS aus. Jedenfalls nicht, wenn man den Internet Explorer unterstützen will. Denn sobald das Markup etwas verschachtelter wird, kann es dort Probleme geben. In der mobilen Version von Chrome trat bei mir der Fehler auf, dass in einer md-grid-list in einem md-tab nichts angezeigt wurde. Das musste durch Festlegen einer minimalen Höhe gefixt werden.
Beim Auftreten von Bugs hat man manchmal das Problem, dass Issues zu Material 1 nicht mehr bearbeitet werden. Stattdessen wird man darauf hingewiesen, dass der Fehler bei Material 2 behoben ist.
Ein weiterer Nachteil von Material ist, dass es nur unzureichend für Webseiten geeignet ist. Es gibt keine normale Navigationsleiste und keine Tabellen. Was im Vergleich zu Bootstrap noch fehlt, ist etwas wie ein Collapse oder Accordion, zum Expandieren von Inhalten. Dennoch ist das Framework mit 793KB inklusive Font, nicht so leichtgewichtig wie UI Bootstrap.
Vorteile Material
Material ist bestens für Web Apps geeignet, die responsiv sein sollen. Abhängig von Bildschirmgrößen, lässt sich das Layout horizontal oder vertikal festlegen. Die Breite eines Containers richtet sich ebenfalls danach oder nach Elementen, die versteckt werden sollen. Die Bildschirmgrößen von xs bis xl finde ich dabei passend gewählt. Das Framework nutzt die Vorteile der CSS3-Flexbox.
Außerdem stehen über 900 Icons zur Verfügung. Diese folgen den Material-Design-Richtlinien.
Das Element Progress Circular bietet eine schicke Alternative zum gewöhnlichen Ladebalken für Prozesse, deren Dauer man nicht abschätzen kann.
Generell sehen die Elemente ohne Aufwand modern und ansprechend aus. Die Animationen sind nicht übertrieben und helfen die User Experience zu verbessern. Es gibt einige Elemente, die interessante Funktionen bringen. Beispielsweise den FAB Speed Dial und die Menu Bar. Außerdem gibt es neben einem Alert noch andere vorgefertigte Dialoge, nämlich Confirm und Prompt.
Zudem gibt es bei Bootstrap kein Element, das der Material Grid List entspricht. Diese kann dynamisch die Anzahl ihrer Columns und Rows festlegen.
Fazit
Für simple Angular Apps kann UI Bootstrap durchaus geeignet sein. Mit dem mobile first Ansatz lassen sich schnell Webseiten designen, die responsive sind.
Angular Material verwendet man am besten für Web Anwendungen, die gern etwas komplexer sein können. Die vielen Direktiven ermöglichen verschiedene Layouts für Apps. Und das schicke, einheitliche Design und die Verwendung der Flexbox bei der Implementierung ermöglichen ein unkompliziertes Erstellen von Views. Jedoch sollte man beachten, dass man sich erst einmal etwas in das Framework einarbeiten muss.
Angular Frontend Showcases
Der Artikel basiert aus den Erfahrungen des Projektes „Angular Frontend Showcases“. Die Lösung, die ein SharePoint-hosted Add-In ist, ist Open Source (MIT Lizenz) und darf somit beliebig verwendet und umgestaltet werden oder zur Inspiration dienen.
Weitere Informationen zum „Angular Frontend Showcases“ sind dem Open Source Bereich von Data One auf GitHub zu entnehmen.
