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