building real-time collaborative apps with ajax.org platform

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

Upload: javeline-bv

Post on 27-Jun-2015

6.599 views

Category:

Technology


0 download

DESCRIPTION

Web trends and technologies today are converging to do one thing particularly well: collaborate. All of us dream about the possibility to weave collaborative features from products like Google Wave, EtherPad, SubEthaEdit, Mozilla Bespin, Google Docs into our own applications. Ajax.org Platform combines technology and open standards into a solution to build web applications with rich collaborative features at minimum expense. The simple-yet-elegant, declarative API makes it easier to learn, while its openness in design allows it to be extended to the level you and your team are comfortable with. Forget lock-in of vendors and other libraries or frameworks, forget waiting for the Big Boys to open source their latest inventions. In this interactive session Ruben and Mike from the Ajax.org team will be presenting a series of demos and what is needed to make them tick.

TRANSCRIPT

Page 1: Building real-time collaborative apps with Ajax.org Platform

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

Page 2: Building real-time collaborative apps with Ajax.org Platform

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)

Page 3: Building real-time collaborative apps with Ajax.org Platform

• 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.

Page 4: Building real-time collaborative apps with Ajax.org Platform

• 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>

Page 5: Building real-time collaborative apps with Ajax.org Platform

• 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)" }) ] }); ]});

Page 6: Building real-time collaborative apps with Ajax.org Platform

• 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)");

Page 7: Building real-time collaborative apps with Ajax.org Platform

• Loading data

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

Page 8: Building real-time collaborative apps with Ajax.org Platform

• Displaying data - Databinding

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

Page 9: Building real-time collaborative apps with Ajax.org Platform

• Displaying data – a bit more complex

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

Page 10: Building real-time collaborative apps with Ajax.org Platform

• Undo and Redo

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

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

Page 11: Building real-time collaborative apps with Ajax.org Platform

• 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" />

Page 12: Building real-time collaborative apps with Ajax.org Platform

• 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>

Page 13: Building real-time collaborative apps with Ajax.org Platform

Think about what your app should do,

instead of how to implement it

Page 14: Building real-time collaborative apps with Ajax.org Platform

Introducing Live Markup

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

Page 15: Building real-time collaborative apps with Ajax.org Platform

• 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

Page 16: Building real-time collaborative apps with Ajax.org Platform

• 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

Page 17: Building real-time collaborative apps with Ajax.org Platform

• 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>?>

Page 18: Building real-time collaborative apps with Ajax.org Platform

• 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

Page 19: Building real-time collaborative apps with Ajax.org Platform

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

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

Page 20: Building real-time collaborative apps with Ajax.org Platform

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

• Using remote databinding• Over XMPP

Page 21: Building real-time collaborative apps with Ajax.org Platform

• 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)

Page 22: Building real-time collaborative apps with Ajax.org Platform

Thank you

@javruben – www.rubendaniels.com

@mikedeboer – www.mikedeboer.nl