<ul><li>Ruben Daniels (@javruben) </li></ul><ul><li>Mike de Boer (@mikedeboer) </li></ul>
100% pure JavaScript framework for creating real-time collaborative applications C++ Component library with JavaScript API...
<ul><li>Ajax.org Platform (APF 3.0 beta) </li></ul><ul><ul><li>LGPL Licensed </li></ul></ul><ul><ul><li>Free to use, also ...
<ul><li>Define a UI using markup (AML) </li></ul><div> <a:chart> <a:axis mode=&quot;2D&quot;> <a:graph mode=&quot;line&quo...
<ul><li>Define a UI using JSON in JS </li></ul>var chart = new apf.chart({ htmlNode : document.body.firstChild, childNodes...
<ul><li>Program a UI (JS + W3C DOM) </li></ul>var chart = new apf.chart(); apf.document.body.appendChild(chart); var axis ...
<ul><li>Loading data </li></ul><a:model id  = &quot;mdlUsers&quot;  src = &quot;http://example.com/users.php&quot; />
<ul><li>Displaying data - Databinding </li></ul><a:tree  model  = &quot;mdlUsers&quot;  each  = &quot;[user]&quot;  captio...
<ul><li>Displaying data – a bit more complex </li></ul><a:tree  each  = &quot;[mdlUsers :: user]&quot;  caption = &quot;{[...
<ul><li>Undo and Redo </li></ul><a:tree actiontracker=&quot;atTree&quot; ... /> <a:button onclick=&quot;atTree.undo()&quot...
<ul><li>Managing state and simple logic </li></ul><a:thumbnails each=&quot;[mdlThumbs::thumbs]&quot; image=&quot;[@url]&qu...
<ul><li>Managing state and logic – a bit more complex </li></ul><a:tree id=&quot;tree&quot; actiontracker=&quot;atTree&quo...
<ul><li>Think about  what  your app should do,  </li></ul><ul><li>instead of  how  to implement it </li></ul>
<ul><li>Introducing Live Markup </li></ul><?lm var x = 10; <ul>{ each([mdlExample::foo/bar]) { <li>{[@name].toUpperCase()}...
<ul><li>What is Live Markup? </li></ul><ul><ul><li>Extended JavaScript </li></ul></ul><ul><ul><ul><li>[] for query selecto...
<ul><li>Why is Live Markup useful? </li></ul><ul><ul><li>Manages all change events </li></ul></ul><ul><ul><li>Updates when...
<ul><li>Generating parts of the UI with Live Markup </li></ul><?lm var x = [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]; ...
<ul><li>What is needed for a real-time collaborative app? </li></ul><ul><ul><li>A way to determine change in the app </li>...
<ul><li>Remote databinding </li></ul><ul><ul><li>Sends changes to data of specific models to listening clients </li></ul><...
<ul><li>Demo </li></ul><ul><ul><li>Databound flowchart element </li></ul></ul><ul><ul><li>Algorithm to calculate traffice ...
<ul><li>Currently in development for APF 3.1+ </li></ul><ul><ul><li>contentEditable </li></ul></ul><ul><ul><li>WAI-ARIA su...
<ul><li>Thank you </li></ul><ul><li>@javruben – www.rubendaniels.com </li></ul><ul><li>@mikedeboer – www.mikedeboer.nl </l...
Upcoming SlideShare
Loading in …5
×

Building real-time collaborative apps with Ajax.org Platform

7,344 views

Published on

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.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,344
On SlideShare
0
From Embeds
0
Number of Embeds
1,695
Actions
Shares
0
Downloads
83
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Building real-time collaborative apps with Ajax.org Platform

  1. <ul><li>Ruben Daniels (@javruben) </li></ul><ul><li>Mike de Boer (@mikedeboer) </li></ul>
  2. 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)
  3. <ul><li>Ajax.org Platform (APF 3.0 beta) </li></ul><ul><ul><li>LGPL Licensed </li></ul></ul><ul><ul><li>Free to use, also for commercial projects </li></ul></ul><ul><ul><li>Javeline B.V. is Ajax.org’s corporate sponsor offering support and services. </li></ul></ul>
  4. <ul><li>Define a UI using markup (AML) </li></ul><div> <a:chart> <a:axis mode=&quot;2D&quot;> <a:graph mode=&quot;line&quot; formula=&quot;sin(x)&quot; /> </a:axis> </a:chart> <a:button>Test</a:button> </div>
  5. <ul><li>Define a UI using JSON in JS </li></ul>var chart = new apf.chart({ htmlNode : document.body.firstChild, childNodes : [ new apf.axis({ mode : &quot;2D&quot;, childNodes : [ new apf.graph({ mode : &quot;line&quot;, formula : &quot;sin(x)&quot; }) ] }); ] });
  6. <ul><li>Program a UI (JS + W3C DOM) </li></ul>var chart = new apf.chart(); apf.document.body.appendChild(chart); var axis = chart.appendChild(new apf.axis()); axis.setAttribute(&quot;mode&quot;, &quot;2D&quot;); var graph = axis.appendChild(new apf.graph()); graph.setAttribute(&quot;mode&quot;, &quot;line&quot;); graph.setAttribute(&quot;formula&quot;, &quot;sin(x)&quot;);
  7. <ul><li>Loading data </li></ul><a:model id = &quot;mdlUsers&quot; src = &quot;http://example.com/users.php&quot; />
  8. <ul><li>Displaying data - Databinding </li></ul><a:tree model = &quot;mdlUsers&quot; each = &quot;[user]&quot; caption = &quot;[@name]&quot; icon = &quot;icoUser.png&quot; />
  9. <ul><li>Displaying data – a bit more complex </li></ul><a:tree each = &quot;[mdlUsers :: user]&quot; caption = &quot;{[@fname].uCaseFirst()} [@lname]&quot; icon = &quot;{[@icon] or 'icoUser.png'}&quot; />
  10. <ul><li>Undo and Redo </li></ul><a:tree actiontracker=&quot;atTree&quot; ... /> <a:button onclick=&quot;atTree.undo()&quot;>Undo</a:button> <a:button onclick=&quot;atTree.redo()&quot;>Redo</a:button>
  11. <ul><li>Managing state and simple logic </li></ul><a:thumbnails each=&quot;[mdlThumbs::thumbs]&quot; image=&quot;[@url]&quot; thumbsize=&quot;{sld1.value}&quot;/> <a:slider id=&quot;sld1&quot; value=&quot;90&quot; min=&quot;10&quot; max=&quot;150&quot; />
  12. <ul><li>Managing state and logic – a bit more complex </li></ul><a:tree id=&quot;tree&quot; actiontracker=&quot;atTree&quot; ... /> <a:label value=&quot;[{tree.selected}::@name]&quot; /> <a:button disabled=&quot;{!atTree.undolength}&quot; onclick=&quot;...&quot;> Undo </a:button>
  13. <ul><li>Think about what your app should do, </li></ul><ul><li>instead of how to implement it </li></ul>
  14. <ul><li>Introducing Live Markup </li></ul><?lm var x = 10; <ul>{ each([mdlExample::foo/bar]) { <li>{[@name].toUpperCase()}</li> } }</ul> ?>
  15. <ul><li>What is Live Markup? </li></ul><ul><ul><li>Extended JavaScript </li></ul></ul><ul><ul><ul><li>[] for query selectors </li></ul></ul></ul><ul><ul><ul><li>{} for code mode </li></ul></ul></ul><ul><ul><ul><li>In string parsing </li></ul></ul></ul><ul><ul><li>E4X style xml literals (literal is a string, not an object) </li></ul></ul><ul><ul><li>Overloaded operators </li></ul></ul><ul><ul><li>Async calling abstracted (use sparsely) </li></ul></ul><ul><ul><li>Fast execution and compilation </li></ul></ul><ul><ul><li>Auto concat and auto output </li></ul></ul>
  16. <ul><li>Why is Live Markup useful? </li></ul><ul><ul><li>Manages all change events </li></ul></ul><ul><ul><li>Updates when data source or object properties changes. </li></ul></ul><ul><ul><li>Propagates changes to the DOM using xml-diff </li></ul></ul><ul><ul><li>Architected to write less code </li></ul></ul><ul><ul><li>Very useful for real-time collaborative apps </li></ul></ul><ul><ul><li>Unified language for all attributes and bindings </li></ul></ul>
  17. <ul><li>Generating parts of the UI with Live Markup </li></ul><?lm var x = [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]; each(x) { <a:button caption=&quot;{item()}&quot; /> } <a:tab>{ each([mdlExample::users]) { <a:page caption=&quot;[@name]&quot; aml=&quot;userpage.aml&quot; /> } }</a:tab> ?>
  18. <ul><li>What is needed for a real-time collaborative app? </li></ul><ul><ul><li>A way to determine change in the app </li></ul></ul><ul><ul><li>A protocol for communicating these changes </li></ul></ul><ul><ul><li>A Transport layer to communicate changes </li></ul></ul><ul><ul><li>Collision resolution </li></ul></ul><ul><ul><li>A fast updating UI to render incoming changes </li></ul></ul>
  19. <ul><li>Remote databinding </li></ul><ul><ul><li>Sends changes to data of specific models to listening clients </li></ul></ul><ul><ul><li>Uses text-diffing to localize changes </li></ul></ul><ul><ul><li>Messages are time stamped </li></ul></ul>
  20. <ul><li>Demo </li></ul><ul><ul><li>Databound flowchart element </li></ul></ul><ul><ul><li>Algorithm to calculate traffice density </li></ul></ul><ul><ul><li>Changes are communicated realtime </li></ul></ul><ul><ul><ul><li>Using remote databinding </li></ul></ul></ul><ul><ul><ul><li>Over XMPP </li></ul></ul></ul>
  21. <ul><li>Currently in development for APF 3.1+ </li></ul><ul><ul><li>contentEditable </li></ul></ul><ul><ul><li>WAI-ARIA support </li></ul></ul><ul><ul><li>Virtual viewport for all widgets </li></ul></ul><ul><ul><li>Offline applications </li></ul></ul><ul><ul><li>Multiple query languages in Live Markup (JSON-Path, CSS3) </li></ul></ul>
  22. <ul><li>Thank you </li></ul><ul><li>@javruben – www.rubendaniels.com </li></ul><ul><li>@mikedeboer – www.mikedeboer.nl </li></ul>

×