Eine Einführung in NativeScript

In diesem Artikel werfen wir einen Blick auf NativeScript, ein Open-Source-Framework zum Erstellen mobiler Apps mit JavaScript. Am Ende des Artikels sollten Sie eine ziemlich gute Vorstellung davon haben, was NativeScript ist, wie es funktioniert und welche Technologien es verwendet. Abgesehen davon werden wir auch häufig gestellte Fragen beantworten, die Sie bei der Erkundung einer neuen Technologie haben könnten, etwa wie sie sich von Alternativen wie Cordova und React Native unterscheidet und wie Telerik an dem Projekt beteiligt ist.

1. Was ist NativeScript??

NativeScript ist ein Framework zum Erstellen plattformübergreifender nativer mobiler Apps. Entwickler können mit XML, CSS und JavaScript Apps für Android, iOS und sogar die Windows Universal Platform erstellen. Im Gegensatz zu Cordova, bei dem WebView zum Rendern der Benutzeroberfläche der App verwendet wird, verwendet NativeScript die Rendering-Engine der nativen Plattform, was bedeutet, dass es eine wirklich native Benutzererfahrung bietet. 

2. Pros

• Es ist kostenlos und Open Source. Das bedeutet, dass Sie zum Code beitragen und ihn nach Belieben verwenden können, solange Sie nicht gegen die Apache 2.0-Lizenz verstoßen.
• Sie können wirklich native Apps für Android- und iOS-Geräte erstellen. Jede der von NativeScript bereitgestellten UI-Komponenten wird in die entsprechenden nativen UI-Komponenten übersetzt.
• Sie können über JavaScript-Code auf native Plattform-APIs zugreifen. Sie benötigen keine Kenntnisse in Java oder Objective-C, um native Plattform-APIs verwenden zu können, da Sie alles in JavaScript schreiben können. Wenn Sie also auf ein bestimmtes Gerätefeature zugreifen müssen, erfahren Sie einfach, wie Sie mit JavaScript auf native APIs zugreifen, und Sie können loslegen. 
• Benutzer erhalten so ein Erlebnis, das näher an nativen als an hybriden mobilen App-Frameworks wie Cordova liegt. 
• Es ermöglicht Entwicklern das einfache Erstellen, Bereitstellen und Verwalten ihrer NativeScript-Apps über die Telerik-Plattform. Ich werde die Telerik-Plattform in einem späteren Abschnitt ausführlicher besprechen.
• Zero-Day-Unterstützung für neue native Plattformen. Dies bedeutet, dass Sie sofort die neuesten nativen APIs und UI-Komponenten verwenden können, wenn Google oder Apple ihre Plattform aktualisieren.
• Die Dokumentation enthält viele Informationen zu den ersten Schritten, den wichtigsten Konzepten und der Benutzeroberfläche. Es gibt auch Beispiele, Tutorials, ein Forum, Stack Overflow-Fragen und Beispiel-Apps, die Anfängern den Einstieg in NativeScript erleichtern. 
• Sie können Ihre NativeScript-Apps mit TypeScript schreiben. TypeScript ist eine Sprache, die sich auf JavaScript überträgt und JavaScript um objektorientierte Programmierfunktionen erweitert.
• Jede JavaScript-Bibliothek, die Sie in npm finden können und die nicht vom Browser und vom DOM abhängig ist, kann in NativeScript verwendet werden. Beispiele für solche Bibliotheken sind Dienstbibliotheken wie lodash und Unterstrich. 
• Mit der NativeScript-CLI können Sie fast alles tun. Dazu gehören Grundlagen wie das Erstellen eines neuen Projekts, das Hinzufügen einer Plattform, das Ausführen auf einem Gerät und die Bereitstellung auf einer bestimmten Plattform. Darüber hinaus können Sie Plugins installieren, die App debuggen und in den App Store hochladen.

3. Cons

• In NativeScript gibt es kein HTML und kein DOM. Sie müssen lernen, wie Sie die verschiedenen UI-Komponenten verwenden, um die UI der App zu erstellen. 
• Verifizierte Plugins fehlen. Zum Zeitpunkt des Schreibens dieses Artikels gibt es insgesamt nur 16 überprüfte Plugins. Obwohl es viele nativeScript-Plugins auf npm gibt, können Sie nie wirklich sicher sein, welche Qualität sie haben. 
• Entwickler müssen die nativen Android- und iOS-APIs kennen, um auf die Gerätehardware und andere plattformspezifische Funktionen zugreifen zu können.
• Aufgrund ihrer nativen Natur können Sie Apps nur auf einem tatsächlichen Gerät oder einem Emulator testen. Dadurch wird die anfängliche Einrichtung zum Testen langsamer. Sobald Sie es auf dem Gerät ausgeführt haben, übernimmt das Hot-Reloading. Dies bedeutet, dass bei jeder Änderung des Quellcodes die App sofort neu geladen wird, um die Änderungen wiederzugeben.
• Nicht alle Komponenten der Benutzeroberfläche sind kostenlos verfügbar. Sie müssen die Telerik-Benutzeroberfläche für NativeScript erwerben, wenn Sie Komponenten wie Diagramme und Kalender verwenden möchten.

4. Wie funktioniert es??

NativeScript besteht aus einer virtuellen JavaScript-Maschine, einer Laufzeitumgebung und einem Brückenmodul. Die virtuelle JavaScript-Maschine interpretiert und führt JavaScript-Code aus. Das Bridge-Modul übersetzt dann die Aufrufe in die plattformspezifischen API-Aufrufe und gibt das Ergebnis an den Aufrufer zurück. Vereinfacht gesagt, bietet NativeScript Entwicklern die Möglichkeit, die native Plattform über JavaScript anstelle von Objective-C unter iOS oder Java unter Android zu steuern.

Natürlich gibt es noch viel mehr hinter den Kulissen, aber die Entwickler von Telerik erklären es besser als ich kann. Wenn Sie mehr über die Funktionsweise von NativeScript erfahren möchten, lesen Sie den Artikel von Georgi Atanasov über NativeScript - eine technische Übersicht oder einen Artikel von TJ VanToll zur Funktionsweise von NativeScript.

5. Welche Technologien nutzt es??

Mit NativeScript verwenden Sie XML, um die Benutzeroberfläche der App zu beschreiben, CSS für das Styling und JavaScript, um Funktionalität hinzuzufügen. 

Sie können TypeScript mit Angular 2 verwenden, wenn Sie ein Framework zum Erstellen Ihres JavaScript-Codes bevorzugen. 

Für das Styling verwendet NativeScript nur eine Teilmenge von CSS. Das bedeutet, dass nicht alle in einer Browser-Umgebung verfügbaren CSS-Funktionen verwendet werden können. Sie können beispielsweise keine Floats oder Positionsattribute verwenden. Hier ist die vollständige Liste der unterstützten CSS-Eigenschaften. Genau wie im Browser können Sie Stile hinzufügen, die für die gesamte App, für bestimmte Seiten oder nur für eine bestimmte Benutzeroberflächenkomponente gelten. Wenn Sie Sass bevorzugen, können Sie das NativeScript Dev Sass-Plugin installieren.

Um die Struktur der Benutzeroberfläche zu beschreiben, verwenden Sie XML. Jede Seite in der App sollte sich in einer eigenen XML-Datei befinden. NativeScript enthält vordefinierte Benutzeroberflächen-Widgets oder -Komponenten, mit denen Sie die Benutzeroberfläche der App erstellen können. Einige dieser Komponenten ähneln den verschiedenen HTML-Elementen, die Sie im Browser verwenden. 

Zum Beispiel gibt es eine Bild Komponente, die dem Äquivalent der entspricht img Element oder die Textfeld Komponente, die dem entspricht Eingang Element mit einem Texttyp. Event-Handler wie das Tippen auf eine Schaltfläche werden der Komponente selbst hinzugefügt. Hier ist ein Beispiel:

exports.doSomething = function () // etwas tun

Zu beachten ist auch, dass die Komponenten auch als Vorlagen dienen. Wenn Sie mit dem Schablonieren von Bibliotheken wie Handlebars oder Moustache vertraut sind, sollten Sie mit der folgenden Syntax zu Hause sein:

Das obige Beispiel verwendet die Listenansicht Komponente. Wie der Name schon sagt, können Sie mit dieser Komponente Listen erstellen. Tiere ist ein Array, das in der JavaScript-Datei definiert ist und an das gebunden ist Tiere Variable beim Laden der Seite. Das macht das Tiere Variable zur Verwendung in der XML-Datei verfügbar.

var animals = ['panda', 'tiger', 'affe', 'schlange', 'mantis']; Funktion pageLoaded (args) var page = args.object; page.bindingContext = animals: animals

Dies gibt jedes Element im Array innerhalb des aus Listenansicht.

Schließlich gibt es Plugins, mit denen Sie auf die Gerätehardware und plattformspezifische Funktionen zugreifen können. NativeScript wird mit einem vorinstallierten Kamera-Plugin geliefert. Auf diese Weise können Sie auf die Kamera des Geräts zugreifen und Fotos aufnehmen. Sie können dann den lokalen Pfad zum Foto in Ihrer App zur späteren Verwendung speichern. Plattformspezifische Funktionen wie Social Sharing können auch durch die Installation von Plugins wie dem NativeScript Social Share Plugin verwendet werden.

6. Welche Apps können Sie erstellen??

Aufgrund der nativen Natur von NativeScript können Sie damit nahezu jede Art von App erstellen. Hier einige Beispiele für Apps, die Sie mit NativeScript erstellen können:

• Apps, die mit dem Server kommunizieren, z. B. Nachrichten-Apps und Apps für soziale Netzwerke.
• Einfache Spiele wie Schach, Tic-Tac-Toe oder Flipper.
• Echtzeit-Apps wie Chat-Apps oder Live-Feeds. Es gibt ein Firebase-Plugin für NativeScript, mit dem Sie Echtzeit-Apps implementieren können.
• Musik- und Video-Streaming-Apps. Es gibt ein Plug-In für Videoplayer, mit dem Sie lokal gespeicherte Videos abspielen oder Remote-Videos streamen können, z. B. auf YouTube.
• Karten und Geolocation-Apps. Es gibt Plugins für Google Maps und native Karten-APIs.
• Apps, die auf die Gerätehardware zugreifen. Beispiele sind Kamera-Apps und IoT-Apps.

Bei den Arten von Apps, die Sie mit NativeScript erstellen können, sind die einzigen einschränkenden Faktoren die Leistung und die Verfügbarkeit von Plugins. Das Schreiben von nativen mobilen Apps in JavaScript ist mit einem Preis verbunden: Sie können nicht wirklich erwarten, Apps zu entwickeln, die eine hohe Leistung erfordern. Beispiele sind Spiele mit komplexen Grafiken und Animationen, Apps mit vielen beweglichen Teilen und Hintergrundprozesse. 

Eine weitere Einschränkung ist die Verfügbarkeit von Plugins. Die meisten Entwickler verwenden NativeScript aus einem Webentwicklungshintergrund. Dies bedeutet, dass die meisten von ihnen nicht mit den APIs für native Plattformen vertraut sind oder nur begrenzte Kenntnisse haben, um Plugins für den Zugriff auf Gerätehardware oder plattformspezifische Funktionen wie Kontakte oder Messaging zu erstellen.

Wenn Sie mehr über die Arten von Apps erfahren möchten, die Sie mit NativeScript erstellen können, besuchen Sie die Seite App Showcases. Die meisten der dort aufgeführten Apps werden sowohl im Google Play Store als auch im Apple Store veröffentlicht. Dies bedeutet, dass Sie es installieren und auf Ihrem Gerät ausführen können, um zu sehen, wie mit NativeScript erstellte Apps aussehen und wie sie funktionieren.

7. Wie lässt sich NativeScript mit Hybrid Frameworks vergleichen??

Wenn Sie mit der Entwicklung mobiler Hybridanwendungen nicht vertraut sind, sind Sie möglicherweise auf Frameworks wie Cordova und React Native gestoßen. NativeScript bezieht sich auf diese beiden Frameworks, da beide das Problem "Einmal schreiben, überall ausführen" im Bereich der Entwicklung mobiler Apps lösen sollen. Lassen Sie uns nun jedes Framework nebeneinander betrachten:

Zusammenfassend ist Cordova die alte Generation von Hybrid-App-Frameworks für mobile Anwendungen. Es verwendet das WebView zum Rendern der Benutzeroberfläche der App und greift über Plug-Ins auf die Funktionen des nativen Geräts zu. React Native und NativeScript sind die neue Generation, da sie Ihren JavaScript-Code so übersetzen, dass er von der nativen Plattform ausgeführt werden kann.

Jemand könnte in Zukunft einen besseren Namen für Frameworks wie React Native und NativeScript finden. Im Moment klassifizieren wir sie jedoch als "Native Hybrid Frameworks", da beide JavaScript zum Erstellen von Apps verwenden und den Benutzern sowohl native Erfahrung als auch Leistung bieten.

8. Wie ist Telerik an dem Projekt beteiligt??

Telerik ist das Unternehmen, das NativeScript erstellt hat. Und wie jedes andere Unternehmen müssen sie Geld verdienen, um zu überleben. Sie fragen sich also, ob NativeScript kostenlos und Open Source ist, wie verdient Telerik damit Geld? Nun, die Antwort ist über die Telerik-Plattform und die Telerik-Benutzeroberfläche für NativeScript. 

Die Telerik-Plattform bietet Entwicklern die Tools, die sie benötigen, um die Leistung von NativeScript-Apps einfach zu entwerfen, zu entwickeln, zu testen, bereitzustellen, zu verwalten und zu messen. Hier einige Beispiele für die Tools, die sie anbieten:

• Ein visueller App-Builder, mit dem Sie verschiedene Komponenten der Benutzeroberfläche ziehen und ablegen können
• eine Cloud-Datenbank, die die Datenbank für Ihre App bereitstellt
• Live-App-Aktualisierungen ermöglichen das einfache Übertragen von Aktualisierungen für die App, ohne dass sie erneut an den App Store übermittelt werden müssen und der Benutzer die App manuell aktualisieren muss
• Ein Analysedienst, der Fragen wie die Verwendung Ihrer App, ihre Leistung und die Meinung Ihrer Nutzer beantwortet

Die Telerik-Benutzeroberfläche für NativeScript besteht aus einer Reihe von Komponenten zum Erstellen der Benutzeroberfläche der App. NativeScript enthält bereits kostenlose UI-Komponenten, aber es gibt auch kostenpflichtige UI-Komponenten wie Chart und Kalender, die Sie nur beim Kauf von Telerik verwenden können.

9. Nächste Schritte

Wenn Sie mehr über NativeScript erfahren möchten, empfiehlt es sich, die folgenden Ressourcen zu lesen:

• Wenn Sie noch Fragen zu NativeScript haben, lesen Sie die FAQ-Seite.
• Einen praktischen Artikel zum Erstellen einer Hallo-Welt-App mit NativeScript finden Sie unter Erste Schritte mit NativeScript.
• Wenn Sie eine Sammlung von Artikeln, Video-Tutorials und Code-Snippets zu NativeScript wünschen, gibt es NativeScript-Snacks und NativeScript-Ressourcen.

Fazit

In diesem Artikel haben Sie die Grundlagen von NativeScript kennen gelernt. Wie Sie gesehen haben, ist NativeScript eine gute Option, um mobile Apps mit den Fähigkeiten zu erstellen, die Sie als Webentwickler bereits haben. Ich hoffe, dieser Artikel hat Ihnen das notwendige Wissen vermittelt, um zu entscheiden, ob NativeScript für Sie das Richtige ist.