The pyramid of application development<br />RikArends @rikarends @ajax_org<br />
Then<br />1983 Commodore 64<br />65536 bytes of ram<br />1 mhz<br />Focus: applications<br />
Now<br />Current PC<br />2.000.000.000 + bytes of ram<br />4x3000 mhz +<br />Focus: applications<br />
How do layers emerge<br />Competition creates layer complexity<br />A new layer in between the app and the hardware is nee...
Why layer independence is important<br />Monopoly emerges through multi-layer controlled competition destruction<br />Dive...
When do you need standardization<br />Up: abstraction, Down: standardization<br />Progress halted because of not abstracta...
Where are we now<br />Standardization in the browser made it scalable to abstract on base level<br />Browser competition n...
What do JS libraries do<br />Abstract browser differences<br />Optimize effort vs result<br />Modularize and reuse<br />
JS Library differentiation<br />DOM operation automation:<br />jQuery, Prototype, Mootools<br />Widget libraries:<br />Doj...
Domain specific methodologies<br />Compression through projection<br />Language optimized for understanding<br />Cross-ove...
Browser domain specific<br />HTML<br />Document and spatial structure<br />CSS<br />Styling<br />
HTML 5 <br />Started as the DSL for web applications<br />Moved towards adding features <br />HTML is the assembly languag...
Domains in an application<br />Layout<br />State<br />Style<br />Templating<br />Data bindings<br />Communication<br />
DSL approaches<br />Tree hierarchy (markup, json)<br />Functional Reactive (signal-slot)<br />Query selectors (css-selecto...
Why are we doing this?<br />Our time is expensive<br />We want to build cool stuff<br />It should be fun to make <br />and...
Ajax.orgDSLs<br />Ajax.org Markup Language<br />Static application declaration<br />Live Markup<br />Dynamic application d...
Ajax.org Markup Language<br />Application is represented in a DOM tree<br />XML (AML) definable<br />JSON definable<br />J...
The XML way<br />&lt;div&gt;<br />    &lt;a:chart&gt;<br />        &lt;a:axis mode=&quot;2D&quot;&gt;<br />            &lt...
The JSON way<br />var chart = new apf.chart({<br />htmlNode : document.body.firstChild,<br />childNodes : [<br />new apf.a...
JS and W3C DOM API<br />var chart = new apf.chart();<br />apf.document.body.appendChild(chart);<br />var axis  = chart.app...
Dynamic UI - Live Markup<br />&lt;?lm<br />varx = 10;<br />    &lt;ul&gt;{<br />each([mdlExample::foo/bar]) {<br />       ...
Dynamic UI - Live Markup<br />&lt;?lm<br />varx = 10;<br />    &lt;ul&gt;{<br />each([mdlExample::foo/bar]) {<br />       ...
Live markup syntax<br />Extended JavaScript<br />[] for query selectors<br />{} for code mode<br />In string parsing<br />...
A lot of work in HTML:<br />Synchronizing data with the UI<br />Dealing with the server<br />Maintaining state<br />Undo /...
Loading data<br />&lt;a:model id  = &quot;mdlUsers&quot; <br />src = &quot;http://example.com/users.php&quot; /&gt;<br />
Displaying data - databinding<br />&lt;a:tree<br />    model   = &quot;mdlUsers&quot; <br />    each    = &quot;[user]&quo...
Displaying data – a bit more complex<br />&lt;a:tree<br />    each    = &quot;[mdlUsers::user]&quot; <br />    caption = &...
Managing state and simple logic<br />&lt;a:thumbnails each=&quot;[mdlThumbs::thumbs]&quot; image=&quot;[@url]&quot; <br />...
Managing state – a bit more complex<br />&lt;a:tree id=&quot;tree&quot; actiontracker=&quot;atTree&quot; ... /&gt;<br />&l...
Undo and Redo	<br />&lt;a:tree actiontracker=&quot;atTree&quot; ... /&gt;<br />&lt;a:button onclick=&quot;atTree.undo()&qu...
Vector graphics<br />&lt;div&gt;<br />    &lt;a:chart&gt;<br />        &lt;a:axis mode=&quot;2D&quot;&gt;<br />           ...
Putting it together<br />Collaborative applications<br />Databinding (remote)<br />Complete widgets<br />Server communicat...
Collaborative Demo<br />
Vision<br />The browser is the application platform of the future<br />
What we need<br />Full feature UI platform<br />IDE<br />Desktop integration<br />Serverside integration<br />Make the bro...
APF Roadmap<br />Apf 3.0 stable early Q1 2010	<br />Apf 3.1<br />contentEditable<br />WAI-ARIA support<br />Virtual viewpo...
Thank you<br />RikArends @rikarendsrik@ajax.org<br />www.ajax.org @ajax_org<br />
Upcoming SlideShare
Loading in …5
×

Beholding the giant pyramid of application development; why Ajax applications are its natural top layer

3,843 views

Published on

Building large and complex web applications using the open browser stack without any plugins is taking off (google wave), and with the support of rapidly innovating browsers like Firefox and Chrome it looks like it is bypassing proprietary platforms. This talk illustrates why the web browser and HTML5 are positioned to become the global platform for applications and how Ajax technologies like our ajax.org are optimizing application development.

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

  • Be the first to like this

No Downloads
Views
Total views
3,843
On SlideShare
0
From Embeds
0
Number of Embeds
1,979
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beholding the giant pyramid of application development; why Ajax applications are its natural top layer

  1. 1. The pyramid of application development<br />RikArends @rikarends @ajax_org<br />
  2. 2.
  3. 3.
  4. 4. Then<br />1983 Commodore 64<br />65536 bytes of ram<br />1 mhz<br />Focus: applications<br />
  5. 5. Now<br />Current PC<br />2.000.000.000 + bytes of ram<br />4x3000 mhz +<br />Focus: applications<br />
  6. 6. How do layers emerge<br />Competition creates layer complexity<br />A new layer in between the app and the hardware is needed to optimize reach<br />Ms / IBM PC, OS / runtimes<br />
  7. 7. Why layer independence is important<br />Monopoly emerges through multi-layer controlled competition destruction<br />Diversity is healthy<br />Never stops optimizing areas<br />Natural selection works by selection from the diversity, not by directed adaptation<br />
  8. 8. When do you need standardization<br />Up: abstraction, Down: standardization<br />Progress halted because of not abstractable scalability differences<br />Competition incredibly technical<br />Lower level innovation useless because of too many verticals<br />Group competition with larger entities<br />
  9. 9. Where are we now<br />Standardization in the browser made it scalable to abstract on base level<br />Browser competition now focused on performance and strict compliance<br />
  10. 10. What do JS libraries do<br />Abstract browser differences<br />Optimize effort vs result<br />Modularize and reuse<br />
  11. 11. JS Library differentiation<br />DOM operation automation:<br />jQuery, Prototype, Mootools<br />Widget libraries:<br />Dojo, Qooxdoo, Ext<br />Domain specific methodologies<br />Ample, Ajax.org Platform<br />
  12. 12. Domain specific methodologies<br />Compression through projection<br />Language optimized for understanding<br />Cross-over at optimal points<br />
  13. 13. Browser domain specific<br />HTML<br />Document and spatial structure<br />CSS<br />Styling<br />
  14. 14. HTML 5 <br />Started as the DSL for web applications<br />Moved towards adding features <br />HTML is the assembly language of the web<br />Does not solve the application-level integration<br />
  15. 15. Domains in an application<br />Layout<br />State<br />Style<br />Templating<br />Data bindings<br />Communication<br />
  16. 16. DSL approaches<br />Tree hierarchy (markup, json)<br />Functional Reactive (signal-slot)<br />Query selectors (css-selectors, xpath, json-path)<br />Expressions<br />Code flow syntax (e4x, live markup)<br />
  17. 17. Why are we doing this?<br />Our time is expensive<br />We want to build cool stuff<br />It should be fun to make <br />and maintain<br />
  18. 18. Ajax.orgDSLs<br />Ajax.org Markup Language<br />Static application declaration<br />Live Markup<br />Dynamic application declaration<br />Layouting<br />Skinning<br />Expression CSS<br />
  19. 19. Ajax.org Markup Language<br />Application is represented in a DOM tree<br />XML (AML) definable<br />JSON definable<br />JS DOM-api controllable<br />
  20. 20. The XML way<br />&lt;div&gt;<br /> &lt;a:chart&gt;<br /> &lt;a:axis mode=&quot;2D&quot;&gt;<br /> &lt;a:graph mode=&quot;line&quot; formula=&quot;sin(x)&quot; /&gt;<br /> &lt;/a:axis&gt;<br /> &lt;/a:chart&gt;<br /> &lt;a:button&gt;Test&lt;/a:button&gt;<br />&lt;/div&gt;<br />
  21. 21. The JSON way<br />var chart = new apf.chart({<br />htmlNode : document.body.firstChild,<br />childNodes : [<br />new apf.axis({<br /> mode : &quot;2D&quot;,<br />childNodes : [<br /> new apf.graph({<br /> mode : &quot;line&quot;,<br /> formula : &quot;sin(x)&quot;<br /> })<br /> ]<br /> }),<br /> new apf.button({caption : &quot;2D”})<br /> ]<br />});<br />
  22. 22. JS and W3C DOM API<br />var chart = new apf.chart();<br />apf.document.body.appendChild(chart);<br />var axis = chart.appendChild(newapf.axis());<br />axis.setAttribute(&quot;mode&quot;, &quot;2D&quot;);<br />var graph = axis.appendChild(newapf.graph());<br />graph.setAttribute(&quot;mode&quot;, &quot;line&quot;);<br />graph.setAttribute(&quot;formula&quot;, &quot;sin(x)&quot;);<br />var graph = axis.appendChild(newapf.button());<br />graph.setAttribute(&quot;mode&quot;, &quot;line&quot;);<br />graph.setAttribute(&quot;formula&quot;, &quot;sin(x)”);<br />…<br />
  23. 23. Dynamic UI - Live Markup<br />&lt;?lm<br />varx = 10;<br /> &lt;ul&gt;{<br />each([mdlExample::foo/bar]) {<br /> &lt;li&gt;{ [@name].toUpperCase() + x }&lt;/li&gt;<br /> }<br /> }&lt;/ul&gt;<br />?&gt;<br />
  24. 24. Dynamic UI - Live Markup<br />&lt;?lm<br />varx = 10;<br /> &lt;ul&gt;{<br />each([mdlExample::foo/bar]) {<br /> &lt;li&gt;{ [@name].toUpperCase() + x }&lt;/li&gt;<br /> }<br /> }&lt;/ul&gt;<br />?&gt;<br />
  25. 25. Live markup syntax<br />Extended JavaScript<br />[] for query selectors<br />{} for code mode<br />In string parsing<br />E4X style xml literals (literal is a string, not an object)<br />Overloaded operators<br />Async calling abstracted (use sparsely)<br />Fast execution and compilation<br />Auto concat and auto output<br />
  26. 26. A lot of work in HTML:<br />Synchronizing data with the UI<br />Dealing with the server<br />Maintaining state<br />Undo / Redo / Offline<br />Templating from data<br />Dynamic vector graphics<br />
  27. 27. Loading data<br />&lt;a:model id = &quot;mdlUsers&quot; <br />src = &quot;http://example.com/users.php&quot; /&gt;<br />
  28. 28. Displaying data - databinding<br />&lt;a:tree<br /> model = &quot;mdlUsers&quot; <br /> each = &quot;[user]&quot; <br /> caption = &quot;[@name]&quot; <br /> icon = &quot;icoUser.png&quot; /&gt;<br />
  29. 29. Displaying data – a bit more complex<br />&lt;a:tree<br /> each = &quot;[mdlUsers::user]&quot; <br /> caption = &quot;{[@fname].uCaseFirst()} [@lname]&quot; <br /> icon = &quot;{[@icon] or &apos;icoUser.png&apos;}&quot; /&gt;<br />
  30. 30. Managing state and simple logic<br />&lt;a:thumbnails each=&quot;[mdlThumbs::thumbs]&quot; image=&quot;[@url]&quot; <br />thumbsize=&quot;{sld1.value}&quot;/&gt;<br />&lt;a:slider id=&quot;sld1&quot; value=&quot;90&quot; min=&quot;10&quot; max=&quot;150&quot; /&gt;<br />
  31. 31. Managing state – a bit more complex<br />&lt;a:tree id=&quot;tree&quot; actiontracker=&quot;atTree&quot; ... /&gt;<br />&lt;a:label value=&quot;[{tree.selected}::@name]&quot; /&gt;<br />&lt;a:button disabled=&quot;{!atTree.undolength}&quot; onclick=&quot;...&quot;&gt;<br /> Undo<br />&lt;/a:button&gt;<br />
  32. 32. Undo and Redo <br />&lt;a:tree actiontracker=&quot;atTree&quot; ... /&gt;<br />&lt;a:button onclick=&quot;atTree.undo()&quot;&gt;Undo&lt;/a:button&gt;<br />&lt;a:button onclick=&quot;atTree.redo()&quot;&gt;Redo&lt;/a:button&gt;<br />
  33. 33. Vector graphics<br />&lt;div&gt;<br /> &lt;a:chart&gt;<br /> &lt;a:axis mode=&quot;2D&quot;&gt;<br /> &lt;a:graph mode=&quot;line&quot; formula=&quot;sin(x)&quot; /&gt;<br /> &lt;/a:axis&gt;<br /> &lt;/a:chart&gt;<br />&lt;/div&gt;<br />
  34. 34. Putting it together<br />Collaborative applications<br />Databinding (remote)<br />Complete widgets<br />Server communication<br />
  35. 35. Collaborative Demo<br />
  36. 36. Vision<br />The browser is the application platform of the future<br />
  37. 37. What we need<br />Full feature UI platform<br />IDE<br />Desktop integration<br />Serverside integration<br />Make the browser compete withFlash and Silverlight<br />
  38. 38. APF Roadmap<br />Apf 3.0 stable early Q1 2010 <br />Apf 3.1<br />contentEditable<br />WAI-ARIA support<br />Virtual viewport for all widgets<br />Offline applications<br />Multiple query languages in Live Markup (JSON-Path, CSS3)<br />
  39. 39. Thank you<br />RikArends @rikarendsrik@ajax.org<br />www.ajax.org @ajax_org<br />

×