One of the latest trends in client-side development is the unobtrusive JavaScript. This trend is very good, since it extends separation of concerns. Several years ago the same happened with CSS. Web designers used FONT tag, BGCOLOR attribute and other visual style representation HTML elements extensively. Pages were bloated with style elements and style change was a real pain.
CSS changed that completely. It separated document structure from presentation and modern web designers likely do not know what FONT tag was designed for. While CSS separates presentation from document structure, unobtrusive JavaScript separates behavior from the structure.
There are quite many frameworks and techniques that enable unobtrusive JavaScript, but jQuery on my opinion is one of the best. It supports Unobtrusive JavaScript nicely and very elegant by itself.
| Inline JavaScript | Unobtrusive JavaScript |
Have you rjavascript:void(0) Publish Postead our <a href="javascript:window.open( 'terms.html', 'popup', 'height=500,width=400,toolbar=no' );">terms and conditions</a>? |
Have you read our
<a href="terms.html"
class="sidenote" >terms and conditions</a>?
jQuery(function($) {
$('a.sidenote').click(function() {
var href = $(this).attr('href');
window.open(href, 'popup',
'height=500,width=400,toolbar=no');
return false;
});
});
|
You may decide that the second way is more verbose, but it does not matter in general. You will have all handlers in a single place, they will be quite similar and document structure will not suffer from tons of inline javascript.
Labels: jQuery, Unobtrusive JavaScript
posted by Michael Dubakov @ 11:16 PM
4 Comments:
I love jQuery. It has changed the way I do web development.
Question: I don't understand what this has to do with the TargetProcess product? I thought you guys were using ExtJS for the JS framework. Are you planning on mixing and matching?
Yes, we are using both frameworks. ExtJS does not provide such a powerful selectors as jQuery and we came to the conclusion that ExtJS will be used for UI only while jQuery for custom javascript.
Again, I LOVE jQuery, but I think you are mistaken here.
http://extjs.com/learn/Tutorial:DomQuery_v1.1_Basics
They have the same selectors. The benefit of jQuery is that it is small, open source, and has a ton of plugins. This makes it perfect for websites and a bunch of different kinds of applications.
However, if you are already buying Ext and making the user download the package, you might as well use it. It has the same selectors and just about all of the UI capabilities.
At Marketo, we use Ext for the application and jQuery for the public site and support site. I haven't found a spot where I needed something that Ext didn't provide in the app. And we have a ton of RIA interactions.
Anyway, I am excited to see it. I hope this is helpful.
I recommend writing unit tests and using mvc in the client side as well. Using libraries certainly help write javascript code easy but a clean separation between the view and the controller logic still needs to exist even if you are writing javascript..
Post a Comment
Links to this post:
Create a Link
<< Home