Onsen UI ist ein Open Source HTML5 Framework mit dem man hybride oder mobile Webapplikationen entwickeln kann. Dabei stehen alle gängigen Android und iOS Komponenten mit nativem „look and feel“ zur Verfügung. Das Framework erkennt automatisch das Betriebssystem des Endgerätes und passt den Style der Applikation daran an. Generell verfügt das Framework über eine sehr ausführliche Dokumentation, was die Umsetzung von Projekten enorm erleichtert. Außerdem bietet Onsen UI mit sogenannten „Framework Bindings“ die Möglichkeit, seine Komponenten in bekannten Frameworks wie AngularJS, React oder Vue.js zu nutzen.

Onsen UI Elemente

Prinzipiell kann man bei der Verwendung von Onsen UI Elementen zwischen CSS Komponenten und Web Komponenten wählen. Die Web Komponenten basieren auf reinem JavaScript und können als simple HTML-Tags verwendet werden. Um mehrere Seiten zu erstellen, werden Onsen UI Applikationen in Templates mit jeweils eindeutiger ID aufgeteilt. Innerhalb der Templates wird ein Container mittels <ons-page>-Tag erstellt, der als Root-Element fungiert und alle weiteren Komponenten der jeweiligen Seite beinhaltet. Beispielsweise kümmert sich dieser Cotainer darum, dass der Content scrollbar wird sobald die Inhalte einer Seite die Größe des Screens überschreiten.

 

Vergleich Onsen UI Applikation im Android und iOS Style.

 

App Deployment

Es gibt mehrere Möglichkeiten, eine Onsen UI Applikation zur Verfügung zu stellen:

1. Hybrid App: Mit der Hilfe von Cordova kann man Onsen UI Projekte als native webview-basierende Apps für iOS und Android exportieren.
2. Progressive Web App: Man kann Onsen UI Projekte auch als progressive Webapplikation exportieren, um Push Notifications, Offline Support und zusätzliche Features zu ermöglichen.
3. Mobile und Desktop Web: Alle Komponenten von Onsen UI sind responsive und skalierbar, was den Einsatz auf Smartphones sowie Desktop Screens ermöglicht.

Anwendung

Im Gegensatz zu bekannteren Frameworks, wie beispielsweise Ionic ist Onsen UI ein noch relativ unbeschriebenes Blatt in der Szene (Ionic derzeit 33.000 Stars / Onsen UI 5.908 Stars auf Github). Onsen UI bietet zwar keine Allround-Lösung wie Ionic, jedoch verfügt es über flexible Anwendungsmöglichkeiten (Framework Bindings) und ist sehr einfach handzuhaben. Die einfache Handhabung und gute Dokumentation machen Onsen UI zu einem guten Prototyping-Tool oder auch geeignet für kleinere Projekte, die auch ohne tiefgreifendes Programmier-Know-How umgesetzt werden können. In kurzer Zeit kann so beispielsweise ein vorzeigbarer Click-Dummy erstellt werden.