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

1. THE SOFTWARE EXPERTS
Moderne UIs 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
„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. THE SOFTWARE EXPERTS
Model View Controller
View
Model
Controller

5. THE SOFTWARE EXPERTS
Model View ViewModel
Business Logic and Data
Presentation & UI Logic
View
DB
Binding
ViewModel
Domain
Model
Service Calls

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. 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. 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. 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. 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. THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples

12. THE SOFTWARE EXPERTS
Model View SynchronizedViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization

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. 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
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. 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. 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
[[[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. 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. 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. 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
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. 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
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. THE SOFTWARE EXPERTS
Agenda
● M V V M
● Neues Konzept MVSVM
● Ankor Framework
● Live Samples

31. THE SOFTWARE EXPERTS
ankor.io
Weiterführenden Informationen & Tutorials
http://ankor.io
http://github.com/ankor-io