Embed Size (px)
Citation preview
Gregor Woiwode
Front-End Engineer
Durch den JavaScript-DschungelComponent 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
KeinBusiness 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
Erhöht Code-Discoverability
https://augury.angular.io/
-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/
Codelyzer
Linting-Rules für TypeScript
Einhaltung des Style-Guidesangular.io/styleguide
Ist in -CLI integriert
IDE-Integration
DEMO
Einblicke gewinnen
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.
Gregor Woiwode
Front-End EngineerVielen DankSprechen Sie mich gern direkt an.
@GregOnNet
