With modern JavaScript frameworks like ExtJS, SproutCore or qooxdoo, it is possible to create very rich user interfaces using only open web standards. But how do they do it? How do they work internally?
In this talk I will open the thorax of a simple qooxdoo widget and look at the various layers and building blocks used to implement it. You will learn how the widget is represented in the DOM, how events are handled, and how the layout engine works. Often there is more than a single way to achieve something. In those cases the different options and qooxdoo's specific design decision will be presented.
30. The DOM is a Mess
IE
element.style.filter =
"alpha(opacity=" +
(opacity * 100) +
");";
others
element.style.opacity = opacity;
•Many cross browser issues
31. The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance
var el = document.createElement("div");
document.body.appendChild(el);
el.style.position = absolute;
// more style changes
32. The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance
var el = document.createElement("div");
document.body.appendChild(el);
el.style.position = absolute;
// more style changes
var el = document.createElement("div");
el.style.position = absolute;
// more style changes
document.body.appendChild(el);
33. The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance
•Reading styles/attributes is
slow
var width = parseInt(el.style.width);
var height = parseInt(el.style.height);
34. The DOM is a Mess
•Many cross browser issues
•Small mistakes can degrade
performance
•Reading styles/attributes is
slow
var width = parseInt(el.style.width);
var height = parseInt(el.style.height);
35. DOM Wrapper
•Wrap DOM elements
•Lazy DOM element creation
•Batch DOM manipulations
•Cache styles/attributes
58. Layout Summary
•Reflow computation in JavaScript
•Large collection of layout managers
•Highly optimized
„If a feature is missing
we can easily add it!“
59. Layout
Pro Con
Slower than CSS layouts
Complex Implementation
Cross Browser
Custom Layout Managers
Highly Customizable
Sensible Default Sizes