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

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
Single
Page

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. Event
BOM (Cross Browser Code)
Core (JavaScript OOP)

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
browser
• JavaScript is fast enough

Layout Manager
• Calculate layout in
JavaScript
• Not limited by the
VBox
browser
• JavaScript is fast enough

Layout Manager
• Calculate layout in
JavaScript
• Not limited by the
VBox
browser
• JavaScript is fast enough

Layout Manager
• Calculate layout in
JavaScript
• Not limited by the
VBox
browser Grid
• JavaScript is fast enough

Layout Manager
• Calculate layout in
JavaScript
• Not limited by the
VBox
browser Grid
• JavaScript is fast enough

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!\");
});

Theming Matters!

Theming
• 4 images

Theming
• 4 images

Theming
• 4 images

Theming
• 4 images

Theming
• 4 images
• 30 lines configuration

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]
}
}
}

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]
}
}

Theming
• 4 images
• 30 lines configuration
• 80 lines theme
• 60 minutes work

Theming

Code Size

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;
}
}
});

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>
http://qooxdoo.org