building real-time collaborative apps with ajax.org platform

• Ruben Daniels (@javruben)• Mike de Boer (@mikedeboer)

100% pure JavaScript framework for creating real-time collaborative

applications

C++ Component library with JavaScript APIs

available as SSJS, SSB and Browser plugin runtimes.(write once deploy multi-platform, multi-runtime)

• Ajax.org Platform (APF 3.0 beta)

• LGPL Licensed

• Free to use, also for commercial projects

• Javeline B.V. is Ajax.org’s corporate sponsor offering

support and services.

• Define a UI using markup (AML)

<div> <a:chart> <a:axis mode="2D"> <a:graph mode="line" formula="sin(x)" /> </a:axis> </a:chart>

<a:button>Test</a:button>

</div>

• Define a UI using JSON in JS

var chart = new apf.chart({ htmlNode : document.body.firstChild, childNodes : [ new apf.axis({ mode : "2D", childNodes : [ new apf.graph({ mode : "line", formula : "sin(x)" }) ] }); ]});

• Program a UI (JS + W3C DOM)

var chart = new apf.chart();apf.document.body.appendChild(chart);

var axis = chart.appendChild(new apf.axis());axis.setAttribute("mode", "2D");

var graph = axis.appendChild(new apf.graph());graph.setAttribute("mode", "line");graph.setAttribute("formula", "sin(x)");

• Loading data

<a:model id = "mdlUsers" src = "http://example.com/users.php" />

• Displaying data - Databinding

<a:tree model = "mdlUsers" each = "[user]" caption = "[@name]" icon = "icoUser.png" />

• Displaying data – a bit more complex

<a:tree each = "[mdlUsers::user]" caption = "{[@fname].uCaseFirst()} [@lname]" icon = "{[@icon] or 'icoUser.png'}" />

• Undo and Redo

<a:tree actiontracker="atTree" ... />

<a:button onclick="atTree.undo()">Undo</a:button><a:button onclick="atTree.redo()">Redo</a:button>

• Managing state and simple logic

<a:thumbnails each="[mdlThumbs::thumbs]" image="[@url]" thumbsize="{sld1.value}"/>

<a:slider id="sld1" value="90" min="10" max="150" />

• Managing state and logic – a bit more complex

<a:tree id="tree" actiontracker="atTree" ... />

<a:label value="[{tree.selected}::@name]" />

<a:button disabled="{!atTree.undolength}" onclick="..."> Undo</a:button>

Think about what your app should do,

instead of how to implement it

Introducing Live Markup

<?lm var x = 10; <ul>{ each([mdlExample::foo/bar]) { <li>{[@name].toUpperCase()}</li> } }</ul>?>

• What is Live Markup?– Extended JavaScript

• [] for query selectors• {} for code mode• In string parsing

– E4X style xml literals (literal is a string, not an object)– Overloaded operators– Async calling abstracted (use sparsely)– Fast execution and compilation– Auto concat and auto output

• Why is Live Markup useful?– Manages all change events– Updates when data source or object properties changes.– Propagates changes to the DOM using xml-diff– Architected to write less code– Very useful for real-time collaborative apps– Unified language for all attributes and bindings

• Generating parts of the UI with Live Markup

<?lm var x = ["a", "b", "c"]; each(x) { <a:button caption="{item()}" /> }

<a:tab>{ each([mdlExample::users]) { <a:page caption="[@name]" aml="userpage.aml" /> } }</a:tab>?>

• What is needed for a real-time collaborative app?– A way to determine change in the app– A protocol for communicating these changes– A Transport layer to communicate changes– Collision resolution– A fast updating UI to render incoming changes

• Remote databinding– Sends changes to data of specific models to listening

clients– Uses text-diffing to localize changes– Messages are time stamped

• Demo– Databound flowchart element– Algorithm to calculate traffice density– Changes are communicated realtime

• Using remote databinding• Over XMPP

• Currently in development for APF 3.1+– contentEditable– WAI-ARIA support– Virtual viewport for all widgets– Offline applications– Multiple query languages in Live Markup (JSON-Path, CSS3)

Thank you

@javruben – www.rubendaniels.com

@mikedeboer – www.mikedeboer.nl