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.
5. Now Current PC 2.000.000.000 + bytes of ram 4x3000 mhz + Focus: applications
6. How do layers emerge Competition creates layer complexity A new layer in between the app and the hardware is needed to optimize reach Ms / IBM PC, OS / runtimes
7. Why layer independence is important Monopoly emerges through multi-layer controlled competition destruction Diversity is healthy Never stops optimizing areas Natural selection works by selection from the diversity, not by directed adaptation
8. When do you need standardization Up: abstraction, Down: standardization Progress halted because of not abstractable scalability differences Competition incredibly technical Lower level innovation useless because of too many verticals Group competition with larger entities
9. Where are we now Standardization in the browser made it scalable to abstract on base level Browser competition now focused on performance and strict compliance
10. What do JS libraries do Abstract browser differences Optimize effort vs result Modularize and reuse
14. HTML 5 Started as the DSL for web applications Moved towards adding features HTML is the assembly language of the web Does not solve the application-level integration
15. Domains in an application Layout State Style Templating Data bindings Communication
17. Why are we doing this? Our time is expensive We want to build cool stuff It should be fun to make and maintain
18. Ajax.orgDSLs Ajax.org Markup Language Static application declaration Live Markup Dynamic application declaration Layouting Skinning Expression CSS
19. Ajax.org Markup Language Application is represented in a DOM tree XML (AML) definable JSON definable JS DOM-api controllable
20. The XML way <div> <a:chart> <a:axis mode="2D"> <a:graph mode="line" formula="sin(x)" /> </a:axis> </a:chart> <a:button>Test</a:button> </div>
21. The JSON way var chart = new apf.chart({ htmlNode : document.body.firstChild, childNodes : [ new apf.axis({ mode : "2D", childNodes : [ new apf.graph({ mode : "line", formula : "sin(x)" }) ] }), new apf.button({caption : "2D”}) ] });
22. JS and W3C DOM API var chart = new apf.chart(); apf.document.body.appendChild(chart); var axis = chart.appendChild(newapf.axis()); axis.setAttribute("mode", "2D"); var graph = axis.appendChild(newapf.graph()); graph.setAttribute("mode", "line"); graph.setAttribute("formula", "sin(x)"); var graph = axis.appendChild(newapf.button()); graph.setAttribute("mode", "line"); graph.setAttribute("formula", "sin(x)”); …
25. Live markup syntax 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
26. A lot of work in HTML: Synchronizing data with the UI Dealing with the server Maintaining state Undo / Redo / Offline Templating from data Dynamic vector graphics
27. Loading data <a:model id = "mdlUsers" src = "http://example.com/users.php" />
28. Displaying data - databinding <a:tree model = "mdlUsers" each = "[user]" caption = "[@name]" icon = "icoUser.png" />
29. Displaying data – a bit more complex <a:tree each = "[mdlUsers::user]" caption = "{[@fname].uCaseFirst()} [@lname]" icon = "{[@icon] or 'icoUser.png'}" />
30. 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" />
31. Managing state – 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>
37. What we need Full feature UI platform IDE Desktop integration Serverside integration Make the browser compete withFlash and Silverlight
38. APF Roadmap Apf 3.0 stable early Q1 2010 Apf 3.1 contentEditable WAI-ARIA support Virtual viewport for all widgets Offline applications Multiple query languages in Live Markup (JSON-Path, CSS3)