colorstrip.gifT
     THE NEW ERA OF WEB DEVELOPMENT




Web GUI-Development
   with qooxdoo
            Ajax in Action
   ...
Overview

• Evolution of AJAX
• How Single Page Applications are different
• How qooxdoo can help
HTML only
HTML + JavaScript
HTML + AJAX




   +JS
more                  longer
AJAX                 page load




       +JS   +AJAX
Single Page Application




        +JS   +AJAX
+JS   +AJAX
              Single
               Page
+JS   +AJAX
              Single
               Page
Reach



+JS              +AJAX
                         Single
                          Page




 Interactivity
Single Page Applications
      are Different

       +JS   +AJAX
                       Single
                        Page
Why?
Expectations

„If it looks like a desktop
 application it should feel
 like a desktop application!“
Client liberation

• Code is run in the client
• Client/server communication style changes
• Client can maintain state
But:
Theming Still Matters!
Client code explodes
   HTML         CSS           JavaScript




          +JS         +AJAX
                            ...
You Need a
Framework!
qooxdoo
qooxdoo

• Cross browser
• JavaScript based RIA framework
• Open Source

• powered by
How does qooxdoo help?


• UI-Expectations
• Theming
• Code Size
Expectations
Swing/Qt/Cocoa
  for the Web
qooxdoo Architecture
              Widgets


             UI Core
         (Rendering Engine)


    HTML    Anim.       Ev...
Widgets
How would you
layout this with CSS?
Absolute positioning!
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
    browser

•   JavaScript is fast enough
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
                                VBox
    br...
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
                                VBox
    br...
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
                                VBox
    br...
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
                                VBox
    br...
Layout Manager

•   Calculate layout in
    JavaScript

•   Not limited by the
                                VBox
    br...
Desktop Style
       Development Model

// Create a button
var button1 = new qx.ui.form.Button(quot;First Buttonquot;, quo...
Theming Matters!
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
• 30 lines configuration
Theming
                           quot;calc-buttonquot; : {

• 4 images                  style: function(states)
        ...
Theming
                           quot;calc-buttonquot; : {

• 4 images                  style: function(states)
        ...
Theming
• 4 images
• 30 lines configuration
• 80 lines theme

• 60 minutes work
Theming
Code Size
JavaScript OOP
qx.Class.define(quot;demo.Personquot;,
{
  extend : qx.core.Object,

  construct : function(firstName, last...
Linker
JavaScript Tooling

• Unit testing infrastructure
• API documentation generation
• JavaScript Lint
• ...
Use the right approach!
If a Single Page
Application (RIA) is the
     right choice...
... try qooxdoo!
colorstrip.gifT
  THE NEW ERA OF WEB DEVELOPMENT




  Thank you.


Fabian Jakobs <fabian.jakobs@1und1.de>
               ...
Upcoming SlideShare
Loading in …5
×

Ajax In Action 2008 - Gui Development With qooxdoo

4,548 views

Published 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 building them.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,548
On SlideShare
0
From Embeds
0
Number of Embeds
628
Actions
Shares
0
Downloads
122
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Ajax In Action 2008 - Gui Development With qooxdoo

  1. 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. 2. Overview • Evolution of AJAX • How Single Page Applications are different • How qooxdoo can help
  3. 3. HTML only
  4. 4. HTML + JavaScript
  5. 5. HTML + AJAX +JS
  6. 6. more longer AJAX page load +JS +AJAX
  7. 7. Single Page Application +JS +AJAX
  8. 8. +JS +AJAX Single Page
  9. 9. +JS +AJAX Single Page
  10. 10. Reach +JS +AJAX Single Page Interactivity
  11. 11. Single Page Applications are Different +JS +AJAX Single Page
  12. 12. Why?
  13. 13. Expectations „If it looks like a desktop application it should feel like a desktop application!“
  14. 14. Client liberation • Code is run in the client • Client/server communication style changes • Client can maintain state
  15. 15. But: Theming Still Matters!
  16. 16. Client code explodes HTML CSS JavaScript +JS +AJAX Single Page
  17. 17. You Need a Framework!
  18. 18. qooxdoo
  19. 19. qooxdoo • Cross browser • JavaScript based RIA framework • Open Source • powered by
  20. 20. How does qooxdoo help? • UI-Expectations • Theming • Code Size
  21. 21. Expectations
  22. 22. Swing/Qt/Cocoa for the Web
  23. 23. qooxdoo Architecture Widgets UI Core (Rendering Engine) HTML Anim. Event BOM (Cross Browser Code) Core (JavaScript OOP)
  24. 24. Widgets
  25. 25. How would you layout this with CSS?
  26. 26. Absolute positioning!
  27. 27. Layout Manager • Calculate layout in JavaScript • Not limited by the browser • JavaScript is fast enough
  28. 28. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  29. 29. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  30. 30. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser • JavaScript is fast enough
  31. 31. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser Grid • JavaScript is fast enough
  32. 32. Layout Manager • Calculate layout in JavaScript • Not limited by the VBox browser Grid • JavaScript is fast enough
  33. 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. 34. Theming Matters!
  35. 35. Theming • 4 images
  36. 36. Theming • 4 images
  37. 37. Theming • 4 images
  38. 38. Theming • 4 images
  39. 39. Theming • 4 images • 30 lines configuration
  40. 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. 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. 42. Theming • 4 images • 30 lines configuration • 80 lines theme • 60 minutes work
  43. 43. Theming
  44. 44. Code Size
  45. 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. 46. Linker
  47. 47. JavaScript Tooling • Unit testing infrastructure • API documentation generation • JavaScript Lint • ...
  48. 48. Use the right approach!
  49. 49. If a Single Page Application (RIA) is the right choice...
  50. 50. ... try qooxdoo!
  51. 51. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Thank you. Fabian Jakobs <fabian.jakobs@1und1.de> http://qooxdoo.org

×