RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik...

RamphastosUIREine HTML5­Bibliothek für C#

Alexander S. Timmermansmatchmycolor GmbH

RamphastosUIREine HTML5‐Bibliothek für C#

Entwickelt von der matchmycolor GmbH

HinweisEs wird ein Ergebnis aus Forschung und Entwicklungvorgestellt. Bei der präsentierten Programmbibliothekhandelt es sich um einen Prototyp.

ZusammenfassungRamphastosUI ermöglicht es in .Net ApplikationenHTML5 als User Interface‐Technologie zu verwenden.

RamphastosUI setzt HTML5 an die Stelle von UITechnologien wie WinForms, GTK, QT oder WPF.

RamphastosUI‐Applikationen laufen sowohl lokal alsnative Anwendungen als auch als Web‐Applikationen.

Ein Statement“HTML ist die wahrscheinlich

fortschrittlichste User Interface‐Technologie in unserem Sonnensystem.”

Inhalt1. Motivation2. Theorie3. Konzepte4. Demo5. Retrospektive6. Aktueller Status7. Vergleichbare Technologien8. Ausblick

Motivation

Herbst 2012:

“Wie wäre es, das User Interface mitHTML5 zu entwickeln, sodass die

Applikation sowohl als Rich‐ClientDesktop aber auch als Web‐Applikationim Browser ausgeführt werden kann.”

Natives und Web Frontend

einmal entwickeln und zweimal verwenden

Einfaches Skinning mit CSS

einfacher als mit WPF, WinForms, QT, etc.

Multi‐Plattform Unterstützung ermöglichen

HTML5 läuft auf allen wichtigen Plattformen

Theorie1. Embedded Browser2. MVC Pattern3. MVVM Pattern4. View Driven MVVM5. View‐Model Driven MVVM

Embedded BrowserMan spricht von Embedded Browser ﴾eingebetteterBrowser﴿ wenn eine Web Browser Engine als Control bzw.Ui‐Element in eine Applikation eingebettet wird. Indiesem Control kann nun HTML dargestellt werden. EinBeispiel dafür ist der WebView Control von WinForms.

Embedded Browser

Beispiel eines WebBrowser Controls

Embedded BrowserEmbedded Browser‐Technologien:

WebBrowser ControlAwesomiumCEF ﴾Chromium Embedded Framework﴿

CefGlueCefSharpChromiumFX

GeckoFX

Embedded BrowserCEF ‐ Chromium Embedded Framework

Open Source Framework für eingebettete Web Browserbasierend auf .Chromium

Eine unvollständige Liste von Applikation welche auf CEFaufbauen:

SpotifyAdobe Dreamweaver CCAdobe BracketsAmazon MusicEvernote

MVC PatternMVC ﴾Model‐View‐Controller﴿ ist ein Architekturmusterzur Strukturierung von Software. Die Ziele sind Flexibilitätund Entkopplung.

Das Model enthält die DatenDie View enthält PräsentationslogikDer Controller verwaltet die View und verarbeitetBenutzeraktionen.

Es ist gibt keine allgemeingültige Definition wo die Geschäftslogik untergebracht sein sollte.Heute ist sie meist im Model implementiert. Früher war sie oft im Controller zu finden.

MVC PatternController

View Modelload/event

changes

triggers logic

changes

changes

MVVM PatternMVVM ﴾Mode‐View‐ViewModel﴿ ist einArchitekturmuster entwickelt von Microsoft, um event‐getriebene Programmierung zu vereinfachen. Es ist eineVariation des Presentation Model Design Patterns vonMartin Fowler. Ein Kernprinzip sind Data‐Bindings.

Verwendung: , , ,,

WPF Sliverlight Windows Store AppsKnockoutJS AngularJS

Das Model enthält die DatenDie View enthält PräsentationslogikDas View‐Model ist eine Schnittstelle für die View,verbindet also View und Model.

MVVM Pattern

View­ModelView Model

data­binding

load/events

changes

view and presentation logic business logic and data

Die View enthält nur View‐spezifische Logik und das Data BindingDas View‐Model stellt Daten bereit für das View‐Model ﴾z.B. Model Properties oder Farbeeiner Schaltfläche﴿. Enthält Triggers zum Ausführen von Applikationslogik ﴾z.B. mitCommands﴿.Das Model enthält die Businessdaten

MVVM PatternRegel: Es gibt keine direkte Verbindung zwischen Modelund View.

Dadurch ist die Entwicklung von View undApplikationslogik separiert.

MVVM PatternWie funktionieren event‐getriebene Updates in C#? Mit

und !INotifyPropertyChanged INotifyCollectionChanged//Notifies that a property value has changed.public interface INotifyPropertyChanged //Gets fired when a property value has changed event PropertyChangedEventHandler PropertyChanged;

//Notifies listeners of dynamic changes,//such as when items get added and removed.public interface INotifyCollectionChanged //Gets fired when the collection changes. event NotifyCollectionChangedEventHandler CollectionChanged;

Die Art der Änderung wird jeweils durch das Event Argument beschrieben.

View‐Driven MVVMDie Applikation wird von der View getrieben. DieApplikation startet mit einer View und ein dazugehörigesView‐Model wird als Data‐Source hinzugefügt. Um voneiner View in eine andere zu wechseln wird eine neueView instanziiert und das korrespondierende View‐Modelgeladen und hinzugefügt.

Die Navigation ist Teil der View

View‐Model‐Driven MVVMDie Applikation startet mit einem Basis View‐Model. Diekorrespondierende View ﴾definiert in einerDataTemplate‐Registrierung﴿ wird instanziiert und stelltdas View‐Model dar. Bei der Navigation zu anderenViews wird einfach ein anderes View‐Model instanziiertwobei die dazugehörige View automatisch geladen wird.

Die Navigation ist Teil des View‐Models

Vergleich View Driven / View‐Model DrivenView Driven View‐Model

DrivenNavigation Transition von

Views ﴾View lädt nächste View﴿

Transition vonView‐Models ﴾View‐Model lädt nächstes View‐Model﴿

Kopplung ﴾View / View‐Model﴿

View﴾View lädt View‐Model﴿

DataTemplateRegistrierung

Unit‐Test ohne Navigation mit Navigation ﴾Übergang zwischen View‐Models﴿

ReferenzenIntroduction to Model/View/ViewModel pattern for building WPF apps ‐ John Gossman

MVVM in the Real World ‐ Bryan Anderson

Presentation Model ‐ Martin Fowler

Konzepte1. Design Pattern2. Embedded Browser Technologie3. Third Party Frameworks

Design PatternGewählt wurde View‐Model Driven MVVM, da sich aufdiese Weise die Applikation komplett ohne Viewmodellieren lässt. Unit Tests greifen somit auf einerhöheren Ebene. Die Entwicklung vom User Interface istsepariert. Views können zentral ersetzt werden.

MVVM in RamphastosUI

View­ModelView Model

data­binding

load/events

changes

View­Modelsync

JavaScript C#

View‐Model wird zwischen JavaScript und C# synchronisiert.

MVVM in RamphastosUImit Commands

View­ModelView Model

data­binding

load/events

View­Modelsync

JavaScript C#

Command Command

Service

change the model

call a service

trigger command

changes

Commands existieren als Repräsentanten auf JavaScript‐Seite als Trigger.

Synchronisation der View‐ModelsLokal: C#/JavaScript Brücke

Remote: Web‐Sockets

VerschachtelungJedes View‐Model kann View‐Models als Properties oderElemente einer Collection haben. Eine Applikationbesteht aus einer Hierarchie von View‐Models.

View­Model

App­Model

View­Model

View­Model

Embedded Browser‐TechnologieRamphastosUI ist flexibel in Bezug auf die RenderingEngine. Dies wird durch eine Abstraktionsebene erreicht.In erster Linie sollen Awesomium und CEF (CefGlue)unterstützt werden.

Third Party FrameworksAngularJSSignalR

AngularJSWichtig: Kurz erläutern was Direktiven sind.

MVC/MVVM Framework für JavaScript von Google.

Verwendung:

Die Client‐Seite ist mit AngularJS ﴾1.4﴿ implementiert.Views stehen als Direktiven zur Verfügung.

SignalREine Bibliothek für Echtzeit‐HTTP‐Kommunikation mitWeb Sockets von Microsoft. Sie bietet Fall‐BackMechanismen falls Web‐Socket Unterstützung fehlt.

Verwendung:

Im Remote‐Fall wird SignalR für die Kommunikationverwendet.

Demo

Retrospektive

Anfang 2013Entwicklung eines ersten Protoptypen:

Basierend auf AwesomiumJedes UI Element hatte eine Render‐Funktion in JavaScriptDas Entwickeln sollte sich ähnlich anfühlen wie mit WinFormsVerwendung des MVC PatternsReduktion von JavaScript auf ein MinimumLokale Rich‐Client‐Applikation mit Awesomium und Remote Applikation basierend aufAsp.Net WebservicesUI Events werden von JavaScript zu C# weitergeleitet:

Lokal: JavaScript/C# Bridge von AwesomiumRemote: Web‐Services ﴾Polling﴿

Frühling 2013Projekt wird eingefroren. Stattdessen wird WPF evaluiert.

Gründe: Das Risiko mit dem Embedded Browser von Awesomium LLC wurde als zu hocheingeschätzt. Ein Wechsel auf andere Embedded Web Browser‐Technologien war noch keineOption.

Mai 2014Entwicklung weiterer Prototypen:

Verwendung des MVVM Design Patterns anstelle von MVCHTML Templates anstelle von Render‐FunktionenSynchronisieren des View‐Models zwischen JavaScript und C# anstelle der Übertragung vonUI‐EventsVerwendung von Web‐Sockets im Remote FallDas Synchronisieren von View‐Models wurde mit einer reinen REST‐ImplementierungverglichenVerwendung von CEF ﴾CefGlue﴿ parallel zu Awesomium

Juni 2014Start eines Projektes zur Entwicklung eines HTML5 UI‐Frameworks, später genannt 'RamphastosUI', zurweiteren Evaluation.

Juni 2015RamphastosUI wird intern verwendet.

Aktueller Status

Windows ﴾lokal﴿: Late BetaWindows ﴾remote﴿: AlphaOS X ﴾lokal﴿: BetaLinux ﴾lokal﴿: Prototyp

Vergleichbare Technologien1. Electron2. NW.js3. Bracket‐Shell4. MVVM‐for‐awesomium5. MVVM.CEF.Glue6. Ionic Framework

ElectronLizenz: Open Source ﴾MIT﴿Rendering Engine: ChromiumPlattformen Windows, OS X, LinuxBack‐End: JavaScript ﴾ ﴿NodeJs

Vormals bekannt als Atom‐Shell, basiert auf . Verwendung: , .

io.jsAtom Editor Visual Studio Code

NW.jsLizenz: Open Source ﴾MIT﴿Rendering Engine: ChromiumPlattformen: Windows, OS X, LinuxBack‐End: JavaScript ﴾ ﴿NodeJs

Früher genannt node‐webkit. Erlaubt es, node.js‐Applikationen auf einem Desktop auszuführen.Entwickelt im Intel Open Source Technology Center.

Bracket‐ShellLizenz: Open Source ﴾MIT﴿Rendering Engine: CEFPlattformen: Windows, OS X, LinuxBack‐End: C++

Entwickelt von Adobe für . Wurde aber schon fürandere Projekte verwendet.

Brackets

MVVM‐for‐awesomiumLizenz: Open Source ﴾LGPL 3﴿Rendering Engine: AwesomiumPlattformen: Windows ﴾WPF﴿Back‐End: C#

Interagiert sehr gut mit WPF. Bindings mit .Verwendet von .

KnockoutJSCataMoeda

MVVM.CEF.GlueLizenz: Open Source ﴾LGPL 3﴿Rendering Engine: CEF ﴾CefGlue﴿Plattformen: Windows ﴾WPF﴿Back‐End: C#

Interagiert sehr gut mit WPF. Bindings mit .Nachfolger von MVVM‐for‐awesomium.

KnockoutJS

Ionic FrameworkLizenz: MITRendering Engine: verfügbare Web ViewPlattformen: iOS, AndroidBack‐End: JavaScript ﴾ ﴿Cordova

Windows Phone und FirefoxOS geplant.

RamphastosUILizenz: Noch nicht festgelegtRendering Engine: Awesomium, CEF ﴾CefGlue﴿Plattformen: Windows, OS X, ﴾Linux﴿, WebBack‐End: C#

Hierarchischer Aufbau von View‐Models. Binding mit.AngularJS

Ausblick

Fokussierung auf CEFUnterstützung für WindowsPhone, Android und iOSUnterstützung weiterer Embedded BrowserTechnologien ﴾Bsp. Microsoft Edge﴿Migration zu Angular 2.0﴾Unterstützung anderer MVC Frameworks wie ReactJS,Aurelia, Ember, etc.﴿

VisionHTML als Alternative zu existierenden UI TechnologienetablierenEine echte Multi‐Plattform UI Technologie für C#bieten

RamphastosUIR… eine Bibliothek zur Erstellung von C#Applikationen mit HTML5 als UI

Mit simultaner Unterstützung von Web‐ undNative‐Applikationen

Fragen?Feedback ist erwünscht!

Alexander S. Timmermansalexander.timmermans@matchmycolor.com

Vielen Dank

Alexander S. Timmermansmatchmycolor GmbH