Ankor Presentation @ JavaOne San Francisco September 2014

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

Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features

„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

Model View Controller
View
Model
Controller

Model View ViewModel
Business Logic and Data
Presentation & UI Logic
View
DB
Binding
ViewModel
Domain
Model
Service Calls

M V V M – The View
• Graphical user interface (GUI)
• User inputs
• Data binding to the ViewModel
• Markup
o XAML
o FXML
DB
Data Binding
ViewModel
Service Calls
Model
View

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
View
DB
Data Binding
Service Calls
Model
ViewModel

M V V M – The Model
• Domain model
• Data(base) access
• Domain logic
• Business Rules
• Validation
View
• Unit testing Business Logic and Data
DB
Data Binding
ViewModel
Service Calls
Model

MVVM solves...
• Separation of concerns
o Web designer ↔ UI developer
o View technology ↔ Presentation logic
• Testable ViewModel!
o Unit tests
o Mock View
View
DB
Data Binding
ViewModel
Service Calls
Model

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

Client
Server
Model View SynchronizedViewModel
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization

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

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

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

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
}

JavaFX HTML5 iOS .NET
Messaging (Connector HTTP, Websocket, JMS, ...)
Ankor Framework
JEE Server
DB
Ankor – Architecture overview
View
ViewModel
Model

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
Messaging (HTTP, Websocket, JMS, ...)
Ankor Framework
JEE Server

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
Messaging (HTTP, Websocket, JMS, ...)
Ankor Framework
o Glassfish (Websocket)
o Tomcat
o Spring Boot (Websocket, embedded Tomcat)
JEE Server

Ankor - iOS Example

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

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

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)
{...}

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);
}

Server
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
o BigList
o BigMap
o Simple/Reflection
o Spring
o CDI (planned)
Model
Client

Server • Ankor Annotations
o BigList
o BigMap
o Simple/Reflection
o Spring
o CDI (planned)
Model
@ChangeListener(pattern = {".filter.**"})
@AnkorFloodControl(delayMillis = 100L)
public void reloadAnimals() {
this.animals
= animalRepository.searchAnimals(filter);
}
Client

Server
Shared ViewModel
o BigList
o BigMap
o Simple/Reflection
o Spring
o CDI (planned)
Model

Server
o BigList
o BigMap
o Simple/Reflection
o Spring
o CDI (planned)
Model
send state
information
public class TaskListModel {
@StateHolder
private Filter filter;
public void setFilter(String filter) {
this.filter =
Filter.valueOf(filter);
initCalculatedFields();
}

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

Ankor Presentation @ JavaOne San Francisco September 2014

More Related Content

What's hot (20)

Similar to Ankor Presentation @ JavaOne San Francisco September 2014 (20)

Recently uploaded (20)

Ankor Presentation @ JavaOne San Francisco September 2014