Überblick
Dieser erste Artikel unseren neuen Reihe map.apps 4 für Entwickler richtet sich an alle, die mehr über Möglichkeiten und Tools der map.apps 4 Entwicklung erfahren möchten. Hier geben wir zunächst einen Überblick über diejenigen Themen, die zukünftig in separaten Artikeln ausführlicher behandelt werden:
- Überblick (dieser Artikel)
- JavaScript-Sprachlevel und -Buildprozess
- Vue.js - Wart- und testbare UI Widgets entwickeln
- Vuetify.js - Vorgefertigte UI Komponenten einbinden
Neben den neuen Möglichkeiten - eingeführt in Linie 4 von map.apps - werden die bekannten Mechanismen und Programmierwege weiterhin unterstützt. Eine Erläuterung zur Bedeutung von Linie 3 und Linie 4 in map.apps 4 kann in diesem Artikel nachgelesen werden.
Begleitend zu dieser Artikel-Reihe haben wir das GitHub Repository mapapps-4-developers veröffentlicht. Es kann dazu dienen, sich bereits vor erscheinen der weiteren Artikel mit den Möglichkeiten und Neuerungen in praktischen Beispielen vertraut zu machen. Außerdem kann es als Vorlage für erste eigene Schritte als map.apps 4 Entwickler genutzt werden, da es nach dem git clone sofort startklar ist.
JavaScript-Sprachlevel und -Buildprozess
Die Standardisierung der Sprache JavaScript entwickelt sich selbst ebenso weiter wie die mit ihr geschriebene Software. Die sechste Version der Sprache wurde im Jahr 2015 veröffentlich, daher heißt der Standard ECMAScript 2015 / ES2015 (zum Teil auch noch ECMAScript 6 / ES6). Seit dieser Version gibt es jährlich neue ECMAScript Standards die aktuelleste Version ist ECMAScript 2017 / ES2017.
Jede Sprachversion bringt neue Möglichkeiten, Ausdrucksformen und Konstrukte mit. Zu den Neuerungen zählen unter anderem (vgl. "Learn ES2015" auf babeljs.io):
- Arrows and Lexical This
- Classes
- Template Strings
- Destructuring
- Let + Const
Die gängigen und von map.apps 4 unterstützten Browser setzen jedoch diese neuen Sprachversionen erst nach und nach um. Damit man als map.apps 4 Entwickler bereits jetzt schon von den neuen Sprach-Features profitieren kann, wird der JavaScript Quellcode mit Hilfe von Babel auf eine in allen Browsern lauffähige Sprachversion transpiliert. Dies geschieht völlig automatisch und im Hintergrund, so dass der Entwickler keine Aufwände hat und dennoch modernes ECMAScript codieren und debuggen kann.
Im folgenden, zweiten Artikel dieser Reihe werden wir genauer auf die Möglichkeiten von ES2015 eingehen. Aspekte des Build-Prozesses für JavaScript werden dort ebenso Thema sein. Dazu gehört zum Beispiel auch die Angleichung des manifest.json Formats an den Stil von package.json Dateien und generell die Verwendung von npm als JavaScript Paket-Manager.
Vue.js - Wart- und testbare UI Widgets entwickeln
Vue.js (ausgesprochen /vjuː/, wie das englische Wort "view") ist ein JavaScript Framework zur Erstellung interaktiver Benutzer Schnittstellen. Vue.js legt den Fokus auf die View Schicht und lässt sich gut mit anderen Bibliotheken integrieren (vgl. auch nächster Abschnitt).
In map.apps 4 werden Vue.js Widgets deklarativ beschrieben. Durch eine leicht zu lesende Template-Syntax (änlich HTML) werden mittels Schleifen, Bedingungen und Direktiven das Aussehen und Verhalten eines Widgets definiert und gesteuert. All dies befindet sich zusammenhängend in einer einzigen Datei und somit gut struktiert und besser testbar. Besonders wartungsfreundlich ist es, wenn man diesen Mechanismus nutzt, um kleinere und wiederverwendbare UI Komponenten zu definieren. Eine komplexe UI kann so aus vielen solcher Komponenten einfach aufgebaut werden.
Solche UI Komponenten fassen die Beschreibung ihres Aussehens und den ausschließlich für ihr eigenes Verhalten nötigen JavaScript Code gut in einer .vue Datei zusammen - die Entwicklung der Business Logik kann dann an anderer Stelle erfolgen. So lassen sich Programmier Muster wie Model-view-viewmodel (MVVM) gut mit Vue.js umsetzen. map.apps 4 erspart dem Entwickler dabei mit Hilfsmitteln wie einer eigenen Binding Klasse viel sich wiederholende Programmierarbeit (z.B. für die Synchronisation von Daten zwischen View und Model).
Im dritten in dieser Reihe erscheinenden Artikel widmen wir uns den Details des Aufbaus einer .vue Datei, wie diese als Komponenten zusammenspielen und wie das map.apps 4 Binding genutzt werden kann.
Vuetify.js - Vorgefertigte UI Komponenten einbinden
Vuetify.js ist eine Vue.js Komponenten Bibliothek, mit deren Hilfe man UI Komponenten erstellen kann. Vuetify.js wurde nach den Vorgaben der Material Design Spezifikation umgesetzt. Der map.apps Entwickler kann aus den einzelnen Komponent sehr leicht nach dem Baukastenprinzip neue Benutzerschnittstellen entwickeln. Durch diverse Einstellungsmöglichkeiten der einzelnen Komponeneten lässt sich deren Aussehen und Verhalten weitreichend anpassen.
Auch zu Vuetify.js werden wir einen separaten Artikel mit Erläuterungen zur Verwendung in map.apps 4 veröffentlichen.