Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

332 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
  • Als Erste(r) kommentieren

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

×