Onsen UI

Onsen UI

© Copyright Shutterstock/ Artie Medvedev

Was ist Onsen UI?

Onsen UI ist ein Open-Source-UI-Framework, welches insbesondere für die Nutzung mobiler Betriebssysteme konzipiert wurde. Die Komponenten wurden mit HTML5 Hybrid-Applikationen auf der Grundlage von PhoneGab/Cordova entwickelt, wodurch ermöglicht wird, dass die nativen Designstandards den gängigen Mobilgeräten wie Android und iOS folgen.

Unter einem Framework versteht man eine Rahmen-Programmierstruktur, die in der Softwaretechnik genutzt wird. Allgemein kann man es auch als “Ordnungsrahmen” bezeichnen.

Ziel

Ziel des Onsen UI Frameworks ist das automatische Identifizieren des Betriebssystems von Endgeräten und die sich anschließende Anpassung an die jeweilige Applikation. Die detaillierte Dokumentation, die in dem Framework eingebettet ist, ermöglicht eine unkomplizierte Umsetzung.

Die Zukunft mit den Onsen UI Features

Das Onsen UI besteht aus drei Elementen:

CSS Komponente

Die CSS Komponente sind in PostCSS-cssnext geschrieben und sind ein PostCSS-Plugin, mit welchem die aktuellste CSS-Systax verwendet werden kann. Die Komponente konvertieren neue CSS-Spezifikationen in kompatible CSS, ohne dass eine Browserunterstützung erforderlich ist.

Web Komponente

Web Komponente stellen eine Reihe von Funktionen dar, die derzeit vom W3C (World Wide Web Consortium; Gremium zur Standardisierungen im World Wide Web) den HTML- und DOM-Spezifikationen hinzugefügt werden, um die Erstellung wiederverwendbarer Widgets oder Komponenten in Webdokumenten und Webanwendungen zu ermöglichen. Ziel ist es, komponentenbasierte Soft-Engineerings ins World Wide Web zu implementieren. Dieses Modell ermöglicht die Kapselung sowie Interoperabilität einzelner HTML-Elemente.

Tipp

Wenn Sie noch Fragen bezüglich W3C haben, dann können Sie gerne den jeweiligen Glossar dazu besuchen und sich über das Thema informieren.

Framework-Bindings

Während eines Framework-Bindings (deutsch: Bindung von Framework-Prozessen) wird jede Datenänderung automatisch von den Elementen reflektiert, die an die Daten gebunden sind. Dies ist auch dann der Fall, wenn eine äußere Darstellung von Daten in einem Element geändert wird und die zugrunde liegenden Daten automatisch aktualisiert werden, damit diese Änderung widergespiegelt werden kann. Der Prozess ist sozusagen dafür zuständig, dass die Frameworks (z. B. Angular JS, Vue.JS, React) nahtlos ineinander integriert werden können.

Generell wird zwischen der Nutzung der Web Komponente und CSS Komponente unterschieden. Ist eine Seitenerstellung beabsichtigt, teilen sich die Applikationen in die jeweiligen Templates auf und erhalten je eine eigene Identifikationsnummer. Anschließend erhält jedes dieser Templates die Zuordnung zu einem Container (Beschleunigung des Rollouts, indem bei einer Anwendung alle dazu gehörenden Dateien in einem “Paket” abgelegt werden). Dieser Container wird mittels -Tag erzeugt und dient dadurch als Root-Element, um alle relevanten Elemente der jeweiligen Seite zuzuordnen.

Darüber hinaus bestehen noch weitere Möglichkeiten bei der Nutzung einer Onsen UI Applikation:

Hier handelt es sich um die Kombination aus nativen und webbasierten Applikationen. Ziel ist es, diverse Cross-Plattformen wie Android und iOS, Windows oder RIM, gleichzeitig zu bedienen, ohne dass sie für jede Plattform neu entwickelt werden müssen. Besonderheit dabei ist, dass sie auf die Hardware der mobilen Geräte zugreifen können und z. B. Kalender in die eigene Applikation integrieren können. Durch dieses Tool kann man viele Nutzer gleichzeitig erreichen, was für diese Applikation spricht.
Progressive Web-Applikationen sind Webanwendungen, bei welchen reguläre Webseiten für die Nutzer als klassische Anwendungen bzw. native mobile Anwendungen dargestellt werden. Dieser Anwendungstyp versucht, Funktionen, die von der Mehrzahl der Browser angeboten werden, mit den Vorteilen der mobilen Anwendungen zu kombinieren und auch hierbei die Qualität der Nutzerfreundlichkeit zu erhöhen.
Man spricht hier auch von einem sogenannten Responsive Webdesign. Ziel ist es, einheitliche Screens von Inhalten einer Webseite für Computer-Desktops, Smartphones oder Tablets zu ermöglichen. Die Layouts sind so gestaltet, dass diese Anzeigen eine gleichbleibende Nutzerfreundlichkeit bieten. Diese Technologie ist mithilfe von HTML5 und CSS3 Media Queries möglich.

Implementierung zusätzlicher Frameworks

Onsen UI wurde entwickelt, um Applikationen auch ohne das Hinzufügen von Front-End-Frameworks auszuführen und zu erstellen. Um jedoch komplexere Applikationen zu implementieren, die mehr Funktionen und Tools verfügbar machen, empfiehlt sich die Anbindung zusätzlicher Frameworks.

Da das Onsen UI Framework einen agnostischen Charakter hat, was in der Technologie so viel bedeutet wie “nicht gebunden zu sein”, kann es mit jedem beliebigen JavaScript-Framework verbunden werden. Insbesondere wird die Anbindung dann erforderlich, wenn man die API (Programmierschnittstelle) von Onsen UI für spezifische Framework-Anwendungen anpassen will. Bei diesen Anbindungen handelt es sich um Wrapper-Sätze (Div-Container, der eine Webseite zentriert, um die Webseitengröße zu definieren), welche die API in das entsprechende Framework einsetzt.

Zusammenstellung der Komponenten

Um eine einfache API zusammenzustellen, müssen einigen Onsen UI Komponenten bei der Erstellung automatische “Boilerplate”-Inhalte hinzugefügt werden. Bei diesem Prozess handelt es sich um eine Komponentenkompilierung, da ein Element und der entsprechende Inhalt umgebrochen und verschoben wird. Obwohl es sich um einen für Entwickler transparenten Prozess handelt, gibt es auch Situationen, bei welchen diese Kompilierung umgangen wird.

Die wichtigsten Änderungen der Kompilierung treten auf der Webseite selbst auf:

  • Anwendung der Hintergrundfarbe oder eines Hintergrundbildes,
  • Scrollbarer Teil, in welchem der größte Teil des Inhaltes enthalten ist sowie
  • fixe Elemente, bei welchen das Scrollen auf dem Bildschirm fixiert ist.

Fixe Elemente können nativ mit der Eigenschaft “position: fixed” implementiert werden, während die Onsen UI Funktion umgangen wird. Dies kann allerdings beim Scrollen in einigen mobilen Browsern zu Problemen führen. Daher wird empfohlen, feste und scrollbare Inhalte in zwei verschiedene Container zu trennen.

Fazit

Onsen UI bereichert das mobile Erlebnis der App-Nutzer mit den nativ gestalteten UI Komponenten. Es eignet sich zudem ideal für die Entwicklung der Hybrid- oder Progressive Web-Applikationen.

Tipp

Wenn Sie noch Fragen bezüglich eines Online Marketing Themas haben, dann können Sie gerne unseren Glossar besuchen und sich über das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte