• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajax In Action 2008 - Gui Development With qooxdoo
 

Ajax In Action 2008 - Gui Development With qooxdoo

on

  • 6,987 views

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

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.

Statistics

Views

Total Views
6,987
Views on SlideShare
6,373
Embed Views
614

Actions

Likes
2
Downloads
119
Comments
1

13 Embeds 614

http://news.qooxdoo.org 562
http://localhost 15
http://swik.net 8
http://www.slideshare.net 8
http://feeds.feedburner.com 5
http://news.new.qooxdoo.org 4
http://www.linux.rk.edu.pl 3
http://static.slideshare.net 2
http://www.mefeedia.com 2
http://planet.blog.tennessee.schlund.de 2
http://209.85.129.132 1
http://planet.dev.tennessee.schlund.de 1
http://74.125.113.132 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax In Action 2008 - Gui Development With qooxdoo Ajax In Action 2008 - Gui Development With qooxdoo Presentation Transcript

    • 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(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;); });
    • Theming Matters!
    • Theming • 4 images
    • Theming • 4 images
    • Theming • 4 images
    • Theming • 4 images
    • Theming • 4 images • 30 lines configuration
    • 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] } } }
    • 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] } }
    • Theming • 4 images • 30 lines configuration • 80 lines theme • 60 minutes work
    • Theming
    • Code Size
    • 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; } } });
    • 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