Creative Javascript - Meetup

handslustyInternet and Web Development

Dec 14, 2013 (3 years and 5 months ago)

62 views

Creative Javascript

Mészáros Ádám

Budapest.js

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


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

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

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

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 */

}


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',EndC
olorStr='#FFB4B490'); /* IE6,IE7 */



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

}



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;

}




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.