Creative Javascript

Mészáros ÁdámBudapest.js2010.06.17.

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

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

My project outline 2

What we need:• Ajax• A Class system• Event Manager• Layout System• Animation• Components/Widgets

Class system

Influenced by:MooToolsPrototypeExtJs

All mechanism use prototypes to copy functionality over inheritence.

Difference: Ext doesn’t override builtins to access the „extend” or „apply” methods

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

Event Management 2• Please don’t leak the

memory!• use css to add simple

behaviours:– Resizable– Selectable– Draggable and Droppable– Actions

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.

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

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.

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

Style tag Style tag injectioninjection

• class injection is faster than javascript inline style class injection is faster than javascript inline style modification:modification:

• smooth resize of grid column with css:smooth resize of grid column with css:function replaceStyleTag(styleEl,content) {function replaceStyleTag(styleEl,content) {

var tmp =var tmp = document.createElement('div');document.createElement('div');

tmp.innerHTML = '<b>o</b><style type="text/css">'+content+'</style>';tmp.innerHTML = '<b>o</b><style type="text/css">'+content+'</style>';

styleEl.parentNodestyleEl.parentNode.replaceChild(tmp.removeChild(tmp.childNodes[1],styleEl));.replaceChild(tmp.removeChild(tmp.childNodes[1],styleEl));

}}

but we can also optimize performance by buffering but we can also optimize performance by buffering grid rows when working with large data sets.grid rows when working with large data sets.

Practical CSS3Practical CSS3

• Lots of people refuse Lots of people refuse Internet Explorer because Internet Explorer because it's slow, uncomfortable and it's slow, uncomfortable and not up-to-date with not up-to-date with standardsstandards

• It's true but lots of css3 It's true but lots of css3 features are available in features are available in older versions of IE >>older versions of IE >>

GradiensGradiens

.gradient {.gradient { background-image: -moz-linear-gradient(top, #000444, #223355); /* background-image: -moz-linear-gradient(top, #000444, #223355); /*

FF3.6 */FF3.6 */ background-image: -webkit-gradient(linear,left top,left background-image: -webkit-gradient(linear,left top,left

bottom,color-stop(0, #000444),color-stop(1, #223355)); /* Saf4+, Chrome bottom,color-stop(0, #000444),color-stop(1, #223355)); /* Saf4+, Chrome */*/

filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', EndColorStr='#223355'); /* IE6,IE7 */EndColorStr='#223355'); /* IE6,IE7 */

-ms-filter: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', "progid:DXImageTransform.Microsoft.gradient(startColorStr='#000444', EndColorStr='#223355')"; /* IE8 */EndColorStr='#223355')"; /* IE8 */

}}

AlphaAlpha

.rgba {.rgba {background-color: #B4B490;background-color: #B4B490;background-color: rgba(180, 180, 144, NaN); /* FF3+, Saf3+, background-color: rgba(180, 180, 144, NaN); /* FF3+, Saf3+,

Opera 10.10+, Chrome */Opera 10.10+, Chrome */ filter: filter:

progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',EndCprogid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',EndColorStr='#FFB4B490'); /* IE6,IE7 */olorStr='#FFB4B490'); /* IE6,IE7 */

-ms-filter: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',End"progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFB4B490',EndColorStr='#FFB4B490')"; /* IE8 */ColorStr='#FFB4B490')"; /* IE8 */

}}

RotateRotate

.rotate {.rotate {-moz-transform: rotate(7.5deg); /* FF3.5+ */-moz-transform: rotate(7.5deg); /* FF3.5+ */-o-transform: rotate(7.5deg); /* Opera 10.5 */-o-transform: rotate(7.5deg); /* Opera 10.5 */-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

filter: filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */

-ms-filter: -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */

zoom: 1;zoom: 1;}}

Rounded cornersRounded corners.round-all {.round-all {

-moz-border-radius: 8px; /* FF1+ */-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, -webkit-border-radius: 8px; /* Saf3+, Chrome */Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */border-radius: 8px; /* Opera 10.5, IE 9 */

}}

In older versions of IE you can use dd_roundies.js, In older versions of IE you can use dd_roundies.js, but it is slow and needs some modifications.but it is slow and needs some modifications.