Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
General information    ●   Started in 2009    ●   2 years of 1 FTE development so far    ●   Python based    ●   LGPL lice...
Concepts    ●   Realtime multi user interaction    ●   Presence     ●   Activity awareness    ●   Realtime collaboration  ...
Application modules    ●   Messenger        Chat, Activity, link invite, Whois    ●   Profiles        profile management, ...
Framework    ●   Build on top of Twisted & Django    ●   PyPy JIT compatible    ●   Lightweight JSON url routing protocol ...
Realtime Suitability               
Transport considerations    TCP Connect                                                  TCP Disconnect                   ...
CMS dataflow chartMulti page HTTP CMS                                          Single page WS CMS       Process           ...
Websocket Routing Protocol    HWIOS Remote Messaging (HRM)    Client request    ws.remote(url,params,callback);    ws.remo...
Multi page HTTP CMS    ●   Local links trigger a full page reload    ●   JS state is lost after a full page reload    ●   ...
Single page websocket CMS    ●   Local links are routed to clientside functions    ●   Javascript state is maintained    ●...
Developing with HWIOS    ●   Why HWIOS?        Clean code base        Good performance        Intuitive URL based routing ...
Information channels    ●   Feel free to ask!    ●   Check out community site    ●   Read the documentati...
Upcoming SlideShare
Loading in …5

HWIOS Websocket CMS explained


Published on

HWIOS is a html5 websocket CMS framework, which make realtime web-applications easy to develop, and efficient to use.

Published in: Technology
  • HWIOS has been rewritten to NodeJS/Express and is now under development at under the name l3mon
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

HWIOS Websocket CMS explained

  1. 1. HWIOS
  2. 2. About   
  3. 3. General information ● Started in 2009 ● 2 years of 1 FTE development so far ● Python based ● LGPL license ● HTML5 browser engines only ● Tested on Chromium/Chrome   
  4. 4. Concepts ● Realtime multi user interaction ● Presence  ● Activity awareness ● Realtime collaboration ● Requested & pushed data ● Bookmarking/sharing of websocket resources ● Networked GUI for other services   
  5. 5. Application modules ● Messenger Chat, Activity, link invite, Whois ● Profiles profile management, register/login, details ● Wiki:  Collaborative editing, history, wiki links visualisation ● Blog:  WYSIWYG, comments, file manager ● Teknon  distributed service management ● Pages Collaborative editing custom CMS pages (development) ● Slide Collaborative drawing, approach to slideshow co­creation (development)   
  6. 6. Framework ● Build on top of Twisted & Django ● PyPy JIT compatible ● Lightweight JSON url routing protocol ● Flexible regex based URL handling client/server side ● JS/Py event observing for common events ● View tracking & navigation bar URL support ● I18n user specific language support ● Jquery & friends ● Consistent UI widgets, based on Jquery UI  ● RequireJS modules & optimization workflow ● Structured sphinx documentation   
  7. 7. Realtime Suitability   
  8. 8. Transport considerations TCP Connect TCP Disconnect SYN FIN,ACK Step 1: Browser Server Step 1: Browser Server SYN, ACK ACK Step 2: Browser Server Step 2: Browser Server ACK FIN,ACK Step 3: Browser Server Step 3: Browser Server DATA ACK Step 4: Browser Server Step 4: Browser Server HTTP request/response:  Persistent websocket connection:  1. TCP Connect 1. TCP Connect 2. Send data to browser ● Send/receive data from/to browser 3. Receive data from server ● Send/receive data from/to server 4. TCP Disconnect ● ...TCP Disconnect ● Each HTTP request requires more packet traffic, due to connect and disconnect, which increases latency  compared to a persistent connection. ● HTTP is very useful for its original purpose; fast and efficient traffic of data between a web of HTTP servers  and the user browser. ● HTTP has a relatively high latency, header data overhead and a rigid flow order of data, which makes it less  efficient for realtime web applications that rely on bidirectional communication and sending frequent, small  data updates. ● Realtime web­applications benefit from a hybrid approach, where JSON formatted data flows through a     websocket connection, and web resources like image/css/js files are retrieved with HTTP  using the browser DOM parser.
  9. 9. CMS dataflow chartMulti page HTTP CMS Single page WS CMS Process  HTTP Request Render  Process  HTTP Request Render  Navbar URL main tpl Navbar URL bootstrap tpl                HTTP Response                HTTP Response Image/CSS/JS Image/CSS/JS DOM HTTP DOM HTTP Resources Resources HTTP HTTP CSS HTTP CSS HTTP Process Process HTTP (XHR) XHR request WS request JS JS User Interface User Interface Process WS push                                         WS(HRM)                                                             Click URL Click URL JS                                        WS(HRM) WS request                                 WS(HRM) URL Router function Navbar WS Router History API WS Router     WS method WS request (push) function
  10. 10. Websocket Routing Protocol HWIOS Remote Messaging (HRM) Client request ws.remote(url,params,callback); ws.remote(/messenger/messages/send/,{msg:$(.msg­input).val(),to:$(.sel­user).data(id)}, function(response){}); JSON data: [method,params,callback_uuid] Client response JSON data: [params, callback_uuid] Server request Client.remote(url, params)  client.remote(/messenger/messages/private/add/, {msg:msg_from_usr,from:src_client.profile.username}) Server response Not available yet.   
  11. 11. Multi page HTTP CMS ● Local links trigger a full page reload ● JS state is lost after a full page reload ● XHR transport for limited dynamic page updates ● HTTP header overhead and high TCP latency  ● Emphasis on website as a collection of html documents ● SEO well supported ● Client/server request/response model   
  12. 12. Single page websocket CMS ● Local links are routed to clientside functions ● Javascript state is maintained ● Websocket transport for all dynamic page updates ● Lightweight JSON protocol and low TCP latency  ● Emphasis on website as an application ● No SEO; crawlers cant access websocket resources yet ● Bidirectional client/server request/response model   
  13. 13. Developing with HWIOS ● Why HWIOS? Clean code base Good performance Intuitive URL based routing system Sphinx documentation Low learning curve for Django/Python developers DRY; two years of R&D for free Lots of existing web­applications LGPL license permits proprietary modules Built on top of solid frameworks like Python, Twisted, Django and JQuery ● Why Python? Speed; CPython is faster, more flexible than PHP. PyPy JIT is at least as fast as Node.js  Rich ecosystem; Python exists since 1991, Node.js since 2009 ● Why Twisted? Fast, well tested and flexible async internet server platform Rich ecosystem: lots of ready to use server technology ● Why Django? Well documented, maintained, tested and feature rich web framework Rich ecosystem: Lots of snippets can easily be adapted to work with websockets instead of HTTP ● Why Jquery? Well documented, maintained and tested Easy DOM manipulation JQuery UI   
  14. 14. Questions?   
  15. 15. Information channels ● Feel free to ask! ● Check out community site ● Read the documentation ● Code:­networks/HWIOS ● Support: #hwios @  ● Contact OS­Networks: info@os­