Combining HTML5 with MVC framework to simplify  realtime collaboration for web devlopment
What is HTML5?New FeaturesWhat is MVC?Implementations of MVC Implementations of MVC with HTML5 Implementation of  RTWCS
HTML5?What is HTML5?HTML5 is a language for structuring and presenting content for the World Wide WebCore of Internet5th revisionStill Under Development
HTML5?~ 
New FeaturesHTML5?Structural ElementsNew Form ControlsAudio and VideoClient StorageCanvas APIsOffline App CacheDrag and Drop APIsEtc…
What is MVC?Model–view–controller (MVC) is a software architectureArchitectural pattern used in software engineeringIsolates "domain logic“ from user interfaceIndependent development, testing and maintenance
Combining HTML5 with MVC framework to simplify  realtime collaboration for web devlopment
Combining HTML5 with MVC framework to simplify  realtime collaboration for web devlopment
Combining HTML5 with MVC framework to simplify  realtime collaboration for web devlopment
Implementations of MVC GUI frameworksWeb frameworksSmalltalk
AppFlower
Xpages
Cocoa
GNUstep
GTK+, etc…
PureMVC (Actionscript)
CppCMS(C++)

More Related Content

PPTX
Asp.net mvc 4
PPTX
Mean full stack development
PPTX
Asp.netmvc handson
PDF
Developing SPI applications using Grails and AngularJS
PPTX
MEAN Stack
PPTX
Silverlight 4 @ MSDN Live
PPTX
A Smooth Transition to HTML5 Using MVVM
PPTX
Micro-frontends – is it a new normal?
Asp.net mvc 4
Mean full stack development
Asp.netmvc handson
Developing SPI applications using Grails and AngularJS
MEAN Stack
Silverlight 4 @ MSDN Live
A Smooth Transition to HTML5 Using MVVM
Micro-frontends – is it a new normal?

What's hot (20)

PPTX
Mvc presentation
PPTX
Introduction to mean stack
PDF
ASP.NET MVC 4 Introduction
PPTX
Migrating MVVM Applications to HTML5
PPT
ASP.NET Identity - O Novo componente de Membership do ASP.NET
PDF
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
PDF
MEAN Stack
PPTX
Lightswitch
PDF
LAMP is so yesterday, MEAN is so tomorrow! :)
PPTX
A Smooth Transition to HTML5
PPTX
XAML/C# to HTML5/JS
PDF
Difference between wcf and asp.net web api
PDF
ASP.NET MVC difference between questions list 1
PPT
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
ODP
The Full Stack Web Development
PPT
Top 10 web application development frameworks 2016
PPTX
ASP.NET MVC4 Overview
PPT
ASP.NET MVC Presentation
PPTX
PDF
Webforms or MVC
Mvc presentation
Introduction to mean stack
ASP.NET MVC 4 Introduction
Migrating MVVM Applications to HTML5
ASP.NET Identity - O Novo componente de Membership do ASP.NET
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
MEAN Stack
Lightswitch
LAMP is so yesterday, MEAN is so tomorrow! :)
A Smooth Transition to HTML5
XAML/C# to HTML5/JS
Difference between wcf and asp.net web api
ASP.NET MVC difference between questions list 1
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
The Full Stack Web Development
Top 10 web application development frameworks 2016
ASP.NET MVC4 Overview
ASP.NET MVC Presentation
Webforms or MVC
Ad

Similar to Combining HTML5 with MVC framework to simplify realtime collaboration for web devlopment (20)

PPTX
HTML5
PDF
HTML5 and CSS3 refresher
KEY
Everything you need to know about HTML5 in 15 min
PPT
Html5 introduction
PPTX
HTML5 101
DOC
What is future of web with reference to html5 will it devalue current present...
PPTX
Front End Development | Introduction
PPTX
Constient global solution- web application development
PPT
Intro to-html-backbone
PDF
HTML5 vidéo : Facts and fiction
PPTX
PPTX
HTML5: The next disruptive technology
PPT
Html 5 introduction
PDF
HTML5 Technical Executive Summary
PDF
HTML5 Comprehensive Guide
PPTX
Cgs html 5-service
PDF
HTML5: An Introduction To Next Generation Web Development
HTML5
HTML5 and CSS3 refresher
Everything you need to know about HTML5 in 15 min
Html5 introduction
HTML5 101
What is future of web with reference to html5 will it devalue current present...
Front End Development | Introduction
Constient global solution- web application development
Intro to-html-backbone
HTML5 vidéo : Facts and fiction
HTML5: The next disruptive technology
Html 5 introduction
HTML5 Technical Executive Summary
HTML5 Comprehensive Guide
Cgs html 5-service
HTML5: An Introduction To Next Generation Web Development
Ad

Recently uploaded (20)

PDF
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
PPT
Geologic Time for studying geology for geologist
PDF
1 - Historical Antecedents, Social Consideration.pdf
PDF
August Patch Tuesday
DOCX
search engine optimization ppt fir known well about this
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
WOOl fibre morphology and structure.pdf for textiles
PPTX
Benefits of Physical activity for teenagers.pptx
PPTX
The various Industrial Revolutions .pptx
PDF
Getting started with AI Agents and Multi-Agent Systems
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PPTX
O2C Customer Invoices to Receipt V15A.pptx
PPTX
Modernising the Digital Integration Hub
PPTX
Chapter 5: Probability Theory and Statistics
PPT
Module 1.ppt Iot fundamentals and Architecture
PDF
Five Habits of High-Impact Board Members
PPTX
Tartificialntelligence_presentation.pptx
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Geologic Time for studying geology for geologist
1 - Historical Antecedents, Social Consideration.pdf
August Patch Tuesday
search engine optimization ppt fir known well about this
Zenith AI: Advanced Artificial Intelligence
WOOl fibre morphology and structure.pdf for textiles
Benefits of Physical activity for teenagers.pptx
The various Industrial Revolutions .pptx
Getting started with AI Agents and Multi-Agent Systems
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
O2C Customer Invoices to Receipt V15A.pptx
Modernising the Digital Integration Hub
Chapter 5: Probability Theory and Statistics
Module 1.ppt Iot fundamentals and Architecture
Five Habits of High-Impact Board Members
Tartificialntelligence_presentation.pptx
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf

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

Editor's Notes

  • #2: 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.
  • #4: 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.
  • #7: Model–view–controller (MVC) is a software architecture,[1] 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
  • #9: 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.)[4] 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[5]
  • #11: 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.
  • #12: 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.
  • #14: 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.