JavaLand 2014 - Ankor.io Presentation
description
Transcript of JavaLand 2014 - Ankor.io Presentation
![Page 1: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/1.jpg)
THE SOFTWARE EXPERTS
Moderne UIs mitserver-seitigem
Model View ViewModel
Thomas SpieglManfred Geiler
Irian Solutions - The Software Experts
![Page 2: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/2.jpg)
THE SOFTWARE EXPERTS
Agenda
● M V V M● Neues Konzept MVSVM● Ankor Framework● Live Samples
![Page 3: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/3.jpg)
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
![Page 4: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/4.jpg)
THE SOFTWARE EXPERTS
Model View Controller
View
Model
Controller
![Page 5: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/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: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/6.jpg)
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
![Page 7: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/7.jpg)
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 CallsModel
ViewModel
![Page 8: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/8.jpg)
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
![Page 9: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/9.jpg)
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
![Page 10: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/10.jpg)
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
![Page 11: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/11.jpg)
THE SOFTWARE EXPERTS
Agenda
● M V V M● Neues Konzept MVSVM● Ankor Framework● Live Samples
![Page 12: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/12.jpg)
THE SOFTWARE EXPERTS
Model View SynchronizedViewModel
Client
Server
View
ViewModel ViewModel
DB
Model
Data Binding
Synchronization
![Page 13: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/13.jpg)
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
![Page 14: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/14.jpg)
THE SOFTWARE EXPERTS
Agenda
● M V V M● Neues Konzept MVSVM● Ankor Framework● Live Samples
![Page 15: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/15.jpg)
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
![Page 16: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/16.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
![Page 17: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/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: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/18.jpg)
THE SOFTWARE EXPERTS
Ankor - Überblick Architektur
DB
JEE Server
Ankor Framework
Messaging (Connector HTTP, Websocket, JMS, ...)
JavaFX HTML5 iOS .NET
ViewModel
Model
View
![Page 19: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/19.jpg)
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
![Page 20: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/20.jpg)
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
![Page 21: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/21.jpg)
THE SOFTWARE EXPERTS
Ankor - iOS Example
![Page 22: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/22.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 23: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/23.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 24: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/24.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 25: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/25.jpg)
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
![Page 26: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/26.jpg)
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
![Page 27: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/27.jpg)
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
![Page 28: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/28.jpg)
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
![Page 29: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/29.jpg)
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
![Page 30: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/30.jpg)
THE SOFTWARE EXPERTS
Agenda
● M V V M● Neues Konzept MVSVM● Ankor Framework● Live Samples
![Page 31: JavaLand 2014 - Ankor.io Presentation](https://reader034.fdocuments.in/reader034/viewer/2022052617/547cdeb4b4af9fa5158b519c/html5/thumbnails/31.jpg)
THE SOFTWARE EXPERTS
ankor.io
Weiterführenden Informationen & Tutorials
http://ankor.iohttp://github.com/ankor-io