Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


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:  #5B83AD;

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


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

Ähnliche Präsentationen


Google-Anzeigen