Download as PDF, PPTX
![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
}](https://image.slidesharecdn.com/javaland2014-ankorpresentation-140402073537-phpapp02/85/JavaLand-2014-Ankor-io-Presentation-17-320.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](https://image.slidesharecdn.com/javaland2014-ankorpresentation-140402073537-phpapp02/85/JavaLand-2014-Ankor-io-Presentation-22-320.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](https://image.slidesharecdn.com/javaland2014-ankorpresentation-140402073537-phpapp02/85/JavaLand-2014-Ankor-io-Presentation-23-320.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](https://image.slidesharecdn.com/javaland2014-ankorpresentation-140402073537-phpapp02/85/JavaLand-2014-Ankor-io-Presentation-24-320.jpg)
![[2015/2016] Require JS and Handlebars JS](https://cdn.slidesharecdn.com/ss_thumbnails/08requirehandlebars-160513223448-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2015/2016] JavaScript](https://cdn.slidesharecdn.com/ss_thumbnails/04javascript-160321110338-thumbnail.jpg?width=640&height=640&fit=bounds)
JavaLand 2014 - Ankor.io Presentation
- 1. THE SOFTWARE EXPERTS ModerneUIs mit server-seitigem Model View ViewModel Thomas Spiegl Manfred Geiler Irian Solutions - The Software Experts
- 2. THE SOFTWARE EXPERTS Agenda ●M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
- 3. THE SOFTWARE EXPERTS „MV V M” ? ● „Model View ViewModel“ ● 2005 von John Gossman (Microsoft) ● ≅„Presentation Model“ von Martin Fowler ● Seperation of Concerns ○ Graphical UI ○ UI Logic
- 4. THE SOFTWARE EXPERTS ModelView Controller View Model Controller
- 5. THE SOFTWARE EXPERTS ModelView ViewModel Business Logic and Data Presentation & UI Logic View DB Binding ViewModel Domain Model Service Calls
- 6. THE SOFTWARE EXPERTS MV 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. THE SOFTWARE EXPERTS MV 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. THE SOFTWARE EXPERTS MV 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. THE SOFTWARE EXPERTS WasMVVM 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. THE SOFTWARE EXPERTS WasMVVM 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. THE SOFTWARE EXPERTS Agenda ●M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
- 12. THE SOFTWARE EXPERTS ModelView SynchronizedViewModel Client Server View ViewModel ViewModel DB Model Data Binding Synchronization
- 13. THE SOFTWARE EXPERTS Client Server View ViewModelViewModel 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. THE SOFTWARE EXPERTS Agenda ●M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
- 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. THE SOFTWARE EXPERTS JEEServer Ankor - Synchronized ViewModel Client View ViewModel ● strongly typed ● Behaviour DB Data Binding Change Events Action Events ViewModel ● type-less ● only Data Model
- 17. THE SOFTWARE EXPERTS JEEServer 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. THE SOFTWARE EXPERTS Ankor- Überblick Architektur DB JEE Server Ankor Framework Messaging (Connector HTTP, Websocket, JMS, ...) JavaFX HTML5 iOS .NET ViewModel Model View
- 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. 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. THE SOFTWARE EXPERTS Ankor- iOS Example
- 22. THE SOFTWARE EXPERTS [[[ANKSystemalloc] initWith:@"root" connectParams:connectParams url:@"ws://localhost:8080/websocket/ankor" useWebsocket:YES] start]; Start Ankor System, connect to server Ankor - iOS Example
- 23. THE SOFTWARE EXPERTS [ANKRefsobserve:@"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. THE SOFTWARE EXPERTS [ANKRefsfireAction:@"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. 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. THE SOFTWARE EXPERTS Client Server publicclass 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. 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. 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. THE SOFTWARE EXPERTS ServerSVR#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. THE SOFTWARE EXPERTS Agenda ●M V V M ● Neues Konzept MVSVM ● Ankor Framework ● Live Samples
- 31. THE SOFTWARE EXPERTS ankor.io WeiterführendenInformationen & Tutorials http://ankor.io http://github.com/ankor-io