Client-side Component Model (ccm)
What is ccm?
The “Client-side Component Model” (ccm) is a model for running web components inside the browser and is consists of a ccm framework and ccm components. ccm uses two features of the W3C web components standard: Custom Elements and Shadow DOM.
What is the ccm Framework?
The ccm framework provides two services, one for embedding ccm components inside any web-based content and the other service for data management. It is a tiny JavaScript file (24kB minified, 9kB zipped) and uses native JavaScript only and has no dependency to other resources or frameworks. The ccm framework is published as free software under MIT licence. It is loaded automatically when a ccm component is used.
What is a ccm Component?
A ccm component is a tiny JavaScript file which works with native HTML, CSS and JavaScript based on the ccm framework. It may be composed of other ccm components and use other JavaScript frameworks. There are no restrictions in application domain. Every ccm component is embeddable in every web-based content. Each ccm component that is published as free software increases the functionality of the free web.
Where to find ccm Components?
A market place has been developed as prototype where all published ccm components are collected and informations about them presented. These informations contain basic data like author, licence, version and the public URL of the component JavaScript file.
How to use a ccm Component?
There are three different ways how to use a ccm component:
- Declarative via HTML Tag
- Functional via JavaScript
- Interactive via Bookmarklet
Declarative via HTML Tag
This works in two steps. Firstly, the ccm component must be loaded using a HTML <script> tag. That results in a new usable HTML tag which is an W3C Custom Element. Secondly, use this HTML tag at any place inside the web-based content for embedding. Use the component specific HTML attributes of the tag and the component specific inner HTML tags for setting up the configuration data. If the configuration data is stored in a database or a JSON file, it can be loaded directly from there with the ccm specific HTML attribute “key”. The HTML tag then acts like an embed key.
Functional via JavaScript
This works in two steps. Firstly, the ccm framework must be loaded using a HTML <script> tag. Secondly, call the method of the ccm framework for running a ccm component. The method needs the URL of the ccm component JavaScript file and the configuration data.
Interactive via Bookmarklet
A bookmarklet is a browser bookmark enriched by JavaScript. Our ccm market place provides a bookmarklet for each published component. Every web user can use such a bookmarklet on any web page to add a new draggable and resizable web page area with the embedded component in it.
On-demand and Cross-domain Embedding of a ccm Component
A ccm component is embeddable on-demand and cross-domain inside any web-based content. On-demand means that a component is not only embeddable when a website is loading, it can also be included later. Cross-domain means that components must not be located on the same server where the actual website comes from, but it can be located on any other web server. With both aspects, any web user is able to embed a component in any currently viewed web page. The embedding of a ccm component works without iFrame.
ccm Components are Recombinable
Like the Lego way, ccm components are recombinable. This results in a dependency tree. For example the component for rendering a learning unit reuses the components for quiz and video and the video component reuses components for commentary and rating. These dependencies are automatically solved recursively and asynchronously by the ccm framework at runtime. The framework makes sure that all dependent resources are loaded in parallel and no resource is loaded twice. Any dependent resource and data can be loaded cross-domain.
ccm is Versioned and Backward Compatible
The ccm framework and all ccm components are versioned and use Semantic Versioning 2.0.0 (see http://semver.org). The same ccm component can be embedded multiple times in the same web page and also different versions of a component without any conflicts and side effects. That is because each component and version has its own namespace inside a web page. It is also possible to use different versions of the ccm framework in the same web page. This ensures backward compatibility.
Providing of a ccm Component as Mobile Web App
Each ccm component can be provided as mobile web app in two steps: Embed the component inside the HTML tag of a blank web page. Add the appropriate HTML tags to display the web page on mobile devices as native app. Now a user can open the web page and store it as mobile web app on the home screen of a mobile device.
Service for Data Management
The ccm framework provides a service for component developers for data management. It allows the usage of ccm datastores. A ccm datastore can manage datasets in one of three choosable data levels and can also be used autonomously of ccm components for easy data management. The different data levels are described below. ccm datastores are intended to be universal and provide a simple uniform API for basic CRUD operations to create, read, update and delete datasets.
Data Level 1: Local Object
On the first level the data will be managed in an local object. Than all managed datasets are fugitive data which are gone by leaving the actual opened website.
Data Level 2: Client-side Database
On the second level the data will be managed in a client-side database. Than all managed data is still there after page reload. This is specially interesting for offline functionality.
Data Level 3: Server-side Database
On the third level the data will be managed in any server-side database of choice. The server must have an ccm compatible interface. Than all managed datasets are stored persistently on a server and they are not bound to a specific client. Different network protocols are possible for communication between client and server. In case of realtime communication with Web Socket as network protocol for a ccm datastore with data level 3, the server informs every active client about changing data sets. Then a ccm component which uses such a datastore can react to this changes. That means mostly to update immediately content in the frontend.
Cross-domain Realtime Communication
If ccm components are using the same ccm datastore with data level 3 and Websocket Protocol, than the components are able to exchange data in realtime. If the ccm components are used in different domains or web-based platforms, this realtime communication is cross-domain.