Goldpartner: Veranstalter: Der Werkzeugkasten für Entwickler Ein UI-Framework in AngularJS Timo...

Goldpartner: Veranstalter:

Der Werkzeugkasten für Entwickler

Ein UI-Framework in AngularJS

Timo Korinth

Goldpartner: Veranstalter:

Timo Korinth

Lead Developer HTML5bei MAXIMAGO

Zuvor .NET / WPF Entwicklung

Goldpartner: Veranstalter:

Warum überhaupt HTML5 und AngularJS?

Was bedeutet Control-Entwicklung und was sind die Vorteile eines UI-Frameworks?

Wie könnte so eine UI-Entwicklung aussehen?

Ist das alles nur Theorie?

Goldpartner: Veranstalter:

Warum HTML5?

Goldpartner: Veranstalter:

Warum überhaupt HTML5? HTML läuft auf jedem

Betriebssystem

Goldpartner: Veranstalter:

Warum überhaupt HTML5? HTML läuft auf jedem Betriebssystem Rollout sehr leicht

Goldpartner: Veranstalter:

Warum überhaupt HTML5? HTML läuft auf jedem Betriebssystem Rollout sehr leicht HTML läuft auf allen Geräten

Goldpartner: Veranstalter:

Warum überhaupt HTML5? HTML läuft auf jedem Betriebssystem Rollout sehr leicht HTML läuft auf allen Geräten

HTMLIst hip

Goldpartner: Veranstalter:

Warum AngularJS?

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding

Kein UI mehr im Code oder per jQuery zusammenbauen

<div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1></div>

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding MV* (Model-View-Whatever)

Saubere Trennung von UI und Logik

JS UI

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding MV* Directives

Einfache Erstellung und Kapselung von eigenen Controls

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding MV* Directives Application framework

Vollwertige Architektur inkl. Services, Dependency Injection, Routing, View Composition …

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding MV* Directives Application framework Support / Community

Sehr gute Dokumentation, Unterstützung, Verbreitung

Quelle: Google Trends

Goldpartner: Veranstalter:

Warum AngularJS? Data Binding MV* Directives Application framework Support / Community

Sehr gute Dokumentation, Unterstützung, Verbreitung

Quelle: campus.codeschool.com

Goldpartner: Veranstalter:

So oder so … Was bedeutet Control-Entwicklung und Was sind die Vorteile eines UI-

Frameworks?

Goldpartner: Veranstalter:

UI-Framework

Goldpartner: Veranstalter:

Dazu erst mal ein paar typische Probleme:

Goldpartner: Veranstalter:

Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung

Umgesetztes UI stimmt nicht mit den Design-Vorgaben überein

vs.

Goldpartner: Veranstalter:

Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI

Abstände, Größen, Farben etc. unterscheiden sich von View zu View

vs.

Goldpartner: Veranstalter:

Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI Entwicklung ist langsam

Das Rad muss jedes Mal neu erfunden werden und die Entwickler können sich nicht alleine auf die Business Logik konzentrieren

Goldpartner: Veranstalter:

Dazu erst mal ein paar typische Probleme: Design vs. Entwicklung Inkonsistenzen im UI Entwicklung ist langsam Themebarkeit meist schwierig

Entwicklung und Austausch eines neuen Look & Feel meist sehr aufwendig

Goldpartner: Veranstalter:

Wie können solche Probleme vermieden werden?

Goldpartner: Veranstalter:

Wie können solche Probleme vermieden werden? Controls kapseln Design und

VerhaltenInkl. Farben, Abstände, Größen, Zustände

Normal Mouse Over

Goldpartner: Veranstalter:

Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout

Layout Container als Fundament einer View

Application Container Master-Detail Container

Goldpartner: Veranstalter:

Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout Controls als Bausteine der

AnwendungViews werden durch Controls „konfiguriert“

Goldpartner: Veranstalter:

Wie können solche Probleme vermieden werden? Controls kapseln Design und Verhalten Controls kapseln Layout Controls als Bausteine der Anwendung Control-Design einfach

austauschbarTrennung von Control-Aufbau und Design-Parametern

Goldpartner: Veranstalter:

Kategorien

Goldpartner: Veranstalter:

Control Kategorisierung Primitives

z.B. Image, Label, Progress Bar

LABEL

Goldpartner: Veranstalter:

Control Kategorisierung Primitives Input

z.B. Textbox, Combobox, Slider

Goldpartner: Veranstalter:

Control Kategorisierung Primitives Input Interactive

z.B. Button, Toggle Button, Thumb

Goldpartner: Veranstalter:

Control Kategorisierung Primitives Input Interactive Items

z.B. Listbox, Tab Control, Data Grid

Goldpartner: Veranstalter:

Control Kategorisierung Primitives Input Interactive Items Layout

z.B. Scroll Viewer, Group Box, Master-Detail

Goldpartner: Veranstalter:

Controls in HTML5

Goldpartner: Veranstalter:

Application framework Data Binding MV* Directives (Custom Controls)

Goldpartner: Veranstalter:

Dynamische Stylesheet Sprache Erweitert CSS um Variablen,

Funktionen, Operationen Kompiliert CSS

Goldpartner: Veranstalter:

Variables

@NiceBlue: #5B83AD;

color: @NiceBlue;

Goldpartner: Veranstalter:

Mixins.bordered {

border-top: dotted 1px black; border-bottom: solid 2px black;

}

#menu a { color: #111; .bordered;

}

Goldpartner: Veranstalter:

Funktionen Operationen Namespaces …

Goldpartner: Veranstalter:

Control Aufbau

Goldpartner: Veranstalter:

Logik JS

Goldpartner: Veranstalter:

Control Logik Definition von Eigenschaften Definition von Zuständen Definition von Events Logik zur Steuerung

Goldpartner: Veranstalter:

AngularJS Control Logik Control Definition

Definition von Eigenschaften

app.directive('extButton', function () { ... }

scope: { content: '@', // string property clicked: '&', // function propertyisDisabled: '=' // object property

}

Goldpartner: Veranstalter:

Logik

Template HTML

Goldpartner: Veranstalter:

Control Template Definition der Bausteine eines Controls Definition der visuellen Zustände

NormalMouse OverPressedSelected

Rahmenelemente

Goldpartner: Veranstalter:

HTML Control Template<button class="extButton{{stylecontext}} master"

data-ng-class="{'disabled': isDisabled}" type="button" data-ng-disabled="isDisabled" data-ng-click="clicked()" data-tabindex="0">

<span class="slave"> <span>{{content}}</span> <span data-ng-transclude></span>

</span> </button>

Goldpartner: Veranstalter:

Angular Parser

<button class="extButton master disabled" data-ng-class="{'disabled': isDisabled}" type="button" data-ng-disabled="isDisabled" data-ng-click="clicked()" data-tabindex="0">

<span class="slave"> <span>Das ist ein Inhalt</span> <span data-ng-transclude></span>

</span> </button>

<ext-button clicked="clicked()" />

Goldpartner: Veranstalter:

Logik

Template

Style Less / CSS

Goldpartner: Veranstalter:

Style Setzen von Eigenschaften Beeinflusst das Control Template

Normal Background ColorMouse Over Background ColorPressed Background ColorSelected Background Color

Goldpartner: Veranstalter:

Less / CSS Style&.master {

margin: 4px; font-size: 12pt; .borderRadius(0); border-color: black; border-width: 1px; border-style: solid;

Goldpartner: Veranstalter:

Trennung von Control-Aufbau und Design-Parametern

Goldpartner: Veranstalter:

Logik

Template

LessDesign Parameter

Goldpartner: Veranstalter:

Design Parameter Definition von Farben, Größen,

Abständen … Beeinflusst das Control Template Einheitliche Namensgebung Austauschbar für Bereiche in der

Anwendung

Goldpartner: Veranstalter:

Less Design Parameter@NormalInputBackground: WhiteSmoke; @NormalInputForeground: #666666;

@MouseOverInputBackground: #E2E2E2; @MouseOverInputForeground: #666666;

&.master { margin: @MainInteractionMargin; font-size: @MainInteractionFontSize; .borderRadius(@InteractionOuterCornerRadius); border-color: @OuterEngraveInteractionBorder; border-width: @InteractionOuterBorderThickness; border-style: @InteractionOuterBorderStyle;

Goldpartner: Veranstalter:

Logik

Template

Style

Design Parameter Design ParameterDesign Parameter

Goldpartner: Veranstalter:

Das selbe Control mit verschiedenen Design Parametern für andere Bereiche

Goldpartner: Veranstalter:

DEMO

Goldpartner: Veranstalter:

FRAGEN?

Goldpartner: Veranstalter:

Vielen Dank!Timo Korinth

Ich freue mich auf Ihr Feedback!