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.

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. Overview
• Evolution of AJAX
• How Single Page Applications are different
• How qooxdoo can help

3. HTML only

4. HTML + JavaScript

5. HTML + AJAX
+JS

6. more longer
AJAX page load
+JS +AJAX

7. Single Page Application
+JS +AJAX

8. +JS +AJAX
Single
Page

9. +JS +AJAX
Single
Page

10. Reach
+JS +AJAX
Single
Page
Interactivity

11. Single Page Applications
are Different
+JS +AJAX
Single
Page

12. Why?

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

14. Client liberation
• Code is run in the client
• Client/server communication style changes
• Client can maintain state

15. But:
Theming Still Matters!

16. Client code explodes
HTML CSS JavaScript
+JS +AJAX
Single
Page

17. You Need a
Framework!

18. qooxdoo

19. qooxdoo
• Cross browser
• JavaScript based RIA framework
• Open Source
• powered by

20. How does qooxdoo help?
• UI-Expectations
• Theming
• Code Size

21. Expectations

22. Swing/Qt/Cocoa
for the Web

23. qooxdoo Architecture
Widgets
UI Core
(Rendering Engine)
HTML Anim. Event
BOM (Cross Browser Code)
Core (JavaScript OOP)

24. Widgets

25. How would you
layout this with CSS?

26. Absolute positioning!

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

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

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

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

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

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

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. Theming Matters!

35. Theming
• 4 images

36. Theming
• 4 images

37. Theming
• 4 images

38. Theming
• 4 images

39. Theming
• 4 images
• 30 lines configuration

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. 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. Theming
• 4 images
• 30 lines configuration
• 80 lines theme
• 60 minutes work

43. Theming

44. Code Size

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. Linker

47. JavaScript Tooling
• Unit testing infrastructure
• API documentation generation
• JavaScript Lint
• ...

48. Use the right approach!

49. If a Single Page
Application (RIA) is the
right choice...

50. ... try qooxdoo!

51. colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT
Thank you.
Fabian Jakobs <fabian.jakobs@1und1.de>
http://qooxdoo.org