Ankor Presentation on October 2nd, 2014 at the JavaOne in San Francisco held by Thomas Spiegl and Manfred Geiler. Have a look at http://ankor.io

1. THE SOFTWARE EXPERTS
Reactive UIs with the
Model View ViewModel Pattern:
Simple with Ankor.io
Thomas Spiegl
Manfred Geiler
Irian Solutions - The Software Experts

2. THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

3. THE SOFTWARE EXPERTS
„M V V M” ?
• „Model View ViewModel“
• 2005 by John Gossman (Microsoft)
• ≅ „Presentation Model“ by Martin Fowler
• Separation of Concerns
o Graphical UI
o 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 – The View
• Graphical user interface (GUI)
• User inputs
• Data binding to the ViewModel
• Markup
o XAML
o FXML
Business Logic and Data
Presentation & UI Logic
DB
Data Binding
ViewModel
Service Calls
Model
View

7. THE SOFTWARE EXPERTS
M V V M – The ViewModel
• Link between View and Model
• Connection to Model (service calls)
• Properties and actions for the View (binding)
• UI logic
• UI validation
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
Model
ViewModel

8. THE SOFTWARE EXPERTS
M V V M – The Model
• Domain model
• Data(base) access
• Domain logic
• Business Rules
Presentation & UI Logic
• Validation
View
• Unit testing Business Logic and Data
DB
Data Binding
ViewModel
Service Calls
Model

9. THE SOFTWARE EXPERTS
MVVM solves...
• Separation of concerns
o Web designer ↔ UI developer
o View technology ↔ Presentation logic
• Testable ViewModel!
o Unit tests
o Mock View
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
ViewModel
Service Calls
Model

10. THE SOFTWARE EXPERTS
MVVM does not solve...
• Model on client or server?
• Communication client ↔ server
• Various client technologies
o HTML5
o iOS
o Android
o JavaFX
Presentation & UI Logic
View
ViewModel
o ... Business Logic and Data
DB
Data Binding
Service Calls
Model

11. THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

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

13. THE SOFTWARE EXPERTS
MVSVM - Synchronized ViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
Client holds:
• View
• ViewModel
Client technology:
• Modern platform
o HTML5
o JavaFX
o iOS, Android
o ...
• Very latest frameworks
• Cutting edge
Server holds:
• ViewModel
• Model
Server technology:
• Java EE
• Approved patterns
• Stable platform

14. THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

15. THE SOFTWARE EXPERTS
Project „Ankor”
• 2013
• http://www.ankor.io
• Open Source (Apache License, Version 2.0)
• Expandable modular framework
o Event driven programming model
o Asynchronous processing
o Bidirectional client-server communication
o Native MVSVM support

16. THE SOFTWARE EXPERTS
Ankor Server
Client
Ankor - Synchronized ViewModel
View
ViewModel
● Strongly typed
● Behaviour
DB
Data Binding
Change Events
Action Events
ViewModel
● Type-less
● Only data
Model

17. THE SOFTWARE EXPERTS
JEE Server
Client
Ankor - Synchronized ViewModel
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
JavaFX HTML5 iOS .NET
Messaging (Connector HTTP, Websocket, JMS, ...)
Ankor Framework
JEE Server
DB
Ankor – Architecture overview
View
ViewModel
Model

19. THE SOFTWARE EXPERTS
Ankor – Client Architecture
• Various client languages und platforms
o Java
 JavaFX
 Android
o Javascript / HTML5
 jQuery
 AngularJS
 React
o Objective-C
 iOS
o C#
 .NET / WPF
JavaFX HTML5 iOS .NET
Messaging (HTTP, Websocket, JMS, ...)
Ankor Framework
JEE Server

20. THE SOFTWARE EXPERTS
Ankor – Server Architecture
• Java SE 1.6 (or higher)
• Various network protocols
o Socket
o HTTP-Polling
o Websocket
• Messaging
o JSON
• Concurrency / Parallelization
o Simple Synchronization
o Akka Actors
• JEE / Web Container
JavaFX HTML5 iOS .NET
Messaging (HTTP, Websocket, JMS, ...)
Ankor Framework
o Glassfish (Websocket)
o Tomcat
o Spring Boot (Websocket, embedded Tomcat)
JEE Server

21. THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

22. THE SOFTWARE EXPERTS
Ankor - iOS Example

23. THE SOFTWARE EXPERTS
Ankor - iOS Example
Start Ankor System, connect to server
[[[ANKSystem alloc]
initWith:@"root" connectParams:connectParams
url:@"ws://localhost:8080/websocket/ankor"
useWebsocket:YES] start];

24. THE SOFTWARE EXPERTS
Register Change Listener
[ANKRefs observe:@"root.model.tasks"
target:self listener:@selector(tasksChanged:)];
Change Listener
- (void)tasksChanged:(id) value {
[[self toDoItems]removeAllObjects];
[[self toDoItems]addObjectsFromArray:value];
[self.tableView reloadData];
}
Ankor - iOS Example

25. THE SOFTWARE EXPERTS
Ankor - iOS Example
Fire Action / Add a new Task
[ANKRefs fireAction:@"root.model"
name:@"newTask"
params:params]; // Dictionary
ActionListener Java
@ActionListener
public void newTask(@Param("title") final String title)
{...}

26. THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

27. THE SOFTWARE EXPERTS
Client
Ankor - Special Features
Server • Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring
o CDI (planned)
• Collaboration Support
• Stateless Server
Model
public class AnimalSearchViewModel {
private AnimalSearchFilter filter;
@ChangeListener(pattern = {".filter.**"})
public void reloadAnimals() {
this.animals
= animalRepository.searchAnimals(filter);
}

28. 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
o CDI (planned)
• Collaboration Support
• Stateless Server
Model
Ankor - Special Features
Client

29. THE SOFTWARE EXPERTS
Ankor - Special Features
Server • Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring
o CDI (planned)
• Collaboration Support
• Stateless Server
Model
public class AnimalSearchViewModel {
@ChangeListener(pattern = {".filter.**"})
@AnkorFloodControl(delayMillis = 100L)
public void reloadAnimals() {
this.animals
= animalRepository.searchAnimals(filter);
}
Client

30. 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
o CDI (planned)
• Collaboration Support
• Stateless Server
Model
Ankor - Special Features

31. THE SOFTWARE EXPERTS
Server
• Ankor Annotations
• Ankor Big Collections
o BigList
o BigMap
• Ankor Flood Control
• Pluggable Bean-Factory
o Simple/Reflection
o Spring
o CDI (planned)
• Collaboration Support
• Stateless Server
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();
}

32. THE SOFTWARE EXPERTS
Ankor.io
Further information, documentation & tutorials
http://ankor.io
http://github.com/ankor-io
Thomas Spiegl
Manfred Geiler