I can immediately see this freeing me from the demands of stakeholders - I can just give them the ThemeRoller tool (since like most developers, I tend to have a terrible sense of UI design) and tell them to choose how they want the site to look and get them to send me the URL or files back. (Of course the hard part has always been getting the site to work and keeping it alive and secured from DDoS/XSS/CSRF and other attacks, but now I don't have to worry about things like the style of datepickers!)
So why is it so good? Simply put - an excellent pluggable framework for Javascript that unlocks the power of JS, gives the developer great flexibility, and provides better cross-browser support than I probably ever could!
An example related to my current work, building an ASP.NET MVC2 site on .NET 3.5 (c'mon people, .NET 4.0 has been out for a while now).
All I need to do is include in the Site.Master file something like:
<link href="<%= Url.Content("~/Content/jquery-ui-1.8.5.custom.css")%>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.2.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui-1.8.5.custom.min.js")%>"></script>
obviously the actual URLs may be different depending on your project setup, the above come out to something like ../../Scripts/jquery-1.4.2.min.js, but that depends on the context of the request.
Whenever the stakeholders decide to redesign part of the site - it's update 3 files/references and voila! Whenever performance and security fixes come down the pipeline, same quick update! And in web development, it's all about taking DRY to the limit =)
So for an actual example, let's try making a datepicker:
- Add the javascript for the datepicker itself, for a basic Aussie date format:
<script type="text/javascript">
$(document).ready(function () {
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy',
});
});
</script> - Add the "datepicker" class to the relevant div or input type="text" area
<input type="text" id="releaseDate" class="datepicker"/>
Of course for full details of what's possible, see the jQuery DatePicker page. http://docs.jquery.com/UI/Datepicker
But remember I said ASP.NET MVC2 ?
That's something like (simplified):
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Title) %>
</div>
i.e. using auto-generated view code (literally right-click on a controller ActionResult and click "Add View") which uses lambda expressions to reference model attributes, or something like that.
The key point is MVC2 abstracts the HTML using the built-in (and extensible) HTML helper classes. Seems like it's time to write one of those to take advantage of jQuery!
Update 5:29PM - An excellent post by Steve Michelotti covers this very well:
http://geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx
