ajax in action 2008 - gui development with qooxdoo
DESCRIPTION
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.TRANSCRIPT
colorstrip.gifT
Web GUI-Development with qooxdoo
Fabian Jakobs1&1 Internet AG
THE NEW ERA OF WEB DEVELOPMENT
Ajax in Action29. Oktober 2008
Overview
• Evolution of AJAX
• How Single Page Applications are different
• How qooxdoo can help
HTML only
HTML + JavaScript
HTML + AJAX
+JS
+JS +AJAX
moreAJAX
longerpage load
+JS +AJAXSinglePage
+JS +AJAXSinglePage
+JS +AJAXSinglePage
Reach
Interactivity
Single Page Applications are Different
+JS +AJAX
SinglePage
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!
+JS +AJAXSinglePage
Client code explodes
HTML CSS JavaScript
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/Cocoafor the Web
qooxdoo Architecture
Core (JavaScript OOP)
BOM (Cross Browser Code)
EventAnim.HTML
UI Core(Rendering Engine)
Widgets
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 browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBoxGrid
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBoxGrid
Desktop StyleDevelopment 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
• 4 images
• 30 lines configuration
• 80 lines theme
"calc-button" : {
style: function(states)
{
return {
decorator: states.pressed ?
"deco-button-pressed" :
"deco-button",
center: true,
padding: [2, 8]
}
}
}
Theming
• 4 images
• 30 lines configuration
• 80 lines theme
"calc-button" : {
style: function(states)
{
return {
decorator: states.pressed ?
"deco-button-pressed" :
"deco-button",
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 OOPqx.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!
Thank you.
Fabian Jakobs <[email protected]>http://qooxdoo.org
colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT