Neuigkeiten von trion.
Immer gut informiert.

Artikel in der Kategorie 'web'

Lighthouse CI mit Docker 22 Jul

Geschrieben von Thomas Kruse am 22. Juli 2021
Lighthouse Logo

Lighthouse CLI

Lighthouse ist ein Feature des Chromium und Google Chrome Browsers, mit dem Webseiten auf bestimmte Merkmale hin untersucht werden können.
Wichtige Merkmale sind dabei typischerweise die Performance der Webseite oder deren SEO-Eigenschaften. Die Performance ist dabei sowohl fuer die SEO- als auch die Nutzerzufriedenheit sehr wichtig. Ebenfalls oft gefordert ist ein barrierefreier Zugang, der durch die Accessibility Metric abgebildet wird.

Manuelle Tests werden durch Entwickler - gerade unter Zeitdruck - schnell vergessen und sind auch fehleranfällig.
Lighthouse bietet daher auch einen Modus für CI Server an, um automatisiert und regelmäßig Metrikdaten zu erheben. Diese können dann auf einem Dashboard-Server gespeichert werden, so dass auch Auswertungen im Laufe der Zeit ermöglicht werden.

Der Server kann dabei lokal betrieben werden, oder der von Google bereitgestellte öffentliche Server kann verwendet werden.

Lighthouse Einzelreport
Abbildung 1. Lighthouse Beispielreport ohne zeitlichen Verlauf

Speziell zur Ausführung auf CI Servern gibt es das Paket "LHCI", kurz für Lighthouse CI. Damit wird die Integration in das Dashboard als auch die Analyse lokaler Anwendungen ermöglicht. Das erspart das Deployment auf einem Webserver und ist insbesondere für SPA Anwendungen wie Angular, Vue oder React interessant.

Lighthouse Docker Image (auch auf ARM)

Damit Lighthouse CI komfortabel in modernen Buildservern ausgeführt werden kann, empfiehlt sich die Verwendung von Containern.
Das auf DockerHub verfügbare Image trion/chromium-lighthouse stellt auf Basis von Chromium, Node.js und LHCI eine passende Umgebung sowohl für Intel als auch ARM64 Architekturen bereit.
Damit kann sowohl Lighthouse selbst als auch das LHCI ausgeführt werden.

Beispiel im CI Server

Im folgenden wird gezeigt, wie Lighthouse CI im Build durch ein Container Image bzw. Docker Container integriert werden kann.
Als Beispiel dient dabei eine Angular Anwendung, die ebenfalls im CI Server gebaut wird.

Canary Deployment mit traefik 9 Mär

Geschrieben von Thomas Kruse am 9. März 2021
traefik Proxy

In vielen Kundenprojekten ist der Wunsch zu beobachten, von klassisch betriebenen Anwendungen sofort in die Cloud oder zumindest nach Kubernetes zu migrieren. Vielleicht schwingt dabei der Wunsch mit, Zeit zu sparen, indem Zwischenschritte ausgelassen werden. Oder man ist sich sehr wohl bewußt, dass man in Gewissen Bereichen versäumt hat, Know-How aufzubauen und in Modernisierung zu investieren.

Wir empfehlen regelmäßig zumindest kleine Zwischenschritte einzuplanen, um Erfahrungen mit der Erstellung aber auch dem Design von Anwendungen für Container- und Cloudumgebungen zu sammeln. Das gilt um so mehr, wenn das Unternehmen sich nicht ganze Teams, die sich nur um Infrastruktur und Support kümmern können, leisten möchte.

Eine gute Möglichkeit zum Start stellt der Einsatz von Docker Containern ohne automatischen Orchestrator wie Kubernetes, Mesos oder Docker-Swarm dar. Dabei wählt man typischerweise eine Anwendung aus, die nicht absolut essentiell ist, und optimalerweise bereits von einem Team mit modernen Technologien und vor allem Mindset entwickelt und betreut wird.

Mit verhältnismäßig wenig Infrastruktur können dann auch bereits Patterns aus der Cloud-Welt verprobt werden und entsprechende Erfahrungen mit den notwendigen Umsystemen und Prozessen gewonnen werden. Wichtig ist dabei, dass man den Schwenk auf fertige Lösungen vornimmt, und nicht mit eigenen Mitteln Dinge nachbaut und wartet, die ein Orchestrator mitliefert.

Hat man sich für traefik als Reverseproxy und Loadbalancer entschieden, um Container verfügbar zu machen, kann man bereits von vielen Vorzügen profitieren.

Ein Kunde wünschte sich Canary-Deployments auszuprobieren, und das allein mit traefik. Wie so ein Canary oder A/B Deployment mit traefik umgesetzt werden kann, zeigt der folgende Beitrag.

Corona / Covid 19 Simulator 10 Apr

Geschrieben von Thomas Kruse am 10. April 2020
Covid 19

Die durch das neuartige Corona-Virus SARS-CoV-2 ausgelöste Krankheit COVID-19 und die durch die Pandemie veränderten Lebensumstände stellen vieles auf den Kopf. Remote-Arbeiten, Digitalisierung und potentieller struktureller Wandel sind alles Themen, die den Technologiesektor tangieren, und somit auch viele unserer Kunden.

Die ganz persönlichen Lebensumstände betrifft das bisher einzige Mittel, um mit der Bedrohung umzugehen: Social Distancing.
Oft stellt sich die Frage, ob das wirklich so viel bringt gegen das Corona Virus.

Wir haben eine kleine Anwendung erstellt, mit der sich jeder selbst ein Bild machen kann: Den Corona Virus Simulator.
Es gibt zwar bereits einige Anwendungen dieser Art, auf denen wir auch mit unseren Beispiel aufbauen wollen, doch das besondere in dieser Version: Man kann sich einen direkten Vergleich von zwei Populationen anzeigen lassen, und damit die direkten Auswirkungen verschiedener Parameter gegenüberstellen.
Wir simulieren, was in der echten Welt nicht möglich ist: Nämlich gleichzeitig den Effekt von Social Distancing und weiteren Parametern und parallel dazu zum Vergleich die Entwicklung ohne Social Distancing.

Screenshot Corona Simulator
Figure 1. Screenshot der Corona-Simulator-App

gRPC auf allen Schichten 28 Jan

Geschrieben von Thomas Kruse am 28. Januar 2020
gRPC auf allen Schichten (Thomas Kruse)

Bei der PHP Usergroup Münster stellte Thomas Kruse vor, welche Optionen gRPC für die Entwicklung und Integration von Microservices bietet.

gRPC Web und Angular 16 Jan

Geschrieben von Thomas Kruse am 16. Januar 2020
gRPC auf allen Schichten (Thomas Kruse)

Wie können moderne APIs unter Berücksichtigung von Web Anwendungen definiert und implementiert werden?
Diese Frage stellt sich vor allem bei Microservice Architekturen, wenn viele unterschiedliche Dienste miteinander integriert werden.

Als eine Option stellte Thomas Kruse bei dem Meetup "Frontend Freunde" vor, wie dies auf Basis von gRPC umgesetzt werden kann und welche Implikationen sich ergeben.

Web Accessibility - Barrierefrei mit Angular 14 Jan

Geschrieben von Thomas Kruse am 14. Januar 2020
HTML

Zum Thema Web Accessibility, also barrierefreie Anwendungen, präsentierte Karsten Sitterberg bei dem Meetup "Frontend Freunde", welche Möglichkeiten sich auch bei modernen Frontend Anwendungen mit Angular, Vue und React ergeben.

Angular SVG Animationen 6 Jan

Geschrieben von Karsten Sitterberg am 6. Januar 2020
Angular

Nachdem in diesem Beitrag zu SVG Animationen die Grundlagen von SVG Animationen erläutert wurden, geht es in diesem Beitrag darum, wie SVG Animationen mit Angular umgesetzt werden können.

Web SVG Animationen 2 Jan

Geschrieben von Karsten Sitterberg am 2. Januar 2020
Angular

Dieser zweiteilige Beitrag behandelt Animationen von SVG Komponenten im Kontext einer Angular Anwendung. Die Grundlagen von SVG Komponenten in Angular wurden in diesem Artikel erläutert, in diesem Artikel werden die Grundlagen für Animationen vermittelt.

Vorweg ein paar Worte zum Thema SVG Elementen: Ebenso wie normale HTML-Elemente können SVG-Elemente in Angular Komponenten eingebunden werden. Wenn komplexere SVG-Grafiken per Angular anzubinden sind, bietet es sich an, die Grafik als eigene Angular-Komponente auszulegen, in der die SVG-Datei als templateUrl referenziert wird. Damit müssen die einzelnen SVG-Elemente nicht in eine andere Template-Datei hineinkopiert werden. Dadurch wird es später gegebenenfalls einfacher, die SVG-Grafik zu ersetzen, etwa wenn vom Grafiker eine aktualisierte Version geliefert wird. Der geschickte Umgang mit dem Thema Binding bleibt einem anderen Beitrag vorbehalten.
Soll eine SVG-Grafik lediglich wie ein normales Bild angezeigt werden, dass heißt sie kommt ohne dynamisches Binding aus, so kann die SVG-Grafik auch einfach per <img>-Tag eingebunden werden.

Angular Architektur Training 2 Dez

Geschrieben von Thomas Kruse am 2. Dezember 2019
Angular Architektur Training

Wir begleiten Kunden bei der Einführung von Angular als Frontend-Framework und bieten dazu eine Angular Grundlagen Schulung und eine Schulung für erweiterte Aspekte im Kontext von Angular Frontends an.

Bestimmte Fragestellungen begegnen uns dabei immer wieder, da in der Regel eine bestehende Systemlandschaft existiert, und nun Angular Anwendungen in diese integriert werden sollen.

W-JAX 2019: Progressive Web Applications 7 Nov

Geschrieben von Thomas Kruse am 7. November 2019
W-JAX 2019

Progressive Web Applications als Plattform der Zukunft war das Thema des Vortrages von Karsten Sitterberg auf der W-JAX 2019 in München.

Bei dem Vortrag wurden die verschiedenen Möglichkeiten, die sich durch aktuelle HTML5 APIs wie Web-App Manifest, Service-Worker und Web-Push ergeben anhand praktischer Beispiele demonstriert.

Neben den einzelnen APIs wurde am Beispiel einer Angular Anwendung demonstriert, wie die Unterstützung auf den aktuellen mobilen und Desktop Plattformen umgesetzt ist. Bei Angular ist die Umsetzung von offline-fähigen Anwendungen dabei sehr gut bereits durch das Framework unterstützt, so dass ein Entwickler relativ einfach eine PWA umsetzen kann.

Web Anwendungen testen: Methoden und Technologien 4 Nov

Geschrieben von Thomas Kruse am 4. November 2019
PHP Magazin 01/2020

Die Testpyramide ist sicherlich jedem vertraut.
Welche Unterschiede es neben einer theoretischen Einordnung gibt, zeigt Karsten Sitterberg in seinem Artikl "Tests an die Front".

In dem Beitrag im PHP Magazin liegt der Fokus auf Test von Webanwendungen. Neben klassischen Architekturen mit serverseitig gerenderten Webeiten werden JavaScript Clients als Single Page Applications betrachtet.

Web Testing für spezielle Szenarien 28 Okt

Geschrieben von Thomas Kruse am 28. Oktober 2019
Java Magazin 12/2019

Eine Webanwendung läuft - und das ist gerade der große Benefit - nicht aussschließlich in einem Webbrowser auf einem Desktop Gerät. Mit zunehmend anspruchsvolleren Anwendungen müssen diese Rahmenbedingungen von Plattform und Displayformat bei Tests mit berücksichtigt werden.
Für Anwender zähle nämlich schon lange nicht mehr rein funktionale Gesichtspunkte, sondern auch nichtfunktionale Anforderungen wie Geschwindigkeit und eine gute Bedienbarkeit spielen eine Rolle.

In dem vierten Teil seiner Artikelserie rund um Testing von Web Anwendungen betrachtet Karsten Sitterberg nun spezielle Szenarien:
Dabei werden Fragen beantwortet, die sich um das Testen von HTML5 Anwendungen, Web-Anwendungen auf mobilen Endgräten beantwortet. Zudem wird erklärt, wie mit Devices in der Cloud getestet werden kann, wie sich eine Anwendung auf einer speziellen Plattform und dem zugehörigen Display-Format verhält.

Los geht's!

Bitte teilen Sie uns mit, wie wir Sie am besten erreichen können.