Vorwort

Heute möchte ich euch von meinen Erfahrungen mit dem Ionic 3 Framework sowie Angular4, NodeJS und Cordova berichten. Die Frage ist natürlich, wie ein Backend-Entwickler, der hauptsächlich mit C++, C#, bash und Java arbeitet, zu etwas kommt, was eher in die Richtung Front-End geht. Irgendwann hatte ich den Auftrag bekommen für einen Kunden eine Mobile App zu entwickeln, die nicht nur auf Android, sondern auch auf iOS läuft. Ergo Cross-Platform.

Also kam Swift + Java für native Entwicklung nicht in Frage. Was tun? Es gab zwei Optionen die zur Verfügung standen: Entweder wird mit Xamarin entwickelt, oder mit dem Ionic Framework. Wie immer gab es Zeitdruck und die Leistung von Ionic übertraf Xamarin, was die Usability und Library betrifft. Also war es Ionic!

Da gab es aber ein ganz großes Problem: Ich hatte vorher noch nie was von Ionic gehört und durfte mich da erstmal ne Weile einlesen. Nach paar Stunden Recherche war es soweit. Ich war bereit und wollte loslegen. Die ersten Installationsversuche von NodeJS und dem Angular4 Framework gingen unter Windows 10 Pro voll in die Hose, immer wurde irgendwas angemeckert. Als ich irgendwann die Schnauze voll hatte, fuhr ich Windows herunter und startete meinen Debian mit xfce4. Das war sogar eine gute Entscheidung, denn die Einrichtung verlief ohne Probleme.

Auswahl der IDE

Nach dem das Grundgerüst verstanden und eingerichtet worden ist, informierte ich mich über IDE’s die mit Ionic gut klar kommen. Denn es muss an dieser Stelle klar sein, dass die IDE optimalerweise Syntaxhighlighting und Autovervollständigung für Projekte mit TypeScript (ggf. ES6) unterstützt. Da gibt es eine Reihe von IDE’s. Von MSVS Code, über AngularIDE von IntelliJ bis hinzu stinknormalen Editoren, welche nicht in Frage kommen ^^ Schon seit längerer Zeit habe ich mich in Atom verliebt und es war auch die IDE welche ich nutzen wollte. 2-3 Plugins installiert und aus dem Vorhaben ein Heimspiel gemacht. Es war toll, angenehm und zufriedenstellend. Alles was ich brauche. NodeJS, Angular und Ionic wurde über die Konsole angesprochen. Die Entwicklung mit dem JIT-Compiler war eine große Erleichterung, die Prod-Version konnte mit dem AOT-Compiler leicht erstellt werden. Alles also kein Problem. Ich musste bloß die Befehle auswendig lernen und meinen Kopf einschalten. Das ging auch relativ schnell, dass mein Vorhaben immer schneller erreicht werden konnte. Nun gut.

Motivation

Für die Recherche und Einrichtung der Entwicklungsumgebung brauchte ich knapp 2 Tage, ergo 16 Arbeitsstunden. Wenn man betrachtet, dass ich noch nie mit der Materie zu tun hatte und es wirklich viele Faktoren gibt, welche man beachten muss, ist die Zeit echt akzeptabel.

Ein Problem gelöst, das nächste hat nicht lange auf sich warten lassen… Ich kann gar kein Angular4 / TypeScript, was eine Erweiterung für JavaScript ist, was ich auch nicht kann 😀 Habe mich immer davor gedrückt, irgendwas Produktives im Bereich Web-Entwicklung zu machen. Natürlich habe ich HTML, CSS, JS, PHP, Ajax, jQuery etc… Erfahrung, aber halt nicht im großen Stil. Und jetzt darf ich mich mit TypeScript und dem Angular4 Framework rumschlagen? Jap! Da habe ich mich gefreut… </ironie> Als wären zwei Frameworks nicht genug, kam noch Cordova hinzu, welches die nativen Elemente der jeweiligen Platform anspricht, wie z.B. die Kamera, das lokale File-System, GPS, Netzwerk etc… Cool, dachte ich. Noch eine weitere Abhängigkeit. ^^

Na gut, Zeit um etwas aktiv zu werden. Das Erste was ich gemacht habe, war ein leeres und ein überladenes Projektbeispiel anzuschauen und wurde regelrecht erschlagen. Die Verzeichnisstruktur war relativ klar, jedoch verstand ich erst ziemlich spät die Zusammenhänge der einzelnen Dateien. Welcome to Angular! Autsch, das tat weh, ich fühlte mich wie ein Anfänger, der gerade programmieren lernt, dabei habe ich knapp 18 Jahre Erfahrung was Entwicklung angeht. Das war etwas beschämend. Ich hatte irgendwie keine Lust mehr, es war einfach viel zu viel. Egal was ich mir angeschaut habe, kannte ich noch nicht und musste es lernen, jedoch in welcher Reihenfolge? Wo ist die Basis? Ich war kurz vor dem Knock-Out.

An diesem Tag habe ich meine Arbeit unterbrochen und mich was anderem gewidmet. Irgendwas anderes, vertrautes, einfaches machen.

Comeback

Am nächsten Tag fing ich nochmal von vorne an. Noch einmal alles Schritt für Schritt durchgehen und ein bis zwei Tutorials anschauen. Zusätzlich gab es ein Angular Buch. Es vergingen einige Stunden und wurde immer vertrauter mit der Umgebung. Ich nahm erstmal alles so hin, ohne zu wissen, wieso und weshalb, was ich jedoch im Anschluss verstand. Es machte auch wieder Spaß sich mit Ionic & Co. zu beschäftigen. Denn die Erfolgsmomente kamen ziemlich schnell und die Docs von Ionic sind gar nicht mal so bad. Außerdem sah es schick aus. Ich muss dazu sagen, dass ich was Design angeht, eine Niete bin und Ionic mir sehr viel Arbeit abgenommen hat, obwohl ich dennoch viel mit SCSS und HTML machen musste. Nocheinmal vereinfacht wurde die ganze Geschichte von Angular durch das Databinding. Langsam hatte ich den Dreh raus.

Entwicklung voll im Gange

Nachdem ich etwas Übung hatte, ging es wie geschmiert. Die Logik der App, welche ich entwickeln sollte, wurde relativ schnell umgesetzt. Die meiste Zeit ging jedoch für das Design drauf. Zwischenzeitlich war ich froh, dass Ionic mir die meiste Arbeit der GUI abnahm, denn ich musste die tollen Elemente wie Buttons, Textfelder, Listen usw… nicht selbst entwerfen, sondern einfach nutzen und stylisch nach Kundenwunsch anpassen. Die Funktionalität der einzelnen Elemente wurde durch Angular ermöglicht und wenn man gecheckt hat, was das umfangreiche Framework wirklich drauf hat, will man gar nicht mehr anders Apps entwickeln. Das Projekt wurde nach knapp 3 Monaten abgeschlossen, welches eine App-Größe von ~40 MB hat und die Projektdateien sich auf ~1,3 GB belaufen.

Nachwort

Durch dieses Projekt habe ich einen riesigen Einblick in die Cross-Platform Mobile App Development erhalten, anstatt wie gewohnt nativ für Android/iOS zu programmieren. Das Ionic Framework erleichtert die Gestaltung der App erheblich, Angular unterstützt die Implementierung der Logik in Verbindung mit dem Design und Cordova eine Schnittstelle anbietet um native Elemente des Smartphones / Tablets anzusprechen. Für die Zukunft, egal ob Cross-Platform oder nicht, würde ich wieder Ionic wählen. Es macht Spaß, benutzt moderne Frameworks, wird ständig erweitert, die Community dahinter ist sehr aktiv genau so wie die Entwickler und ist immer mehr bei Firmen gefragt.