• 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
