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

Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 1: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Philipp Burgmer | WeigleWilczek

Taugt AngularJS wirklich was?Erfahrungsbericht und Ausblick

Page 2: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

WeigleWilczek [email protected]

ABOUT ME

Page 3: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

WeigleWilczek / W11kSoftware Design, Development & MaintenanceConsulting, Trainings & Project Kickoff

Web Applications with AngularJS

ABOUT US

Page 4: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

EinstiegAlltagAusstiegAusblick

Page 5: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

EINSTIEG

Page 6: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 7: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Objekt-Graph statt Klassen-BaumMeisten Entwickler denken in KlassenWird in AngularJS für Scopes benutzt

PROTOTYPING

Page 8: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

CoffeeScriptEcmaScript 6 + TraceurTypeScript

KlassenModuleOptionale Typen

HEUTE & MORGEN

Page 9: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Kombiniert viele Konzepte, zu ganzem FrameworkDependency InjectionDeklaratives UI / MV*Promises

Für viele Entwickler vieles davon neuErste Gehversuche leichtFundierter Einstieg schwierig / aufwändig

ANGULARJS

Page 10: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Saubere Trennung von UI und UI-LogikTestbarkeitMV* -> MVC || MVVM || ...

Scope als BindegliedÜberwacht Änderungen am ModelNutzt Prototyping für Hierarchie

MV*

Page 11: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 12: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 13: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

AlleinstellungsmerkmalBindeglied: deklaratives UI <-> JavaScript CodeKapseln DOM-ManipulationSehr komplexe API

In 2.0: WebComponents

DIREKTIVEN

Page 14: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Page 15: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Page 16: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Page 17: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Page 18: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

ALLTAG

Page 19: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Keine Struktur von JavaScript vorgegebenCode-Menge kann zum Problem werden

Feature-Orientierte StrukturCoding-RichtlinienAuf Bibliotheken achtenJSHint & Tests

PROJEKT

Page 20: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 21: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 22: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 23: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 24: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

AUSSTIEG

Page 25: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Grundlegende Konzepte verstehenJavaScript lernen

Vorteile durch Konzepte überwiegenAbstraktionsniveau++

Große Community & Support Angebote

ANGULARJSSHOULD I STAY, OR SHOULD I GO

STAY!

Page 26: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

KnockoutBackboneEmber.JSReact...

ALTERNATIVEN

Page 27: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

AUSBLICK

Page 28: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

KlassenModule

ECMASCRIPT 6

Page 29: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Erweitert ES6 und TypeScriptKeine neue SpracheTranspilerNette Syntax aber auch alles ohne möglich

KlassenModuleOptionale TypenAnnotations

ATSCRIPT

Page 30: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

AtScript- Annotations- Introspection

TypeScript- Types

ES6- classes- modules

ES5

Page 31: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

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

Page 32: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Inspiriert vonAngularDartCommunity & anderen Frameworks

Design-PhaseKein konkreter Zeitplan -> 2015?Google Drive Ordner mit Design-DokumentenCode auf GitHub

ANGULARJS 2.0

Page 33: Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Native Features von EcmaScript6Klassen und ModulePromises

Web-Standards statt eigener APIWebComponentsObject.observe

Weniger Boilerplate durch FrameworkMobile FirstFlexibles Routing...

ANGULARJS 2.0