Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Philipp Burgmer | WeigleWilczek

Taugt AngularJS wirklich was?Erfahrungsbericht und Ausblick

Philipp BurgmerSoftware Engineer / Consultant / TrainerFocus: Frontend, Web Technologies

WeigleWilczek GmbHburgmer@w11k.com

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 Burgmerburgmer@w11k.com

www.w11k.comwww.thecodecampus.de