Gregor Woiwode
Front-End Engineer
Durch den JavaScript-Dschungel
Component Based UI mit Angular
Wir kämpfen uns durch den Dschungel.
SCRIPTS
TEMPLATES
STYLES
INFRASTRUKTUR
PRODUKT
Wir kämpfen uns durch den Dschungel.
SCRIPTS TEMPLATES STYLES
Wir kämpfen uns durch den Dschungel.
INFRASTRUKTUR
Unsere tägliche Nebentätigkeit
Integrieren
Adaptieren
Korrigieren
Optimieren
Kein
Business Value
Ohne Component Based UI
Keine einheitlichen APIs!
Keine Austauschbarkeit!
Keine unmittelbaren Werkzeuge!
7
„Und was nun?“
Wenn Komponenten zu uns sprechen…
Die Komponente ist die Abstraktion eines Templates.
Component Based UI
PRODUKT PRODUKT
Ereignisse für effiziente Kommunikation
PRODUKT
Components verwerten Eingangsdaten.
PRODUKT
Hallo Angular
SCRIPT
TEMPLATE STYLE
METADATEN
Was ist eine Component?
Das Blatt an unserem Baum
Einheitliche API dank Custom Elements
✔
Selector
Input
Output
✔
Austausch
Die Kapillaren
App
Module
Input
Output
EntryComponent Gallery
HTTP
FORMS
ImageService
Inject
Inject
Inject
Unser Baum
Module
Navigation
Item
Item
ImageGallery
Image
Image
Articles
Article
Article
Service
HTTP
FORMS
Router
Augury
Visualisiert Component Tree
Open Source Projekt
Erlaubt Statusmanipulation
Visualisiert Dependency Injecion Graph
E...
-CLI
Erzeugt Projektstruktur
Code-Generation
Erzeugt Code-Coverage-Report
Bietet Development-Workflow an
Stellt Test-Setup...
Codelyzer
Linting-Rules für TypeScript
Einhaltung des Style-Guides
angular.io/styleguide
Ist in -CLI integriert
IDE-Integr...
DEMO
Einblicke gewinnen
Ihr Backup
Front-End Development ist komplex.
Component Based UI macht diese Komplexität beherrschbar.
Components kommuniz...
Gregor Woiwode
Front-End EngineerVielen Dank
Sprechen Sie mich gern direkt an.
@GregOnNet
gw@co-it.eu
Nächste SlideShare
Wird geladen in …5
×

Component Based UI mit Angular

284 Aufrufe

Veröffentlicht am

Können Webanwendungen ebenso beständig wachsen, wie es ein Baum über Jahrzehnte tut? In der Natur ist das schließlich selbstverständlich. Dem Wildwuchs unzähliger Frameworks Herr zu werden, ist eine große Herausforderung. Mit Angular stellt Google eine Technologie bereit, die den JavaScript-Dschungel lichtet.

In diesem Vortrag werden Ihnen die Konzepte vorgestellt, auf die sich Angular 2 stützt. Sie bekommen einen Einblick in die Kommunikation zwischen Komponenten, dem Modularisierungskonzept und der automatischen Änderungsverfolgung. Darüber hinaus erfahren Sie, welche Produktivitätssteigerung bei der Entwicklung mit der Angular Plattform möglich sind.

Veröffentlicht in: Bildung
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
284
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Was ist nur in den letzen Jahren passiert?
    Frameworks über Frameworks, man sieht den Wald vor lauter Bäumen nicht
    Du bist so Oktober 2016
    Gregor Woiwode
    Front-End Engineer
    Autor
    10 Jähriges Jubiläum
    Machete
    Dschungel
  • Taichi
    Bezug auf Schulungen
    Es ist ein neues mindset

    Bahnerlebnis – Programmieren Sie Web? Sieht ja wie richtige Entwicklung aus.
  • Component Based UI mit Angular

    1. 1. Gregor Woiwode Front-End Engineer Durch den JavaScript-Dschungel Component Based UI mit Angular
    2. 2. Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES INFRASTRUKTUR PRODUKT
    3. 3. Wir kämpfen uns durch den Dschungel. SCRIPTS TEMPLATES STYLES
    4. 4. Wir kämpfen uns durch den Dschungel. INFRASTRUKTUR
    5. 5. Unsere tägliche Nebentätigkeit Integrieren Adaptieren Korrigieren Optimieren Kein Business Value
    6. 6. Ohne Component Based UI Keine einheitlichen APIs! Keine Austauschbarkeit! Keine unmittelbaren Werkzeuge!
    7. 7. 7 „Und was nun?“
    8. 8. Wenn Komponenten zu uns sprechen… Die Komponente ist die Abstraktion eines Templates.
    9. 9. Component Based UI PRODUKT PRODUKT
    10. 10. Ereignisse für effiziente Kommunikation PRODUKT
    11. 11. Components verwerten Eingangsdaten. PRODUKT
    12. 12. Hallo Angular
    13. 13. SCRIPT TEMPLATE STYLE METADATEN Was ist eine Component?
    14. 14. Das Blatt an unserem Baum
    15. 15. Einheitliche API dank Custom Elements ✔ Selector Input Output ✔ Austausch
    16. 16. Die Kapillaren App Module Input Output EntryComponent Gallery HTTP FORMS ImageService Inject Inject Inject
    17. 17. Unser Baum Module Navigation Item Item ImageGallery Image Image Articles Article Article Service HTTP FORMS Router
    18. 18. Augury Visualisiert Component Tree Open Source Projekt Erlaubt Statusmanipulation Visualisiert Dependency Injecion Graph Erhöht Code-Discoverability https://augury.angular.io/
    19. 19. -CLI Erzeugt Projektstruktur Code-Generation Erzeugt Code-Coverage-Report Bietet Development-Workflow an Stellt Test-Setup zur Verfügung Development Server Build-Process https://cli.angular.io/
    20. 20. Codelyzer Linting-Rules für TypeScript Einhaltung des Style-Guides angular.io/styleguide Ist in -CLI integriert IDE-Integration
    21. 21. DEMO Einblicke gewinnen
    22. 22. Ihr Backup Front-End Development ist komplex. Component Based UI macht diese Komplexität beherrschbar. Components kommunizieren via und . Apps sind in einer Baumstruktur organisiert (Component Tree). Die Demo gibt es unter github.com/GregOnNet/book-rating. , und -CLI machen das Entwickeln produktiver.
    23. 23. Gregor Woiwode Front-End EngineerVielen Dank Sprechen Sie mich gern direkt an. @GregOnNet gw@co-it.eu

    ×