Goldpartner: Veranstalter: 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 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 HTML Ist hip

Goldpartner: Veranstalter: Warum AngularJS?

Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding Kein UI mehr im Code oder per jQuery zusammenbauen Name: Hello {{yourName}}!

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 TrendsGoogle Trends

Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV*  Directives  Application framework  Support / Community Sehr gute Dokumentation, Unterstützung, Verbreitung Quelle: campus.codeschool.comcampus.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 Verhalten Inkl. Farben, Abstände, Größen, Zustände NormalMouse 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 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 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:  #5B83AD;

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 property isDisabled: '=' // object property }

Goldpartner: Veranstalter: Logik Template HTML

Goldpartner: 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"> {{content}}

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"> Das ist ein Inhalt

Goldpartner: Veranstalter: Logik Template StyleLess / CSS

Goldpartner: 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 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 : : : : #666666; &.master { font-size:

Goldpartner: Veranstalter: Logik Template Style Design 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!