RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik...
Transcript of RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik...
![Page 1: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/1.jpg)
RamphastosUIREine HTML5Bibliothek für C#
Alexander S. Timmermansmatchmycolor GmbH
![Page 2: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/2.jpg)
RamphastosUIREine HTML5‐Bibliothek für C#
Entwickelt von der matchmycolor GmbH
![Page 3: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/3.jpg)
HinweisEs wird ein Ergebnis aus Forschung und Entwicklungvorgestellt. Bei der präsentierten Programmbibliothekhandelt es sich um einen Prototyp.
![Page 4: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/4.jpg)
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.
![Page 5: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/5.jpg)
Ein Statement“HTML ist die wahrscheinlich
fortschrittlichste User Interface‐Technologie in unserem Sonnensystem.”
![Page 6: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/6.jpg)
Inhalt1. Motivation2. Theorie3. Konzepte4. Demo5. Retrospektive6. Aktueller Status7. Vergleichbare Technologien8. Ausblick
![Page 7: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/7.jpg)
Motivation
![Page 8: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/8.jpg)
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.”
![Page 9: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/9.jpg)
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
![Page 10: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/10.jpg)
Theorie1. Embedded Browser2. MVC Pattern3. MVVM Pattern4. View Driven MVVM5. View‐Model Driven MVVM
![Page 11: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/11.jpg)
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.
![Page 12: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/12.jpg)
Embedded Browser
Beispiel eines WebBrowser Controls
![Page 13: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/13.jpg)
Embedded BrowserEmbedded Browser‐Technologien:
WebBrowser ControlAwesomiumCEF ﴾Chromium Embedded Framework﴿
CefGlueCefSharpChromiumFX
GeckoFX
![Page 14: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/14.jpg)
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
![Page 15: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/15.jpg)
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.
![Page 16: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/16.jpg)
MVC PatternController
View Modelload/event
changes
triggers logic
changes
changes
![Page 17: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/17.jpg)
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.
![Page 18: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/18.jpg)
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
![Page 19: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/19.jpg)
MVVM PatternRegel: Es gibt keine direkte Verbindung zwischen Modelund View.
Dadurch ist die Entwicklung von View undApplikationslogik separiert.
![Page 20: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/20.jpg)
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.
![Page 21: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/21.jpg)
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
![Page 22: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/22.jpg)
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
![Page 23: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/23.jpg)
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﴿
![Page 24: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/24.jpg)
ReferenzenIntroduction to Model/View/ViewModel pattern for building WPF apps ‐ John Gossman
MVVM in the Real World ‐ Bryan Anderson
Presentation Model ‐ Martin Fowler
![Page 25: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/25.jpg)
Konzepte1. Design Pattern2. Embedded Browser Technologie3. Third Party Frameworks
![Page 26: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/26.jpg)
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.
![Page 27: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/27.jpg)
MVVM in RamphastosUI
ViewModelView Model
databinding
load/events
changes
ViewModelsync
JavaScript C#
View‐Model wird zwischen JavaScript und C# synchronisiert.
![Page 28: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/28.jpg)
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.
![Page 29: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/29.jpg)
Synchronisation der View‐ModelsLokal: C#/JavaScript Brücke
Remote: Web‐Sockets
![Page 30: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/30.jpg)
VerschachtelungJedes View‐Model kann View‐Models als Properties oderElemente einer Collection haben. Eine Applikationbesteht aus einer Hierarchie von View‐Models.
ViewModel
AppModel
ViewModel
ViewModel
![Page 31: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/31.jpg)
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.
![Page 32: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/32.jpg)
Third Party FrameworksAngularJSSignalR
![Page 33: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/33.jpg)
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.
![Page 34: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/34.jpg)
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.
![Page 35: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/35.jpg)
Demo
![Page 36: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/36.jpg)
Retrospektive
![Page 37: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/37.jpg)
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﴿
![Page 38: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/38.jpg)
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.
![Page 39: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/39.jpg)
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
![Page 40: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/40.jpg)
Juni 2014Start eines Projektes zur Entwicklung eines HTML5 UI‐Frameworks, später genannt 'RamphastosUI', zurweiteren Evaluation.
![Page 41: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/41.jpg)
Juni 2015RamphastosUI wird intern verwendet.
![Page 42: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/42.jpg)
Aktueller Status
![Page 43: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/43.jpg)
Windows ﴾lokal﴿: Late BetaWindows ﴾remote﴿: AlphaOS X ﴾lokal﴿: BetaLinux ﴾lokal﴿: Prototyp
![Page 44: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/44.jpg)
Vergleichbare Technologien1. Electron2. NW.js3. Bracket‐Shell4. MVVM‐for‐awesomium5. MVVM.CEF.Glue6. Ionic Framework
![Page 45: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/45.jpg)
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
![Page 46: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/46.jpg)
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.
![Page 47: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/47.jpg)
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
![Page 48: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/48.jpg)
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
![Page 49: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/49.jpg)
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
![Page 50: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/50.jpg)
Ionic FrameworkLizenz: MITRendering Engine: verfügbare Web ViewPlattformen: iOS, AndroidBack‐End: JavaScript ﴾ ﴿Cordova
Windows Phone und FirefoxOS geplant.
![Page 51: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/51.jpg)
RamphastosUILizenz: Noch nicht festgelegtRendering Engine: Awesomium, CEF ﴾CefGlue﴿Plattformen: Windows, OS X, ﴾Linux﴿, WebBack‐End: C#
Hierarchischer Aufbau von View‐Models. Binding mit.AngularJS
![Page 52: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/52.jpg)
Ausblick
![Page 53: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/53.jpg)
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.﴿
![Page 54: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/54.jpg)
VisionHTML als Alternative zu existierenden UI TechnologienetablierenEine echte Multi‐Plattform UI Technologie für C#bieten
![Page 55: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/55.jpg)
RamphastosUIR… eine Bibliothek zur Erstellung von C#Applikationen mit HTML5 als UI
Mit simultaner Unterstützung von Web‐ undNative‐Applikationen
![Page 57: RamphastosUI · und Entkopplung. Das Model enthält die Daten Die View enthält Präsentationslogik Der Controller verwaltet die View und verarbeitet Benutzeraktionen. Es ist gibt](https://reader034.fdocument.pub/reader034/viewer/2022051603/5fec22986315f14b19791b41/html5/thumbnails/57.jpg)
Vielen Dank
Alexander S. Timmermansmatchmycolor GmbH