Was ist UIkit (User Interface kit, dt. Benutzeroberfläche-Baukasten) und was kann man damit tun? Welchen Mehrwert bietet es uns Webentwicklern? Wieso nicht ein anderes Front-End Framework? Fragen über Fragen, die es zu beantworten gilt. Gerne kläre ich diese und führe Sie an dieses tolle Stück Software heran. Let’s jump right into it!

Front-End was?

Schon wieder Begriffe die keiner kennt. Doch keine Angst, Rettung naht. Im Umgang mit Content-Management-Systemen unterscheidet man zwischen Front- und Back-End, wobei das Front-End näher am Benutzer bzw. der Eingabe ist und das Back-End näher am System, bzw. an der Verarbeitung. Noch einfacher gesagt: das Front-End ist das, was Sie auf dem Bildschirm sehen, wenn Sie auf einer Webseite unterwegs sind.

Alles klar, das ist verstanden. Aber was ist nun ein Framework? Wikipedia beschreibt es ziemlich gut. Ein Framework ist ein Programmiergerüst, das in diesem Fall bei einem komponentenbasierten Entwicklungsansatz verwendet wird. Somit ist das Framework an sich noch kein fertiges Programm, sondern stellt den Rahmen zur Verfügung, innerhalb dessen der Programmierer eine Anwendung erstellt. Was ist UIkit nun also? Na, jetzt ist es fast wie einfache Mathematik, 1 und 1 ergibt … 2, genau! UIkit ist ein für die Darstellung von Webseiten erstellter Werkzeugkasten. Lernen wir die uns zur Verfügung stehenden Werkzeuge kennen …

Darf ich vorstellen: UIkit

Camille Peter hat bereits vorgängig in ihrem Blog-Beitrag erklärt wieso und vor allem für was wir Pimcore einsetzen. Wenn nun Daten aus diesem System mittels Webbrowser dem Benutzer angezeigt werden sollen, verwenden wir für den Anwendungsfall passende Komponenten des UIkit Frameworks. Immer, egal ob Webseite, Webapplikation oder komplette E-Commerce-Lösung! Dem war jedoch nicht immer so. Zu Anfang waren wir noch, wie fast alle anderen, auf dem Bootstrap-Zug. Bootstrap ist das populärste und das am weitesten verbreitete Front-End Framework, das es zurzeit auf dem Markt gibt. Wie bei vielen Dingen ist jedoch das Grösste nicht das Beste.

UIkit selbst bezeichnet sich als ein leichtes und modulares Front-End Framework für das Entwickeln von schnellen und mächtigen Web-Benutzeroberflächen. Damit eine Webseite möglichst performant ist und dennoch eine exzellente Benutzererfahrung ermöglicht, gilt es möglichst viel Funktionalität mit so wenig Code wie nur möglich herauszuholen. Aus unserer Sicht macht dies UIkit mit Abstand am besten. Durch die extrem gut durchdachte Modularität können viele Komponenten, die nicht gebraucht werden, deaktiviert werden. Dadurch erspart man dem Benutzer unnötigen «Overhead», also Zusatzinformationen die niemanden interessieren und somit auch nicht heruntergeladen und verarbeitet werden müssen. Die Wartezeit verkürzt sich, die Benutzererfahrung erhöht sich und alle sind glücklich – auch die Entwickler.

Powerful out of the box

Einer der Gründe wieso wir UIkit verwenden ist die grossartige Kompatibilität mit gängigen Build-Tools wie Webpack. Weitere Infos zu Webpack gibt’s im Blog-Beitrag von Christophe Rapenne. Mit sogenannten «Build Scripts» erledigt UIkit diverse nützliche Aufgaben, wie zum Beispiel das Kompilieren der verschiedenen Komponenten. Diese werden dabei in eigenen Dateien abgespeichert und sind somit modular implementierbar.

Viele der verschiedenen Komponenten – momentan 81 an der Zahl – können miteinander verknüpft werden und erweitern somit ihre eigene Funktionalität mit deren der anderen. So ermöglicht die «Switcher» Komponente den Wechsel zwischen Inhalten via Mausklick, währenddessen die «Tab» Komponente die Schaltflächen für eine einfache und verständliche Navigation bietet. Oder die «Navbar» Komponente stellt die selbstverständlich intuitive und prominente Navigationsleiste dar und die «Sticky» Komponente ermöglicht einem den Zugriff am oberen Browserrand auf eben diese, nachdem weit nach unten gescrollt wurde. Wie cool ist das denn? Die Möglichkeiten sind gross und bieten zu fast allem eine Lösung.

Auf Nimmerwiedersehen jQuery

Stand heute wird jQuery, eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt, auf jeder zweiten und auf 70% der 10’000 meistbesuchten Webseiten genutzt. Anfänglich noch beinhaltet, wurde die Abhängigkeit von jQuery mittlerweile aus der Code-Base von UIkit entfernt. Selbstverständlich kann jQuery im Verbund mit UIkit verwendet werden. Wir schreiben allerdings ausschliesslich nur noch reines JavaScript, auch bekannt als VanillaJS. ;-) Zugegeben, man verliert einige Abkürzungen, die mit jQuery möglich waren, doch auch hierfür hat UIkit bereits vorgesorgt. Man spart nicht nur an Code, nein man hat auch noch viele der gängigsten jQuery-Funktionen mit an Bord.

jQuery

$('.my-element').on('click', () => {
    $(this).addClass('active');
});

UIkit

const { $, addClass, on } = UIkit.util;
const element = $('.my-element');

on(element, 'click', () => {
    addClass(element, ‘active’);
});

Das Prinzip ist ziemlich dasselbe und ermöglicht die noch fehlende Funktionalität relativ einfach zu erweitern, auch ohne jQuery!

Icons in eigener Sache

Ja, auch ein eigenes System für Icons ist in diesem Framework enthalten. Während andere Front-End Frameworks die Verwendung von anderen Icon Sets vorschlagen und damit nochmals mehr Code laden müssen – als wäre jQuery schon nicht genug – hat UIkit selbst ein kleines aber feines Icon-System integriert. Momentan sind 133 Icons (werden laufend erweitert) standardmässig verfügbar. Nicht gerade viel im Vergleich mit Font Awesomes 1264 frei verfügbaren Stück. Allerdings gibt es auch hierfür ein «Build Script», welches die Aufgabe hat, diesem Set weitere Icons hinzuzufügen. Somit können jederzeit projektspezifische Icons in die Webseite inkludiert werden. Das Schöne an den UIkit Icons ist deren Flexibilität. Egal ob man nun die Grösse und Farbe ändern möchte oder das Icon in einen Button umwandeln will, die Umsetzung ist kinderleicht und macht Freude!

Geschwindigkeit macht den Unterschied

Wie bereits im Leitsatz von UIkit erwähnt, wird hoher Wert auf die Lade- sowie die Verarbeitungsgeschwindigkeit des Codes gelegt. Niemand hat heutzutage Zeit um zu warten. Die Welt ist schnelllebig und die Menschen sind ungeduldig. Dazu kommt, dass nicht jeder ein High-End Smartphone mit Hochleistungsprozessor auf sich trägt und die Netzwerkgeschwindigkeit ist auch nicht überall gleich schnell. Daher ist es matchentscheidend, ob eine Webseite performant ist und eine gute Benutzererfahrung bietet. UIkit bringt einige Werkzeuge mit sich, die uns Entwicklern dabei zur Hand gehen. Letztens wurde die «Image» Komponente in UIkit integriert, die Lazy Loading für Bilder ermöglicht. Das heisst, dass die Bilder erst auf Anfrage geladen werden und zwar dann, wenn Sie in den Anzeigebereich eines Bildschirms gelangen. Die Bilder werden demnach fortlaufend beim Herunterscrollen nachgeladen. Dieses Verhalten beschleunigt die Seitenladezeiten und verringert den Daten-Verkehr.

Weitere berechnungsintensive Komponenten wie die Slideshow oder die Parallaxe sind alle durch Hardware beschleunigt und werden nicht via JavaScript animiert. Das visuelle Erlebnis dabei ist grossartig und lässt zum Beispiel ein Bootstrap Carousel wirklich alt aussehen!

Bonus

Des Weiteren bietet UIkit noch mehr kleine Leckerbissen an, die den Alltag eines Webentwicklers erleichtern. Scope-Konflikte oder Probleme mit mehreren Versionen auf derselben Seite können leicht mit dem Scope-Modus und eigenen Prefixen umgangen werden. Zudem wird eine RTL-Version standardmässig angeboten und auch die Migration von einer älteren UIkit Version ist mittels Browser-Erweiterung einfach möglich.

Mein Fazit

Zusammenfassend ist UIkit ein komplettes Werkzeugset für kleine sowohl grosse und komplexe Webseiten, welches durch seine einfache Handhabung besticht. Die Komponenten arbeiten sehr gut zusammen und ermöglichen es, mächtige sowie schnelle Benutzeroberflächen für eine grandiose Benutzererfahrung zu erstellen.

Es werden wenig bis gar keine Erweiterungen benötigt, da alles anpassbar ist. Zusätzliche Software-Bibliotheken sind meist überflüssig, da UIkit extrem viel an Funktionalität bietet. Somit ist es durchaus möglich, eine Webseite mit wirklich wenig Code zu erstellen.

Am besten Sie sehen sich noch heute einige der «UIkit Kitchen Sink» Seiten dieses Frameworks an. Es lohnt sich!