Transcript span - Timo Korinth

Der Werkzeugkasten für Entwickler
Ein UI-Framework in
AngularJS
Timo Korinth
Goldpartner:
Veranstalter:
 Timo Korinth
 Lead Developer HTML5
bei MAXIMAGO
 Zuvor .NET / WPF
Entwicklung
Goldpartner:
Veranstalter:
 Warum überhaupt HTML5 und AngularJS?
 Was bedeutet Control-Entwicklung und
was sind die Vorteile eines UIFrameworks?
 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
HTML
Ist 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
Goldpartner:
UI
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
Goldpartner:
Quelle: Google Trends
Veranstalter:
 Warum AngularJS?





Data Binding
MV*
Directives
Application framework
Support / Community
Sehr gute Dokumentation, Unterstützung,
Verbreitung
Goldpartner:
Quelle: campus.codeschool.com
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 DesignVorgaben ü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 Verhalten
Inkl. Farben, Abstände, Größen, Zustände
Normal
Goldpartner:
Mouse Over
Veranstalter:
 Wie können solche Probleme vermieden
werden?
 Controls kapseln Design und Verhalten
 Controls kapseln Layout
Layout Container als Fundament einer View
Application Container
Goldpartner:
Master-Detail Container
Veranstalter:
 Wie können solche Probleme vermieden
werden?
 Controls kapseln Design und Verhalten
 Controls kapseln Layout
 Controls als Bausteine der Anwendung
Views 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 austauschbar
Trennung von Control-Aufbau und DesignParametern
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
Goldpartner:
JS
Veranstalter:
 Control Logik




Definition von Eigenschaften
Definition von Zuständen
Definition von Events
Logik zur Steuerung
Goldpartner:
Veranstalter:
 AngularJS Control Logik
 Control Definition
app.directive('extButton', function () { ... }
 Definition von Eigenschaften
scope: {
content: '@',
clicked: '&',
isDisabled: '='
}
Goldpartner:
// string property
// function property
// object property
Veranstalter:
Logik
Template
Goldpartner:
HTML
Veranstalter:
 Control Template
 Definition der Bausteine eines Controls
 Definition der visuellen Zustände
Normal
Mouse Over
Pressed
Selected
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
<ext-button clicked="clicked()" />
<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>
Goldpartner:
Veranstalter:
Logik
Template
Style
Goldpartner:
Less / CSS
Veranstalter:
 Style
 Setzen von Eigenschaften
 Beeinflusst das Control Template
Normal Background Color
Mouse Over Background Color
Pressed Background Color
Selected 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 DesignParametern
Goldpartner:
Veranstalter:
Logik
Template
Design Parameter
Goldpartner:
Less
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 Parameter
Design Parameter
Goldpartner:
Veranstalter:
 Das selbe Control mit verschiedenen
Design Parametern für andere Bereiche
Goldpartner:
Veranstalter:
DEMO
Goldpartner:
Veranstalter:
FRAGEN?
Goldpartner:
Veranstalter:
Ich freue mich auf Ihr Feedback!
Vielen Dank!
Timo Korinth
Goldpartner:
Veranstalter: