ramphastosui · und entkopplung. das model enthält die daten die view enthält präsentationslogik...
TRANSCRIPT
RamphastosUIREine HTML5Bibliothek 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
ViewModelView Model
databinding
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
ViewModelView Model
databinding
load/events
changes
ViewModelsync
JavaScript C#
View‐Model wird zwischen JavaScript und C# synchronisiert.
MVVM in RamphastosUImit Commands
ViewModelView Model
databinding
load/events
ViewModelsync
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.
ViewModel
AppModel
ViewModel
ViewModel
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. [email protected]
Vielen Dank
Alexander S. Timmermansmatchmycolor GmbH