Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03486.jsonl.gz/2974

Mit der Bausteinsicht kann ein Softwaresystem mit dem Top-Down oder Bottom-Up Ansatz analysiert werden. Ausgehend vom Systemkontext kann das zu untersuchtende System in die relevanten Bausteine unterteilt werden. Die einzelnen Bausteine können wiederum unterteilt werden. So lässt sich das gesamte System beliebig granular bzw. aus den unterschiedlichsten Blickwinkeln betrachten. Dieser Artikel untersucht die Bausteinsicht von Angular 2 ausgehend vom Systemkontext. Dabei wurden die Bausteine von der ersten Ebene ab dem Systemkontext von Angular 2 untersucht.
Bausteinsicht von Angular 2
Als Bausteine wurden die einzelnen Packete im github-Repository von Angular 2 identifiziert. Die folgende Grafik zeigt die entsprechenden Bausteine.
Die Abhängigkeiten unter den Bausteinen wurden untersucht und entsprechend visualisiert. Die folgende Grafik zeigt die Zusammenhänge der einzelnen Bausteine.
Die folgenden Unterkapiteln beschreiben die einzelnen Bausteine von Angular 2. Falls der Name des entsprechenden Bausteins keinen klaren Hinweis auf die Funktionalität bzw. dessen Aufgabe gibt (wie z.B. Facade, Core oder Common), wurden die wichtigsten Funktionen analysiert und dokumentiert.
Facade
Der Baustein bietet für verschiedenste Javascript-Konzepte und externe Abhängigkeiten entsprechende Facaden an. Sämtliche Bausteine von Angular 2 sind vom Facade-Baustein abhängig. Ein Auszug aus Abstraktionen, die der Facaden-Baustein von Angular 2 bietet:
- Wrapper-Objekte und Hilfsfunktionen für Javascript-Objekte und Sprachkonstrukte wie Math, Date, Timer, NaN und Typenprüfkonstrukte wie zB. isInteger, etc.
- Event-Emitter, über welchen Broadcast Events von Angular Komponenten und Direktiven gefeuert und abonniert werden können.
- Abstraktion für Window-Properties wie z.B. window.document, window.location, etc.
- Collection-Objekte und Funktionalitäten wie z.B. das Anbieten von spezifischen Maps und Sets (wie z.B. den List-, Map- oder String-Wrapper).
- Modellierung von Exceptions und dessen Behandlung sowie entsprechende Protokollierung.
- Internationalisierungsaspekte, wie z.B. die Formatierung von Nummer und Datum.
Core
Der Core-Baustein enthält alle zentralen Funktionalitäten von Angular 2. Core ist abhängig vom Angular Facaden Baustein. Anbei die wichtigsten Funktionalitäten:
- Change Detection Mechanismus
- Erweiterte Debug-Funktionalitäten
- Dependency Injection Mechanismus
- Bereitstellen der sogn. Lifecycle Hooks, welche den Lebenszyklus einer Angular Komponente abbilden.
- Pipes (früher in AngularJS waren dies Filter)
- Anbindung ans Web Tracing Framework (WTF) von Google
- Reflection-Funktionalitäten
- Unterstützung für E2E-Tests um Test-Hooks auszulösen.
- Decorator-Interface, um Klassen und Funktionen in einer Angular 2 Anwendung zu dekorieren.
- Schnittstelle zu zone.js
Common
Der Common-Baustein verwendet, wie alle anderen weiteren Bausteine, den Facaden- und Core-Baustein. Common bietet folgende Funktionalitäten an:
- Die Angular 2 Kern-Direktiven, wie ng-class, ng-for, ng-if, ng-style, ng-switch.
- Der Form-Builder (Tutorial), welcher es ermöglicht Formulare in den entsprechenden Komponenten zu deklarieren.
- Diverse unterstützende Direktiven für Formulare
- Diverse Pipe-Implementationen wie z.B. die Async-, Date– und die Slice-Pipe.
Testing
Der Testing-Baustein enthält diverse unterstützende Mechnismen für das automatische Testing von Angular 2 Anwendungen sowie für das Testing des Frameworks selbst, wie z.B.:
- Wie unterstützende Testing-Funktionaliäten für den Selenium-Webdriver
- Fake-Implementationen, wie z.B. für eine Async-Zone oder den Injector
- Angular spezifische Matchers für Jasmine-Tests
- Unit-Testing Library, welche Jasmine und die angebotenen Test-Implementationen verwendet.
Router
Der Router ist bei Angular 2 noch nicht fertiggestellt. Er bietet dem Benutzer die ganzen Routing-Mechnismen, um URL-Konzepte auf entsprechende Angular-Komponenten abzubilden.
Web Workers
Angular 2 bietet den nativen Support um Anwendungsteile in Web Workers laufen zu lassen. Dieser Baustein ermöglicht die Verwendung von Web Workers in Angular 2 Anwendungen. Dieses Dokument beschreibt wie man Web Worker kompatible Angular 2 Komponenten baut.
HTTP
Dieser Baustein ermöglicht die Kommuinikation von Angular Komponenten zu Backend-Systemen. Wichtig ist hier, dass mit Observables von RxJS gearbeitet wird und nicht direkt mit Promises. Zusätzlich bietet der Baustein auch fürs Testing diverse Mocks für Backends an.
Platform
Der Platform-Baustein bietet unterschiedliche Funktionalitäten, Workarounds und Abstraktionen im Umgang mit dem Browser (= Platform).
Animate
Der Animation-Teil ist bei Angular 2 noch in Bearbeitung. Das Ziel dieses Bausteins ist es, Animationen für Desktop- und Mobile Anwendungen in einer einfachen Art- und Weise abzubilden und in der Anwendung entsprechend zu verwenden.
Compiler
Der Compiler-Baustein kümmert sich um die Konvertierung der spezifizierten Templates in Angular-Komponenten.
Upgrade
Mit dem Upgrade-Baustein will Angular 2 die Möglichkeit bieten, AngularJS und Angular 2 nebeneinander laufen zu lassen und so einen weichen Übergang von AngularJS nach Angular 2 zu ermöglichen. Die Verwendung dieses Upgrade-Adapters hier hier beschrieben.
Feedback
Falls Du Fragen, Unklarheiten oder Ergänzungen zu diesem Blog-Post hast, nutze dazu einfach die Feedback-Funktion. Vielen Dank!
Nächster Artikel
Der nächste Blog-Post wird die grundlegenden Architekturentscheide von Angular 2 beschreiben.