l3mon

l3mon core library

npm install l3mon
30 downloads in the last month

Single-page websocket CMS with the l3mon framework

About

l3mon is a Single Page Application(SPA) websocket CMS framework in development. It is focussed on easing the construction of effective realtime collaboration websites.

Content when it happens

Person X is writing a blog article on website Z; person Y is looking at the blogging site which shows the latest articles. When person X finishes the article and submits it, person Y won't get notified unless he/she refreshes the browser with f5. The user always has to retrieve the updated page in order to view the latest content. Offcourse it's possible to do this for the user, by asking the server if there are new blog-articles(using 'long-polling'), but that's an inefficient and slow method. There may or may not be new information at the time that the user asks for an update. Keeping a reference to the request is also cumbersome and prone to errors. A more efficient way is to treat a website like a chat-room. All users keep an open connection to the site, and the server or the client can initiate an update of content at any time, without needing the client to ask for it. This is what websocket technology is about.

Collaborate in realtime

Another use-case is the writing of a piece of text(for instance a wiki-article). Person X is back again and wants to edit a wiki-page. On a traditional wiki, the workflow is that the wiki-page gets 'locked' during the editing session of this user. Other users have to wait until person X finishes the editing-process, before they can make any changes themselves. With HTML5 websockets and a realtime content-mediation technique('Operational transformation'), it's very well possible to coordinate the text-operations that person X and person Y apply at the same time on the document. Both users can now interact in realtime with the editor-input of the other. This feature allows people to collaborate in realtime on content, that wasn't possible before.

What's the point?

This technique works within all parts of a single-page webapplication, meaning that all kinds of content can be pushed at any time to any client. Besides the earlier mentioned use-cases, one can think of many more applications that can benefit from realtime updates. The most obvious thing is to enhance existing web-applications with this technique, and to add social tools like chat to a website. But there are also new kinds of applications possible, by combining other HTML5 techniques like Canvas, WebGL and WebRTC. We are currently exploring and developing within the following areas:

  • Collaborative text-editing (OT-based)
  • Chat & Video-conferencing (WebRTC)
  • Activity & Presence feedback
  • Serious gaming (WebGL/Three.js)
  • Collaborative whiteboards (HTML5 canvas)
  • Peer-to-peer data-exchange between web-clients

The l3mon framework

l3mon is public domain software(see UNLICENSED). The framework has one goal in particular; that is to make websocket technology easy to apply on a CMS statck for the broadest possible audience of developers. The framework offers a single-page webapplication structure, in which only some bootstrapping content(initial HTML, CSS, images, Some Javascript) gets loaded over HTTP. All further content and events are negotiated with javascript and the websocket connection, after the application is initialized(this doesn't take longer than loading a regular webpage). The websocket connection is used to send and retrieve small updates of the site(using a simple uri-based json scheme), while the HTML5 history-API is used to translate uri-changes(back/forward button events, change url in the navigation bar)to the browser UI using a technique called 'deep-linking'. This makes the website operate like a traditional website, in which resources still remain bookmarkeable, while offering much better performance and maintained browser-state.

l3mon currently offers the following infrastructure:

  • Regex based URL-routing protocol with named-group support(XRegExp)
  • MongoDB noSQL sessions & data-backend
  • Simple http/websocket-shared cookie/session-based authentication
  • Fast clientside & serverside templating using Hogan.js
  • Autoreload for CSS & templates (code-reload through basic node.js tools like node-dev)
  • Event-system for events like connect/disconnect/view-changed, etc.
  • Responsive design (currently with Twitter bootstrap)
  • OT-support using JInfinote and Codemirror3
  • AMD using RequireJS
  • Modules for
    • Chat/activity
    • Blog

The platform is being developed in NodeJS and is the successor of the HWIOS prototype(Python/Twisted). If you would like to receive more information about the project, you could use one of the following media:

npm loves you