Letztes Wochenende fand der diesjährige MATHEMA Campus statt. Ich war mit einem Vortrag dabei:
https://joachim.weinbrenner.name/vortrag/mc19/
Die Sourcen finden sich auf GitHub: https://github.com/weinbrenner/mc2019microfrontends
Category: Webentwicklung
Meine Slides zum Vortrag <Superheld/> können hier online betrachtet werden (klick auf Bild unten)
Die Sources findet ihr auf GitHub: https://github.com/weinbrenner/angularjs-superheld
Nachdem Markus Eisele mich fragte, ob ich nicht einen Vortrag zur neu geschaffenen JavaLand Konferenz einreichen möchte, sagte ich: „Ja, ich denke darüber nach“. Er: „Heute Nacht 0.00 Uhr ist der CfP zu Ende!“. So musste es etwas spontaner sein. Ich reichte also einen Vortrag zu meinem aktuellen Lieblings-Frontend-Thema ein: AngularJS.
Es soll ein einführender Vortrag werden, der einem typischen Java-Entwickler mit grundlegendem HTML/JS-Vorwissen eine Einführung in die Materie gibt.
Sehr gefreut habe ich mich, dass wenige Wochen später tatsächlich die frohe Kunde kam, mein Vortrag sei akzeptiert.
Auf die JavaLand bin ich schon sehr gespannt. Zum einen gibt es natürlich ein großes Füllhorn an überaus interessanten Vorträgen, zum anderen reizt die Konferenz mit ihrem ungewöhnlichen Veranstaltungsort, dem Phantasialand bei Köln.
So muss ich dann schwere Entscheidungen treffen, welche Vorträge ich mir noch anhören werde, oder ob ich doch lieber Achterbahn fahre 😉
Als Java Entwickler ist man verwöhnt. Man hat für alles perfekte Tools (in erster Näherung). Ganz schnell ist ein Projekt mit Maven aufgesetzt, mit Jenkins eine CI Umgebung angeflanscht usw.
Für Webentwickler von JavaScript Anwendungen sieht es da typischerweise schon etwas anders aus. Da ich mich derzeit mit der Entwicklung von AngularJS Frontends beschäftige und die Dinge nun professioneller werden müssen, habe ich mich etwas umgesehen. Zuerst habe ich meist mit einem der Seed-Templates (z.B. angular-sprout) begonnen. Da ist zwar eine wunderbare Struktur vorgegeben, auch schon Tests uvm., aber die Flexibilität hat mir etwas gefehlt, verbunden mit der Tatsache, dass viel von dem Vorgegebenen doch wieder angepasst und geändert werden muss.
So habe ich mich umgesehen und es geht eleganter! Mit Yeoman habe ich ein Tool gefunden, das einen bei der Entwicklung perfekt begleiten kann – vom initialen Generieren einer Anwendung, über das Bauen und Testen bis hin zum Pflegen der Abhängigkeiten.
In diesem Artikel will ich beschreiben, wie man sich eine entsprechende Umgebung in 5 Minuten und 4 Schritten aufsetzen kann.
Hinweis: die ersten drei Schritte müssen nur einmal pro Entwicklungsrechner gemacht werden!
1.) Aktuelle Version von node.js und npm installieren
Auf Linux Ubuntu oder Mint sind die mitgelieferten node Pakete doch relativ alt, so dass es sich empfiehlt, aktuellere zu installieren. Eine Anleitung für alle Betriebssysteme ist hier zu finden: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
Für meine Linux Mint Kiste sind das folgende Schritte:
sudo apt-get update sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs
2.) Yeoman installieren
Yeoman lässt sich nun via npm Paketmanager installieren (hier global für alle User):
sudo npm install -g yo
3.) Generator installieren
Yeoman benötigt sogenannte Generatoren um entsprechende Projekttemplates generieren zu können. Unter http://yeoman.io/community-generators.html findet man jede Menge davon. Für meine AngularJS Projekte habe ich mir den „Yeoman Generator for Enterprise Angular Projects“ (https://github.com/cgross/generator-cg-angular) rausgesucht. Installiert ist dieser binnen Sekunden (wieder global):
sudo npm install -g generator-cg-angular
4.) Die Anwendung selbst anlegen
Nun müssen wir Yeoman mit seinem neuen Generator nur noch die Arbeit verrichten lassen, eine Anwendung zu generieren:
mkdir NewAngularApp cd NewAngularApp yo cg-angular
Voila! Das wars auch schon. Jetzt kann man loslegen mit der Entwicklung der Anwendung. Zur Seite stehen einem dazu ein paar Grunt-Tasks zum Bauen und Testen des Projekts, sowie verschiedene Yeoman Subgeneratoren zum Anlegen von Direktiven, Partials, Services und Filtern. Die Dokumentation und weitere Vorzüge sind in der README.md des Generators nachzulesen.
