Ajax In Action 2008 - Gui Development With qooxdoo

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

2 Favorites & 1 Group

Ajax In Action 2008 - Gui Development With qooxdoo - Presentation 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(\"First Button\", \"demo/browser.png\"); // Add button to container at fixed coordinates container.add(button1, {left: 100, top: 50}); // Add an event listener button1.addListener(\"execute\", function(e) { alert(\"Hello World!\"); });
  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 \"calc-button\" : { • 4 images style: function(states) { return { • 30 lines configuration decorator: states.pressed ? \"deco-button-pressed\" : \"deco-button\", • 80 lines theme center: true, padding: [2, 8] } } }
  41. Theming \"calc-button\" : { • 4 images style: function(states) { return { • 30 lines configuration decorator: states.pressed ? \"deco-button-pressed\" : \"deco-button\", • 80 lines theme center: true, padding: [2, 8] } } } \"deco-button\": { decorator: qx.ui.decoration.Grid, style: { baseImage: \"calc/theme/button.png\", 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(\"demo.Person\", { extend : qx.core.Object, construct : function(firstName, lastName) { ! this.base(arguments);! ! ! this._firstName = firstName; ! this._lastName = lastName; }, members : { getFullName : function() { return this._firstName + \" \" + 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

+ Fabian JakobsFabian Jakobs, 2 years ago

custom

3078 views, 2 favs, 7 embeds more stats

This presentation shows the evolution of web applic more

More info about this document

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Go to text version

  • Total Views 3078
    • 2771 on SlideShare
    • 307 from embeds
  • Comments 1
  • Favorites 2
  • Downloads 52
Most viewed embeds
  • 295 views on http://news.qooxdoo.org
  • 5 views on http://feeds.feedburner.com
  • 2 views on http://static.slideshare.net
  • 2 views on http://planet.blog.tennessee.schlund.de
  • 1 views on http://planet.dev.tennessee.schlund.de

more

All embeds
  • 295 views on http://news.qooxdoo.org
  • 5 views on http://feeds.feedburner.com
  • 2 views on http://static.slideshare.net
  • 2 views on http://planet.blog.tennessee.schlund.de
  • 1 views on http://planet.dev.tennessee.schlund.de
  • 1 views on http://209.85.129.132
  • 1 views on http://www.linux.rk.edu.pl

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Groups / Events