Component Based UI mit Angular

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

gw@co-it.eu