© Anikei/Shutterstock.com
Mobile Cross-Plattform-Entwicklung mit NativeScript und Angular

Native Apps mit Angular


Als Angular-Entwickler ist man nicht nur auf das Web beschränkt. Das zeigt das Framework NativeScript wie kein anderes. Mit Erfahrungen aus dem Web lassen sich plattformübergreifend mobile Anwendungen erstellen, die dem nativen Look and Feel entsprechen. Der Einstieg fällt ungeahnt leicht, doch wenn es ans Eingemachte geht, kann es hier und da auch schon mal hapern.

Erfahrungen aus der Webentwicklung lassen sich auf anderen Plattformen wiederverwenden, ohne auf die User Experience verzichten zu müssen, die eine nativ implementierte App bietet. Um zu zeigen, wie das geht, werden hier zunächst die generellen Konzepte von NativeScript erläutert, um anschließend darzustellen, wie das Zusammenspiel mit Angular funktioniert. Dann soll anhand einer kleinen Beispielanwendung zum Verwalten von Notizen die grundlegende Entwicklung von plattformübergreifenden Apps mit NativeScript und Angular illustriert werden.

NativeScript ist ein Framework zur plattformübergreifenden Entwicklung von mobilen Anwendungen. Die Progress Software Corporation hat in diesem Jahr die dritte Version der Open-Source-Lösung veröffentlicht [1]. Sie wendet das in der Softwareentwicklung klassische Konzept der Abstraktion von zugrunde liegenden Systemen auf die mobile Entwicklung an. Android-Apps werden mit Java entwickelt, für iOS muss Objective-C oder Swift verwendet werden. Will man seine App auf beiden Plattformen veröffentlichen, ist man beim herkömmlichen Vorgehen quasi gezwungen, zweimal zu entwickeln. Sogenannte Cross-Plattform-Lösungen erlauben das Generieren von beiden Anwendungspaketen aus einer einzigen Codebasis. Ähnlich wie bei anderen Frameworks auf dem Gebiet wird diese bei NativeScript mithilfe von Webtechnologien erstellt. Im konkreten Fall fällt jedoch die Markup-Sprache HTML weg. Anders nämlich als bei Lösungen wie PhoneGap, die letztendlich eine Webanwendung im nativen Gewand ausliefern, ist eine NativeScript-App deutlich näher an der eigentlichen Plattform. Statt der Imitation von nativen Benutzerelementen mithilfe von Webelementen werden direkt native Elemente verwendet. Ein Button entspricht beispielsweise bei der Ausführung in einer NativeScript-App jeweils der nativen Implementierung von iOS oder Android. Das ist möglich, da die Architektur des Frameworks Aufrufe an jegliche Systemschnittstellen erlaubt (Abb. 1).

mehlhorn_crossplattform_1.tif_fmt1.jpgAbb. 1: Architektur von NativeScript-Apps

User Experience und Performance sind die größten Herausforderungen für Cross-Plattform-Ansätze [2]. NativeScript kann hier durch einen hohen Grad an Nativität punkten. Listing 1 zeigt, wie sehr ein Systemaufruf in NativeScript der nativen Variante ähnelt. Im Beispiel wird ein Ansichtselement zwar programmatisch initialisiert, in der eigentlichen Entwicklung werden die Benutzeroberflächen jedoch deklarativ mithilfe von XML definiert. Dort verwendet der Entwickler auch nicht direkt die Komponenten der Plattform. Er hat zwar nun Zugriff auf alles, was die mobilen Systeme bieten, müsste aber trotzdem immer selbst zwischen ihnen differenzieren. Der Vorteil der Cross-Plattform-Entwicklung soll aber ja gerade sein, dass sich der Entwickler nicht zu sehr mit den letztendlichen Systemschnittstellen beschäftigen muss. Hier kommen Module zum Einsatz, die die erwünschte Abstraktion mitbringen und die Verwaltung der eigentlichen Systemreferenzen übernehmen. Der letzte Aufruf in Listing 1 zeigt dies am Beispiel eines Buttons.

Listing 1: Vergleich von Aufrufen an System-schnittstellen

/* Erstellung eines iOS-Buttons */ let btn = UIButton(); // iOS (Swift) var btn = new UIButton(); // NativeScript (JavaScript) /* Erstellung eines Android-Buttons */ // Android (Java) Button btn = new Button(getApplicationContext()); // NativeScript (JavaScript) var btn = new android.widget.Button(getApplicationContext()); /* Erstellung eines plattformunabhängigen Buttons via NativeScript-Module */ var btn = new Button(); // NativeScript (JavaScript)

Mit NativeScript lässt sich also unabhängig von konkreten Plattformen entwickeln, ohne große Einbußen in Sachen Performance und User Experience zu haben. Beim Entwickeln des Anwendungscodes kann jede denkbare Webbibliothek herangezogen werden. Gleichzeitig kann für die Ausführung jegliche native Schnittstelle oder Bibliothek benutzt werden. Durch die Systemintegration von NativeScript ergeben sich weitere interessante Vorteile. So bedarf z. B. die Unterstützung einer neuen Systemversion keiner besonderen Aktualisierungen seitens NativeScript – das bedeutet somit Zero-Day-Support [3].

Framework im Framework

Die Macher von NativeScript haben es sich zunutze gemacht, dass die zweite Inkarnation von Googles Webframework Angular nicht mehr direkt an das Document Object Model (DOM) gekoppelt ist. Dadurch ist Angular viel vielseitiger einsetzbar. Die Kombination aus NativeScript und Angular wurde von Progress und Google entwickelt; es handelt sich somit um ein offiziell unterstütztes Projekt [4].

Im Zentrum der Erwägung, ein weiteres Framework hinzuzuziehen, sollte aus Entwicklersicht aber gar nicht Angular selbst stehen. Vielmehr geht es bei größeren Anwendungen um den Bedarf an Wartbarkeit. Eine umfangreiche Anwendung in purem JavaScript zu schreiben, ist eine Herausforderung. Ein Applikationsframework kann hier Abhilfe schaffen und so effektiv zur Wartbarkeit beitragen. Angular bringt vorgefertigte Strukturen – unter anderem für Services, Routing und Data Binding – mit. Außerdem arbeitet man mit TypeScript und damit mit einer statischen Typisierung und Klassen, wie man sie von Java kennt. TypeScript ist quasi ein Überbau und wird vor der Ausführung in JavaScript überführt. Außerdem lässt sich die Erfahrung mit Angular direkt weiterverwenden. Webentwicklern bieten sich hier also gute Einstiegsmöglichkeiten in die mobile Entwicklung. Mittlerweile kann neben Angular beispielsweise auch Vue.js verwendet werden [5].

Einrichtung

Bei NativeScript laufen verschiedene Fäden zusammen. Dementsprechend sind viele Vorbereitungen zu treffen, um mit der Entwicklung zu beginnen. Hier hat es der Entwickler aber inzwischen ziemlich komfortabel. Wie mittlerweile Standard für alles rund um JavaScript, wird das NativeScript-Kommandozeilentool (CLI) über den Node Package Manager ausgeliefert. Also muss dieser erst einmal zusammen mit Node.js installiert werden. Anschließend lassen sich alle weiteren benötigten Komponenten mit nur einem Befehl auf Windows oder macOS installieren. Bevor man den Befehl ausführt, sollte man...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang