Native Mobile-Apps mit Angular, TypeScript und NativeScript - Interview mit Julian Steiner

06.04.2017 14:01

Der Web-Backend Track der DWX 17 steht bald vor der Tür. Hier wird Julian Steiner in das Thema „Native Mobile-Apps mit Angular, TypeScript und NativeScript entwickeln“ eintauchen. Vorweg gibt er allerdings schon ein Exklusivinterview mit Gregor Biswanger, dem Track-Chair für die Themen Web-Backend und Cross-Platform.

Gregor: Du zeigst, wie man aus JavaScript nativen Code für mobile Plattformen zaubern kann. Wieviel davon wird tatsächlich nativ?

Julian: Letztlich werden vollständig native Objekte und Darstellungselemente erzeugt. Es handelt sich also um wirklich native Apps. Allerdings wird der JavaScript-Code in einer JavaScript VM ausgeführt, zum Beispiel V8 auf Android oder JavaScript Core auf iOS. NativeScript (und auch ReactNative) sind also keine Cross-Compiler nach Android-Java oder ObjectiveC/Swift. Die Magie geschieht in den gepatchten JavaScript VMs, die einen Zugriff auf die nativen Instanzen ermöglichen und verwalten. Dieser Ansatz bietet eine radikal verbesserte Performance im Vergleich zu klassischen Hybridapps – der Overhead durch die JS VM ist minimal und die nativen Views laufen butterweich, wo Webviews häufig unter Verzögerungen leiden.

 

Gregor: Kann ich dann überhaupt noch Angular 2 oder ReactJS einsetzen?

Julian: Ja, allerdings lässt sich das nicht pauschal für jedes beliebige JavaScript-Framework sagen. Da eben keine Webview benutzt wird, hat man auch kein klassisches Browser-DOM. Das heißt, um ein Framework zu Betreiben das direkt auf dem DOM operiert, müsste man ein DOM simulieren. Das wäre nicht unbedingt sinnvoll.

Getrieben durch die Einführungen von Virtual- oder Shadow-DOMs sind aber in den angesprochenen Frameworks Abstraktionen entstanden, die es erlauben auch andere Renderer für diese virtualisierten Elementbäume vorzuschalten. Das ist genau der Schritt den wir mit NativeScript gegangen sind. Nachdem Google früh im Entwicklungsprozess auf uns zugegangen war, haben wir einen Angular-Renderer für NativeScript-Markup entwickelt. Man kann NativeScript-Apps vollständig in Angular 2+ entwickeln, und benutzt dafür in den Komponententemplates kein klassisches Browser-HTML, sondern NativeScript-Markup. Eingedenk dieses Unterschieds, kann man so Angular-Applikation mit nahezu identischer Codebasis nahtlos zwischen diesen (und anderen!) Plattformen bewegen.

Wer React bevorzugt, wird mit ReactNative glücklicher. ReactNative ist zur gleichen Zeit wie NativeScript entstanden und fußt auf ähnlichen Ideen. Aber es folgt eben bewusst dem „React-Weg“, während NativeScript die Varianten „Vanilla“ oder Angular anbietet. NativeScript ist damit vielleicht etwas offener. Möglicherweise fühlt sich ja jemand berufen z.B. Aurelia und NativeScript zusammenzubringen ;)

 

Gregor: Muss ich jede Plattformspezifische API kennen? Oder gibt es eine API, die automatisch für alle Plattformen funktioniert? Zum Beispiel bei einem Zugriff auf einen Kompass.

Julian: Nein. Ich empfehle dennoch sich mit den nativen APIs und Bedienkonzepten auseinanderzusetzen. NativeScript bietet plattformunabhängige Abstraktionen. Das View-Markup abstrahiert z.B. gegebenenfalls leicht unterschiedliche Gestaltungselemente auf den verschiedenen Plattformen. NativeScript-Module erlauben den einheitlichen Zugriff auf Standardfunktionalitäten wie die Kamera oder für http-Aufrufe. Man kann also den absoluten Großteil der App entwickeln ohne je auf die nativen APIs schauen zu müssen.

Kenntnis nativer APIs ist dann erforderlich, wenn keine Abstraktion verfügbar ist. Anders als bei Cordova muss man aber für eigene Erweiterungen nicht auf die Plattformsprache wechseln, sondern entwickelt weiterhin in JavaScript/TypeScript, in den nativen Namespaces… Mehr dazu in der Session ;)

 

Gregor: Ist NativeScript durch Plug-Ins erweiterbar?

Julian: Ja. Es gibt derzeit offiziell 407 Plugins (http://plugins.nativescript.org/). Diese reichen von komplexeren Widgets, über Entwicklerwerkzeuge (z.B. SASS-Präprozessor), bis hin zum Hardware-Zugriff (z.B. Accelerometer). Die meisten dieser Plugins stammen aus der stetig wachsenden Community. Ein weiterer großer Vorteil ist, dass man 3rd Party Android oder iOS Plugins direkt einbinden und nutzen kann. Auch ein großer Teil an generischen JavaScript-Bibliotheken auf NPM steht zur freien Verfügung.

 

Gregor: Kannst du unseren Lesern zum Schluss noch einen kleinen NativeScript Tipp verraten?

Julian: Je disziplinierter man seine Angular-basierte Webanwendung baut, desto leichter wird es daraus mit geringem Aufwand eine Mobilanwendung abzuleiten. Heißt konkret: Wenn man die Business-Logik und API-Zugriffe (= http) konsequent in Services und Modelklassen packt, müssen nachher nur die Komponenten oder sogar nur das Markup ausgetauscht werden, um daraus eine NativeScript-App abzuleiten.

Im Umkehrschluss bedeutet das auch, dass die sich Architekturqualität von NativeScript- oder Webanwendungen verbessert, wenn beim Design schon an die Nutzung auf anderen Plattformen gedacht wird.

 

Gregor: Besten Dank für das tolle Interview Julian. Ich freue mich schon auf deine Session!

Native Mobile-Apps mit Angular, TypeScript und NativeScript entwickeln 
27.06.2017 18:15 - 19:15 Uhr   Track: Cross-Plattform

Steiner-Julian_dwxspeakerdetail

Julian Steiner

Julian is a full-stack software developer by trade. Being a technological generalist, he has a degree in Software Engineering and a Master's in Software Engineering Management.
He has successfully delivered software projects developed in JavaScript, Java, PHP and .NET, while happily serving dev-teams as a Scrum Master.

He is currently helping Progress/Telerik customers finding the best solutions, while spreading the good word on technologies that spark his interest. He has been using Angular in production ever since IE7 was still officially supported and 1.0 was still a Release Candidate. Julian is based out of Cologne, Germany.

Schlagwörter: Angular , JS , Cross Plattform


Autor Gregor Biswanger

Gregor Biswanger (Microsoft MVP, Intel Black Belt & Intel Software Innovator) ist freier Dozent, Berater, Trainer, Autor und Sprecher. Er berät große und mittelständische Unternehmen, Organisationen und Agenturen rund um die Themen zur Softwarearchitektur, Web- und Cross-Platform-Entwicklung mit JavaScript. Außerdem schreibt er online als freier Autor und bringt für Fachmagazine auch gerne Artikel aufs Blatt. Er ist international als Sprecher auf zahlreichen Konferenzen und Communities unterwegs. Sie erreichen ihn unter www.cross-platform-blog.de.

Gregor Biswanger

Developer Week in Social Media

Folgen Sie uns auf:

Aussteller & Sponsoren

Infos anfordern

Infos anfordern
  • Florian Bender
  • Projektleitung
  • Tel.: +49 (89) 74117-206
  • Fax: +49 (89) 74117-448
  • E-Mail: florian.bender@nmg.de

Medienpartner