Ajax In Action 2008 - Gui Development With qooxdoo

  • 3,815 views
Uploaded on

This presentation shows the evolution of web application to single page applications. It explains how single page applications are different to classic web applications and how qooxdoo can help …

This presentation shows the evolution of web application to single page applications. It explains how single page applications are different to classic web applications and how qooxdoo can help building them.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,815
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
120
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Web GUI-Development with qooxdoo Ajax in Action 29. Oktober 2008 Fabian Jakobs 1&1 Internet AG
  • 2. Overview • Evolution of AJAX • How Single Page Applications are different • How qooxdoo can help
  • 3. HTML only
  • 4. HTML + JavaScript
  • 5. HTML + AJAX +JS
  • 6. more longer AJAX page load +JS +AJAX
  • 7. Single Page Application +JS +AJAX
  • 8. +JS +AJAX Single Page
  • 9. +JS +AJAX Single Page
  • 10. Reach +JS +AJAX Single Page Interactivity
  • 11. Single Page Applications are Different +JS +AJAX Single Page
  • 12. Why?
  • 13. Expectations „If it looks like a desktop application it should feel like a desktop application!“
  • 14. Client liberation • Code is run in the client • Client/server communication style changes • Client can maintain state
  • 15. But: Theming Still Matters!
  • 16. Client code explodes HTML CSS JavaScript +JS +AJAX Single Page
  • 17. You Need a Framework!
  • 18. qooxdoo
  • 19. qooxdoo • Cross browser • JavaScript based RIA framework • Open Source • powered by
  • 20. How does qooxdoo help? • UI-Expectations • Theming • Code Size
  • 21. Expectations
  • 22. Swing/Qt/Cocoa for the Web
  • 23. qooxdoo Architecture Widgets UI Core (Rendering Engine) HTML Anim. Event BOM (Cross Browser Code) Core (JavaScript OOP)
  • 24. Widgets
  • 25. How would you layout this with CSS?
  • 26. Absolute positioning!
  • 27. Layout Manager • Calculate layout in JavaScript • Not limited by the browser • JavaScript is fast enough
  • 28. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  • 29. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  • 30. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  • 31. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser Grid • JavaScript is fast enough
  • 32. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser Grid • JavaScript is fast enough
  • 33. Desktop Style Development Model // Create a button var button1 = new qx.ui.form.Button(quot;First Buttonquot;, quot;demo/browser.pngquot;); // Add button to container at fixed coordinates container.add(button1, {left: 100, top: 50}); // Add an event listener button1.addListener(quot;executequot;, function(e) { alert(quot;Hello World!quot;); });
  • 34. Theming Matters!
  • 35. Theming • 4 images
  • 36. Theming • 4 images
  • 37. Theming • 4 images
  • 38. Theming • 4 images
  • 39. Theming • 4 images • 30 lines configuration
  • 40. Theming quot;calc-buttonquot; : { • 4 images style: function(states) { return { • 30 lines configuration decorator: states.pressed ? quot;deco-button-pressedquot; : quot;deco-buttonquot;, • 80 lines theme center: true, padding: [2, 8] } } }
  • 41. Theming quot;calc-buttonquot; : { • 4 images style: function(states) { return { • 30 lines configuration decorator: states.pressed ? quot;deco-button-pressedquot; : quot;deco-buttonquot;, • 80 lines theme center: true, padding: [2, 8] } } } quot;deco-buttonquot;: { decorator: qx.ui.decoration.Grid, style: { baseImage: quot;calc/theme/button.pngquot;, insets: [3, 3, 5, 3] } }
  • 42. Theming • 4 images • 30 lines configuration • 80 lines theme • 60 minutes work
  • 43. Theming
  • 44. Code Size
  • 45. JavaScript OOP qx.Class.define(quot;demo.Personquot;, { extend : qx.core.Object, construct : function(firstName, lastName) { ! this.base(arguments);! ! ! this._firstName = firstName; ! this._lastName = lastName; }, members : { getFullName : function() { return this._firstName + quot; quot; + this._lastName; } } });
  • 46. Linker
  • 47. JavaScript Tooling • Unit testing infrastructure • API documentation generation • JavaScript Lint • ...
  • 48. Use the right approach!
  • 49. If a Single Page Application (RIA) is the right choice...
  • 50. ... try qooxdoo!
  • 51. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Thank you. Fabian Jakobs <fabian.jakobs@1und1.de> http://qooxdoo.org