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

The roots of the web

Only HTML and CSS - no JavaScript

Document based

Interaction = navigation by hyperlinks

With the use of forms this can be used to write applications as well

HTML only

HTML only

HTML + JavaScript

Soon develper discovered that JavaScript can imrove the usability of web applications:

e.g.:

! - date picker

! - Form validation

! - menus, tabs

This is the Web 1.0

HTML + JavaScript

+JS

Soon develper discovered that JavaScript can imrove the usability of web applications:

e.g.:

! - date picker

! - Form validation

! - menus, tabs

This is the Web 1.0

HTML + AJAX

+JS

Only parts of the page are updated using AJAX to reduce latency

e.g.

! - load content of tabs

! - form validation

! - autocomplete

„Christmas Tree“ approach:

! Decorate Web 1.0 app with some AJAX

! The basic application remains the same

! coined by Dietrich Kappe (Pathfinder) - Agile AJAX blog

Small low level JS-libraries like jQuery or prototype are used for this approach

HTML + AJAX

+JS +AJAX

Only parts of the page are updated using AJAX to reduce latency

e.g.

! - load content of tabs

! - form validation

! - autocomplete

„Christmas Tree“ approach:

! Decorate Web 1.0 app with some AJAX

! The basic application remains the same

! coined by Dietrich Kappe (Pathfinder) - Agile AJAX blog

Small low level JS-libraries like jQuery or prototype are used for this approach

+JS +AJAX

moreAJAX

longerpage load

More AJAX results in longer page load time

The impact og longer page loads can be minimized by reducing the overall number of page

loads using even more AJAX

Solution: Avoid all reloads and update everything using AJAX

Single Page Application

+JS +AJAX

Never leave the initial HTML page

The document is modified inline but never replaced

The document metaphor is no longer valid.

This is an application and the browser is used to render the application

examples:

! gmx.com

! google reader

! mobileMe

! 280Slides.com

DEMO

Single Page Application

+JS +AJAXSinglePage

Never leave the initial HTML page

The document is modified inline but never replaced

The document metaphor is no longer valid.

This is an application and the browser is used to render the application

examples:

! gmx.com

! google reader

! mobileMe

! 280Slides.com

DEMO

+JS +AJAXSinglePage

+JS +AJAXSinglePage

+JS +AJAXSinglePage

Reach

Reach:

Going left the reqirements to show the web applications decrease. Pure HTML can be shown

even in less capable browsers in settop-boxes, the iPhone, or mobile phones. If the type 2/3

applications are written carefully and use „progressive enhancement“ they can be used without

JavaScript as well. Single page applications (SPA) on the other hand don"t work without

JavaScript and usually require a fast browser/client.

Interactivity:

The more the user interacts with the application the more can JavaScript help to improve the

user experience

No judgment:

event today each approach has its place. It depends on the type of web application you want to

create.

+JS +AJAXSinglePage

Reach

Interactivity

Reach:

Going left the reqirements to show the web applications decrease. Pure HTML can be shown

even in less capable browsers in settop-boxes, the iPhone, or mobile phones. If the type 2/3

applications are written carefully and use „progressive enhancement“ they can be used without

JavaScript as well. Single page applications (SPA) on the other hand don"t work without

JavaScript and usually require a fast browser/client.

Interactivity:

The more the user interacts with the application the more can JavaScript help to improve the

user experience

No judgment:

event today each approach has its place. It depends on the type of web application you want to

create.

Single Page Applications are Different

+JS +AJAXSinglePage

1-3:

! can be achieved with incremental changes

! JS libraries can help fighting browser incompatibilities

! code size of JavaScript is crititcal since it must be loaded on each page load

2-3:

! DOM and JavaScript are gaining importance

4.

! JavaScript is only loaded at the initial page load

! The code size becomes less an issue

! This kind of application cannot we written by incremental changes of a document based

web application

Single Page Applications are Different

+JS +AJAX

SinglePage

1-3:

! can be achieved with incremental changes

! JS libraries can help fighting browser incompatibilities

! code size of JavaScript is crititcal since it must be loaded on each page load

2-3:

! DOM and JavaScript are gaining importance

4.

! JavaScript is only loaded at the initial page load

! The code size becomes less an issue

! This kind of application cannot we written by incremental changes of a document based

web application

Why?

We are still using the same technologies. Why should SPAs be different?

Expectations

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

No longer document based

User expect

! focus handling

! keyboard navigation

! rich widgets like Tree, Table, ...

Someone has to code this!

google is clever, they avoid giving thier SPAs like google reader or gmail a desktop look.

I don"t this can be irritating because it behaves neither like a web page nor like a desktop

application.

Client liberation

• Code is run in the client

• Client/server communication style changes

• Client can maintain state

1.

! - Classical web application assemble the user interface using template on the server e.g.

using PHP, ASP or JSP

! - page flow is defined on the server

! - Now we actually run code on the Client

2.

! The client now request data. Its more like calling a remote method than requesting a

document.

Client development can be decoupled from the server

Enables e.g. offline functionality

But:Theming Still Matters!

In contrast to desktop applications, web applications must have an unique look and feel.

It is important to be able to give the application a custom look.

+JS +AJAXSinglePage

Client code explodes

HTML CSS JavaScript

The result is: The client code size explodes!

The numbers are the uncompressed size measured using YSlow.

1-3:

! This data has to be transferred per request

! Client logic is coded on the server as well (e.g. PHP)

Code, which had been distributed among serveral pages, is now in only one page.

The code size increases by one order or magnitude.

This must be managed.

You Need a Framework!

Either you use one or your write your own

qooxdoo

we had to write our own because 3 years ago there was no other framework we could use

qooxdoo

• Cross browser

• JavaScript based RIA framework

• Open Source

• powered by

1:

! We support IE6, IE7, Firefox, Opera, Safari, Chrome

2:

! Free beer and free speech!

! License: LGPL and EPL

! Transparent development

! ! Wiki

! ! Svn

! ! Bugzilla

! ! ....

3:

! We are currently six full time developers at 1&1, who work on qooxdoo!

4:

! qooxdoo is used at 1&1 for several applications

! It has become part of our infrastructure!

How does qooxdoo help?

• UI-Expectations

• Theming

• Code Size

Expectations

Swing/Qt/Cocoafor the Web

We provide a desktop like API.

HTML/CSS is our rendering engine

Enables the developer to write the UI, the user expects

qooxdoo Architecture

Core (JavaScript OOP)

BOM (Cross Browser Code)

EventAnim.

Core: OOP, JS language extensions, ...

BOM: Cross browser abstraction layer

! DOM handling

! Attributes

! Styles e.g. Opacity

! Element position calculation

! ...

Event:

! Normalized event API and behaviour (e.g. key events are in all browsers the same)!

! Used for custom events as well

Animation:

! DOM level Animationen

! Port von sriptaculous

qooxdoo Architecture

Core (JavaScript OOP)

BOM (Cross Browser Code)

EventAnim.HTML

UI Core(Rendering Engine)

Widgets

UI Core + HTML

! Widget base functionality

! No cross browser code!

! layout engine

! Abstraction above of HTML/CSS

! provides a SWT/Swing like API

HTML:

! Wrapper for DOM elements

! enables us to lazyly create DOM elements (Performance)

(Rich) Widgets:

! next slide

!

Widgets

Its hard to tell whether you see desktop widgets or a web page.

This is only a subset of the qooxdoo widgets

qooxdoo provides a complete set of widgets

! Rich table ...

! Focus handling

! Full keyboard support

! i18n

How would you layout this with CSS?

Absolute positioning!

You would be or become crazy to use something else.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

VBox

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

VBox

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

VBox

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

VBoxGrid

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

Layout Manager

• Calculate layout in JavaScript

• Not limited by the browser

• JavaScript is fast enough

VBoxGrid

1:

! We calculate the size and position of each widget by using JavaScript.

! If the browser window or some widget is resized, the sizes and positions of all affected

widgets are updated

2:

! We are not limited by CSS layouts.

! It is possible and easy to write custom layout algorithms

! We can do everything e.g. Qt can do.

3:

! Layout calculations are numerical calculations. This is something every JavaScript

interpreter can do very fast.

We nest widgets. Each widget with child widgets can be configured to use any of qooxdoo"s

layout managers. The layout manager defines how the children are positioned.

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

});

1:

! Instantiate a button with a label and an icon

2:

! Add the button to a container widget

! The map in the second parameter is some information for the container"s layout manager.

3. Listen for the button"s „execute“ event

We never leave the widget abstraction. Typical qooxdoo code does not have to deal with

DOM/HTML/CSS directly.

Theming Matters!

I demonstrate how we can style this calculator application.

This screenshot uses the default qooxdoo theme.

Theming

• 4 images

First I need some assets. In this case I need four images:

! - the window background

! - the display

! - a normal button

! - a pressed button

Theming

• 4 images

Lets now take a closer look how we can style the button.

qooxdoo"s button widget does now have a fixed size. We need a way to scale the image.

Theming

• 4 images

To stretch the button vertically we need to cut the image into three parts. Now we can simply

scale the center image.

Theming

• 4 images

If we do the same horizontally we come up with nine images in total.

Theming

• 4 images

• 30 lines configuration

We have to slice all image this way and if we change any of the images we have to do it again.

Since we are lazy we let the computer do the work. qooxdoo"s build system can be configured

to slice the images for us.

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]

}

}

}

The „appearance“ defines for each widget identified by an id how it looks depending of its

current state.

The decorator key defines how the widget"s background is rendered. The strings represent

decorator IDs, which are defined in the decorator theme.

Decorator:

First we declare, which decorator class to use. The decorator instances generate HTML

fragments, which are used to render the widget"s background.

The grid decorator is specifically designed to render the background using 9 sliced images.

There are several other decorators. Even custom decorators are possible.

Note that we only declare one image. The names of the nine images are found by naming

conventions.

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]

}

}

The „appearance“ defines for each widget identified by an id how it looks depending of its

current state.

The decorator key defines how the widget"s background is rendered. The strings represent

decorator IDs, which are defined in the decorator theme.

Decorator:

First we declare, which decorator class to use. The decorator instances generate HTML

fragments, which are used to render the widget"s background.

The grid decorator is specifically designed to render the background using 9 sliced images.

There are several other decorators. Even custom decorators are possible.

Note that we only declare one image. The names of the nine images are found by naming

conventions.

Theming

• 4 images

• 30 lines configuration

• 80 lines theme

• 60 minutes work

This was the result of about 60 minutes work.

For me creating the images took the most time. In real application this will of coarse take much

more time.

The message is that once you have the images it is easy to style your qooxdoo application.

Theming

The only change to the application code was to define appearance IDs for the widgets I

wanted to style.

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;

}

}

});

OOP

! class based JavaScript

! inheritance

! mixins

! interfaces

! properties

! namespaces,

! ...

Linker

we use one file per class and have several hundret classes.

sorting several hundret classes

and write script tags for the needed classes into the code

... impossible to do manually

We have a JavaScript linker which can handle „qoodoo-OOP“ and detect dependencies.

With this information it generates a loader script, which contains the required „SCRIPT“ tags in

the correct order.

The linker can further compile an optimized deployment version of the application. In this

version all JavaScript files will be combined, compressed and optimized.

JavaScript Tooling

• Unit testing infrastructure

• API documentation generation

• JavaScript Lint

• ...

To handle large amount of code you need professional tooling.

qooxdoo comes with a suite of JavaScript tools, which help developing large JavaScript

applications

All of our tools are written in Python and run cross platform.

Use the right approach!

Verwendet den richtigen Ansatz für Eure Anwendung!

If a Single Page Application (RIA) is the

right choice...

Falls SPAs der passende Ansatz ist ...

... try qooxdoo!

Thank you.

Fabian Jakobs <fabian.jakobs@1und1.de>http://qooxdoo.org

colorstrip.gifT

THE NEW ERA OF WEB DEVELOPMENT