Building a Lightweight, Extensible Ajax Framework with CSS3 Features

1. Creative Javascript Mészáros Ádám Budapest.js 2010.06.17.

2. Overview • My project outline • Use css for behaviours • Style injection • Actions • Practical Css3

3. My project outline Build an Ajax framework, that: • uses less memory, and cpu than ExtJs • as easy to learn as jQuery • is extensible • is component-oriented • works well with others • optionally uses html 5 features

4. My project outline 2 What we need: • Ajax • A Class system • Event Manager • Layout System • Animation • Components/Widgets

5. Class system Influenced by: MooTools Prototype ExtJs All mechanism use prototypes to copy functionality over inheritence. Difference: Ext doesn’t override builtins to access the „extend” or „apply” methods

6. Event Management • Make it cross browser: • use feature detection (addeventListener/attachEven/ fallback to Netscape) or • use Netscape model (just one handler/element/event type) so we must add a registry iterator function, • and correct event object differences • Ability to control the scope

7. Event Management 2 • Please don’t leak the memory! • use css to add simple behaviours: • Resizable • Selectable • Draggable and Droppable • Actions

8. Resizable • Extjs and jQuery implements resizables width proxy elements. • It would be a little overhead if we had large numbers of resizables. • What if we use a class to find a resizable, and observe the body.onmousedown? • Draggable, droppable, selectable, collapsable can also be implemented as class dependent.

9. Actions • „ext action is a piece of reusable functionality that can be shared by any components” • the main goals of Action class in extjs is to share handles, ui, config on multiple components. • some overhead: action class stores all instances of components in the „items” property -> so the component architecture must care about the item additions, and removal and execution of code

10. Actions 2 • what if action is just a css class? • Easy to find the enclosing component or container by iterating over parent nodes in the dom. • or if it's a fixed scope function, we can add the scope for action at the initialization. • we can also easily add ui to it by css, • and we don't need to destroy action handlers when we remove a component, • but if we want to register action items, we can do that, if we register action under some scope, • we can easily enable/disable actions for whole the site and/or parts of the site by concatenating „disabled” after action class name in the document.body • css automatically updates when a .my-action-disabled .my-action class is defined.

11. Event Manager 3 with this technique: • we can minimize CPU usage and thus render time • a bit of javascript is needed to create this architecture

12. Style tag injection • class injection is faster than javascript inline style modification: • smooth resize of grid column with css: function replaceStyleTag(styleEl,content) { var tmp = document.createElement('div'); tmp.innerHTML = '<b>o</b><style type="text/css">'+content+'</style>'; styleEl.parentNode .replaceChild(tmp.removeChild(tmp.childNodes[1],styleEl)); } but we can also optimize performance by buffering grid rows when working with large data sets.

13. Practical CSS3 • Lots of people refuse Internet Explorer because it's slow, uncomfortable and not up-to-date with standards • It's true but lots of css3 features are available in older versions of IE >>

14. Gradiens .gradient { background-image: -moz-linear-gradient(top, #000444, #223355); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000444),color-stop(1, #223355)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', EndColorStr='#223355'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', EndColorStr='#223355')"; /* IE8 */ }

15. Alpha .rgba { background-color: #B4B490; background-color: rgba(180, 180, 144, NaN); /* FF3+, Saf3+, Opera 10.10+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',EndColorStr='#FFB4B490'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',EndColorStr='#FFB4B490')"; /* IE8 */ }

16. Rotate .rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */ zoom: 1; }

17. Rounded corners .round-all { -moz-border-radius: 8px; /* FF1+ */ -webkit-border-radius: 8px; /* Saf3+, Chrome */ border-radius: 8px; /* Opera 10.5, IE 9 */ } In older versions of IE you can use dd_roundies.js, but it is slow and needs some modifications.