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

THE SOFTWARE EXPERTS

Reactive UIs with the

Model View ViewModel Pattern:

Simple with Ankor.io

Thomas SpieglManfred 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 Concernso Graphical UIo 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

• Markupo XAML o FXML



DB

Data Binding

Service Calls

ViewModel

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 CallsModel

ViewModel


M V V M – The Model

• Domain model

• Data(base) access

• Domain logic

• Business Rules

• Validation

• Unit testing Business Logic and Data


View

DB

Data Binding

Service Calls

ViewModel

Model


MVVM solves...

• Separation of concernso Web designer ↔ UI developero View technology ↔ Presentation logic

• Testable ViewModel!o Unit testso Mock UI



View

DB

Data Binding

Service Calls

ViewModel

Model


MVVM does not solve...

• Model on client or server?

• Communication client ↔ server

• Various client technologieso HTML5o iOSo Androido JavaFXo ... Business Logic and Data


View

DB

Data Binding

Service Calls

ViewModel

Model


Agenda

• M V V M


• Ankor framework




Model View SynchronizedViewModel

Client

Server

View

ViewModel ViewModel

DB

Model

Data Binding

Synchronization


Client

Server

View

ViewModel ViewModel

DB

Model

Data Binding

Synchronization

Client holds:

• View

• ViewModel

Client technology:

• Modern platformo HTML5

o JavaFX

o iOS, Android

o ...

• Very latest frameworks

• Cutting edge

Server holds:

• ViewModel

• Model

Server technology:

• Java EE

• Approved patterns

• Stable platform

MVSVM - Synchronized ViewModel


Agenda

• M V V M


• Ankor framework




Project „Ankor”

• 2013

• http://www.ankor.io

• Open Source (Apache License, Version 2.0)

• Expandable modular frameworko Event driven programming model

o Asynchronous processing

o Bidirectional client-server communication

o Native MVSVM support


Ankor Server

Ankor - Synchronized ViewModel

Client

View

ViewModel● Strongly typed● Behaviour

DB

Data Binding

Change Events

Action Events

ViewModel● Type-less● Only data

Model


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}


Ankor – Architecture overview

DB

JEE Server

Ankor Framework

Messaging (Connector HTTP, Websocket, JMS, ...)

JavaFX HTML5 iOS .NET

ViewModel

Model

View


Ankor – Client Architecture

• Various client languages und platformso Java

JavaFX Android

o Javascript / HTML5 jQuery AngularJS React

o Objective-C iOS

o C# .NET / WPF

JEE Server

Ankor Framework

Messaging (HTTP, Websocket, JMS, ...)



Ankor – Server Architecture

• Java SE 1.6 (or higher)

• Diverse Netzwerk-Protokolleo Socketo HTTP-Pollingo Websocket

• Messagingo JSON

• Concurrency / Parallelisierungo Simple Synchronizationo Akka Actors

• JEE Containero Glassfish (Websocket)o Tomcato Spring Boot (embedded Tomcat)

JEE Server

Ankor Framework

Messaging (HTTP, Websocket, JMS, ...)



Agenda

• M V V M


• Ankor framework




Ankor - iOS Example


[[[ANKSystem alloc] initWith:@"root" connectParams:connectParams url:@"ws://localhost:8080/websocket/ankor"useWebsocket:YES] start];

Start Ankor System, connect to server

Ankor - iOS Example


[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


[ANKRefs fireAction:@"root.model" name:@"newTask" params:params]; // Dictionary

Fire Action / Add a new Task

@ActionListenerpublic void newTask(@Param("title") final String title){...}

ActionListener Java

Ankor - iOS Example


Agenda

• M V V M


• Ankor framework




Client

Server• Ankor Annotations

• Ankor Big Collectionso BigListo BigMap

• Ankor Flood Control

• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)

• Collaboration Support

• Stateless Model

public class AnimalSearchViewModel {

private AnimalSearchFilter filter;

@ChangeListener(pattern = {".filter.**"}) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); }

Ankor - Special Features


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





• Stateless Model


Client


Server• Ankor Annotations





• Stateless Model


@ChangeListener(pattern = {".filter.**"}) @AnkorFloodControl(delayMillis = 100L) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); }


Client


Server

Shared ViewModel






• Stateless Model



Server






• Stateless 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

http://ankor.io/

http://github.com/ankor-io

Documents

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