Philipp Burgmer | WeigleWilczek
Taugt AngularJS wirklich was?Erfahrungsbericht und Ausblick
Philipp BurgmerSoftware Engineer / Consultant / TrainerFocus: Frontend, Web Technologies
WeigleWilczek [email protected]
ABOUT ME
WeigleWilczek / W11kSoftware Design, Development & MaintenanceConsulting, Trainings & Project Kickoff
Web Applications with AngularJS
ABOUT US
EinstiegAlltagAusstiegAusblick
EINSTIEG
Viele Entwickler wenig ErfahrungFehler oft aus Unwissenheit über Sprache
Automatische Typ-Konvertierung(Konstruktor-)Funktionen und thisGültigkeitsbereich von Variablen & Sichtbarkeit
Dynamische Typisierung & keine eigenen Typen
JAVASCRIPT
Objekt-Graph statt Klassen-BaumMeisten Entwickler denken in KlassenWird in AngularJS für Scopes benutzt
PROTOTYPING
CoffeeScriptEcmaScript 6 + TraceurTypeScript
KlassenModuleOptionale Typen
HEUTE & MORGEN
Kombiniert viele Konzepte, zu ganzem FrameworkDependency InjectionDeklaratives UI / MV*Promises
Für viele Entwickler vieles davon neuErste Gehversuche leichtFundierter Einstieg schwierig / aufwändig
ANGULARJS
Saubere Trennung von UI und UI-LogikTestbarkeitMV* -> MVC || MVVM || ...
Scope als BindegliedÜberwacht Änderungen am ModelNutzt Prototyping für Hierarchie
MV*
Keine Lookups, keine Kenntniss von UmgebungReduktion von Boilerplate-CodeTestbarkeit & Wiederverwendbarkeit
Komplexität und Boilerplate-CodeEin globaler NamensraumServices immer als SingletonsConfig-Phase und Provider
DI & MODULE
Asynchronität in Single-Threaded-SpracheCallback-HellAdaptierte API, aber kein StandardHohes AbstraktionslevelAber auch hohe KomplexitätMächtig und elegant wenn verstanden
Voraussetzung für HTTP Kommunikation
PROMISES
AlleinstellungsmerkmalBindeglied: deklaratives UI <-> JavaScript CodeKapseln DOM-ManipulationSehr komplexe API
In 2.0: WebComponents
DIREKTIVEN
ALLTAG
Keine Struktur von JavaScript vorgegebenCode-Menge kann zum Problem werden
Feature-Orientierte StrukturCoding-RichtlinienAuf Bibliotheken achtenJSHint & Tests
PROJEKT
Debuggen im Broswer, entwickeln in der IDEWenig Unterstützung durch die IDE bei APIsDI & Code Minimierung
ng-doc oder TypeScriptng-annotate und in Zukunft Annotations
TOOLING
sehr aktives Umfeld: Grunt, Gulp, ...Sehr viele kleine einzelne ToolsKompliziertes Setup für mehr als Bespiel-Appkein High-Level-Build-System à la Maven
Yoeman Generatorenfabs
BUILD-SYSTEM
Optimierungen in 1.2 und 1.3Object.observe in 2.0
SpeicherverbrauchJavaScript Code optimierenDynamisches Laden von Code
DI und Services verstehenCode in Services auslagernCode möglichst selten ausführen
PERFORMANCE
Dirty-Check für DataBindingLimit: ~2000 watch-expressions
One-Time-BindingsFilter in Expressions vermeidenKleine Controller, kleine ScopesNur in den Scope was in View benötigt
PERFORMANCE
AUSSTIEG
Grundlegende Konzepte verstehenJavaScript lernen
Vorteile durch Konzepte überwiegenAbstraktionsniveau++
Große Community & Support Angebote
ANGULARJSSHOULD I STAY, OR SHOULD I GO
STAY!
KnockoutBackboneEmber.JSReact...
ALTERNATIVEN
AUSBLICK
KlassenModule
ECMASCRIPT 6
Erweitert ES6 und TypeScriptKeine neue SpracheTranspilerNette Syntax aber auch alles ohne möglich
KlassenModuleOptionale TypenAnnotations
ATSCRIPT
AtScript- Annotations- Introspection
TypeScript- Types
ES6- classes- modules
ES5
import {Inject} from 'di/annotations';1
import {Electricity} from '../electricity';2
3
@Inject(Electricity)4
export class Heater {5
constructor(electricity) {6
this.electricity = electricity;7
}8
9
on() {10
console.log('Turning on the coffee heater...');11
}12
13
off() {14
console.log('Turning off the coffee heater...');15
}16
}17
Inspiriert vonAngularDartCommunity & anderen Frameworks
Design-PhaseKein konkreter Zeitplan -> 2015?Google Drive Ordner mit Design-DokumentenCode auf GitHub
ANGULARJS 2.0
Native Features von EcmaScript6Klassen und ModulePromises
Web-Standards statt eigener APIWebComponentsObject.observe
Weniger Boilerplate durch FrameworkMobile FirstFlexibles Routing...
ANGULARJS 2.0
Philipp [email protected]
www.w11k.comwww.thecodecampus.de