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.

1. Gregor Woiwode
Front-End Engineer
Durch den JavaScript-Dschungel
Component Based UI mit Angular

2. Wir kämpfen uns durch den Dschungel.
SCRIPTS
TEMPLATES
STYLES
INFRASTRUKTUR
PRODUKT

3. Wir kämpfen uns durch den Dschungel.
SCRIPTS TEMPLATES STYLES

4. Wir kämpfen uns durch den Dschungel.
INFRASTRUKTUR

5. Unsere tägliche Nebentätigkeit
Integrieren
Adaptieren
Korrigieren
Optimieren
Kein
Business Value

6. Ohne Component Based UI
Keine einheitlichen APIs!
Keine Austauschbarkeit!
Keine unmittelbaren Werkzeuge!

7. 7
„Und was nun?“

8. Wenn Komponenten zu uns sprechen…
Die Komponente ist die Abstraktion eines Templates.

9. Component Based UI
PRODUKT PRODUKT

10. Ereignisse für effiziente Kommunikation
PRODUKT

11. Components verwerten Eingangsdaten.
PRODUKT

12. Hallo Angular

13. SCRIPT
TEMPLATE STYLE
METADATEN
Was ist eine Component?

14. Das Blatt an unserem Baum

15. Einheitliche API dank Custom Elements
✔
Selector
Input
Output
✔
Austausch

16. Die Kapillaren
App
Module
Input
Output
EntryComponent Gallery
HTTP
FORMS
ImageService
Inject
Inject
Inject

17. Unser Baum
Module
Navigation
Item
Item
ImageGallery
Image
Image
Articles
Article
Article
Service
HTTP
FORMS
Router

18. Augury
Visualisiert Component Tree
Open Source Projekt
Erlaubt Statusmanipulation
Visualisiert Dependency Injecion Graph
Erhöht Code-Discoverability
https://augury.angular.io/

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. Codelyzer
Linting-Rules für TypeScript
Einhaltung des Style-Guides
angular.io/styleguide
Ist in -CLI integriert
IDE-Integration

21. DEMO
Einblicke gewinnen

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. Gregor Woiwode
Front-End EngineerVielen Dank
Sprechen Sie mich gern direkt an.
@GregOnNet
gw@co-it.eu