Die KEY-Talks im Monat Mai waren hauptsächlich technologisch orientiert. Wir beschäftigten uns mit der Beleuchtung dreier Frameworks, welche uns die Arbeit in Projekten erleichtert bzw. erleichtern kann. Dies betrifft das Mobile Framework Xamarin, sowie die beiden CSS Frameworks Bootstrap 4.1 und Bulma
Xamarin
Bei Xamarin handelt es sich um ein US-amerikanisches Unternehmen, welches seit 2016 zur Tochtergesellschaft von Microsoft geworden ist. Das Hauptprodukt von Xamarin, die Xamarin Plattform, ist ein auf C# basierendes Framework für die mobile Anwendungsentwicklung. Dabei setzt die Plattform auf einen Cross-Development-Ansatz – einmal eine Code-Basis schreiben und für Android, iOS und Windows Phone den nativen Code generieren lassen. Dies bedeutet in der Entwicklung weniger Aufwand für das Schreiben des Codes für die Business Logic und das User Interface. Code wird für alle Plattformen nur einmal geschrieben und muss auch nur an einer Stelle bei Updates angefasst werden. Das UI der Anwendung passt sich dabei größtenteils automatisch an das Look & Feel der entsprechenden Plattform an, auf welche sie deployed und betrieben wird.
Doch was unterscheidet Xamarin von anderen mobilen Cross-Plattform-Technologien? In einem gemeinsamen Brainstorming haben wir die Vor- und Nachteile gegenüber dem webbasierenden Phonegap / Cordova Ansatz diskutiert. Es zeigte sich, dass vor allem in der Frontend-Gestaltung der Anwendung deutliche Unterschiede zwischen den Frameworks herrschen. Phonegap ermöglicht es, sehr schnell Designs umzusetzen und mittels CSS3 und JavaScript komplexere Designs und Animationen zu implementieren. Dahin gegen ist es mit Xamarin besser möglich, für einfach strukturierte Anwendungen das „Native-Feeling“ für den Benutzer zu rekonstruieren. Während bestimmte Web-basierende Ansätze, wie Ionic, auch den Versuch starten, ein native Feeling der Anwendung zu simulieren, gelingt dies in unseren Augen nicht so gut wie Xamarin – ein Framework, welches den geschriebenen Code direkt in nativen Code umwandelt und nicht „nur“ ein mobilen Web-View für die gesamte Anwendung einbindet.
Bootstrap 4.1 und Bulma
Bootstrap ist wohl unumstritten das bekannteste CSS Framework. Bereits im Januar dieses Jahres kam mit Bootstrap 4 eine komplett überarbeitete Version von Bootstrap heraus. Wir als Unternehmen haben bereits sehr viele Projekte mit Bootstrap umgesetzt. Sowohl mit dem alten Bootstrap 3, als auch bereits mit dem neuen Bootstrap 4.0. Aber noch nicht jeder von uns ist mit dem neuen Bootstrap in Berührung gekommen. Deshalb haben wir im Rahmen der KEY-Talks die Möglichkeit genutzt, die Neuerungen genau unter die Lupe zu nehmen.
Während das Grundkonzept, eine Grid-basierte und responsive Web-Lösung, gleich geblieben ist, haben sich aus technologischer Sicht doch einige Sachen geändert. Die Anzahl der Neuerungen ist so groß, dass es der Übersicht halber es sich nicht lohnt, diese alle in diesem Blog Eintrag darzustellen. Vor allem, da Bootstrap selber einen offiziellen Migration-Guide anbietet, welcher einen guten Einblick in die Änderungen gibt: https://getbootstrap.com/docs/4.0/migration/
Im Hintergrund hat sich dabei auch einiges getan: neben den veränderten Theming-Workflow setzt Bootstrap nun auf das neue Flexbox-Model und lässt damit den Support für den Internet Explorer 9 fallen. Außerdem wird für die Sources von Bootstrap nun auf SASS anstelle von LESS gesetzt. Dies impliziert auch, dass viele der Verhalten, Darstellungen und Methoden von Bootstrap über SASS Variablen und Funktionen geändert und aufgerufen werden können. Z.B. erlaubt es die Variable $enable-shadows unkompliziert, Schatten ein- oder auszuschalten. Die Methode color-yiq erlaubt es einen, einen guten Kontrast zu einer beliebigen Farbe zu finden.
Außerdem haben wir uns das Framework Bulma kurz angeschaut. Interessanter Weise setzt Bulma auf pures CSS. Im Gegensatz zu Bootstrap wird also kein Javascript eingebunden. Außerdem benutzt Bulma Font Awesome 5 – wer also dieses Iconset mag, hat mit Bulma eine einfache Möglichkeit, dies direkt mit einem Schlag zu integrieren. Auch der Syntax besticht durch seine Einfachheit. Im Gesamten macht das Framework einen sehr klaren und durchdachten Eindruck. Auch ist der etwas andere Look zum Standard-Bootstrap Aussehen ist erfrischend. Wer allerdings direkt ein paar Javascript-Funktionen, wie die Einbindung von jQuery Plugins, dabeihaben möchte, ist mit Bootstrap besser beraten. Auch die deutlich größere Community ist ein klarer Plus-Punkt für Bootstrap.
Kurzes Fazit
Was nehmen wir also für uns und unsere Kunden mit?
Wir haben mit Xamarin eine interessante Möglichkeit erkundet, grafisch simple mobile Anwendungen in einem täuschend echten nativen Look & Feel mit einem Cross-Development Ansatz umzusetzen. Dies erlaubt es uns, die Möglichkeiten nativer Entwicklung auszunutzen, aber Aufwand und Kosten zu sparen.
Mit Bootstrap 4.1 haben wir uns auf den neusten Stand in Sachen CSS-Frameworks gebracht, sodass wir gesamtheitlich in der Lage sind, alle der neusten Features des Frameworks zu nutzen, um die Webseiten unserer Kunden nach dem aller neusten Stand der Technik zu erstellen. Bulma hat uns zudem eine interessante Alternative zu Bootstrap aufgezeigt.