SlideShare a Scribd company logo
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++)
Ad

Recommended

Asp.net mvc 4
Asp.net mvc 4
Hrichi Mohamed
 
Mean full stack development
Mean full stack development
Scott Lee
 
Asp.netmvc handson
Asp.netmvc handson
Prashant Kumar
 
Developing SPI applications using Grails and AngularJS
Developing SPI applications using Grails and AngularJS
Alvaro Sanchez-Mariscal
 
MEAN Stack
MEAN Stack
RoshanTak1
 
Silverlight 4 @ MSDN Live
Silverlight 4 @ MSDN Live
goeran
 
A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVM
Chris Bannon
 
Micro-frontends – is it a new normal?
Micro-frontends – is it a new normal?
Lohika_Odessa_TechTalks
 
Mvc presentation
Mvc presentation
MaslowB
 
Introduction to mean stack
Introduction to mean stack
Praveen Gubbala
 
ASP.NET MVC 4 Introduction
ASP.NET MVC 4 Introduction
Lohith Goudagere Nagaraj
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
Chris Bannon
 
ASP.NET Identity - O Novo componente de Membership do ASP.NET
ASP.NET Identity - O Novo componente de Membership do ASP.NET
Eduardo Pires
 
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
MEAN Stack
MEAN Stack
Krishnaprasad k
 
Lightswitch
Lightswitch
Robert MacLean
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
A Smooth Transition to HTML5
A Smooth Transition to HTML5
Chris Bannon
 
XAML/C# to HTML5/JS
XAML/C# to HTML5/JS
Michael Haberman
 
Difference between wcf and asp.net web api
Difference between wcf and asp.net web api
Umar Ali
 
ASP.NET MVC difference between questions list 1
ASP.NET MVC difference between questions list 1
Umar Ali
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
The Full Stack Web Development
The Full Stack Web Development
Sam Dias
 
Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016
iMOBDEV Technologies Pvt. Ltd.
 
ASP.NET MVC4 Overview
ASP.NET MVC4 Overview
Mahmoud Tolba
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
Mean PPT
Mean PPT
Harendra Singh Bisht
 
Webforms or MVC
Webforms or MVC
Aslam Siddiqui
 
HTML5
HTML5
tanamania
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 

More Related Content

What's hot (20)

Mvc presentation
Mvc presentation
MaslowB
 
Introduction to mean stack
Introduction to mean stack
Praveen Gubbala
 
ASP.NET MVC 4 Introduction
ASP.NET MVC 4 Introduction
Lohith Goudagere Nagaraj
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
Chris Bannon
 
ASP.NET Identity - O Novo componente de Membership do ASP.NET
ASP.NET Identity - O Novo componente de Membership do ASP.NET
Eduardo Pires
 
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
MEAN Stack
MEAN Stack
Krishnaprasad k
 
Lightswitch
Lightswitch
Robert MacLean
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
A Smooth Transition to HTML5
A Smooth Transition to HTML5
Chris Bannon
 
XAML/C# to HTML5/JS
XAML/C# to HTML5/JS
Michael Haberman
 
Difference between wcf and asp.net web api
Difference between wcf and asp.net web api
Umar Ali
 
ASP.NET MVC difference between questions list 1
ASP.NET MVC difference between questions list 1
Umar Ali
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
The Full Stack Web Development
The Full Stack Web Development
Sam Dias
 
Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016
iMOBDEV Technologies Pvt. Ltd.
 
ASP.NET MVC4 Overview
ASP.NET MVC4 Overview
Mahmoud Tolba
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
Mean PPT
Mean PPT
Harendra Singh Bisht
 
Webforms or MVC
Webforms or MVC
Aslam Siddiqui
 
Mvc presentation
Mvc presentation
MaslowB
 
Introduction to mean stack
Introduction to mean stack
Praveen Gubbala
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
Chris Bannon
 
ASP.NET Identity - O Novo componente de Membership do ASP.NET
ASP.NET Identity - O Novo componente de Membership do ASP.NET
Eduardo Pires
 
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
A Smooth Transition to HTML5
A Smooth Transition to HTML5
Chris Bannon
 
Difference between wcf and asp.net web api
Difference between wcf and asp.net web api
Umar Ali
 
ASP.NET MVC difference between questions list 1
ASP.NET MVC difference between questions list 1
Umar Ali
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
The Full Stack Web Development
The Full Stack Web Development
Sam Dias
 
ASP.NET MVC4 Overview
ASP.NET MVC4 Overview
Mahmoud Tolba
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 

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

HTML5
HTML5
tanamania
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
Edgar Parada
 
Html5 introduction
Html5 introduction
sagaroceanic11
 
HTML5 101
HTML5 101
Matt Hardy
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
Shahzad
 
Front End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Html5
Html5
Western Illinois University Libraries
 
Constient global solution- web application development
Constient global solution- web application development
Constient Cgs
 
Intro to-html-backbone
Intro to-html-backbone
zonathen
 
HTML5 vidéo : Facts and fiction
HTML5 vidéo : Facts and fiction
Bertrand CHARLET
 
Html5
Html5
Mahmoud Ghoz
 
HTML5: The next disruptive technology
HTML5: The next disruptive technology
Linda Jacobson
 
Html 5 introduction
Html 5 introduction
Mahendra Kumar
 
HTML5 Technical Executive Summary
HTML5 Technical Executive Summary
Gilad Khen
 
HTML5 Comprehensive Guide
HTML5 Comprehensive Guide
Alexei Skachykhin
 
Html5
Html5
Oliver Zico Mendes
 
HTML5
HTML5
Western Illinois University Libraries
 
Cgs html 5-service
Cgs html 5-service
Constient
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
Edgar Parada
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
Shahzad
 
Front End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Constient global solution- web application development
Constient global solution- web application development
Constient Cgs
 
Intro to-html-backbone
Intro to-html-backbone
zonathen
 
HTML5 vidéo : Facts and fiction
HTML5 vidéo : Facts and fiction
Bertrand CHARLET
 
HTML5: The next disruptive technology
HTML5: The next disruptive technology
Linda Jacobson
 
HTML5 Technical Executive Summary
HTML5 Technical Executive Summary
Gilad Khen
 
Cgs html 5-service
Cgs html 5-service
Constient
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
Ad

Recently uploaded (20)

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
Ad

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.