HTML5 Cross-Platform Apps mit ionic

Letztes Wochenende habe ich an der Spartakiade 2015 in Berlin teilgenommen und dort coole neue Sachen kennen gelernt. Unter anderem das für hybride Apps entwickelte Ionic Framework, worauf ich auch kurz eingehen möchte.

Das Framework baut auf AngularJS und Apache Cordova auf und bietet zudem viele CSS-Elemente, um eine HTML5-App nativ wirken zulassen. Wer AngularJS und Cordova bereits kennt, sollte mit ionic keine Probleme haben.
Du denkst vielleicht: „Wozu das ganze? Ich kann auch andere coole CSS-Frameworks wie Bootstrap oder Foundation verwenden“ oder „Ich programmiere lieber nativ wegen der Performance“.

Ionic bietet aber mehr als nur ein paar nette CSS-Klassen. Das Framework erweitert die von AngularJS bereitgestellten Direktiven mit vielen eigenen Elementen.
Besonders beeindruckend finde ich dabei die collection-repeat-Direktive, welche ähnlich wie ng-repeat zum Darstellen von sich wiederholenden Dingen gedacht ist.
Der Unterschied zu ng-repeat ist der, dass collection-repeat nicht x-Mal ein Element dem DOM hinzufügt wie ng-repeat, sondern nur die tatsächlich sichtbaren Elemente.
Dadurch hat man speziell bei Listen mit 1000 Einträgen und mehr einen extremen Performance-Boost, der sich tatsächlich „nativ“ anfühlt.

Beim darunter liegenden SASS/CSS-Framework, kann einfach selbst Hand angelegt werden, um die Darstellung der App entsprechend der eigenen Vorstellungen anzupassen.

Es gibt noch eine Menge mehr an Features wie Direktiven für Tabs, Side Menu, Slide Box, Action Sheet, Pull to Refresh, Navigation Bar oder auch hardware-beschleunigte Animationen, LiveReloading über Browser und Simulatoren sowie ein riesiges Icon-Set, aber das würde diesen Rahmen etwas übersteigen.

Die Installation erfolgt über NodeJS mittels des Befehls:

Weiterführende Links:

Weiterempfehlen: