Über den VCR.NET 4.5 Web Client

Der erste HTML5 / JavaScript Web Client des VCR.NET Recording Service setzte zur Oberflächenanbindung auf jQuery(UI) ohne ein explizites Binding Framework wie etwa AngularJS. Ich habe an dieser Stelle einiges an Erfahrung sammeln müssen – nicht zuletzt auch was JavaScript Anwendungen und deren DOM Anbindung an sich angeht. So aus einiger (zeitlicher) Entfernung betrachtet ist die Vernetzung von Anwendungs- und Präsentationslogik doch sehr viel enger, als ich mir das eigentlich gewünscht hätte.

Ziel des neuen Web Clients ist es, diese Trennung sehr viel strenger vorzunehmen. Tatsächlich glaube ich, dass der Kern der Anwendung eigentlich ohne Präsentation lauffähig ist – das wäre für einen normalen MVC* Ansatz sicher genau so. Allerdings sind sich die Präsentationsmodelle durchaus bewußt, dass hier nicht irgendeine Anwendung implementiert wird, sondern dass konkret HTML5 angezeigt werden soll. So gibt es etwa zur Anzeige einer Zeitschiene oder der Pflege einer Zahl in einem festen Bereich über einen Slider konkrete Anwendungslogik, die indirekt mit dem DOM interagiert (Positionsangaben in %, Drag&Drop Benachrichtigungen usw.), ohne allerdings zu wissen, wie das DOM dann tatsächlich erstellt und nachgeführt wird – mein schon vor längere Zeit im Kopf entstandene Arbeitstitel dafür sind NoUi (eine Logik zur Anzeige einer HTML5 Anwendung ohne an irgendeiner Stelle irgendwas mit dem DOM zu tun zu haben) und Ui View Model (ein Präsentationsmodell, das nicht nur Modelldaten à la DTO unterstützt, sondern halt auch DOM relevante Fähigkeiten besitzt). Ok, hier im ersten Anlauf sicher noch zu grob in der Umsetzung, aber schauen wir mal, ob es eine nächste Version gibt.

Tatsächlich kann man so etwas natürlich auch mit AngularJS und den verschiendensten Konzepten darin umsetzen. Mein (subjektives!) Gefühl ist aber, dass ich mich dann tatsächlich auf Angular-For-Everything-And-Everytime festlege. Daher habe ich hier mit React.Js und (mal wieder: aber nur so lernt man wirklich etwas über die Anforderungen von Abläufen) eigener Anwendungslogik inklusive einer kleinen NoUi Bibliothek angefangen. Erst hatte ich ein bißchen schlechtes Gewissen, dass Zuckerberg schimpfen kommt, weil ich (bis auf eine Ausnahme) an keiner Stelle den State der React.Js Komponenten verwende. Aber die Redux Dokumentation belehrte mich dann eines Besseren: auch deren React.Js Integration verzichtet (im Allgemeinen) auf den React.Js State und bildet diesen auf den eigenen ab und das ist wohl auch gut so – wobei es durchaus nicht wirklich immer klar ist, wo man diesen Schnitt setzen sollte (nicht bezogen auf Redux sonder ganz allgemein betrachtet)!

Vielleicht stelle ich ja in Zukunft den Web Client noch weiter auf Bibliotheken wie Redux um (nicht zuletzt weil ich mich voraussichtlich in naher Zukunft auch beruflich damit intensiver auseinandersetzen werde), aber im Moment scheint mir der aktuelle Versuch im VCR.NET 4.5 Web Client auch nicht so falsch zu sein. Ja, ich nutze letztlich zwei Frameworks: eines für die DOM Manipulation und eines für die Anwendungslogik respektive des für die Anzeige relevanten Zustands. Im Hinblick auf die Programmierung in anderen Welten (Web Dienste / Middleware / Backend / Desktop Anwendungen e.g. mit C# und .NET) fühlt sich die aktuelle Implementierung mit einer echten Objektstruktur und daraus gezielt zur Anzeige gespiegelten Teilzustände richtig an. Redux scheint da zwar viel pragmatischer und mit seinem Plain-Object-State sehr viel einfacher zu sein, aber ohne Redux praktisch eingesetzt zu haben scheinen mir die wesentlichen Kernanforderungen eines realen Web Clients nicht verschwunden, sondern einfach nur in viele AddOns / PlugIns / Extensions ausgelagert zu sein. Darüber kann und will ich mir heute kein Urteil erlauben – schauen wir mal, was die nächsten Monate bringen.

Falls jemand sich die Quellen des Web Clients mal anschauen möchte, hier nur kurz ein kleiner Stadtplan: es gibt präsentationsfreie Anwendungslogik in einer kleinen Bibiothek und den VCR.NET Teil selbst. Dazu einen auf React.Js basierenden Satz von übergreifenden Komponenten sowie auch hier separat der VCR.NET Teil, diesmal weiter aufgeteilt in spezialisierte und gemeinsame React.Js Komponenten. Dazu kommen noch Typdefinitionen und Proxies für die REST Web Dienste des VCR.NET Recording Service und der Rahmen der SPA.

Viel Spaß und hoffentlich irgendwann einmal mehr zu dieser Baustelle

Jochen

VCR.NET 4.5 is coming…

Nun gut ich habe vor einiger Zeit hier gepostet, dass VCR.NET nicht weiterentwickelt wird – also was soll das? Naja, im Prinzip stimmt die damalige Aussage auch noch: VCR.NET 4.5 ist die erste Version, die weder eine neue DVB.NET Version mit bringt noch Änderungen im Programmcode des Dienstes enthält. Tatsächlich basiert VCR.NET 4.5 auf der aktuellen DVB.NET Version 4.3 und auch sonstige Abhängigkeiten wie etwa Microsoft .NET 4.5.1 wurden nicht verändert.

Ja, aber was soll denn dann die neue Version? VCR.NET war vom ersten Tag an meine Spielwiese um neue Dinge praktisch auszuprobieren. Mit dem aktuellen HTML5 / JavaScript Web Client habe ich mich unter anderem in jQuery / jQueryUI eingearbeitet und sehr viel drumherum von Hand programmiert – damit ist nicht zwingend gesagt, dass das eine schlechte Idee war: es hat mir einiges an Verständnis der Anforderungen an typische Ui Frameworks wie AngularJs oder React.Js gebracht. Mit 4.5 wurde der Web Client vollständig erneuert und es wird auch kein jQuery(UI) mehr verwendet. Ich habe mich aus verschiedenen Gründen für React.Js entschieden, den Code aber schon so vorbereitet, dass man später im View Bereich etwas flexibler wird – dazu in einem eigenen Post mehr, aber zumindest gab es für mich daraus überzeugende (subjektive!) Gründe, nicht auf AngularJS zu setzen.

Auch wenn sich der Code des Dienstes nicht verändert hat und dieser hoffentlich weiterhin so stabil wie bisher arbeitet, kann durch die Vollerneuerung des Web Clients doch so einiges schief laufen. Ich habe die aktuelle Version gestern in den produktiven Betrieb genommen und schon erste kleine Probleme beseitigt, aber da ist sicher noch Luft nach unten 🙂 Vor diesem Hintergrund trotzdem: wer Lust hat, sich die neue Version einmal anzuschauen (es sollte sich von der Oberfläche her eigentlich nicht wirklich etwas geändert haben: lediglich Details im Aussehen, aber nichts Großes) und mich beim Testen freiwillig und auf eigene Gefahr unterstützen möchte: VCR.NET 4.5 Release Candidate. Vielen Dank im Voraus für jede konstruktive Kritik!

Der einzige mir bisher bekannte Wermutstropfen: die Custom42.css funktioniert nicht mehr, da sich die Layout Struktur vollständig verändert hat! Ich habe daher eine neue Referenz auf eine potentielle Custom45.css eingerichtet, aber man fängt da leider wieder von vorne an. Zudem ist mein Zeitbudget für die neue Version jetzt fast erschöpft und ich habe mit bisher wenige Gedanken um eine CSS Klassenstruktur zu machen und werde wohl auch nicht mehr dazu kommen. Konkret heißt das, dass es bis zu einer gewissen Ebene wohldefinierte CSS Klassen gibt, aber Spalten in Tabellen oder Zeilen in Formularen oft mit :nth-child(), :last-child, :first-child usw. angesprochen werden. Sehr unschön für ein Customized Styling – Sorry!

So, dass muss dazu erst einmal reichen!

Viel Spaß beim Testen

Jochen

PS: Ach ja, noch eine Kleinigkeit: ich habe bei der auf TypeScript mit React.Js (TS und TSX) basierenden Programmstruktur auf das Zusammenführen vieler einzelner Dateien in eine Anwendungsdatei gesetzt – die vorherige Version hatte nur zwei Quelldateien! Mir war es zu mühsam, die Quellen in das Installationsprogramm aufzunehmen. Das heißt, dass die Installation nun nicht mehr anbietet, die Quellen lokal mit zu installieren. Das ist nicht wirklich ein Problem, da man immer den aktuellen Stand auf GitHub findet: VCR.NET Quellcode auf GitHub.

VCR.NET 4.3.52: kleinere Fixes

Ich musste nun doch zwei kleine nervige Fehler beheben:

  • Läuft mehr als eine Aufzeichnung (egal ob auf einer oder mehreren Karten) und man beendet eine manuell mit gleichzeitigem Unterdrücken des Übergangs in den Schlafzustand (was in diesem Fall eigentlich sinnlos ist, da ja noch mindestens eine weitere Aufzeichnung aktiv ist!), so geht der Dienst auch nach Beenden aller anderen Aufzeichnungen nicht in den Schlafzustand.
  • Hat man einen Suchfavoriten definiert, bei dem ein Filter auf Fernsehsendung oder Radioausstrahlung aktiv ist, so wird dieser Filter in der Favoritenansicht nicht berücksichtigt und die angezeigte Anzahl ist eventuell zu groß – richtig lästig, wenn die Anzahl eigentlich 0 sein sollte. Tatsächlich ist nur die angezeigte Anzahl falsch, der Aufruf des Favoriten meldet die korrekten Sendungen in der Programmzeitschrift.

Dann habe ich noch was ganz Dummes getan: ich habe auf die aktuelle Version von jQuery (3.1.1) und jQueryUI (1.12.1) umgestellt, was erst einmal einige Clitches in der Oberfläche nach sich zog. Einiges habe ich korrigiert, einiges ist anders aber in Ordnung und einiges nicht mehr so schön wie vorher aber erträglich. Im Moment fehlt mir die Zeit, die (CSS / LESS) Styles anzupassen, aber da ich den VCR.NET Recording Service ja auch selbst nutze werde ich nach und nach versuchen, die Ecken und Kanten zu glätten.

Wie dem auch sei: der aktuelle Stand kann direkt von mir (VCRNET.msi) oder auch von Heise bezogen werden.

Viel Spaß weiterhin

Jochen

Mehr Spaß mit TypeScript: Klassenschnittstellen

Man kann in TypeScript ja über die new() Funktion Konstruktoren insbesondere auch in Schnittstellen referenzieren. Schauen wir uns dazu einmal folgendes Beispiel an:

interface IAnyFactory<TAny> {
new (param: string): TAny;
greeting: string;
}

class Any {
static greeting = "Hi";
constructor(private _param: string) {}
}

function create<TAny>(factory: IAnyFactory<TAny>): TAny { return new factory("test"); }
function testAny(): Any { return create(Any); }
Ich kann an die Funktion create erst einmal irgendeine Klasse übergeben, wo dann tatsächlich der Konstruktor als Parameter verwendet wird. Alle statischen Felder und Methoden einer Klasse sind aber in JavaScript einfach nur die Eigenschaften dieser Funktion. Über die Schnittstelle IAnyFactory verlangt create, dass nur solche Klassen verwendet werden dürfen, die zusätzlich auch ein statisches Feld greeting der Art string haben. Ich kann mir vorstellen, dass dieses Verhalten ganz praktisch sein kann: man hat hier quasi so etwas wie eine Schnittstellendefinition für eine Klasse!

Happy Coding

Jochen