Progressive Web Apps & Object Oriented CSS

Progressive Web Apps & Object Oriented CSS

Heute gehen wir weiter auf euer Leser-Feedback ein und setzen unsere Übersicht zu den von euch gewünschten Themen fort. Im Folgenden geben wir euch einen kurzen Überblick über PWAs und OOCSS:

PWAs

Bei Progressive Web Apps handelt es sich um eine relativ neue Mischform aus Website und nativer App. PWAs lassen sich wie eine native App verwenden, benötigen dafür jedoch keine standardmäßige Installation. Stattdessen können über den Webbrowser auf dem Homescreen Verknüpfungen hinterlegt werden, die dann die entsprechende Website aufrufen. Für Nutzer bringt dies den Vorteil, dass sie keine App aus dem AppStore laden und dafür Speicherplatz freigeben müssen. Für die Betreiber entstehen durch das Umgehen des AppStores weniger Kosten bei vergleichbarer Kundenbindung.

PWAs lassen sich auch bei geringer Bandbreite nutzen und sind mit Hilfe von Service Workers offline verwendbar. Dadurch unterstützen PWAs das Offline First-Konzept und ermöglichen es dem Nutzer, Inhalte jederzeit und überall unabhängig von einer Internetverbindung abrufen zu können (mehr zu Offline First erfahrt ihr in unserem Blogbeitrag). Neue Inhalte laden dann entsprechend bei bestehender Internetverbindung. Außerdem werden auch Push Notifications unterstützt.

Realisierbar sind PWAs unter anderem mit HTML5, CSS3, JavaScript und Service Worker. Bisher besteht allerdings nur bei Chrome und Firefox ein vollständiger Support für Service Worker; weitere Browser wie Safari und Opera sollen jedoch folgen.

OOCSS

Object Oriented CSS ist eine Methode, um CSS modulär und objektorientiert zu gestalten. Diese besteht zum einen daraus, die Struktur eines Objekts (z.B. Höhe, Breite) von seinem Design (z.B. Schriftart, Farbe) zu trennen. Dadurch können Komponente problemlos innerhalb des Layouts verschoben werden. Außerdem geht es bei OOCSS auch darum, Inhalt und Container zu trennen, sodass jedes Objekt sich an einen beliebigen Inhalt anpasst. Folgendes Beispiel verdeutlicht dieses Prinzip und seine Vorteile:

In der obigen Form wird das Gesamterscheinungsbild der Objekte jeweils einzeln definiert. Es findet keine Unterscheidung zwischen Objektstruktur und Objektbeschichtung statt. Der Nachteil daran ist, dass sich die Designeigenschaften für jedes Objekt wiederholen müssen, obwohl sie in diesem Fall identisch sind. Das kostet zum einen viel Zeit, zum anderen ist es fehleranfällig, da durch Flüchtigkeitsfehler schnell Abweichungen entstehen können. Deren Behebung ist wiederum mit viel Zeitaufwand verbunden. OOCSS dagegen vermeidet diese Wiederholungen und die damit verbundenen Probleme auf folgende Weise:

 

Hier ist eine Trennung von Objekt und Beschichtung vorhanden. Letztere wird lediglich einmal definiert und dann mit den Elementen verknüpft, für welche das entsprechende Design gewünscht ist. Dadurch gestaltet sich der Code deutlich kürzer und einfacher, sowie flexibler und vor allem wiederverwendbar. Mit OOCSS lässt sich also durch das Vermeiden von Wiederholungen deutlich schneller und fehlerfreier arbeiten.

Für mehr Informationen zu OOCSS empfehlen wir euch diesen Blogbeitrag (auf Englisch).

Wir hoffen, euch mit diesem Beitrag eine hilfreiche Übersicht gegeben zu haben. Über weiteres Feedback und Anregungen in den Kommentaren freuen wir uns sehr!

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.