Thomas Mahringer Selbstständig

Unsere serverseitige App wird einerseits das Web-API zur Verfügung stellen und andererseits die AngularApplikation ausliefern.

Application Insights lässt sich – im Prinzip – einfach für Webapplikationen aktivieren. Einige Herausforderungen und Fallen sind dabei allerdings zu berücksichtigen, gerade wenn es um die End-to-End-Sicht bei Single-Page-Applikationen geht.

Im vorigen Teil unserer Artikelserie ging es vor allem um die Notwendigkeit von Application Performance Management aus Sicht der Architekten, DevOps und BizDevOps. In diesem Teil wird es konkreter: Anhand einer Angular-Single-Page-App stellen wir mit Application Insights die End-to-End-Sicht her und ergründen, welche Benutzeraktion (Buttonklick, Seitenaufruf usw.) wie lange dauert und welche Kaskade von Abhängigkeiten („Dependencies“) sie auslöst: Ajax Requests, Serviceaufrufe, Datenbankstatements usw.

Artikelserie

  • Teil 1: APM Grundlagen mit Application Insights
  • Teil 2: Application Insights hands-on: Installation und Pitfalls, AI im ALM integrieren
  • Teil 3: Eine Einführung in Antipatterns und wie man sie mit AI frühzeitig erkennt

Das Ziel vor Augen

Als Beispiel für eine Single-Page-App verwenden wir das Angular „Heroes“ Tutorial. Die Applikation besteht aus vier Hauptkomponenten: der Dashboard-Komponente (Abb. 1), der Suchkomponente (Abb. 1), der Heroes-Komponente (Abb. 2) und einem Router.

Abb. 1: Das Angular „Heroes“ Tutorial, Dashboard-Komponente und Suchkomponente

Abb. 1: Das Angular „Heroes“ Tutorial, Dashboard-Komponente und Suchkomponente

Abb. 2: Das Angular „Heroes“ Tutorial, Heroes-List-Komponente

Abb. 2: Das Angular „Heroes“ Tutorial, Heroes-List-Komponente

Auch wenn das Beispiel keinen UX-Preis gewinnen würde, hat es dennoch viele Komponenten, um AI in einer Single-Page-Applikation auszuprobieren: clientseitige Komponenten und Logik, Routing und asynchrone Serviceaufrufe. Wir werden das Tutorial im Laufe des Artikels schrittweise mit AI-Informationen anreichern. Für die Serverseite verwenden wir .NET 4.6 und Web-API sowie eine Minimalausprägung von MVC 5, um unsere Angular-App über den gleichen Applikations-URL wie die REST-Services bereitzustellen. Zusammengefasst verwenden wir folgende Bausteine und Tools für unsere App:

  • Server
    • .NET 4.6, MVC 5 und Web-API
    • VS 2017 zum Erstellen des .NET Web API und der AI-Ressource
    • AI SDK 2.3
    • Microsoft OWIN zum Ausliefern der statischen Assets (der App-Bundles unserer Angular-App)
    • SQL Azure
  • Client
    • Aktuelle Angular-Version und das Angular-Commandline-Interface (CLI) zum Erstellen einer paketierten App (App-Bundles)
    • npm zum Bauen und lokalen Deployen unserer Applikation
    • Entwicklungswebserver der Angular-CLI (ng serve) zum schnellen, lokalen Testen
  • Azure für das Deployment
    • Azure App Services
    • Application Insights

Und .NET Core? Wir hätten das Beispiel gerne mit .NET Core umgesetzt, es wird aber leider von AI noch nicht in vollem Umfang unterstützt.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 8.17 - "Auf Nummer sicher"

Alle Infos zum Heft
579804760Ein Einblick in Application Insights
X
- Gib Deinen Standort ein -
- or -