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

Präsentation zum Thema: "Goldpartner: Veranstalter: Der Werkzeugkasten für Entwickler Ein UI-Framework in AngularJS Timo Korinth."—  Präsentation transkript:

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

2 Goldpartner: Veranstalter:  Timo Korinth  Lead Developer HTML5 bei MAXIMAGO  Zuvor.NET / WPF Entwicklung

3 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?

4 Goldpartner: Veranstalter: Warum HTML5?

5 Goldpartner: Veranstalter:  Warum überhaupt HTML5?  HTML läuft auf jedem Betriebssystem

6 Goldpartner: Veranstalter:  Warum überhaupt HTML5?  HTML läuft auf jedem Betriebssystem  Rollout sehr leicht

7 Goldpartner: Veranstalter:  Warum überhaupt HTML5?  HTML läuft auf jedem Betriebssystem  Rollout sehr leicht  HTML läuft auf allen Geräten

8 Goldpartner: Veranstalter:  Warum überhaupt HTML5?  HTML läuft auf jedem Betriebssystem  Rollout sehr leicht  HTML läuft auf allen Geräten HTML Ist hip

9 Goldpartner: Veranstalter: Warum AngularJS?

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

11 Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV* (Model-View-Whatever) Saubere Trennung von UI und Logik JS UI

12 Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV*  Directives Einfache Erstellung und Kapselung von eigenen Controls

13 Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV*  Directives  Application framework Vollwertige Architektur inkl. Services, Dependency Injection, Routing, View Composition …

14 Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV*  Directives  Application framework  Support / Community Sehr gute Dokumentation, Unterstützung, Verbreitung Quelle: Google TrendsGoogle Trends

15 Goldpartner: Veranstalter:  Warum AngularJS?  Data Binding  MV*  Directives  Application framework  Support / Community Sehr gute Dokumentation, Unterstützung, Verbreitung Quelle: campus.codeschool.comcampus.codeschool.com

16 Goldpartner: Veranstalter:  So oder so …  Was bedeutet Control-Entwicklung und  Was sind die Vorteile eines UI-Frameworks?

17 Goldpartner: Veranstalter: UI-Framework

18 Goldpartner: Veranstalter:  Dazu erst mal ein paar typische Probleme:

19 Goldpartner: Veranstalter:  Dazu erst mal ein paar typische Probleme:  Design vs. Entwicklung Umgesetztes UI stimmt nicht mit den Design- Vorgaben überein vs.

20 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.

21 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

22 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

23 Goldpartner: Veranstalter:  Wie können solche Probleme vermieden werden?

24 Goldpartner: Veranstalter:  Wie können solche Probleme vermieden werden?  Controls kapseln Design und Verhalten Inkl. Farben, Abstände, Größen, Zustände NormalMouse Over

25 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

26 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“

27 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

28 Goldpartner: Veranstalter: Kategorien

29 Goldpartner: Veranstalter:  Control Kategorisierung  Primitives z.B. Image, Label, Progress Bar LABEL

30 Goldpartner: Veranstalter:  Control Kategorisierung  Primitives  Input z.B. Textbox, Combobox, Slider

31 Goldpartner: Veranstalter:  Control Kategorisierung  Primitives  Input  Interactive z.B. Button, Toggle Button, Thumb

32 Goldpartner: Veranstalter:  Control Kategorisierung  Primitives  Input  Interactive  Items z.B. Listbox, Tab Control, Data Grid

33 Goldpartner: Veranstalter:  Control Kategorisierung  Primitives  Input  Interactive  Items  Layout z.B. Scroll Viewer, Group Box, Master-Detail

34 Goldpartner: Veranstalter: Controls in HTML5

35 Goldpartner: Veranstalter:  Application framework  Data Binding  MV*  Directives (Custom Controls)

36 Goldpartner: Veranstalter:  Dynamische Stylesheet Sprache  Erweitert CSS um Variablen, Funktionen, Operationen  Kompiliert CSS

37 Goldpartner: Veranstalter:  Variables @NiceBlue: #5B83AD; color: @NiceBlue;

38 Goldpartner: Veranstalter:  Mixins.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111;.bordered; }

39 Goldpartner: Veranstalter:  Funktionen  Operationen  Namespaces  …

40 Goldpartner: Veranstalter: Control Aufbau

41 Goldpartner: Veranstalter: Logik JS

42 Goldpartner: Veranstalter:  Control Logik  Definition von Eigenschaften  Definition von Zuständen  Definition von Events  Logik zur Steuerung

43 Goldpartner: Veranstalter:  AngularJS Control Logik  Control Definition  Definition von Eigenschaften app.directive('extButton', function () {... } scope: { content: '@',// string property clicked: '&', // function property isDisabled: '=' // object property }

44 Goldpartner: Veranstalter: Logik Template HTML

45 Goldpartner: Veranstalter:  Control Template  Definition der Bausteine eines Controls  Definition der visuellen Zustände Normal Mouse Over Pressed Selected Rahmenelemente

46 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}}

47 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

48 Goldpartner: Veranstalter: Logik Template StyleLess / CSS

49 Goldpartner: Veranstalter:  Style  Setzen von Eigenschaften  Beeinflusst das Control Template Normal Background Color Mouse Over Background Color Pressed Background Color Selected Background Color

50 Goldpartner: Veranstalter:  Less / CSS Style &.master { margin: 4px; font-size: 12pt;.borderRadius(0); border-color: black; border-width: 1px; border-style: solid;

51 Goldpartner: Veranstalter:  Trennung von Control-Aufbau und Design- Parametern

52 Goldpartner: Veranstalter: Logik Template LessDesign Parameter

53 Goldpartner: Veranstalter:  Design Parameter  Definition von Farben, Größen, Abständen …  Beeinflusst das Control Template  Einheitliche Namensgebung  Austauschbar für Bereiche in der Anwendung

54 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;

55 Goldpartner: Veranstalter: Logik Template Style Design Parameter

56 Goldpartner: Veranstalter:  Das selbe Control mit verschiedenen Design Parametern für andere Bereiche

57 Goldpartner: Veranstalter: DEMO

58 Goldpartner: Veranstalter: FRAGEN?

59 Goldpartner: Veranstalter: Vielen Dank! Timo Korinth Ich freue mich auf Ihr Feedback!