Upload
philipp-burgmer
View
498
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
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