moderne uis mit server-seitigem model view viewmodel€¦ · model view viewmodel business logic...
TRANSCRIPT
![Page 1: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/1.jpg)
Reactive UIs Event-gesteuerte Architektur für moderne
Applikationen
Thomas Spiegl und Manfred Geiler Irian Solutions – The Software Experts
![Page 2: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/2.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• Neues Konzept MVSVM
• Ankor Framework
• Ankor Live Sample
• Ankor Special Features
![Page 3: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/3.jpg)
THE SOFTWARE EXPERTS
„M V V M” ?
• „Model View ViewModel“
• 2005 von John Gossman (Microsoft)
• ≅ „Presentation Model“ von Martin Fowler
• Seperation of Concerns
o Graphical UI
o UI Logic
![Page 4: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/4.jpg)
THE SOFTWARE EXPERTS
Model View Controller
View
Model
Controller
![Page 5: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/5.jpg)
THE SOFTWARE EXPERTS
Model View ViewModel
Business Logic and Data
Presentation & UI Logic
View
DB
Binding
ViewModel
Domain
Model Service Calls
![Page 6: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/6.jpg)
THE SOFTWARE EXPERTS
M V V M - View
• Grafische Benutzeroberfläche (GUI)
• Benutzereingaben
• Datenbindung („Binding“) auf ViewModel
• Markup o XAML
o FXML
Business Logic and Data
Presentation & UI Logic
DB
Data Binding
Service Calls
ViewModel
Model
View
![Page 7: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/7.jpg)
THE SOFTWARE EXPERTS
M V V M - ViewModel
• Bindeglied zwischen View und Model
• Verbindung mit Model (Service-Calls)
• Properties und Actions für View (Binding)
• UI-Logik
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls Model
ViewModel
![Page 8: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/8.jpg)
THE SOFTWARE EXPERTS
M V V M - Model
• Domain Model, Datenzugriff
• Domain Logik
• Validierung
• Unit Tests
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 9: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/9.jpg)
THE SOFTWARE EXPERTS
Was MVVM löst...
• Separation of Concerns
o Designer ↔ UI-Entwickler
o View-Technologie ↔ Präsentations-Logik
• ViewModel testbar!
o Unit-Tests
o Mock-UI
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 10: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/10.jpg)
THE SOFTWARE EXPERTS
Was MVVM nicht löst...
• Model am Client oder Server?
• Kommunikation Client ↔ Server
• Problem: Vielfalt Client-Technologien
o HTML5
o iOS
o Android
o JavaFX
o ... Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 11: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/11.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• Neues Konzept MVSVM
• Ankor Framework
• Ankor Live Sample
• Ankor Special Features
![Page 12: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/12.jpg)
THE SOFTWARE EXPERTS
Model View SynchronizedViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
![Page 13: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/13.jpg)
THE SOFTWARE EXPERTS
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
Client hat:
• View
• ViewModel
Client-Technologie:
• Moderne Plattform o HTML5
o JavaFX
o iOS, Android
o ...
• Schnell anpassbar
Server hat:
• ViewModel
• Model
Server-Technologie:
• Java EE
• Bewährte Technik
• Stabile Plattform
MVSVM - Synchronized ViewModel
![Page 14: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/14.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• Neues Konzept MVSVM
• Ankor Framework
• Ankor Live Sample
• Ankor Special Features
![Page 15: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/15.jpg)
THE SOFTWARE EXPERTS
Projekt “Ankor”
• 2013
• http://www.ankor.io
• Open Source (Apache License, Version 2.0)
• Erweiterbares modulares Framework
o Event Driven Programming Model
o Asynchronous Processing
o Bidirectional Communication
o Support for MVSVM
![Page 16: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/16.jpg)
THE SOFTWARE EXPERTS
Ankor Server
Ankor - Synchronized ViewModel
Client
View
ViewModel
● strongly typed
● Behaviour
DB
Data Binding
Change Events
Action Events
ViewModel
● type-less
● only Data
Model
![Page 17: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/17.jpg)
THE SOFTWARE EXPERTS
JEE Server
Ankor - Synchronized ViewModel
Client
View
ViewModel
● strongly typed
● Behaviour
DB
Data Binding
Change Events
Action Events
ViewModel
● type-less
● only Data
Model
ViewModel (client side)
● type-less
● only Data
{
"tasks": [
{"id": "dda6f7d9-8d5e-4baf-969b-110f654a64e3",
"title": "drink less coffee",
"completed": false},
{"id": "ff202f81-33b8-4ae3-bf6a-0208714e2261",
"title": "get more sleep",
"completed": false}
],
"filter": "all",
"itemsLeft": 2
}
ViewModel (server side)
● strongly typed
● Behaviour
public class TaskListViewModel {
private List<Task> tasks;
private String filter;
private Integer itemsLeft;
// getters and setters
}
public class Task {
private String id;
private String title;
private boolean completed;
// getters and setters
}
![Page 18: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/18.jpg)
THE SOFTWARE EXPERTS
Ankor - Überblick Architektur
DB
JEE Server
Ankor Framework
Messaging (Connector HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
ViewModel
Model
View
![Page 19: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/19.jpg)
THE SOFTWARE EXPERTS
Ankor - Architektur / Client
• Diverse Client-Sprachen und -Plattformen
o Java
JavaFX
Android
o Javascript / HTML5
jQuery
AngularJS
React
o Objective-C
iOS
o C#
.NET / WPF
JEE Server
Ankor Framework
Messaging (HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
![Page 20: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/20.jpg)
THE SOFTWARE EXPERTS
Ankor - Architektur / Server
• Java SE 1.6 (oder höher)
• Diverse Netzwerk-Protokolle
o Socket
o HTTP-Polling
o Websocket
• Messaging
o JSON
• Concurrency / Parallelisierung
o Simple Synchronization
o Akka Actors
• JEE Container
o Glassfish (Websocket)
o Tomcat
o Spring Boot (embedded Tomcat)
JEE Server
Ankor Framework
Messaging (HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
![Page 21: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/21.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• Neues Konzept MVSVM
• Ankor Framework
• Ankor Live Sample
• Ankor Special Features
![Page 22: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/22.jpg)
THE SOFTWARE EXPERTS
Ankor - iOS Example
![Page 23: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/23.jpg)
THE SOFTWARE EXPERTS
[[[ANKSystem alloc]
initWith:@"root" connectParams:connectParams
url:@"ws://localhost:8080/websocket/ankor"
useWebsocket:YES] start];
Start Ankor System, connect to server
Ankor - iOS Example
![Page 24: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/24.jpg)
THE SOFTWARE EXPERTS
[ANKRefs observe:@"root.model.tasks"
target:self listener:@selector(tasksChanged:)];
Register Change Listener
- (void)tasksChanged:(id) value {
[[self toDoItems]removeAllObjects];
[[self toDoItems]addObjectsFromArray:value];
[self.tableView reloadData];
}
Change Listener
Ankor - iOS Example
![Page 25: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/25.jpg)
THE SOFTWARE EXPERTS
[ANKRefs fireAction:@"root.model"
name:@"newTask"
params:params]; // Dictionary
Fire Action / Add a new Task
@ActionListener
public void newTask(@Param("title") final String title)
{...}
ActionListener Java
Ankor - iOS Example
![Page 26: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/26.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• Neues Konzept MVSVM
• Ankor Framework
• Ankor Live Sample
• Ankor Special Features
![Page 27: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/27.jpg)
THE SOFTWARE EXPERTS
Client
Server • Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring (geplant)
o CDI (geplant)
• Collaboration Support
• Stateless Model
public class AnimalSearchViewModel {
private AnimalSearchFilter filter;
@ChangeListener(pattern = {".filter.**"})
public void reloadAnimals() {
this.animals
= animalRepository.searchAnimals(filter);
}
Ankor - Special Features
![Page 28: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/28.jpg)
THE SOFTWARE EXPERTS
Server
public class AnimalSearchViewModel {
private List<Animal> animals
= new ArrayList<Animal>(10000);
@AnkorBigList(chunkSize = 10)
public List<Animal> getAnimals() {
return animals;
}
send 10 rows
at once -on
demand
only!
• Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring (geplant)
o CDI (geplant)
• Collaboration Support
• Stateless Model
Ankor - Special Features
Client
![Page 29: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/29.jpg)
THE SOFTWARE EXPERTS
Server • Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring (geplant)
o CDI (geplant)
• Collaboration Support
• Stateless Model
public class AnimalSearchViewModel {
@ChangeListener(pattern = {".filter.**"})
@AnkorFloodControl(delayMillis = 100L)
public void reloadAnimals() {
this.animals
= animalRepository.searchAnimals(filter);
}
Ankor - Special Features
Client
![Page 30: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/30.jpg)
THE SOFTWARE EXPERTS
Server
Shared ViewModel
• Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring (geplant)
o CDI (geplant)
• Collaboration Support
• Stateless Model
Ankor - Special Features
![Page 31: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/31.jpg)
THE SOFTWARE EXPERTS
Server
• Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring (geplant)
o CDI (geplant)
• Collaboration Support
• Stateless Model
Ankor - Special Features
send state
information
public class TaskListModel {
@StateHolder
private Filter filter;
public void setFilter(String filter) {
this.filter =
Filter.valueOf(filter);
initCalculatedFields();
}
![Page 32: Moderne UIs mit server-seitigem Model View ViewModel€¦ · Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls](https://reader033.vdocument.in/reader033/viewer/2022053022/604c326acf7764627f0b22be/html5/thumbnails/32.jpg)
THE SOFTWARE EXPERTS
Ankor.io
Weiterführenden Informationen & Tutorials
http://ankor.io
http://github.com/ankor-io
Thomas Spiegl
Manfred Geiler