08.02.2025
Analytische Datenanalyse, komplett Opensource mit Spaßfaktor und ausreichend schnell
Intelligente Datenanalyse im Browser: Synergie aus Angular Signals, D3.js und TensorFlow.js
In der modernen Webentwicklung hat sich die Art und Weise, wie wir mit Datenströmen umgehen, grundlegend gewandelt. Durch die Einführung von Signals in Angular ist es heute möglich, hochperformante Analyse-Dashboards zu bauen, die TensorFlow.js für die KI-Berechnungen und D3.js für die Visualisierung nutzen, ohne den Overhead klassischer asynchroner Programmierung.
Angular Signals: Der reaktive Taktgeber
In dieser Architektur dienen Signals als die primäre Quelle der Wahrheit. Im Gegensatz zu älteren Ansätzen erlauben Signals eine feingranulare Verfolgung von Zustandsänderungen. Wenn TensorFlow.js ein neues Analyseergebnis liefert, wird ein Signal aktualisiert. Angular erkennt exakt, welche Teile der UI – oder welche spezifischen D3-Berechnungen – von dieser Änderung betroffen sind, und aktualisiert nur diese. Diese punktgenaue Reaktivität ist entscheidend, wenn KI-Modelle im Hintergrund tausende Berechnungen pro Sekunde durchführen. Signals eliminieren unnötige Prüfzyklen (Change Detection) und stellen sicher, dass die Brücke zwischen der mathematischen Logik der KI und der visuellen Ausgabe extrem effizient bleibt.
TensorFlow.js: Lokale Intelligenz in Echtzeit
TensorFlow.js fungiert als das analytische Gehirn direkt im Browser. Da die Bibliothek die GPU des Nutzers via WebGL oder WebGPU anspricht, können komplexe neuronale Netze ohne Server-Latenz ausgeführt werden. Innerhalb des Angular-Ökosystems fließen die Rohdaten in ein TensorFlow-Modell. Das Modell transformiert diese Daten – etwa durch eine Klassifizierung oder eine Regressionsanalyse. Das Besondere hierbei: Das Ergebnis der KI-Berechnung wird direkt in ein Angular Signal geschrieben. Sobald die KI beispielsweise einen neuen Trend erkennt, 'pulsiert' dieses Signal durch die Anwendung und stößt sofort die nächsten Schritte in der Visualisierungskette an, ohne dass der Entwickler komplexe Event-Handler schreiben muss.
D3.js: Datengetriebene Dokumente durch Signal-Trigger
D3.js übernimmt die Aufgabe, die abstrakten Tensoren der KI in greifbare Grafiken zu verwandeln. Während D3 traditionell die volle Kontrolle über das DOM übernimmt, erlaubt die Integration mit Angular Signals eine elegante Arbeitsteilung: Angular überwacht den Zustand der Daten via Signals, und ein effect()-Hook innerhalb der Komponente triggert die D3-Render-Funktionen. Wenn die KI etwa eine Anomalie in einem Datensatz identifiziert, ändert sich das entsprechende Signal. D3 reagiert sofort darauf und animiert beispielsweise einen Datenpunkt in einem Streudiagramm oder passt die Skalierung einer Achse an. Diese Kombination ermöglicht eine 'Live-Visualisierung', die sich flüssig und organisch anfühlt, da die grafische Darstellung direkt am 'Puls' der KI-Ergebnisse hängt.
Fazit: Effizienz durch moderne Reaktivität
Der Wechsel von klassischen Datenströmen hin zu einer Signal-basierten Architektur macht die Integration von KI in Angular-Anwendungen wesentlich intuitiver. Die Kombination aus der strukturellen Integrität von Angular, der Rechenpower von TensorFlow.js und der grafischen Flexibilität von D3.js schafft ein Werkzeugset, das höchsten Anforderungen an Performance und Benutzererfahrung gerecht wird. Entwickler profitieren von einem klareren Code-Design, während Endnutzer eine Analyse-Applikation erhalten, die blitzschnell auf neue Daten reagiert und komplexe Zusammenhänge dank lokaler KI-Power sofort sichtbar macht.
05.05.2023
Nun auch Svelte-Beispiel-Basket-Implemetierung
Im Repository unter Svelte Buydemo ist nun auch eine vollständige kleine Svelte-App als Warenkorb-Implementation vorzufinden, die folgende Technologien benutzt:
- TypeScript und SCSS
- Tailwind CSS für Standard-Format-Formatierungen
- REST-Call mit Live-Daten
- Svelte-Routing und Writable-Store
Ich möchte hier ein Fazit schreiben, nämlich das Svelte absolut klasse ist.
03.04.2023
React Beispiel-Implemetierung
Im Repository unter React Buydemo ist eine vollständige erweiterte kleine React-App als Warenkorb-Implementation vorzufinden, die folgende Technologien benutzt:
- TypeScript und SCSS
- REST-API mit Live-Daten und React-Modul Axios
- Redux-Store als Redux-Toolkit-Variante
Das Demo wird fortlaufend von mir aktualisiert und dient dazu, die bestmögliche Implementierung für Redux-Umgebungen mit TypeScript und Echtzeit-Daten aufzuzeigen.
02.06.2021
Akita-Demo Table Material
Das Akita-Demo stellt eine Beispiel-Implementierung für die Verwendung von Akita-Stores mit dynamischen Tabelleneigenschaften und geladenen Daten dar. Der Code ist unter dem Github-Repository Store-Demo IhrWebentwickler Github Store-Demo veröffentlicht.
Fazit: Akita ist eine Liga für sich und lässt sich durch die reine Verwendung von Services sauber und mit Clean-Code als Store-Technologie integrieren. Dabei lassen sich auch weitaus anspruchsvollere Lösungen wie automatiserte Filterung innerhalb der Store-Abfragen oder Middleware-Umgebungen realisieren. Akita bringt Spaß.
18.01.2021
Referenz-App CelightCMS veröffentlicht
In meinem Github-Repository unter Github ihrwebentwickler ist die Referenz-Anwendung CelightCMS veröffentlicht. Diese App nutzt unterschiedliche AWS-Services und ist bei AWS gehostet. Es werden damit aktuelle Frontend-Technologien mit der Basis unter Angular und AWS-Umgebungen benutzt. Dadurch konnte in Erfahrung gebracht werden, dass AWS gut mit Frontend-Umgebungen unter Angular zurechtkommt. CelightCMS nutzt neben der aktuellsten Angular-, RxJS- und Material-Version gridster als Widget-Produzent. Damit lassen sich unabhängige Fenster innerhalb der Anwendung bilden, in denen jeweilige vollständige 'Apps/ Widgets' betrieben werden und über den Benutzer im CMS verwaltet werden können.
Da ich derzeit ein kostenloses AWS-Konto nutze und die Ressourcen im Auge behalten muss, kann ich die App nicht direkt im Internet für alle zugänglich machen, wenden Sie sich bei Interesse gerne an mich, um einen Demozugang zu erhalten.
Positiver Nebeneffekt: AWS bot mir als API-Implementierung GraphQL an, dadurch ließ sich endlich einmal eine schmema-artige Umgebung schreiben.
05.01.2021
Open-Source DelightOS publiziert
Unter meinem Github-Repository IhrWebentwickler ist eine erste Version von DelightOS veröffentlicht. DelightOS ist ein 'Betriebssystem' für Webseiten (Multi-Language). Es stellt vollständige Webseiten mit der Integration von eigenentwickelten Erweiterungen zur Verfügung. Das System ist unter der Prämisse der Minimalisierung an Code und Umfang der Webseiten-Daten erstellt wurden. Es eignet sich für die schnelle Erstellung von Webseiten-Vorlagen z.B. vor einer Integration in Joomla und für Webseiten-Entwickler, die kein CMS einsetzen möchten. Als Beispiel-Implementierung ist ein Kontakt-Formular mit Captcha vorhanden.