Slides for my presentation at WebTechCon/IPC 2014. Visit us at http://www.thecodecampus.de Folien zu meinem Vortrag bei der WebTechCon/IPC 2014. AngularJS verspricht, die Entwicklung moderner Single-Page-Webanwendungen radikal zu vereinfachen. Doch kann dieses Versprechen auch bei Anwendungen, die über eine Demoanwendung (To-do-App) hinausgehen, gehalten werden? In diesem Vortrag zeigen wir die Stärken und Schwächen von AngularJS anhand unserer Erfahrungen aus mehreren Projekten und unserer Schulungen. Wie meistert man den Einstieg? Was sind die Gefahren, und wie minimiert man sie? Ist AngularJS bereit für den Einsatz in großen Anwendungen? Wir geben Antworten. Zusätzlich geben wir einen Ausblick auf AngularJS 2.0, wie die bekannten Schwächen dort behoben werden sollen und was an Neuerungen zu erwarten ist.

1. Philipp Burgmer | WeigleWilczek
Taugt AngularJS wirklich was?
Erfahrungsbericht und Ausblick

2. ABOUT ME
Philipp Burgmer
Software Engineer / Consultant / Trainer
Focus: Frontend, Web Technologies
WeigleWilczek GmbH
burgmer@w11k.com

3. ABOUT US
WeigleWilczek / W11k
Software Design, Development & Maintenance
Consulting, Trainings & Project Kickoff
Web Applications with AngularJS

4. Einstieg
Alltag
Ausstieg
Ausblick

5. EINSTIEG

6. JAVASCRIPT
Viele Entwickler wenig Erfahrung
Fehler oft aus Unwissenheit über Sprache
Automatische Typ-Konvertierung
(Konstruktor-)Funktionen und this
Gültigkeitsbereich von Variablen & Sichtbarkeit
Dynamische Typisierung & keine eigenen Typen

7. PROTOTYPING
Objekt-Graph statt Klassen-Baum
Meisten Entwickler denken in Klassen
Wird in AngularJS für Scopes benutzt

8. HEUTE & MORGEN
CoffeeScript
EcmaScript 6 + Traceur
TypeScript
Klassen
Module
Optionale Typen

9. ANGULARJS
Kombiniert viele Konzepte, zu ganzem Framework
Dependency Injection
Deklaratives UI / MV*
Promises
Für viele Entwickler vieles davon neu
Erste Gehversuche leicht
Fundierter Einstieg schwierig / aufwändig

10. MV*
Saubere Trennung von UI und UI-Logik
Testbarkeit
MV* -> MVC || MVVM || ...
Scope als Bindeglied
Überwacht Änderungen am Model
Nutzt Prototyping für Hierarchie

11. DI & MODULE
Keine Lookups, keine Kenntniss von Umgebung
Reduktion von Boilerplate-Code
Testbarkeit & Wiederverwendbarkeit
Komplexität und Boilerplate-Code
Ein globaler Namensraum
Services immer als Singletons
Config-Phase und Provider

12. PROMISES
Asynchronität in Single-Threaded-Sprache
Callback-Hell
Adaptierte API, aber kein Standard
Hohes Abstraktionslevel
Aber auch hohe Komplexität
Mächtig und elegant wenn verstanden
Voraussetzung für HTTP Kommunikation

13. DIREKTIVEN
Alleinstellungsmerkmal
Bindeglied: deklaratives UI <-> JavaScript Code
Kapseln DOM-Manipulation
Sehr komplexe API
In 2.0: WebComponents

18. ALLTAG

19. PROJEKT
Keine Struktur von JavaScript vorgegeben
Code-Menge kann zum Problem werden
Feature-Orientierte Struktur
Coding-Richtlinien
Auf Bibliotheken achten
JSHint & Tests

20. TOOLING
Debuggen im Broswer, entwickeln in der IDE
Wenig Unterstützung durch die IDE bei APIs
DI & Code Minimierung
ng-doc oder TypeScript
ng-annotate und in Zukunft Annotations

21. BUILD-SYSTEM
sehr aktives Umfeld: Grunt, Gulp, ...
Sehr viele kleine einzelne Tools
Kompliziertes Setup für mehr als Bespiel-App
kein High-Level-Build-System à la Maven
Yoeman Generatoren
fabs

22. PERFORMANCE
Optimierungen in 1.2 und 1.3
Object.observe in 2.0
Speicherverbrauch
JavaScript Code optimieren
Dynamisches Laden von Code
DI und Services verstehen
Code in Services auslagern
Code möglichst selten ausführen

23. PERFORMANCE
Dirty-Check für DataBinding
Limit: ~2000 watch-expressions
One-Time-Bindings
Filter in Expressions vermeiden
Kleine Controller, kleine Scopes
Nur in den Scope was in View benötigt

24. AUSSTIEG

25. ANGULARJS
SHOULD I STAY, OR SHOULD I GO
Grundlegende Konzepte verstehen
JavaScript lernen
Vorteile durch Konzepte überwiegen
Abstraktionsniveau++
Große Community & Support Angebote
STAY!

26. ALTERNATIVEN
Knockout
Backbone
Ember.JS
React
...

27. AUSBLICK

28. ECMASCRIPT 6
Klassen
Module

29. ATSCRIPT
Erweitert ES6 und TypeScript
Keine neue Sprache
Transpiler
Nette Syntax aber auch alles ohne möglich
Klassen
Module
Optionale Typen
Annotations

30. AtScript
- Annotations
- Introspection
TypeScript
- Types
ES6
- classes
- modules
ES5

31. import {Inject} from 1 'di/annotations';
2 import {Electricity} from '../electricity';
3
4 @Inject(Electricity)
5 export class Heater {
6 constructor(electricity) {
7 this.electricity = electricity;
8 }
9
10 on() {
11 console.log('Turning on the coffee heater...');
12 }
13
14 off() {
15 console.log('Turning off the coffee heater...');
16 }
17 }

32. ANGULARJS 2.0
Inspiriert von
AngularDart
Community & anderen Frameworks
Design-Phase
Kein konkreter Zeitplan -> 2015?
Google Drive Ordner mit Design-Dokumenten
Code auf GitHub

33. ANGULARJS 2.0
Native Features von EcmaScript6
Klassen und Module
Promises
Web-Standards statt eigener API
WebComponents
Object.observe
Weniger Boilerplate durch Framework
Mobile First
Flexibles Routing
...

34. Philipp Burgmer
burgmer@w11k.com
www.w11k.com
www.thecodecampus.de