I am very enthusiastic about unobtrusive JavaScript. It's a design pattern and usual warnings apply:
- It doesn't apply to every scenario.
- It will hurt if you use it wrong.
- Long etc.
Very short version of this post
I hope someone creates a complete jquery.ui.unobtrusive plugin. Since I'm a developer I have already started one at:
https://bitbucket.org/rodolfograve/jquery.ui.unobtrusive
The bad news is that I'm not an expert JavaScript nor jQuery developer, so I'm sure the quality of what I'm doing can be greatly improved. It will be great if someone with more expertise could continue this work or start his own and make it public.
Long version
I think unobtrusive JavaScript solves several old and current problems:
- How do we make advanced HTML + JavaScript stuff from server-side code?
- How do we reuse JavaScript code that interacts with the elements of a page?
Until now I've seen incomplete and ugly approaches (the latter is obviously a personal opinion):
- Don't do advanced HTML + JavaScript from server-side code at all and create custom JavaScript code for each page you have.
- Generate small pieces of script from server-side code, intermingled with the final HTML code (outside the head tag), and handle elements' IDs and classes.
With unobtrusive JavaScript we have a new great approach: generate HTML attributes in your tags and let your unobtrusive scripts do their science (I appreciate science more than magic).
This new approach is:
- Flexible: you can use whatever you like to generate the attributes (ASP.NET MVC HtmlHelpers, your own framework, write attributes by hand in your HTML, etc).
- Testable: unobtrusive scripts can (or even must) be developed as reusable components, with their own tests (JavaScript as a Framework).
- Readable: your HTML code will declaratively express what it does (no need to look IDs nor classes in JavaScript files).
No more obscure separation between the appearance and the behavior. This separation is good and encouraged, but it's much better without the "obscure" feature added by current implementations (you must look your IDs or CSS classes in your JavaScript code to know what's going on with an HTML element).
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("myDatePicker").datepicker({
showOn: "button",
buttonImage: "../themes/mytheme/calendar.gif"
});
});Notice this piece of script usually is in another file (even worst).
</script>
</head>
Lots of stuff, and then hidden some where in the page:
<input id="myDatePicker" name="myDatePicker" type="text" >
With unobtrusive JavaScript you keep the separation at the implementation level, and avoid the separation at the code level.
<input type="text" ui-datepicker="true" ui-datepicker-showOn="button"
ui-datepicker-buttonImage="../themes/mytheme/calendar.gif" >
This last code looks much better to me and I wish we soon have the unobtrusive "mapper" of the most popular JavaScript frameworks out there.
What do you think?
