1 / 17

Creative Javascript

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

sunila
Download Presentation

Creative Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related