HEC Blog: Technik & Methoden
Verfasst von Senay Uzuner am 03. Mai 2018

Einführung

In der heuti­gen Soft­wa­re­welt hat Angu­lar 2 zuneh­mende Popu­la­ri­tät. Um mich zu verbes­sern und in die Zukunft zu inves­tie­ren, habe ich mich entschie­den Angu­lar zu lernen. Ich werde mit euch teilen, was ich bis jetzt gelernt habe.

Angu­lar JS erschien im Jahre 2009 als JavaS­cript Webfra­me­work zur Erstel­lung von Single-Page-Anwen­dun­gen nach einem Model-View-View-Model (MVVM) Muster, welches ab 2012 zum großen Hype wurde. Es ermög­licht eine schnel­lere und einfa­chere Umset­zung von Web-Anwen­dun­gen. Tech­ni­ken wie MVVM, Two-Way-Data­bin­ding und Depen­dency Injec­tion ermög­li­chen eine bessere Test­bar­keit und Wart­bar­keit. Trotz der vielen Vorteile weist das Frame­work auch einige Nach­teile auf: Erheb­lich komplexe Stel­len im Kern sowie schlechte Skalier­bar­keit und Wart­bar­keit durch Nutzung einer nicht statisch typi­sier­ten Spra­che.

Aus diesem Grund hat das Angu­lar-Team sich entschlos­sen die Angu­lar JS 2.0 Version mit den gewon­ne­nen Erfah­run­gen komplett neu zu entwi­ckeln. Als größte Neue­rung ist die Verwen­dung der Spra­che TypeS­cript zu nennen, welche JavaS­cript ablöst.

TypeS­cript ist eine von Micro­soft entwi­ckelte Spra­che, die Klas­sen, Inter­fa­ces, Verer­bung, Module, anonyme Funk­tio­nen, Gene­rics und stati­sche Typi­sie­rung aufweist. Dieser moder­nen Sprach­kon­strukte ermög­li­chen uns, Projekte mit einer sehr guten Struk­tur aufzu­bauen und diese einfach zu erwei­tern, um damit auf die wach­sen­den Anfor­de­run­gen unse­rer Anwen­dung zu reagie­ren. Ein sehr wich­ti­ger Punkt ist die Verwend­bar­keit von Entwick­lungs­werk­zeu­gen zur Durch­füh­rung von Code-Refak­tu­rie­run­gen. Ohne stati­sche Typi­sie­rung ist das unter JavaS­cript ein sehr schwie­ri­ges Thema.

Eine weitere Neue­rung in Angu­lar 2 ist die RxJS Biblio­thek für asyn­chrone Program­mie­rung. RxJS ist eine Kombi­na­tion von Obser­ver, Opera­tor Pattern und funk­tio­na­ler Program­mie­rung, welches für asyn­chrone Program­mie­rung geeig­net ist. Somit setzt Angu­lar 2 nicht mehr auf Promi­ses, sondern auf Obser­va­bles.

Unterschiede zwischen Promises und Observables

Promi­ses und Obser­va­bles sind eine Abstrak­tion von asyn­chro­nen Aufru­fen. Promi­ses liefern uns den Zeit­punkt des Endes eines asyn­chro­nen Aufrufs oder dessen Fehl­schlag. Mit einem Promise kann nur ein Wert über­lie­fert werden. An ein Promise wird ein Call­back über­ge­ben, der aufge­ru­fen wird, wenn der asyn­chrone Aufruf been­det ist. Ein weite­rer Call­back kann für den Fall eines Fehlers über­ge­ben werden. Ein Promise folgt dem Muster promise.then(callBackSuccess).catch(callBackError).

Zusam­men­ge­fasst :

Obser­va­bles hinge­gen können mehrere Werte liefern und sind auch abbrech­bar. Ein Obser­va­ble kann wie ein Daten­strom betrach­tet werden. Eine unbe­kannte Menge an Daten kann in der Zukunft bereit stehen. Um Daten von einem Obser­va­ble zu verar­bei­ten, muss eine Anmel­dung .subscribe() erfolgen. Sollen keine Daten mehr verarbeitet werden, kann eine Abmeldung durch .unsubscribe() erfolgen. Observables können noch viel mehr, z.B. können Anfragen wiederholt werden, Daten können transformiert werden, der Datenstrom kann gefiltert werden.

Obser­va­ble.retry(2).repeat(3).map(res => res.json()).filter(res => res.length > 0).map(res => res[0].enab­led == true).subs­cribe(id => console.log(‘id added ‘ + id), error => console.log(error.message));

Zusam­men­ge­fasst :

Architektur von Angular

Die Archi­tek­tur einer Angu­lar 2 Appli­ka­tion besteht aus folgen­den Elemen­ten:

Template

Ein Template ist die Vorlage für die Darstel­lung der Seite. Durch spezi­elle Blöcke oder Anwei­sun­gen werden Inhalte einge­bun­den, auf Ereig­nisse reagiert und Kontroll­struk­tu­ren einge­bun­den. Ein simp­les Beispiel für ein Template:

<div>
UserName : {{ username }}
</div>    
Komponente

Eine Kompo­nente ist eine Control­ler-Klasse mit einem Template, die Teile der Logik einer Seite reali­siert, z.B:

@Component({
selector: 'app-welcome',
templateUrl: 'welcome.component.html',
styleUrls: ['welcome.component.scss']
})
export class WelcomeComponent { }
Databinding

Durch DataBin­ding kommu­ni­ziert die Kompo­nente mit dem Template. Dadurch können vom Benut­zer ausge­löste Ereig­nisse oder Einga­ben von der Kompo­nente verar­bei­tet werden. Die von der Kompo­nente berech­ne­ten Werte können im Template darge­stellt werden.

Modul

Ein Modul ist ein Art von Contai­ner für Kompo­nen­ten, Direk­ti­ven, Pipes und Services, die eine bestimmte gemein­same Aufgabe erfül­len müssen. Somit werden bestimmte Funk­tio­na­li­tä­ten für eine Wieder­ver­wen­dung gekap­selt.

Dependency Injection

In Angu­lar werden die Abhän­gig­kei­ten mit Depen­dency Injec­tion aufge­löst. Kompo­nen­ten, Direk­ti­ven, Services, Module sind Contai­ner Mana­ged. Abhän­gig­kei­ten werden defi­niert und während der Lauf­zeit inji­ziert. Für die Entkop­pe­lung der einzel­nen Bestand­teile und Test­bar­keit hat die Depen­dency Injec­tion sehr große Bedeu­tung.

Direktive

Direk­ti­ven sind Kompo­nente ohne Template, die in sich gekap­selt sind. Sie verän­dern entwe­der die Struk­tur des Doku­ments, das Ausse­hen oder das Verhal­ten von Elemen­ten.

Deshalb gibt es drei Arten von Direk­ti­ven:

Metadaten

Meta­da­ten sind Deko­ra­to­ren für Klas­sen, um deren Eigen­schaf­ten im System zu defi­nie­ren. Sie können mit Anno­ta­tio­nen in Java vergli­chen werden. Soll eine Klasse als Kompo­nente dekla­riert werden, werden die Meta­da­ten wie folgt ange­ge­ben.

@Component({
selector: 'app-mycomponent',
template: ..., 
... 
}) 
export class MyComponent { 
... 
}
Router

Der Angu­lar Router über­nimmt die Navi­ga­tion inner­halb der Webseite. Dabei kann der Router Para­me­ter von URLs erken­nen und weiter­ge­ben. Jedes Angu­lar-Modul kann seine eigene Navi­ga­tion zu den unter­ge­or­de­nete Seiten verwal­ten. Der Router kann Seiten bei Bedarf (lazy) oder auch beim Start der Anwen­dung (eager) laden. Er lädt die Kompo­nen­ten einer Seite in die dazu­ge­hö­ri­gen Platz­hal­ter. Als Beispiel: Bei einer Seite mit Kopf, Menu, Inhalt und Fuss­zeile müssen mindes­tens 4 Kompo­nen­ten in die dafür defi­nierte Berei­che gela­den werden. Diese Aufgabe über­nimmt der Router.

Pipe

Pipes sind Trans­for­ma­to­ren, die Daten entge­gen­neh­men und trans­for­miert wieder ausge­ben. Dabei wird der Input und der Name durch ein Pipe | getrennt.

Beispiels­weise kann ein Pipe zur Über­set­zung verwen­det werden. So könnte z.B. ‘hal­lo’ | trans­late aus einer Über­set­zungs­ta­belle ‘hel­lo’ liefern.

Service

Services sind ähnlich wie in ande­ren Program­mier­spra­chen eine Ansamm­lung von Funk­tio­na­li­tä­ten, die ein Themen­ge­biet abde­cken. So kann die Funk­tio­na­li­tät einer Kompo­nente in einem Service abstra­hiert werden. Services werden durch Depen­dency Injec­tion einge­bun­den. Sie können zwischen Kompo­nen­ten ausge­tauscht werden, um eine gemein­same Funk­tio­na­li­tät zu gewähr­leis­ten. Services können auch ohne Kompo­nen­ten exis­tie­ren, um bestimmte über­grei­fende Funk­tio­na­li­tä­ten zu bieten. Beispiels­weise könnte ein Noti­fi­ca­tionSer­vice dazu dienen, um Nach­rich­ten im System zu versen­den und zu empfan­gen, oder ein LogSer­vice, um Nach­rich­ten zu loggen.

Es gibt inzwi­schen eine neue Angu­lar Version. Angu­lar 5 wurde vor kurzem veröf­fent­licht. Es gibt etli­che Verbes­se­run­gen, neue Featu­res, Perfor­man­ce­ver­bes­se­run­gen usw., aber es hat sich an den grund­sätz­li­chen Konzep­ten nichts geän­dert. Angu­lar bleibt weiter­hin abwärts­kom­pa­ti­bel.

Ich habe versucht, mit diesem Arti­kel einen kurzen Über­blick über Angu­lar zu geben. Ich hoffe, ich konnte dadurch das Inter­esse an Angu­lar wecken.