What is HTML5?<br />New Features<br />What is MVC?<br />Implementations of MVC <br />Implementations of MVC with HTML5 <br...
HTML5?<br />What is HTML5?<br />HTML5 is a language for structuring and presenting content for the World Wide Web<br />Cor...
HTML5?<br />~<br /> <br />
New Features<br />HTML5?<br />Structural Elements<br />New Form Controls<br />Audio and Video<br />Client Storage<br />Can...
What is MVC?<br />Model–view–controller (MVC) is a software architecture<br />Architectural pattern used in software engin...
Implementations of MVC <br />GUI frameworks<br />Web frameworks<br /><ul><li>Smalltalk
GTK+, etc…
PureMVC (Actionscript)
Upcoming SlideShare
Loading in …5

Combining HTML5 with MVC framework to simplify realtime collaboration for web devlopment


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet originally proposed by Opera Software [1]. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[2]) and as of October 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.
  • Model–view–controller (MVC) is a software architecture,[1] currently considered an architectural pattern used in software engineering. The pattern isolates &quot;domain logic&quot; (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&apos;s state. (For example, the controller updates the user&apos;s shopping cart.)[4] A view queries the model in order to generate an appropriate user interface (for example the view lists the shopping cart&apos;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[5]
  • 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 [5] 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

    1. 1.
    2. 2. 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 />
    3. 3. 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 />
    4. 4. HTML5?<br />~<br /> <br />
    5. 5. 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 />
    6. 6. 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 />
    7. 7.
    8. 8.
    9. 9.
    10. 10. Implementations of MVC <br />GUI frameworks<br />Web frameworks<br /><ul><li>Smalltalk
    11. 11. AppFlower
    12. 12. Xpages
    13. 13. Cocoa
    14. 14. GNUstep
    15. 15. GTK+, etc…
    16. 16. PureMVC (Actionscript)
    17. 17. CppCMS(C++)
    18. 18. Cairngrom(Flex)
    19. 19. Griffon(Java)
    20. 20. YUI3(Javascript)
    21. 21. CakePHP(PHP), etc…</li></li></ul><li>Implementations of MVC with HTML5 <br />Double-Model MVC Architecture<br />
    22. 22. 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
    23. 23. Execute a query to related state
    24. 24. Responsibility
    25. 25. Present state of Collaboration
    26. 26. Provides interface to access or modify state
    27. 27. Manage user’s permission
    28. 28. Register as a publisher for Server-sent event.
    29. 29. Shared Point
    30. 30. Shared Stage
    31. 31. Standard MVC pattern
    32. 32. Provides interface for query or update states
    33. 33. Two kind of messages</li></ul>- Server-sent event<br />- Web sockets<br /><ul><li>Real Time Web Collaboration Client(RTWCC)</li></li></ul><li>Implementation of RTWCS<br />
    34. 34. S<br />Discussions<br />Limitations<br />Development Process<br />Summary<br /><ul><li>double-model architecture for real-time web collaboration
    35. 35. RTWCC JavaScript library</li></li></ul><li>References<br />