Category: Webentwicklung

MATHEMA Campus 2019: Vortrag Micro Frontends

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

Share

Slides zum JavaLand AngularJS Talk

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

Share

Vortrag auf der JavaLand 2014: AngularJS

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 😉

Share

Aufbau einer Enterprise AngularJS Anwendung mit Yeoman in 5 Minuten

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.

Share