THE SOFTWARE EXPERTS
Moderne UIs mit
server-seitigem
Model View ViewModel
Thomas Spiegl
Manfred Geiler
Irian Solutions - T...
THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples
THE SOFTWARE EXPERTS
„M V V M” ?
● „Model View ViewModel“
● 2005 von John Gossman (Microsoft)
● ≅„Presentation Model“ von ...
THE SOFTWARE EXPERTS
Model View Controller
View
Model
Controller
THE SOFTWARE EXPERTS
Model View ViewModel
Business Logic and Data
Presentation & UI Logic
View
DB
Binding
ViewModel
Domain...
THE SOFTWARE EXPERTS
M V V M - View
● Grafische Benutzeroberfläche (GUI)
● Benutzereingaben
● Datenbindung („Binding“) auf...
THE SOFTWARE EXPERTS
M V V M - ViewModel
● Bindeglied zwischen View und Model
● Verbindung mit Model (Service-Calls)
● Pro...
THE SOFTWARE EXPERTS
M V V M - Model
● Domain Model, Datenzugriff
● Domain Logik
● Validierung
● Unit Tests
Business Logic...
THE SOFTWARE EXPERTS
Was MVVM löst...
● Separation of Concerns
○ Designer ↔ UI-Entwickler
○ View-Technologie ↔ Präsentatio...
THE SOFTWARE EXPERTS
Was MVVM nicht löst...
● Model am Client oder Server?
● Kommunikation Client ↔ Server
● Problem: Viel...
THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples
THE SOFTWARE EXPERTS
Model View SynchronizedViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchro...
THE SOFTWARE EXPERTS
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
Client hat:
● View
● Vie...
THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples
THE SOFTWARE EXPERTS
Projekt “Ankor”
● 2013
● http://www.ankor.io
● Open Source (Apache License, Version 2.0)
● Erweiterba...
THE SOFTWARE EXPERTS
JEE Server
Ankor - Synchronized ViewModel
Client
View
ViewModel
● strongly typed
● Behaviour
DB
Data ...
THE SOFTWARE EXPERTS
JEE Server
Ankor - Synchronized ViewModel
Client
View
ViewModel
● strongly typed
● Behaviour
DB
Data ...
THE SOFTWARE EXPERTS
Ankor - Überblick Architektur
DB
JEE Server
Ankor Framework
Messaging (Connector HTTP, Websocket, JMS...
THE SOFTWARE EXPERTS
Ankor - Architektur / Client
● Diverse Client-Sprachen und -Plattformen
○ Java
■ JavaFX
■ Android
○ J...
THE SOFTWARE EXPERTS
Ankor - Architektur / Server
● Java SE 1.6 (oder höher)
● Diverse Netzwerk-Protokolle
○ Socket
○ HTTP...
THE SOFTWARE EXPERTS
Ankor - iOS Example
THE SOFTWARE EXPERTS
[[[ANKSystem alloc]
initWith:@"root" connectParams:connectParams
url:@"ws://localhost:8080/websocket/...
THE SOFTWARE EXPERTS
[ANKRefs observe:@"root.model.tasks"
target:self listener:@selector(tasksChanged:)];
Register Change ...
THE SOFTWARE EXPERTS
[ANKRefs fireAction:@"root.model"
name:@"newTask"
params:params]; // Dictionary
Fire Action / Add a n...
THE SOFTWARE EXPERTS
Client
Server● Ankor Annotations
● Ankor Big Collections
○ BigList
○ BigMap
● Ankor Flood Control
● P...
THE SOFTWARE EXPERTS
Client
Server
public class AnimalSearchViewModel {
private List<Animal> animals
= new ArrayList<Anima...
THE SOFTWARE EXPERTS
Client
Server● Ankor Annotations
● Ankor Big Collections
○ BigList
○ BigMap
● Ankor Flood Control
● P...
THE SOFTWARE EXPERTS
Server
● Ankor Annotations
● Ankor Big Collections
○ BigList
○ BigMap
● Ankor Flood Control
● Pluggab...
THE SOFTWARE EXPERTS
Server SVR#2
Client C#1
Ankor - Multiple Sessions and Layers
Server SVR#1
ModelSession S#1
Model
M#1
...
THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples
THE SOFTWARE EXPERTS
ankor.io
Weiterführenden Informationen & Tutorials
http://ankor.io
http://github.com/ankor-io
Nächste SlideShare
Wird geladen in …5
×

JavaLand 2014 - Ankor.io Presentation

1.892 Aufrufe

Veröffentlicht am

Ankor.io presentation by Thomas Spiegl and Manfred Geiler, held at the JavaLand 2014 conference.
Have a look at http://ankor.io

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.892
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.055
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

JavaLand 2014 - Ankor.io Presentation

  1. 1. THE SOFTWARE EXPERTS Moderne UIs mit server-seitigem Model View ViewModel Thomas Spiegl Manfred Geiler Irian Solutions - The Software Experts
  2. 2. THE SOFTWARE EXPERTS Agenda ● M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
  3. 3. THE SOFTWARE EXPERTS „M V V M” ? ● „Model View ViewModel“ ● 2005 von John Gossman (Microsoft) ● ≅„Presentation Model“ von Martin Fowler ● Seperation of Concerns ○ Graphical UI ○ UI Logic
  4. 4. THE SOFTWARE EXPERTS Model View Controller View Model Controller
  5. 5. THE SOFTWARE EXPERTS Model View ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls
  6. 6. THE SOFTWARE EXPERTS M V V M - View ● Grafische Benutzeroberfläche (GUI) ● Benutzereingaben ● Datenbindung („Binding“) auf ViewModel ● Markup ○ XAML ○ FXML Business Logic and Data Presentation & UI Logic DB Data Binding Service Calls ViewModel Model View
  7. 7. 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
  8. 8. 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
  9. 9. THE SOFTWARE EXPERTS Was MVVM löst... ● Separation of Concerns ○ Designer ↔ UI-Entwickler ○ View-Technologie ↔ Präsentations-Logik ● ViewModel testbar! ○ Unit-Tests ○ Mock-UI Business Logic and Data Presentation & UI Logic View DB Data Binding Service Calls ViewModel Model
  10. 10. THE SOFTWARE EXPERTS Was MVVM nicht löst... ● Model am Client oder Server? ● Kommunikation Client ↔ Server ● Problem: Vielfalt Client-Technologien ○ HTML5 ○ iOS ○ Android ○ JavaFX ○ ... Business Logic and Data Presentation & UI Logic View DB Data Binding Service Calls ViewModel Model
  11. 11. THE SOFTWARE EXPERTS Agenda ● M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
  12. 12. THE SOFTWARE EXPERTS Model View SynchronizedViewModel Client Server View ViewModel ViewModel DB Model Data Binding Synchronization
  13. 13. THE SOFTWARE EXPERTS Client Server View ViewModel ViewModel DB Model Data Binding Synchronization Client hat: ● View ● ViewModel Client-Technologie: ● Moderne Plattform ○ HTML5 ○ JavaFX ○ iOS, Android ○ ... ● Schnell anpassbar Server hat: ● ViewModel ● Model Server-Technologie: ● Java EE ● Bewährte Technik ● Stabile Plattform MVSVM - Synchronized ViewModel
  14. 14. THE SOFTWARE EXPERTS Agenda ● M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
  15. 15. THE SOFTWARE EXPERTS Projekt “Ankor” ● 2013 ● http://www.ankor.io ● Open Source (Apache License, Version 2.0) ● Erweiterbares modulares Framework ○ Event Driven Programming Model ○ Asynchronous Processing ○ Bidirectional Communication ○ Support for MVSVM
  16. 16. 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
  17. 17. 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 }
  18. 18. THE SOFTWARE EXPERTS Ankor - Überblick Architektur DB JEE Server Ankor Framework Messaging (Connector HTTP, Websocket, JMS, ...) JavaFX HTML5 iOS .NET ViewModel Model View
  19. 19. THE SOFTWARE EXPERTS Ankor - Architektur / Client ● Diverse Client-Sprachen und -Plattformen ○ Java ■ JavaFX ■ Android ○ Javascript / HTML5 ■ jQuery ■ Dojo Toolkit ■ React ○ Objective-C ■ iOS ○ C# ■ .NET / WPF JEE Server Ankor Framework Messaging (HTTP, Websocket, JMS, ...) JavaFX HTML5 iOS .NET
  20. 20. THE SOFTWARE EXPERTS Ankor - Architektur / Server ● Java SE 1.6 (oder höher) ● Diverse Netzwerk-Protokolle ○ Socket ○ HTTP-Polling ○ Websocket ● Messaging ○ JSON ● Concurrency / Parallelisierung ○ Simple Synchronization ○ Akka Actors ● JEE Container ○ Tomcat ○ Glassfish (Websocket) JEE Server Ankor Framework Messaging (HTTP, Websocket, JMS, ...) JavaFX HTML5 iOS .NET
  21. 21. THE SOFTWARE EXPERTS Ankor - iOS Example
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. THE SOFTWARE EXPERTS Client Server● Ankor Annotations ● Ankor Big Collections ○ BigList ○ BigMap ● Ankor Flood Control ● Pluggable Bean-Factory ○ Simple/Reflection ○ Spring (geplant) ○ CDI (geplant) ● Collaboration Support public class AnimalSearchViewModel { private AnimalSearchFilter filter; @ChangeListener(pattern = {".filter.**"}) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); } } Ankor - Special Features
  26. 26. THE SOFTWARE EXPERTS Client 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 ○ BigList ○ BigMap ● Ankor Flood Control ● Pluggable Bean-Factory ○ Simple/Reflection ○ Spring (geplant) ○ CDI (geplant) ● Collaboration Support Ankor - Special Features
  27. 27. THE SOFTWARE EXPERTS Client Server● Ankor Annotations ● Ankor Big Collections ○ BigList ○ BigMap ● Ankor Flood Control ● Pluggable Bean-Factory ○ Simple/Reflection ○ Spring (geplant) ○ CDI (geplant) ● Collaboration Support public class AnimalSearchViewModel { @ChangeListener(pattern = {".filter.**"}) @AnkorFloodControl(delayMillis = 100L) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); } } Ankor - Special Features
  28. 28. THE SOFTWARE EXPERTS Server ● Ankor Annotations ● Ankor Big Collections ○ BigList ○ BigMap ● Ankor Flood Control ● Pluggable Bean-Factory ○ Simple/Reflection ○ Spring (geplant) ○ CDI (geplant) ● Collaboration Support Shared ViewModel Ankor - Special Features
  29. 29. THE SOFTWARE EXPERTS Server SVR#2 Client C#1 Ankor - Multiple Sessions and Layers Server SVR#1 ModelSession S#1 Model M#1 ModelSession S#2 Model M#1 Model M#2 ModelSession S#3 Model M#1 Model M#3 ModelSession S#4 Model M#2 Client C#2 Support Client C#3 ModelSession S#6 Model M#3 ModelSession S#5 Model M#3 One Way Sync Two Way Sync Direct Access
  30. 30. THE SOFTWARE EXPERTS Agenda ● M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
  31. 31. THE SOFTWARE EXPERTS ankor.io Weiterführenden Informationen & Tutorials http://ankor.io http://github.com/ankor-io

×