Angular Material Design VS Bootstrap UI

Die Bedeutung von MVC JavaScript Frameworks für die Frontend-Entwicklung im Enterprise Umfeld hat in den letzten Jahren stark zugenommen, wichtige Aspekte sind dabei Wiederverwendbarkeit, Skalierbarkeit und Wartbarkeit der Anwendungen [1]. Durch die zunehmenden Bestrebungen zur JavaScript-Standardisierung, lassen sie sich auch für komplexe Webanwendungen einsetzen. Aufgrund ihres höheren Abstraktionsgrades führen sie im Vergleich zu Frameworks wie jQuery zu einer besseren Codequalität sowie zu Geschwindigkeitsvorteilen bei der Entwicklung.

UI Frameworks in Kombination mit AngularJS

Eines der populärsten Frontend Frameworks für komplexe Anwendungen ist das von Google entwickelte AngularJS. Um das User Interface umzusetzen gibt es mehrere Möglichkeiten, die alle ihre Vor- und Nachteile haben.
Zwei interessante Alternativen sind Angular Material und UI Bootstrap. Beide sind quelloffen und auf GitHub verfügbar.

UI Bootstrap ist  ein Teil des Projektes Angular UI und dient dazu, AngularJS mit Twitter Bootstrap einzusetzen [2]. Die Erweiterung für Twitter Bootstrap überführt den bestehenden Bootstrap-Code in native Direktiven.

[3] Bootstrap Input Group

Angular Material Design stellt wie UI Bootstrap Komponenten zur Verfügung. Es handelt sich um ein Komponentenframework, das auf den Material Design Guidelines von Google basiert. Diese Guidelines verbindet es mit dem JavaScript Framework AngularJS [4]. Seit kurzem gibt es die stabile Version 1, die mit Angular 1.x eingesetzt werden kann. Außerdem gibt es bereits ein Angular 2 Projekt, das allerdings noch in der Alpha-Phase ist [5].
Das Design hat Ähnlichkeiten mit Flat Design, da es als zentrale Designelemente ebenfalls Schriftarten und Icons verwendet. Daneben werden bunte, kontrastreiche Farben eingesetzt, sowie großflächige, einfarbige Elemente.

[6] Angular Material Select

Fazit

Sowohl UI Bootstrap als auch Angular Material Design stellen unterschiedliche UI Komponenten, z.B. für Symbole, Menüs, Navigation oder Input-Felder zur Verfügung und eignen sich für die Umsetzung von responsive UIs. Das Look & Feel ist jedoch sehr unterschiedlich.
Angular Material bietet sich an, wenn man seine Anwendung insgesamt im Material Design Stil gestalten möchte, durch die wiederverwendbaren UI-Elemente steigt dann die Entwicklungsgeschwindigkeit. Außerdem wurde das Framework entwickelt, um in Verbindung mit AngularJS eingesetzt zu werden, während für Bootstrap dazu die Erweiterung UI Bootstrap notwendig ist.
Während Angular Material nur für  die Umsetzung des Google Material Design gedacht ist,  bietet UI Bootstrap unterschiedliche Themes und damit verschiedene Gestaltungsmöglichkeiten der UI Komponenten an. Da das quelloffene Bootstrap eines der am häufigsten eingesetzten CSS Frameworks ist [7], gibt es bereits eine große Anzahl an Themes, so dass das Look & Feel genau auf die Bedürfnisse der Benutzer zugeschnitten werden kann. Auch für das Material Design  gibt es mittlerweile mehrere spezielle Themes, z.B. Paper Bootswatch for Bootstrap oder Bootstrap Material.

Quellen: