MEAN SCS in der Cloud

Das Interesse an Microservice Architekturen scheint ungebrochen. Eine Sonderform sind die sogenannten Self Contained Systems (SCS), als vollumfängliche Microservice Variante (Microservice mit UI). Im Zuge eines Kundenprojektes hatten wir die Chance, eine Portallösung zu entwickeln, mit deren Hilfe Self Contained Systems auf einfache Art und Weise integriert werden sollen.

Spannende Aspekte waren dabei der MEAN Stack (MongoDB, Express, Angular, NodeJS) und Microsoft Azure als Cloudplattform.

Weiterlesen

Interaktive SVG mit AngularJS – Teil 2

Bei der Entwicklung von mobilen Web-Anwendungen mit Responsive Design bieten SVG eine praktikable Lösung zur Realisierung flexibler Bilder (flexible images).
AngularJS ermöglicht seinerseits, komplexe UI-Logik in individuellen HTML-Direktiven zu kapseln, was eine saubere und wartbare Modularisierung ermöglicht.
Die Kombination dieser Technologien stellt eine gute Basis für interaktive Steuerungs- und Status-Elemente dar. Sie ist sowohl dazu geeignet, hochgradig komplexe Spezial-Bedienelemente zu erstellen, als auch einfachere Anwendungsfälle in generischer Weise zu behandeln.

Teil 1 dieses Artikels untersucht verschiedene Methoden, SVG als flexible Bilder in browser-übergreifender Weise zu verwenden.

Teil 2 beschreibt die Verwendung von AngularJS zur Steuerung von SVG-Bildern, um individuelle Kontroll- und Status-Elemente zu realisieren.
Weiterlesen

Interaktive SVG mit AngularJS – Teil 1

Bei der Entwicklung von mobilen Web-Anwendungen mit Responsive Design stellen flexible Bilder (flexible images) ein besonderes Problem dar.
SVG bieten eine gangbare Lösung: Sie sind deutlich kompakter als Bitmaps vergleichbarer Größe, und können über ihre DOM-API gesteuert werden.
AngularJS ist wiederum gut dafür geeignet, die Logik komplexer UI-Elemente in individuellen HTML-Direktiven zu kapseln.
Die Kombination der beiden erscheint attraktiv, allerdings gilt es dabei diverse Stolpersteine zu vermeiden.

Teil 1 dieses Artikels untersucht verschiedene Methoden, SVG als flexible Bilder in browser-übergreifender Weise zu verwenden.

Teil 2 beschreibt die Verwendung von AngularJS zur Steuerung von SVG-Bildern, um individuelle Kontroll- und Status-Elemente zu realisieren.

Weiterlesen

Wartbare Rich Web Applications mit AngularJS – Teil 2

Im letzten Artikel haben wir anhand einer Demo-Anwendung veranschaulicht, wie sich mit AngularJS auf einfache Weise gut wartbare Rich Web Applications erstellen lassen. Die wichtigsten Konzepte von AngularJS wurden vorgestellt: Die Umsetzung des Model-View-Controller-Patterns, die Erweiterung von HTML durch Directives und das Routing zur Navigation innerhalb der Anwendung.

Dieser Artikel erläutert die Einbindung von AngularJS in einen Maven-basierten Build-Prozess und stellt vor, wie sich automatisierte Unit-Tests und Ende-zu-Ende-Tests für AngularJS-Anwendungen erstellen lassen.

Weiterlesen

Wartbare Rich Web Applications mit AngularJS – Teil 1

Rich Web Applications unterscheiden sich gegenüber Thin Web Applications im höheren Grad der Funktionalität und Komplexität, die klientenseitig statt serverseitig implementiert werden. Während bei typischen Thin-Client-Architekturen das User Interface pro Seite serverseitig generiert wird, sind Rich Clients eigenständige Anwendungen, die im Browser ausgeführt werden. Damit sind benutzerfreundlichere, performantere und offlinefähige Oberflächen möglich, die im Funktionsumfang mit Desktop-Anwendungen vergleichbar sind. Diese Eigenschaften, insbesondere Offlinefähigkeit, sind speziell auch für mobil nutzbare Anwendungen bedeutend.

HTML5 hat sich hierfür mittlerweile als Alternative zu Lösungen wie Flash, Java Applets und Silverlight etabliert und bietet gegenüber proprietären Produkten einen offenen plattformunabhängigen Technologiestandard. HTML und CSS beschreiben hierbei die statische Struktur und das Design der Oberfläche, während die klientenseitige Dynamik mittels neuer HTML5-APIs und JavaScript implementiert wird.

Die Entwicklung von Rich Web Clients mittels HTML und JavaScript wird jedoch durch Wartbarkeitsprobleme erschwert, insbesondere deshalb, weil die Kombination HTML und JavaScript keine Möglichkeit vorsieht, den Client sauber zu modularisieren und zu testen. AngularJS versteht sich als HTML-Erweiterung, die sich dieser Problematik annimmt und verspricht, die Entwicklung wartbarer JavaScript-/HTML-basierter Rich Web Applications zu ermöglichen.

In dieser Artikelserie stellen wir das JavaScript-Framework AngularJS vor. Dieser erster Artikel erläutert die grundlegenden Konzepte wie die Umsetzung des Model-View-Controller-Patterns, die Erweiterung von HTML durch sogenannte Directives und das Routing. Im zweiten Artikel wird die Integration von Unit- und Ende-zu-Ende-Tests sowie die Einbindung dieser in einen Maven-Build-Prozess gezeigt.
Weiterlesen