Message-based MVC Architecture for Distributed and Desktop Applications

1. Message-based MVC Architecture for Distributed and Desktop Applications Xiaohong Qiu Department of Electrical Engineering and Computer Science Syracuse University Xiaohong Qiu

2. Presentation Topics Background for My Research Architecture of Message-based MVC SVG Experiments Performance Analysis Collaboration Paradigms Conclusion and Future work Xiaohong Qiu

3. Background • General area is technology support for Synchronous and Asynchronous Resource Sharing. • Grids manage and share (typically asynchronously) resources (people, computers, data, applications etc.) or distributed services in a centralized fashion. • Web Services • define loosely coupled software components across internet interacting with messages. • Peer-to-Peer Grids • link services, resources and clients in dynamic decentralized fashion. • The system consists of a sea of message-based Services (e.g. shared SVG as a Web Service) • Serviceslinked by publish/subscribe messaging infrastructure (e.g. NaradaBrokering) • e-learning (e.g. video/audio conferencing) • e-science (e.g. large-scale distributed computing) • e-business (e.g. virtual organizations) • e-entertainment (e.g. online game) Xiaohong Qiu

4. Classic Grid Architecture Resources Netsolve Security Middle TierBrokers Service Providers Computing Collaboration Composition Content Access Middle Tier becomes Web Services Clients A centralized organization Xiaohong Qiu

5. Peer to Peer Grids User Facing Web Service Interfaces Peers Brokers Brokers Event/Message Brokers Brokers Event/Message Brokers Brokers Service Facing Web Service Interfaces Peers A democratic organization Xiaohong Qiu

6. Research on a generic model of building applications • Application domains • Distributed (Web) • Service Oriented Architecture and Web Services • Desktop (client) • Model-View-Controller (MVC) paradigm • Internet collaboration • Hierarchical Web Service pipeline model • Motivations • CPU speed (Moore’s law) and network bandwidth (Gilder’s law) continue to improve bring fundamental changes • Internet and Web technologies have evolved into a global information infrastructure for sharing of resources • Applications getting increasingly sophisticated • Internet collaboration enabling virtual enterprises • large-scale distributed computing • Requires new application architecture that is adaptable to fast technology changes with properties Xiaohong Qiu

7. Summary of the situation • The Internet has evolved into stability • TCP/IP network stack dominating the communication protocol domain; • IP forms the low-level sphere surrounding hardware network core • Construction of distributed operating system over the Internet is not completed • It keeps adding new functionalities to the general purpose platform • One current effort focuses on building of messaging infrastructure tailored for disparate applications • Evolution of application architectures • client-server model • Multi-tier (e.g. three-tier) model • A variety of distributed model (e.g. Java RMI, CORBA, COM/DCOM, J2EE, .NET) • Grids • Peer-to-peer • Web Services and SOA • Web application deployment shows diverse directions but have common features • User interfaces • Services for the sharing of information and resources (e.g. through unicast and multicast of group communication) • In the most general sense, collaboration is the core problem and service of Web applications, although “collaboration” usually refers to system with real-time synchronous and compelling time constraints • Next generation of Web client should enable pervasive accessibility • Ubiquitous availability to clients fro heterogeneous platforms (e.g. Windows, Linux, Unix, and PalmOS) • Uniform Web interface that provides a platform with aggregation of multiple services Xiaohong Qiu

8. Architecture of network system Xiaohong Qiu

9. Our approach • Explicit messaging replacing implicit messaging of traditional event listener paradigms • Key idea is to generalize MVC with model and view communicating by messages with the messaging providing control mechanism • Message-based MVC (M-MVC) paradigm integrates distributed, Web, and desktop applications • SMMV and MMMV for general collaboration paradigms • Prototyping monolithic SVG collaborations • Shared SVG browser • Share online chess game • Decomposed SVG experiments and detailed performance measurements to test viability of loose coupling services message-based • Specifically investigate • M-MVC and MVC • M-MVC and Web Applications (Services) • M-MVC and collaboration (SMMV and MMMV paradigms) • M-MVC and messaging infrastructure (NaradaBrokering middleware) Xiaohong Qiu

10. Related Technologies • Batik SVG browser(an open source project from Apache that supports SVG 1.0) • A presentation style application is representative and complex in nature (we experiments with multiplayer-online game with high interactivity and compelling time constraints) • Similar applications includes Microsoft PowerPoint, Adobe Illustrator, Macromedia Flash • SVG(W3C specifications for Scalable Vector Graphics) • A language for describing 2D vector and mixed vector/raster graphics in XML. • DOM(W3C specifications for Document Object Model) • Programmatic interfaces for access and manipulate structured document object • All modern browsers (approximately) support the W3C DOM • DOM event model specifies event semantics and how to register event handlers and describe event flow through a tree structure Xiaohong Qiu

11. Model Model-View-Controller (MVC) model Controller View Mouse event Keyboard events Display Xiaohong Qiu

12. Double-linked multiple-stage Web Services pipeline model of Web applications Object Or WS Object’ Or WS’ Object’’ Or WS’’ Object Or View Object Or Display Xiaohong Qiu

13. Architecture of Message-based MVC • M-MVC is a general approach for building applications with a message-based paradigm • It emphasizes a universal modularized service model with messaging linkage • Converges desktop application, Web application, and Internet collaboration • MVC and Web Services are fundamental architectures for desktop and Web applications • Web Service pipeline model provides the general collaboration architecture for distributed applications • M-MVC is a uniform architecture integrating the above models • M-MVC allows automatic collaboration, which simplifies the architecture design Xiaohong Qiu

14. Message-based MVC model Xiaohong Qiu

15. Model View Controller Decomposition of SVG Browser Semantic Model Events as messages Rendering as messages Controller High Level UI Input port Output port View Events as messages Rendering as messages Raw UI Display Display Messages contain control information a. MVC Model b. Three-stage pipeline A comparison of MVC and pipeline model in a case of SVG application Reformulation of SVGto message-based MVC in a Web Service Model Xiaohong Qiu

16. Monolithic SVG Experiments • Collaborative SVG Browser • Teacher-Students scenario • Static Shared SVG contents • Dynamic Share SVG contents • Hyperlink • Interactivity and animation (JavaScript binding) • Collaborative SVG Chess game • Two players-multiple observers scenario • Complex interactivity with game intelligence Xiaohong Qiu

17. Collaborative SVG Chess Game Players Xiaohong Qiu Observers

18. Set up an event class (topic) Subscribe to the topic Broker Publish an event to collaborative clients Facing Resource Port Facing Facing Resource Port Model Model Application as Web Service Application as Web Service JavaScript JavaScript SVG DOM SVG DOM Port User Port Facing User Facing Input port Output port Output port Input port Rendering as messages Rendering as messages Event as messages GVT GVT Renderer Renderer View View Participating client Master client Making SVG collaborative by sharing of intercepted events via messaging broker with Publish/Subscribe scheme Xiaohong Qiu

19. Collaborative events (e.g. Master Events which has context information of collaboration and information from previous stages) Raw UI events (e.g. Mouse and key events) Semantic events (e.g. Application events such as “capture” in chess game) High Level UI events (e.g. SVG/DOM events) Collaborative SVG Event processing chart Classes of Events in SVG Around 60 detailed Events Xiaohong Qiu

20. R R R Other client SVG browser n Master client SVG browser 1 Other client SVG browser 2 XGSP Session control Server F F F I I I O O O Control to/from all SVG browsers in the collaborative session NaradaBrokering Event (Message) Service Infrastructure Data from master client Data from master client Control to/from XGSP Control to/from XGSP • • • Data to other clients Control to/from XGSP Architecture of collaborative SVG browser on PC This is monolithic SVG exampleShows potential use of XGSP from GlobalMMCS project tocontrol collaborative applications Xiaohong Qiu

21. NaradaBrokering Event (Message) Service Infrastructure XGSP Session control Server Control to/from Control to/from SVG WS1,2, …, n SVG WS1,2, …, n SVG WS 1 SVG display 2 SVG display n SVG display 1 Rendering to SVG display 2 Rendering from SVG WS 2 SVG WS 2 Control to/from SVG display 2 Control to/from XGSP, SVG display 2 • • • • • • SVG WS n Internet Game Architecture of multiplayer game with SVG This is decomposed SVG example Xiaohong Qiu

22. Decomposed SVG Experiments • Convert a standalone application into distributed system by splitting Model and View. • Where to split? • How to split? • How difficult to split? • Is performance acceptable? Xiaohong Qiu

23. Broker Pub/Sub View Model Control View Model View Messages Model c) publish/subscribe (message-based) a) classic (method-based) b) request/response (method-based or message-based) Three MVC approaches based on different communication mechanism and interactive pattern between model and view Xiaohong Qiu

24. Broker Set up an event class (topic) Subscribe to event class Send event publish an event class register call back method B A A B invoke call back method with event message based method based Method-based MVC vs. message-based MVC What we are doing when we move from classic MVC (monolithic model) to M-MVC (decomposed model) Xiaohong Qiu

25. Decomposition Point View Model GVT tree’ (GraphicsNode changes ) DOM tree’ (after mutation) SVG parser Output (Renderer) (update image buffer) GVT tree (GraphicsNode events) DOM tree (before mutation) (DOM events) Input (UI events) (e.g. Mouse and key events) JavaScript (access and manipulate DOM element) Decomposition of SVG browser into stages of pipeline We analyzed flow of events in Batik to see where best to decompose into Model and View. There was no clear separation in original code Xiaohong Qiu

26. Important principals • One should split at points where the original method based linkage involved serializable Java objects. • Serialization is needed before the method arguments can be transported and this is familiar from Java RMI. • “Spaghetti” classes implied that additional state information would need to be transmitted if we split at points where classes spanned interfaces from different modules. • Batik often involved large classes that implemented many different interfaces. These interfaces often came from different parts of the program and crossed the possible stages mentioned above. • Message-based MVC paradigm tends to force a more restrictive programming model • All data are shared explicitly and not implicitly via interfaces crossing splitting lines. Xiaohong Qiu

27. Implementation of Decomposed SVG Browser Xiaohong Qiu

28. Broker Broker subscribe subscribe publish publish send event A send event A B A B View Shared state Separated component/service model Conventional shared state model Implicit State Implicit state needs to be serialized and integrated into the service model. Xiaohong Qiu

29. The changes bring up issues that cause a challenge to the system • Timing becomes a compelling issue • With the separation of client and Web Service server, original assumption and design principle break • The time scope drastically increases from tens of microsecond level (e.g. a Java method call) to a few milliseconds level (network latency plus system overhead). • Object serialization is a must have toolkit • Messages, as a linkage vehicle, contains component information from both sides and keep context same • Synchronization is a factor to consider for context consistency Xiaohong Qiu

30. Performance and Analysis • Experiments with decomposed Batik SVG browser based on M-MVC model. • The decomposed Model and View interact with event-based message via messaging broker provided by NaradaBrokering. • Many variables are set for testing scenarios, which including • locations of Model, View and event broker • runtime environment (e.g. OS and network connection) • Analysis • Relationship of user interactions and structure of mouse events • Performance of fine-grained mouse events • Factors (network latency and computation overhead, thread scheduling etc.) that affect overall system performance Xiaohong Qiu

31. Definition of typical events of distributed applications Xiaohong Qiu

32. Summary of typical distributed applications and characteristics Xiaohong Qiu

33. Notification service (NaradaBrokering) View(Client) Model(Service) Output (Rendering) GVT tree’ DOM tree’ (mirrored) Event Processor DOM tree’ (after mutation) T4 T3 T2 T1 Broker JavaScript Input (UI events) GVT tree DOM tree (mirrored) Event Processor Event Processor DOM tree (before mutation) T0 T0 Machine A Machine B Machine C Event Processor Performance Testing and timing points • T0: A given user event such as a mouse click that is sent from View to Model. • T1: A given user event such as a mouse click can generate multiple associated DOM change events transmitted from the Model to the View. T1 is the arrival time at the View of the first of these. • T2: This is the arrival of the last of these events from the Model and the start of the processing of the set of events in the GVT tree • T3: This is the start of the rendering stage • T4: This is the end of the rendering stage Xiaohong Qiu

34. Average Performance of Mouse Events

35. Immediate bouncing back event

36. Basic NB performance in 2 hops and 4 hops Xiaohong Qiu

37. Observations I • This client to server and back transit time is only 20% of the total processing time in the local examples. • The overhead of the Web service decomposition is not directly measured in tests shown these tables • The changes in T1-T0 in each row reflect the different network transit times as we move the server from local to organization locations. • This overhead of NaradaBrokering itself is 5-15 milliseconds depending on the operating mode of the Broker in simple stand-alone measurements. It consists forming message objects, serialization and network transit time with four hops (client to broker, broker to server, server to broker, broker to client). • The contribution of NaradaBrokering to T1-T0 is about 30 milliseconds in preliminary measurements due to the extra thread scheduling inside the operating system and interfacing with complex SVG application. • We expect the main impact to be the algorithmic effect of breaking the code into two, the network and broker overhead, thread scheduling from OS. Xiaohong Qiu

38. Comparison of performance results to highlight the importance of the client All EventsMousedownMouseupMousemove Events per 5 ms bin Events per 5 ms bin All EventsMousedownMouseupMousemove Time T1-T0 milliseconds NB on View; Model and View on two desktop PCs with “high-end” graphics Dell (3 Ghz Pentium) for View; 1.5 Ghz Dell for model; local switch network connection. NB on Model; Model and View on two desktop 1.5 Ghz PCs; local switch network connection. Xiaohong Qiu

39. All EventsMousedownMouseupMousemove All EventsMousedownMouseupMousemove Comparison of performance results with Local and remote NB locations Events per 5 ms bin Events per 5 ms bin Time T1-T0 milliseconds NB on 8-processor Solaris server ripvanwinkle; Model and View on two 1.5 Ghz desktop PCs; remote network connection through routers. NB on local 2-processor Linux server; Model and View on two 1.5 Ghz desktop PCs; local switch network connection. Xiaohong Qiu

40. Observations II • One usually gets better performance moving the NaradaBrokering broker off the desktops; the better broker performance (there are no scheduling overheads) outweighs the increasing network overhead. • The performance of NB on desktop server is not as good as that in fig 7.5 with NB on “gridfarm1” machine running Linux server. • The results in fig. 7.7 (“ripvanwinkle” with 100 miles round trip distance) generates similar pattern as in fig. 7.5 (local connection) except with a slightly lower performance corresponding to the greater network delay for “ripvanwinkle”. • Our results show that use of windows desktops to run NaradaBrokering is never good even when one uses a machine running the model and view with no network delay. • Windows scheduling introduces delays of 10-20 millisecond overhead that is much larger than the 1-2 millisecond delays coming from network transit within the extended university campus and the similar intrinsic processing time needed by NaradaBrokering on a clean Linux/UNIX machine. • We have not looked at a Windows server (which has a different scheduling algorithm from desktop Windows) for NaradaBrokering; this could be better than the desktop Windows used in tests. Xiaohong Qiu

41. This illustrates that this type of HPC engine can be used in Web Server mode with each node running different services. We are only using one node and so this is not a parallel computing application NB on one node of HPC Linux cluster; Model and View on two desktop PCs; routers network connection. A few events with timing greater than 100 milliseconds are not shown on the plot Xiaohong Qiu

42. Comparison of performance results on 2 remote NB locations All EventsMousedownMouseupMousemove All EventsMousedownMouseupMousemove Events per 5 ms bin Events per 5 ms bin Time T1-T0 milliseconds NB on 8-processor Solaris server complexity; Model and View on two desktop PCs; remote network connection through routers. NB on 8-processor Solaris server ripvanwinkle; Model and View on two desktop PCs; remote network connection through routers. Xiaohong Qiu

43. Events Per 0.5 ms NB on RipvanwinkleNB on ViewNB on Model Mean ms Mean Mouseup Mean Mousemove Mean Mousedown 15 runs each split over 3 days Xiaohong Qiu

44. Events Per 0.5 ms NB on RipvanwinkleNB on ViewNB on Model Mean ms Standard Deviation Mouseup Standard Deviation Mousemove Standard DeviationMousedown 15 runs each split over 3 days Xiaohong Qiu

45. Observations III Ripvanwinkle ALWAYS Better Means and Standard Deviations do not vary much from run to run Mouse Down has larger standard deviation when NB on Model Note Mouse Down has least model processing NB-Model and NB-View similar except for Mouse Down where NB-View better In an exploratory run with NB running over the local network on a Dell PC with Window XP (heavy loaded), we found very poor performance. For example, the mean of the mousedown event was 92 milliseconds compared to 16 milliseconds on ripvanwinkle Xiaohong Qiu

46. Summary of message-based MVC • Provision of a universal paradigm with a service model converging desktop applications, Web applications, and Internet collaboration • Web applications built on messages can achieve important features such as scalability • The message-based approach is an indispensable part of the big picture of system design with a separate intermediate messaging layer • Reduce deployment overhead of applications • Increase portability of application by decoupling application architecture with underlying platforms • It conforms to service oriented architecture with loosely coupled messages linkage, which we expect to have an increasingly important role for reusability, interoperability, and scalability Xiaohong Qiu

47. SMMV vs. MMMV as MVC interactive patterns Model 1 Model 2 Model m-1 Model m Model View 1 View 2 View n-1 View n View 2 View 1 View n-1 View n b) Multiple Model Multiple View a) Single Model Multiple View • SIMD– A single control unit dispatches instructions to each processing unit. • MIMD– Each processor is capable of executing a different program independent of the other processors. It enablesasynchronous processing. • SMMV generalizes the concept of SIMD • MMMV generalizes the concept of MIMD • In practice, SMMV and MMMV patterns can be applied in both asynchronous and synchronous applications, thus form general collaboration paradigms. Xiaohong Qiu

48. Collaboration Paradigms Monolithic Collaboration All participating components are formed as replications of an existing application without explicit break up into a separate Model and View component as required by the Web service architecture. Works through interception of the events on a master application and allows messaging broker to multicast them to the collaborating clients. CGL applications of PowerPoint, OpenOffice and data visualization Web Service Collaboration framework Shared input port ─ replicated Web Service CGL applications including A/V conferencing, shared whiteboard, text chats and SVG chess Shared output port CGL shared display application SMMV and MMMV collaboration model (integration of desktop and distributed models) SMMV ─ decomposed Model and View with multiple clients sharing a single Model component. Instructor led learning MMMV ─ decomposed Model and View with multiple models each driving its own separate View. It enables ubiquity with the customization done from the Model at server side. Participatory learning Xiaohong Qiu

49. Model Model Model Model SVG SVG SVG SVG as WS as WS as WS as WS browser browser browser browser other master master master other master master other client client client client View View View View View View View View master client master client other client other client other client other client other client other client Monolithic collaboration NaradaBrokering Identical programs receiving identical events Collaboration paradigms deployed with M-MVC model NaradaBrokering Model as Web Service NaradaBrokering Broker Broker Broker Broker MMMV SMMV Xiaohong Qiu

50. Summary of Contributions • Proposing an “explicit Message-based MVC” paradigm (MMVC) as the general architecture of Web applications • Demonstrating an approach of building “collaboration as a Web service” through monolithic SVG experiments. • As an example, we present architecture for three types of collaboration ─ monolithic, thin client, and interactive client. • Bridging the gap between desktop and Web application by leveraging the existing desktop application with a Web service interface through “MMVC in a publish/subscribe scheme”. • As an experiment, we convert a desktop application into a distributed system by modifying the architecture from method-based MVC into message-based MVC. • Proposing Multiple Model Multiple View and Single Model Multiple View collaboration as the general architecture of “collaboration as a Web service” model. • Identifying some of the key factors that influence the performance of message-based Web applications especially those with rich Web content and high client interactivity and complex rendering issues. Xiaohong Qiu