The emergency of HTML 5 enhances the capabilities of real time interaction on web and innovates the development of real-time collaboration in Web browser. This paper proposes a joint framework for HTML 5 specification and a double-model architecture for real-time web collaboration development. A Simple Collaboration Modeling Language is developed to illustrate the shared model concept. With client-side library and server-side components, programmers are able to concentrate on collaborative logic instead of application details.
Model–view–controller (MVC) is a software architecture, currently considered an architectural pattern used in software engineering. The pattern isolates "domain logic" (the application logic for the user) from the user interface (input and presentation), permitting independent development, testing and maintenance
Though MVC comes in different flavors, control flow is generally as follows: The user interacts with the user interface in some way (for example, by pressing a mouse button). The controller handles the input event from the user interface, often via a registered handler or callback, and converts the event into an appropriate user action, understandable for the model. The controller notifies the model of the user action, possibly resulting in a change in the model's state. (For example, the controller updates the user's shopping cart.) A view queries the model in order to generate an appropriate user interface (for example the view lists the shopping cart's contents). The view gets its own data from the model. In some implementations, the controller may issue a general instruction to the view to render itself. In others, the view is automatically notified by the model of changes in state (Observer) that require a screen update. The user interface waits for further user interactions, which restarts the control flow cycle.Some implementations such as the W3C XForms also use the concept of a dependency graph to automate the updating of views when data in the model changes.The goal of MVC is, by decoupling models and views, to reduce the complexity in architectural design and to increase flexibility and maintainability of code. MVC has also been used to simplify the design of Autonomic and Self-Managed systems
The basic idea of our collaborative architecture is that we should provide more flexibility to introduce real time collaboration to developers and users. First, we want a highly integrated infrastructure with inline supports for synchronization and transport. Second, we want a loose coupled design of collaborative engine, which can be tuned or resembled conveniently. Because real-time collaboration is social in nature, we want to make sure that changes in using can be made as dynamical as the demands. These points guide our design.
Figure 1 gives an illustration to the double-model proposed in the paper. The framework contains a local model resided on browser as well as a shared model hosted on server. Local MVC The design in browser uses a standard MVC pattern. Within the pattern, the local model represents current user’s concerns about the application context, and maintains private permission to associated states Shared Model The shared model is the key element in the design. Like the local model, a shared model encapsulates the current state of the environment within application scope. The responsibilities of the share model include: (1) present state for collaboration; (2) provide interface to access or modify state; (3) manage user’s permission; (4) register as a publisher for Server-sent event.Main Controller Main controller is the core of architecture. As mentioned above, It is responsible for dispatching a user’s interaction from Web Sockets to a shared model. In general, the interaction can be concentrated in four purposes from client: (1) perform an initialization to a shared stage; (2) make synchronization to a shared point; (3) initialize an update to a shared state; (4) execute a query to related states. One of the basic tenets is that every messaging call made by any client requires permission validation.
We have implemented the Real Time Web Collaboration Server (RTWCS) framework. Let’s review a user’s activities in collaboration. Before a user’s participation, the client environment must be initialized. By using RTWCC library, the initialization process can be divided into three major steps. First, create a Web Sockets object to maintain connection to back-end main controller. Second, request user-concerned metadata from Web Sockets, and build a skeleton for the shared model in local. Third, register the client as a content-based subscriber  to the event sources. The subscriber defines content filters according to the user’s privileges. After these are done, the client is ready for interaction. In a user’s browser, a list of available stages is given for the user to browse and participate in. When he or she makes choice, a synchronization process is launched to retrieve the latest data for every point in the stage through the Web Sockets object in background. Along with the completion of each point, the framework begins to take the updates from SSE, and activate the corresponding UI component for this point. Finally, the user gets full access to all UI components in this stage, within the purview of privileges.
Combining HTML5 with MVC framework to simplify realtime collaboration for web devlopment
What is HTML5?<br />New Features<br />What is MVC?<br />Implementations of MVC <br />Implementations of MVC with HTML5 <br />Implementation of RTWCS<br />
HTML5?<br />What is HTML5?<br />HTML5 is a language for structuring and presenting content for the World Wide Web<br />Core of Internet<br />5th revision<br />Still Under Development<br />
New Features<br />HTML5?<br />Structural Elements<br />New Form Controls<br />Audio and Video<br />Client Storage<br />Canvas APIs<br />Offline App Cache<br />Drag and Drop APIs<br />Etc…<br />
What is MVC?<br />Model–view–controller (MVC) is a software architecture<br />Architectural pattern used in software engineering<br />Isolates "domain logic“ from user interface<br />Independent development, testing and maintenance<br />
CakePHP(PHP), etc…</li></li></ul><li>Implementations of MVC with HTML5 <br />Double-Model MVC Architecture<br />
Local MVC<br />Shared Model<br />Main Controller<br /><ul><li>Interaction Concentrated in </li></ul>- Perform an initialization to a shared stage<br />- Make synchronization to shared point <br /><ul><li>Initialize an update to shared stage