© DrHitch/Shutterstock.com
Cross-Platform-Entwicklung mit Tabris.js

Tabris.js


Tabris.js [7] ist ein Framework zur Entwicklung mobiler Apps in JavaScript bzw. TypeScript. Mit Tabris.js können Sie native Apps für iOS und Android aus einer einzigen Codebasis entwickeln.

Der Code wird vollständig in JavaScript bzw. alternativ in TypeScript geschrieben. Tabris.js ermöglicht die Leistung von nativen Apps und ein User Interface, das sich am Zielsystem orientiert. Damit ist sogleich eine wichtige technische Eigenschaft verbunden: Tabris.js verwendet keine WebView-Container zum Rendern der Benutzeroberfläche. Stattdessen werden native Widgets aus JavaScript auf der mobilen Plattform eingesetzt. Für die Entwicklung können Sie vorhandene JavaScript-Bibliotheken und Cordova-Plug-ins integrieren. Tabris.js implementiert viele APIs für Webanwendungen, zum Beispiel das XMLHttpRequest oder das 2D Canvas API.

Die Architektur einer auf Tabris.js basierenden App ist in Abbildung 2.1 [8] dargestellt.

image

Abb. 2.1: Architektur einer App auf Basis von Tabris.js

Die Entwicklung basiert auf einem direkten Deployment der App auf das Endgerät, zum Beispiel auf ein iPhone, ein iPad oder ein Android-Smartphone. Wie Sie dabei vorgehen und wie die Entwicklungs-, Test- und Build-Umgebung eingerichtet wird, das lesen Sie jetzt.

2.1 Entwicklungsansatz

Die Entwicklung einer App für iOS und/oder Android beruht auf dem Zusammenspiel von mehreren Komponenten. Dazu gehören das Tabris.js-Framework, die Developer-App (auf dem Zielgerät) und der Online-Playground.

2.1.1 Developer-App

Für die Entwicklung benötigen Sie ein mobiles Gerät. Laden Sie aus Googles Play bzw. Apples App Store die App Tabris.js Version 3 auf Ihr Gerät. Sie steht kostenfrei zur Verfügung. Einen Eindruck vom Aussehen der App vermittelt Abbildung 2.2.

image

Abb. 2.2: Screen der Developer-App von Tabris.js (Fotomontage, iOS)

Die Developer-App von Tabris.js bietet eine Reihe von Funktionen und ist der Mittelpunkt bei der Entwicklung und dem Testen der eigenen App. Sie finden Snippets von typischen Aufgaben einer App, wie zum Beispiel eine Liste, eine 2D-Zeichenfläche, eine Bildergallerie und einiges mehr. Probieren Sie diese Beispiele aus.

Tipp zur Bedienung der Developer-App von Tabris.js

Um ein Beispiel wieder zu verlassen, öffnen Sie die Developerkonsole in der Tabris.js-App auf Ihrem Smartphone. Wischen Sie dazu das aktuelle Fenster nach links, ausgehend vom rechten Rand. In der Developerkonsole finden Sie einen Home-Button, der zurück zu den Optionen führt.

Wenn Sie sich etwas in der Tabris.js-Developer-App orientiert haben, wird es Zeit für den nächsten Schritt. Dieser startet online auf https://tabris.com, im so genannten Playground.

2.1.2 Online-Playground

Gehen Sie entweder direkt auf https://playground.tabris.com oder wählen sie auf der Startseite den Menüpunkt Playground. Von hier starten wir unsere ersten Experimente. Wählen Sie das Snippet hello.js, d. h. die JavaScript-Version des „Hello World“-Beispiels aus. Den nur minimalen dafür notwendigen Code finden Sie im Texteditor auf der Webseite. Diesen können Sie auch nach Ihren Wünschen, zum Beispiel in der Textausgabe, anpassen. Um die „Hello World“-App zu testen, wechseln Sie zu Ihrem mobilen Gerät und öffnen Sie die Developer-App von Tabris.js. Scannen Sie aus der App heraus den Barcode, der Ihnen unter https://playground.tabris.com angezeigt wird (Abb. 2.3).

image

Abb. 2.3: Der Online-Playground dient für Experimente mit Tabris.js

Den Barcode scannen Sie in der Developer-App. Danach wird die App auf dem mobilen Gerät sofort gestartet und wir sehen zunächst den Button und dann die Ausgabe „Hello World“ (Abb. 2.4).

image

Abb. 2.4: „Hello World“-Beispiel in der Developer-App (Fotomontage, iOS)

Unsere eigene App wird zunächst innerhalb der Developer-App ausgeführt. Später werden wir zeigen, wie der Build-Prozess durchgeführt wird, um die App für die eigenständige Nutzung und das Deployment über die App Stores fit zu machen. Im nächsten Abschnitt beschreiben wir die Einrichtung der Entwicklungsumgebung.

2.1.3 Entwicklungsumgebung

Um Apps auf dem Entwicklungsrechner zu erstellen, sind einige wenige Installationen notwendig. Man kann unter jedem beliebigen Betriebssystem (Windows, macOS, Linux) entwickeln. Sie benötigen:

  • Node.js [9] inklusive npm
  • TypeScript [10], Installation über npm mit npm install typescript
  • Editor zum Erfassen des Codes; unmittelbar von Tabris.js wird Visual Studio Code [11] als Projektformat unterstützt; es funktioniert jedoch auch mit einem anderen Editor
  • Tabris.js CLI [12] Installation über npm mit npm install -g tabris-cli.
  • optional Git [13] als Versionskontrollsystem

Die Entwicklung mit Tabris.js basiert auf einem Zusammenspiel aus lokalem Server und Developer-App. Daher ist es wichtig, dass sich das mobile Gerät und der Entwicklungsrechner im selben lokalen Netzwerk befinden.

Node.js

Bei Node.js handelt es sich um eine Softwareplattform mit eventbasierter Architektur. Sie ermöglicht es, die ursprünglich für den clientseitigen Einsatz entwickelte Skriptsprache JavaScript serverseitig zu verwenden. Node.js wird in der JavaScript-Laufzeitumgebung V8 ausgeführt, die für Google Chrome entwickelt wurde. Sie nutzt eine ressourcensparende Architektur, die eine besonders große Anzahl gleichzeitig bestehender Netzwerkverbindungen ermöglicht.

Der Erfolg dieser Plattform basiert unter anderem auf dem größten Ökosystem, das sich um eine Programmiersprache gebildet hat. Seine Basis ist npm, der Node Package Manager. Er dient der Verwaltung von Paketen für Node.js und gilt inzwischen als De-facto-Standard für die gesamte JavaScript-Welt.

JavaScript vs. TypeScript

JavaScript hat einige Nachteile gegenüber anderen Programmiersprachen, beispielsweise das fehlende statische Typsystem. Ebenfalls ist die objektorientierte Programmierung nur rudimentär umgesetzt. Mit dem Standard ECMAScript 2015 wurde hier zwar erheblich durch das Schlüsselwort class nachgebessert, dennoch gilt auch hier: Das Klassenkonzept von ECMAScript 2015 ist lediglich „syntaktischer Zucker“ für das bestehende, auf Prototypen basierende Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. Ebenso ist zu berücksichtigen, dass der Stand der Browserunterstützung der neusten JavaScript-Features unterschiedlich ausfällt. TypeScript kann diese Nachteile teilweise ausgleichen. TypeScript bildet eine Obermenge von JavaScript, erweitert also JavaScript um bestimmte Funktionen und wurde von Microsoft entwickelt. TypeScript kann damit Sprachfeatures abbilden, die in den neuesten oder künftigen Versionen von ECMAScript enthalten sind. Der TypeScript-Code wird stets mit Hilfe eines Transpilers zu JavaScript kompiliert. TypeScript-Code ist damit stets vollständig kompatibel zu JavaScript-Code.

Diese wenigen Schritte genügen bereits, um eine Entwicklungsumgebung für das Erstellen von Apps mit Hilfe des Frameworks Tabris.js einzurichten.

2.2 Eine App mit Tabris.js

Nach diesen Vorbereitungen kann bereits eine erste App mit Tabris.js generiert werden. Man nutzt die Kommandozeile (Tabris CLI) und durchläuft die folgenden Schritte:

  1. Erstellen eines neues Arbeitsverzeichnisses
  2. Wechsel in das Verzeichnis auf Ebene der Kommandozeile
  3. Erzeugen eines neuen Tabris.js-Projekts mittels des Befehls tabris init auf der Kommandozeile
  4. Festlegen/Auswahl der initialen Eigenschaften des Projekts, d. h. Projektname, Projektversion, Programmiersprache (JavaScript, TypeScript), App-ID, Name der App und die Konfigurationseinstellungen für die Entwicklungsumgebung, zum Beispiel Visual Studio Code

Danach generiert Tabris.js die grundsätzliche Projektstruktur inklusive der notwendigen Dateien (Abb. 2.5 und Tabelle 2.1). Die Bibliotheken werden im Ordner node_modules eingebunden. Beispielsweise können Sie die Projektdateien in Visual Studio als Ordner öffnen.

image

Abb. 2.5: Die Struktur einer Tabris.js-App

Da...

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

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang