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

1. HWIOS
http://hwios.org

2. About

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. Concepts
● Realtime multi user interaction
● Presence
● Activity awareness
● Realtime collaboration
● Requested & pushed data
● Bookmarking/sharing of websocket resources
● Networked GUI for other services

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. 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. Realtime Suitability

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 it's 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. CMS dataflow chart
Multi 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. 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. 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. 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 can't access websocket resources yet
● Bidirectional client/server request/response model

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. Questions?

15. Information channels
● Feel free to ask!
● Check out community site http://hwios.org
● Read the documentation http://hwios.org/docs/
● Code: https://github.com/os­networks/HWIOS
● Support: #hwios @ irc.freenode.net
● Contact OS­Networks: info@os­networks.net