Maybe some kind of JS purist won't like this but... I really love new Diavolo JS scripts management ! Once I started to use it, I'm wondering how could I even live without it !

To be honest, I didn't dig into Javascript that much up until this year. You know, I don't like embedding some kind of logic, except basic one, into client code because that seems highly dangerous. Or maybe because I'm lazy and I don't want to add an extra layer which needs to be secured Undecided

For whatever reason, I didn't dig into JS meaning that my websites had a few JS into them. But I have to admit that fancy scripts to perform some UI actions are now very common and, in general, they are considered a must to design a modern, Web2.0, website. When designing Diavolo, I wanted to keep the best of ASP.NET WebForms in, avoid MVC and attempt to stick both MS AJAX library and jQuery in. I also tried to ensure that jQuery and MS AJAX (and AJAX Control Toolkit) could work together even if jQuery is taking ground and MS AJAX and expecially the toolkit are becoming less relevant. Anyway, UpdatePanels are great so I wanted something which could work with all of those features together and let developers decide what to use.

In a earlier post, I wrote about a new Diavolo feature which would allow JS scripts to be automatically included into dynamic and static pages, just by dropping files into specific folders. That way, if I want to include jQuery, I could simply drop it into /scripts/auto/dynamic/ or /scripts/auto/static/ folders and have it included in every page. That was working in a very nice way and I was quite happy with results since I could add support for a specific JS file in a very super-easy way by simply adding a script in those folders. That way, I could remove any explicit dependency on jQuery and let all be dynamic which means users are able to remove jQuery support and switch to another JS framework, if they really wish. It's very useful and smart and it is explicitly modeled after ASP.NET Themes and its ability to automagically include CSS file into themes.

Ever since that feature was in place, I knew that next step was to make it even more flexible by allowing users to automatically set per-page scripts to include because that was very natural to me. By per-page scripts, I mean having a folder dedicated to a specific page and collect to a single folder any JS script you need to include in that specific page. That was pretty easy to implement and I'm happy to tell you that... it's on ! Now you can create a /scripts/auto/dynamic/7171/ or /scripts/auto/dynamic/3481/ folder and put there any JS your want to include in pages with matching ID (7171 or 3481): Diavolo will detect that and add those scripts to your page, in no specific order right now.

I tested that feature while developing a ContactUs module for Diavolo and I was looking to remove AJAX Control Toolkit dependency because I believe the toolkit is not actively developed as it was before. I was looking for a jQuery validation plugin and found a good one (though it has no callout feature... Cry ). Not sure if I will end up reverting to ASP.NET validators without Control Toolkit because in essence that's the same as jQuery validation but anyway I had to test many scripts to find a suitable one and that was super-easy with dynamic per-page scripts already in place. I was just able to drop jQuery plug-in into specific folder and change my control to enable them. Compile & Run and everything was working !

You don't like it and you need to remove those scripts ? Just delete them from filesystem and it's done. By the way, I was also able to test Google's reCaptcha support and, guess??, it works like a charm. No problems with Diavolo pages and anything else. That's nice since it confirms I'm on good track !

What's next ?
So what's next ? I'm very pleased how things work since those features support many different scenarios, including tricky ones : suppose that you have a few scripts you really need but they don't work with newer jQuery versions. How can you solve this ? Easy! You remove jQuery from being added to all pages, that is you remove jQuery JS file from /scripts/auto/dynamic/ and put it into specific folders for pages and then you replace newer jQuery file with older one, in any page where newer versions won't work with your scripts. So you automatically have pages where you can use newer jQuery versions and also pages where older or legacy versions will be used. Isn't that nice ?

My next step to make this feature 100% complete will be:

  • adding caching support: Diavolo must be able to read filesystem structure for scripts when application starts and cache it. Thus a simple dependency over folders will allow to re-read files and update caching when new files will be added or removed;
  • after adding caching, there will be a way to set order for scripts loading, that is setting that jQuery file must be added before one of its plugin, for obvious reasons. That will probably involve sorting by filename since I want everything to be automatic. This really requires caching to avoid sorting those files everytime.

There's no ETA for such changes but they will definitely happen.

Oh, did I mention that Diavolo won't only add all of your scripts but will also compress and minimize them on the fly ? Cool Thank you, mbComression !

Tags: