Frankensteins Monster (Arbeitstitel) ist ein Javascript User Interface und ein objektorientiertes System für die Entwicklung von Browser basierten Anwendungen (Web-Apps).

Ziel ist es, Programmierern von Anwendungen, ein Objekt orientiertes System zur Verfügung zu stellen, das auf modernen Browsern die schmerzfreie Entwicklung eines Benutzer-Interfaces ermöglicht. Es werden Standard-Komponenten zur Verfügung gestellt, die darüber hinaus einfach erweiterbar sind. Es existiert ein grundlegendes System, welches die einfache Entwicklung von eigenen Komponenten unterstützt. Wenn etwas fehlt oder anders aussehen soll, steht der Entwickler also nicht im Wald, sondern bekommt ein solides Gerüst um die gewünschten Änderungen vorzunehmen.

OOP

Natürlich Objekt orientiert: Auf Basis von Javascript und erweitert, unter Ausnutzung von sprachspezifischen Möglichkeiten. Die Namensgebung von Eigenschaften, orientiert sich an schon bestehenden Standards, um Klarheit zu erhalten.

Klassen

Über ein erweitertes Name-Space-System können Klassen kombiniert und Komponenten zusammengestellt werden. Diese Zusammenstellungen können wieder neue Klassen sein. Alias-Klassen ermöglichen die Zusammenfassung mehrerer Klassen und verkürzen längere Name-Space Angaben deutlich.

Benötigte Klassen werden automatisch und asynchron nachgeladen. Bei der Erstellung von neuen Klassen ist die Reihenfolge beliebig. Superklassen können nach der Definition von abhängen Klassen definiert werden. Wichtig ist nur, dass sie vor der Benutzung durch Objekte definiert wurden. Neue Klassen-Zusammenstellungen können auch erst bei der Objekterzeugung "angefordert" werden. Diese Zusammenstellung muss also nicht in Form einer Klasse existieren, bevor sie in einem Objekt benutzt werden kann.

Klassen können HTML-Markup enthalten. Mehrere Klassen kombinieren ihre HTML-Elemente und tragen so zum Aufbau der dargestellten Objekte bei. Hierbei werden Namenskollisionen automatisch abgefangen. Innerhalb einer Klasse können immer alle in dieser Klasse definierten Elemente, unter dem im HTML-Markup angegebenen Namen, angesprochen werden. Zuordnungen von Größenangaben, Zuweisungen von CSS-Klassen etc. bleiben auch erhalten, wenn ein DOM-Reset durchgefüht wird und währenddessen neuer Markup hinzugefügt oder entfernt wird.

Klassen können Closure-Methoden an alle Sub-Klassen, in deren Klassen-Kette sie sich befinden, vererben. Einige der folgenden Basis-Klassen tun dies, um häufig benutzte bzw. grundlegende Methoden, ohne den üblichen Name-Space-Overhead, zur Verfügung zu stellen. Jede Klasse kennt zudem die Closure-Variable $this$, welche einen Zugriff auf die Klasse selbst ermöglicht und einen sicheren Zugriff, ohne Name-Space-Kollisionen, auf Methoden dieser Klasse gewährleistet.

Basis-Klassen

Das UI baut sich aus mehreren Basisklassen (Superklassen) auf, welche sich in einer Klassen-Kette befinden. Weitere Klassen können sich, je nach gewünschter Unterstützung von Standardfunktionen, an diese Klassen durch die bekannten Vererbungsmechanismen "anbinden". Werden in einer Web-Anwendung Funktionalitäten nicht benötigt, so müssen die entsprechendne Klassen somit auch nicht geladen werden.

Standard Funktionalitäten:

Es werden weitere Standardklassen folgen, die sich um den Kontakt zu Servern, die Darstellung und Manipulation von Daten kümmern

Standard Elemente

Standardelemente können beliebig miteinander kombiniert werden und bilden dann die einzelnen Elemente des UIs. Auf die Erstellung von übergeordneten Klassen wurde verzichtet. Ein Baum entsteht also nicht aus dem Objekt einer Klasse "Tree", dem Knoten hinzugefügt würden, sondern aus der Zusammenstellung von "Knoten" allein. Menüs und Tabulatoren werden ebenso zusammengestellt. Diese "offene" Architektur, erlaubt die Kombination von unterschiedlichen Klassen- bzw. Objekt-Typen. Es sind also z.B. Bäume innerhalb von Menus und ähnliches möglich. Begrenzung ist allein die sinnvolle Funktionalität.

Objekte

Klassen sind in diesem UI nicht - wie üblich - Javascript Funktionen aus denen per "new" Objekte erstellt werden, sondern selber Objekte. Die Erstellung von Objekten und Klassen geschieht über Methoden (app.addClass, app.addObject). Alle Objekte bilden einen zusammenhängenden Objekt-Baum. Objekte können zu diesem Baum hinzugefügt oder verschoben werden. Eigenschaften der Klassen und Objekte geben Auskunft über ihr "Umfeld", wie z.B. isTypeRoot, isPartOf, typeChain etc. um Zusammenhänge sichtbar zu machen und entsprechend auf sie zu reagieren.

Eigenschaften und Eigenschafts-Objekte können für Zustände vordefiniert werden (store). Diese Zustände sind beliebig wechselbar (useStore). Eigenschaften und Objekte können Kind-Elementen aufgezwungen werden (force), wobei diese "Zwang" nur für diesen Eltern-Zusammenhang gültig ist. Zwang kann blockiert werden (blockForce). Alle diese Eigenschaften und Eigenschafts-Objekte, werden aus den Angaben der kompletten Klassenkette gebildet und sie sind über den Prototype-Mechanismus von Javascript miteinander verbunden. Zusätzlich sind auch Unterobjekte dieser Eigenschafts-Objekte, per Prototype-Kette miteinander verbunden (prototype-grid), dies ermöglicht einfache Änderungen an Eigenschaften dieser Unterobjekte, ohne diese Objekte komplett neu angeben zu müssen.

Layout

Das UI erweitert die bekannten Größenangaben des HTML-Standards um sinnvolle Angaben, die die einfache Erstellung eines übersichtlichen und flexiblen UIs ermöglichen. Hierbei bleiben absolute Größenangaben das Aufgabenfeld von CSS-Stylesheets. Neue relative Größenangaben ermöglichen die Erstellung von Layout, das sich an Größen und Laufweiten von Schriften, Bildern etc. automatisch orientiert und dennoch ein Auseinanderfallen verhindert.

Hierzu gehören z.B.:

Das Ui ist "Reflow" optimiert. Der Browser muss Änderungen nur darstellen, wenn sie auch wirklich notwendig sind. Änderungen werden "gesammelt" und nach der Bearbeitung aller Event-Handler eines DOM-Events ausgeführt.

Einbindung

Die erstellte Web-Anwendung kann in einem kompletten Browserfenster oder als Teil einer Webseite eingebunden werden. Es sind mehrere Einbindungen auf einer Seite möglich. Das Ui kann wahlweise für den "window"-Namensraum des Browsers unsichtbar sein, oder einen beliebiegen externen Namen haben, um die Anwendung(en) "von außen" zu steuern. Die Anwendung selber, kann in der HTML Seite stehen oder nachgeladen werden

Browser Unterstützung

Ein aktueller Browser sollte es schon sein. Wird ein Browser nicht mehr von den eigenen Entwicklern unterstützt, sollte ihn, schon aus Selbstschutz, niemand mehr benutzen. Funktionieren sollten alle Webkit basierten Browser wie Chrome, Safari etc., natürlich Firefox, Opera und Internet Explorer ab Version 9. Für ältere Versionen des Internet Explorers, kann die Installation von Google Chrome Frame angeboten werden. Eine moderne und schnelle Javascript-Engine sind notwendig. Ansonsten gilt, wenn der Browser die aktuellen Standards fehlerfrei unterstützt, funktioniert auch Frankensteins Monster.

Unterstützte Browser:

  1. Safari: Ungeschlagen der schnellste Browser.
  2. Internet Explorer 9: Sauber und sehr schnell.
  3. Chrome & Chrome Frame: Sehr schnell.
  4. FireFox: Schnell.
  5. Opera: Mäßig schnell.
  6. Internet Explorer 6,7,8: Viel zu langsam und fehlerbehaftet. Hier empfiehlt sich die Installation von Google Chrome Frame.

Diese Angaben beziehen sich auf Windows-Systeme. Die entsprechenden Browser unter Mac-OS sollten jeweils, bei ähnlicher Hardwareausstattung, noch einmal schneller und flüssiger laufen. Über Linux kann ich keine Aussagen machen, die Vermutung liegt aber nahe, dass es dort ebenfalls einen Geschwindigkeitsvorteil gegenüber Windows-Systemen gibt.