ankor presentation @ javaone san francisco september 2014
DESCRIPTION
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.ioTRANSCRIPT
![Page 1: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/1.jpg)
THE SOFTWARE EXPERTS
Reactive UIs with the
Model View ViewModel Pattern:
Simple with Ankor.io
Thomas SpieglManfred Geiler
Irian Solutions - The Software Experts
![Page 2: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/2.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features
![Page 3: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/3.jpg)
THE SOFTWARE EXPERTS
„M V V M” ?
• „Model View ViewModel“
• 2005 by John Gossman (Microsoft)
• „≅ Presentation Model“ by Martin Fowler
• Separation of Concernso Graphical UIo UI logic
![Page 4: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/4.jpg)
THE SOFTWARE EXPERTS
Model View Controller
View
Model
Controller
![Page 5: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/5.jpg)
THE SOFTWARE EXPERTS
Model View ViewModel
Business Logic and Data
Presentation & UI Logic
View
DB
Binding
ViewModel
Domain Model
Service Calls
![Page 6: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/6.jpg)
THE SOFTWARE EXPERTS
M V V M – The View
• Graphical user interface (GUI)
• User inputs
• Data binding to the ViewModel
• Markupo XAML o FXML
Business Logic and Data
Presentation & UI Logic
DB
Data Binding
Service Calls
ViewModel
Model
View
![Page 7: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/7.jpg)
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 CallsModel
ViewModel
![Page 8: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/8.jpg)
THE SOFTWARE EXPERTS
M V V M – The Model
• Domain model
• Data(base) access
• Domain logic
• Business Rules
• Validation
• Unit testing Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 9: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/9.jpg)
THE SOFTWARE EXPERTS
MVVM solves...
• Separation of concernso Web designer ↔ UI developero View technology ↔ Presentation logic
• Testable ViewModel!o Unit testso Mock View
Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 10: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/10.jpg)
THE SOFTWARE EXPERTS
MVVM does not solve...
• Model on client or server?
• Communication client ↔ server
• Various client technologieso HTML5o iOSo Androido JavaFXo ... Business Logic and Data
Presentation & UI Logic
View
DB
Data Binding
Service Calls
ViewModel
Model
![Page 11: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/11.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features
![Page 12: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/12.jpg)
THE SOFTWARE EXPERTS
Model View SynchronizedViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
![Page 13: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/13.jpg)
THE SOFTWARE EXPERTS
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
![Page 14: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/14.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features
![Page 15: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/15.jpg)
THE SOFTWARE EXPERTS
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
![Page 16: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/16.jpg)
THE SOFTWARE EXPERTS
Ankor Server
Ankor - Synchronized ViewModel
Client
View
ViewModel● Strongly typed● Behaviour
DB
Data Binding
Change Events
Action Events
ViewModel● Type-less● Only data
Model
![Page 17: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/17.jpg)
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}
![Page 18: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/18.jpg)
THE SOFTWARE EXPERTS
Ankor – Architecture overview
DB
JEE Server
Ankor Framework
Messaging (Connector HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
ViewModel
Model
View
![Page 19: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/19.jpg)
THE SOFTWARE EXPERTS
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, ...)
JavaFX HTML5 iOS .NET
![Page 20: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/20.jpg)
THE SOFTWARE EXPERTS
Ankor – Server Architecture
• Java SE 1.6 (or higher)
• Various network protocolso Socketo HTTP-Pollingo Websocket
• Messagingo JSON
• Concurrency / Parallelizationo Simple Synchronizationo Akka Actors
• JEE / Web Containero Glassfish (Websocket)o Tomcato Spring Boot (Websocket, embedded Tomcat)
JEE Server
Ankor Framework
Messaging (HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
![Page 21: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/21.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features
![Page 22: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/22.jpg)
THE SOFTWARE EXPERTS
Ankor - iOS Example
![Page 23: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/23.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
![Page 24: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/24.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
![Page 25: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/25.jpg)
THE SOFTWARE EXPERTS
[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
![Page 26: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/26.jpg)
THE SOFTWARE EXPERTS
Agenda
• M V V M
• New concept „MVSVM“
• Ankor framework
• Ankor live sample
• Ankor special features
![Page 27: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/27.jpg)
THE SOFTWARE EXPERTS
Client
Server• Ankor Annotations
• Ankor Big Collectionso BigListo BigMap
• Ankor Flood Control
• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)
• Collaboration Support
• Stateless ServerModel
public class AnimalSearchViewModel {
private AnimalSearchFilter filter;
@ChangeListener(pattern = {".filter.**"}) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); }
Ankor - Special Features
![Page 28: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/28.jpg)
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 Collectionso BigListo BigMap
• Ankor Flood Control
• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)
• Collaboration Support
• Stateless ServerModel
Ankor - Special Features
Client
![Page 29: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/29.jpg)
THE SOFTWARE EXPERTS
Server• Ankor Annotations
• Ankor Big Collectionso BigListo BigMap
• Ankor Flood Control
• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)
• Collaboration Support
• Stateless ServerModel
public class AnimalSearchViewModel {
@ChangeListener(pattern = {".filter.**"}) @AnkorFloodControl(delayMillis = 100L) public void reloadAnimals() { this.animals = animalRepository.searchAnimals(filter); }
Ankor - Special Features
Client
![Page 30: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/30.jpg)
THE SOFTWARE EXPERTS
Server
Shared ViewModel
• Ankor Annotations
• Ankor Big Collectionso BigListo BigMap
• Ankor Flood Control
• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)
• Collaboration Support
• Stateless ServerModel
Ankor - Special Features
![Page 31: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/31.jpg)
THE SOFTWARE EXPERTS
Server
• Ankor Annotations
• Ankor Big Collectionso BigListo BigMap
• Ankor Flood Control
• Pluggable Bean-Factoryo Simple/Reflectiono Springo CDI (planned)
• Collaboration Support
• Stateless ServerModel
Ankor - Special Features
send state information
public class TaskListModel { @StateHolder private Filter filter; public void setFilter(String filter) { this.filter = Filter.valueOf(filter); initCalculatedFields(); }
![Page 32: Ankor Presentation @ JavaOne San Francisco September 2014](https://reader033.vdocuments.us/reader033/viewer/2022060117/55856cb3d8b42a512c8b474b/html5/thumbnails/32.jpg)
THE SOFTWARE EXPERTS
Ankor.io
Further information, documentation & tutorials
http://ankor.io
http://github.com/ankor-io
Thomas Spiegl
Manfred Geiler