Web GUI-Development with qooxdoo
-
Upload
sampetruda -
Category
Documents
-
view
125 -
download
0
description
Transcript of Web GUI-Development with qooxdoo
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 <[email protected]>http://qooxdoo.org
colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT