Eine schlanke Developer Journey dank Azure Static Web Apps

 Autor: Yu Li

Viele Unternehmen investieren massiv in die Verbesserung ihrer digitalen Kundenerlebnisse. Versicherer und Banken zum Beispiel setzen auf Frontend-Applikationen, um die Neukundengewinnung und das Beziehungsmanagement über digitale Kanäle zu verbessern. Die IT-Führungskräfte dieser Unternehmen möchten solche Frontend-Applikationen schneller liefern. Azure bietet verschiedene Produkte, um Frontend-Applikationen zu betreiben. Mehr zu den verschiedenen Produkten findest Du hier im Blog von Weili Gao. Im folgenden Blog erkläre ich, wie und warum Azure Static Web Apps das Delivery von Frontend-Applikationen beschleunigen kann.

Warum Frontend Apps unverzichtbar sind

Frontend-Applikationen spielen eine zentrale Rolle für das digitale Kundenerlebnis und zwar aus folgenden drei Gründen.

1. Frontend Apps sind einer der wichtigsten Kanäle für den Zugang zur jungen Kundengeneration.
2. Frontend Apps sind entscheidende Touchpoints mit Kunden. Wertvolle Kundeninteraktion findet dort statt und die Customer Experience wird massgebend geprägt.
3. Frontend Apps sind der beste Skalierungsfaktor für ein Unternehmen. So lassen sich Kosten der Neukundenakquise und Beziehungsmanagement dank digitaler Apps skalieren, je mehr Kundeninteratkion über eine Frontend App geschieht, desto günstiger wird sie.

Schauen wir uns eine klassische Frontend Developer Journey an, sehen wir schnell, dass diese sehr tief gehen und damit mehr Zeit in Anspruch nehmen kann. Die Abbildung 1 zeigt die Verantwortlichkeiten und Aufgaben, die ein Frontend-Entwickler direkt oder indirekt trägt. Die Verantwortlichkeiten und Aufgaben sind nach den Phasen Development Time, Deployment Time und Run Time gegliedert. Nachfolgend erläutere ich beispielhaft einige der wichtigsten Aufgaben in diesen Phasen.

• Developer Onboarding: Die Entwickler von Frontend Apps sollen möglichst schnell und mit geringem Aufwand Zugriff auf die Entwicklungs- und Testumgebung sowie die Entwickler-Tools erhalten.
• CI/CD: Frontend-Entwickler sollen dabei unterstützt werden, CI/CD-Pipelines zu entwickeln, damit der Frontend-Code erstellt und in der Zielumgebung bereitgestellt werden kann. 
• Web Security: Die Frontend-Entwickler in modernen DevOps Teams sind zusammen mit dem Architekten für die Sicherheit der Frontend-Anwendungen verantwortlich. Es muss sichergestellt werden, dass die Frontend-Anwendungen gegen Web-Angriffe wie SQL-Injection, Cross-Site-Scripting usw. geschützt werden können.

Azure Static Web Apps sind aus meiner Sicht ein PaaS-Angebot von Azure, mit dem die Tätigkeiten im Bereich Frontend App-Entwicklung – insbesondere Development Time, Deployment Time und Run Time – vereinfacht und beschleunigt werden können. Das Produkt aus dem Hause Microsoft verbessert die Frontend App Developer Journey, indem es die Fertigungstiefe reduziert und die Verantwortlichkeiten minimiert (siehe Abbildung 2).

9 Funktionen von Azure, die Deine Developer Journey vereinfachen

• Developer Onboarding: Wenn man Azure Static Web Apps in Kombination mit Github Codespaces verwendet, bekomme ich als Frontend-Entwickler ein komplett cloud- und browserbasiertes IDE (Entwicklertools). Dieses IDE braucht keine Installation und hat deshalb keine typischen Hindernisse, wie beispielsweise die Notwendigkeit von Admin-Rechten zur Installation von Software. Das ist vor allem in einem regulierten Umfeld von grossem Vorteil. Obwohl die IDE auf der Cloud läuft, kann ich aufgrund von Githubs Governance Features trotzdem global die Governance von allen IDEs regulieren. In Github Codespaces ist der Visual Studio Code vorinstalliert. Durch die Visual Studio Code Extension für Azure Static Web Apps kann ich sehr schnell die nötigen Entwicklungstools lokal bereitstellen.
• Frontend-Initialisierung: Microsoft bereitet sich auf Template-Projekte von populären Frameworks vor und ich als Entwickler kann per Knopfdruck neue Projekte generieren. Azure Static Web Apps abstrahiert die unterschiedlichen FrontendFrameworks und bietet ein einheitliches Interface, um Projekte zu managen. Beispielsweise kennt Azure Static Web Apps die heterogene Konfiguration von verschiedenen Frameworks und erkennt, wo der Pfad zu Build und der Pfad zu Source Code ist.
• Frontend-Backend Integration: Azure Static Web Apps kann auch die Frontend mit unterschiedlichen Backend Services wie Azure API Management, Azure App Service verlinken. Azure Static Web App stellt auch sicher, dass die Frontend App mit dem Backend Service sicher angebunden ist. Während des Verlinkungsprozesses zwischen Azure Static Web Apps und Azure API Management wird eine Policy hinzugefügt, sodass das Token von Azure Static Web Apps überprüft werden kann.
• Pull Request Review: Wenn Azure Static Web Apps in Kombination mit GitHub verwendet wird, erhalte ich als Frontend-Entwickler nach dem Öffnen eines PR eine temporäre URL. Die URL verweist auf die bereitgestellte Webanwendung mit der Pull Request-Version. Wenn ich diesen PR überprüfen möchte, kann ich einfach auf diese URL klicken und die Implementierung selbst in einer Live-Umgebung überprüfen.
• CI/CD: Azure Static Web Apps können die Github Actions automatisch generieren, damit der Frontend Code in Azure Static Web Apps deployed werden kann. Hier können die Backend APIs in unterschiedlichen Azure API Hosting Services wie Azure App Service oder Azure Function deployed werden.
• Custom Domain: Ein professioneller Domain-Name ist für die digitale Präsenz wichtig. Ein Domain-Name wie ipt.ch ist viel professioneller als ipt.azurewebsites.net. Dank der nativen Integration mit Azure Front Door ist es sehr einfach, eine Custom Domain zu konfigurieren und sie im Internet über HTTPS verfügbar zu machen. Das Ganze funktioniert, ohne dass man sich Gedanken über die Zertifikatsverwaltung machen muss. Diese wird komplett von Azure verwaltet.
• AuthN/AuthZ: Azure Static Web Apps lässt sich mit gängigen IdPs wie Azure B2C, Google usw. integrieren, um Frontend Apps mit der Kundenidentität zu schützen. Mit einer einfachen Konfiguration kann man die Berechtigung in den Apps regeln (z. B. kann der Administrator auf Statistiken zugreifen, während die Kunden nur auf das Konto zugreifen).
• Web Security: WAF spielt eine wichtige Rolle bei der Web-Sicherheit. WAF sichert den Web Traffic gegen Angriffe wie SQL Injection, Cross-Site Scripting. Dank der nativen Integration mit Azure Front Door und WAF kann der Web Traffic geschützt werden.
• Web Performance: Damit die Benutzer das beste Frontend-Erlebnis haben und die Website schnell von überall auf der Welt öffnen können, bietet Azure Static mit dem Feature Enterprise Grade ein integriertes CDN. Die Ergebnisse für dieselben Abfragen können auf Azure Static Web App zwischengespeichert werden. Dies beschleunigt die Website erheblich.

Fazit

Dank modernen Cloud-native-Produkten wie Azure Static Web Apps können Entwickler:innen digitale Kanäle mit Frontend-Applikationen verbessern und das digitale Kundenerlebnis erhöhen. Aus Sicht von Unternehmen und Entwickler:innen können diese Frontend-Applikationen auch viel schneller und einfacher gebaut werden, da die Frontend Developer Journey sehr schlank gehalten werden kann. Mit neun Funktionen hilft Azure Static Web Apps den Entwickler:innen, ihre Arbeit leichter und effizienter zu machen: Die Fertigungstiefe wird deutlich reduziert und Verantwortlichkeiten und gewisse Aufgaben werden gänzlich von Azure übernommen. Damit können Unternehmen ihre wertvollen Entwicklungsressourcen minimal in nicht-differenzierende und maximal in differenzierende Bereiche investieren.