Der bei Puzzle bereits bestens bekannte Referent Jonas Bandi führte an den insgesamt vier Tagen Regie – während sich das Puzzle Backoffice um die Räumlichkeiten und das leibliche Wohl der Teilnehmenden kümmerte.
Während des ersten Workshopteils wurde vornehmlich klassisches JavaScript (a.k.a. ECMA-Script oder kurz ES) mit ES5 und ES2015 (a.k.a. ES6) behandelt, während sich an den Folgetagen alles um Angular, respektive Angular 2 drehte.
Aber alles der Reihe nach – Teil 1 des Workshops
Am ersten Kurstag erläuterte Jonas Bandi die Eigenheiten von JavaScript und zeigte uns diverse Debugging Möglichkeiten – anschliessend stellte er die Konzepte vom klassischen ES5 denen des aktuelleren ES2015 gegenüber. Design Pattern wie Promises, Observables und Closures wurden besprochen und die Teilnehmer hatten Gelegenheit, das neu erworbene Wissen sogleich in praktischen Übungen anzuwenden.
Weiter ging es mit der Betrachtung der verschiedenen Tools, welche ein effizientes Entwickeln mit JavaScript unterstützen, oder im Fall von ES2015 erst ermöglichen.
Unter anderem wurden Dependency Management mit npm, Bower, Build Automation mittels npm, Gulp und Grunt sowie Module Building mit Hilfe von WebPack, Browserify, RequireJs und Transpilation mit Babel behandelt.
Ein weiterer Schwerpunkt war das Thema Testing. Wobei vor allem Mocha (mit und ohne Chai), Jasmine und Karma näher vorgestellt wurden.
Spätestens als mit TypeScript (TS) auch das typisierte Superset von ES zur Sprache kam, konnten sich auch die Skeptiker unter den zahlreich vertretenen JAVA-Entwicklern für die Skript-Welt erwärmen.
Fazit des ersten Workshops:
ES2015 ist um einiges mächtiger, aber auch komplexer als das angestaubte ES5. Da die aktuellen Browser ES2015 noch nicht (vollumfänglich) unterstützen, wird man in absehbarer Zeit wohl kaum ums ‚Transpilen‘ (= Source zu Source kompilieren) herum kommen.
Glücklicherweise lassen sich mit zeitgemässen Buildtools wie WebPack und SystemJS und Babel diese zusätzlichen Aufgaben automatisieren.
Zweiter Teil des Workshops:
Der erste Tag des zweiten Blocks stand ganz im Zeichen von Angular.
Nach einer fundierten Einführung in Angular 1.x und dessen Konstrukte (Controller, Service, Direktiven, Routing, Two-Way-Databinding, etc.) befassten wir uns mit den unterschiedlichen Konzepten von Angular 1.x und Angular 2:
- Bidirektionaler versus unidirektionalem Datenfluss
- Direktiven versus Komponenten
- Service als Singletons oder eben nicht
- Promises versus Observables
- ES5 versus ES2015/TS
- etc.
Ein weiterer Schwerpunkt am zweiten Tag bildete die Migrations-Strategien von Angular 1.5 nach Angular 2:
Mittels schrittweiser Annäherung der Codebasis an den Angular 2 Stil – wie etwa dem Verwenden von Komponenten unter Angular 1.5, das Umstellen von bidirektionalem auf unidirektionalen Datenfluss dem Konvertieren des Codes von ES5 nach TS oder ES2016, Einsatz von ngForward oder NG-Upgrade.
Vor und Nachteile von Angular 2 mit TS, ES2015 und Dart wurden erläutert, das neue Component-Routing besprochen und auch die Frage, wie man eine Angular 2 Applikation überhaupt bootstrapt, thematisiert.
Aufgelockert wurde auch dieser Tag durch praktische Übungen. Besonders interessant dabei war, Aufgabenstellungen welche am Tag zuvor mit Angular 1.5 gelöst worden waren, nun mit Angular 2 (und ES2015) zu lösen.
Zum Abschluss gewährte uns Jonas Bandi noch einen kurzen Einblick ins UI-Universum von React.
Fazit von Teil 2 des Workshops:
Es existieren noch keine fix-fertigen Rezepte oder gar ein Standard-Migrationspfad. Es geht eher darum, Wege zu finden, seine Angular 1.x Codebasis den Angular 2 Konzepten schrittweise anzunähern.
Ob eine friedliche Koexistenz von Angular 1.x und Angular 2 Code innerhalb derselben Applikation mittels ngForward in real life Projekten wirklich eine sinnvolle Option darstellt?
Mit den neuen Konzepten von ES2015 oder TS nähert sich das JavaScript Universum schon deutlich an die im Enterprise Umfeld etablierte JAVA Welt an – definitiv vorbei sind die Zeiten, wo JavaScript als Programmiersprache von Script-Kiddies belächelt worden ist…