Embed Size (px)
Citation preview
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!
