Repository/Download

• CodePlex Home: http://clientdependency.codeplex.com
• The repository has the latest new version, the alpha release version is OLD so best to get the latest codebase from the Source Control tab!

History

I’ve been busy in the Umbraco core putting in place a new Client Dependency framework for version 4.1. I thought since this could benefit many other people/projects that I’d take it out of the Umbraco core and make it its own standalone project. Currently in Umbraco v4, there’s already a Client Dependency framework that you may have come across if you’ve decided to go deep within the core code. It was developed for Umbraco Canvas (live editing) by Ruben (and Niels I think) to be able to tag controls as being dependent on CSS/JavaScript files to be lazy loaded into the client’s browser to enable live editing of the page. I thought the idea was great and wanted to combine it with a bunch of work that we had done in the office already to make a library that everyone can use. So what does it do???

Features

Most of the features can be enabled/disabled in the configuration section. By default, they’re all enabled.

• Make your controls dependent on client files by:
  • Attributing your controls
  • Using the JSInclude or CSSInclude web controls
  • Dynamically registering them in code
• Provider Model so you can choose how you would like your JS and CSS files rendered
  • Comes with 2 providers: page header provider and a lazy loading JavaScript client based provider (the original lazy loader by Ruben… nice work!… slightly modified though)
  • You can explicitly tell the engine which provider you would like a particular script/stylesheet to be rendered out by if you require this. An example could be that you want one script in particular to be rendered in the page header, but another script to be lazy loaded.
• Combining and compressing JavaScript and CSS files
• Resolving the correct URL paths in CSS files while they are being combined so you don't have to worry about this
• Combining external JS and CSS files
• OutputCaching of the combined/compressed composite files
• Saving of the combined/compressed composite files for increased performance when applications restart or when the Cache expires (persistent compression/combination)
• Creation of an XML file map to tell you which saved composite files are for which real files
• Easily clearing the cache
• Tagging client files with priorites
• Tagging client files with path names so you don't have to worry about moving files around in your project, worrying about absolute vs. relative paths, or running your application in a virtual folder

This library isn’t the answer to all of your compression needs, but it is a good start or addition to something your already using. Most other compression libraries out there are module based which can do page compression, script/css compression/combination, etc… and are all a really good idea. The compression/combination part of this library is just a really good bonus on top of what it is actually made for which is making your controls dependent on client files without worrying about duplication and having full control over how you want them rendered in your page (i.e. Provider model)

Umbraco Usage

Because there are so many controls in Umbraco and so many client files, its very difficult to keep track of what has already been included in pages, other controls, etc… This library is now part of Umbraco 4.1 codebase and all controls are now using it. There was a lot of hard coding paths to either /umbraco_client or /umbraco folders which is one of the reasons Umbraco won’t run in a virtual folder in IIS. This library solves the hard coded path issue.

What this means for package developers is that they don’t have to worry about whether or not jquery, or other JS/CSS files have been included in the page, they can simply add a client dependency to their controls.

Easier Team Development

If you’re working in a team locally in your office or one that spans between different office, this implementation makes things a whole lot easier for developing controls.

Things //TODO:

• Need to add versioning
  • This will remove old versioned persistent files saved under any older version
  • Easier to deploy since right now you would need to remove the persisted files to remove the cache
• Add support for MVC
  • This should be pretty darn easy i think
• Adding some more providers (i.e. ScriptManager provider, etc…)
• Documentation

Config

<clientDependency isDebugMode="false">
  <fileRegistration defaultProvider="PageHeaderProvider"
    fileDependencyExtensions="js,css"
    enableCompositeFiles="true">
        <providers>
            <add name="PageHeaderProvider" 
                type="ClientDependency.Core.FileRegistration.Providers.PageHeaderProvider, ClientDependency.Core" />
            <add name="LazyLoadProvider" 
                type="ClientDependency.Core.FileRegistration.Providers.LazyLoadProvider, ClientDependency.Core" />
        </providers>
    </fileRegistration>
    <compositeFiles defaultProvider="CompositeFileProcessor" 										
        compositeFilePath="~/App_Data/ClientDependency"
        compositeFileHandlerPath="DependencyHandler.axd">
          <providers>
            <add name="CompositeFileProcessor" 
                type="ClientDependency.Core.CompositeFiles.Providers.CompositeFileProcessingProvider, ClientDependency.Core" />
          </providers>
    </compositeFiles>
</clientDependency>

Includes/Usage

Implementation is pretty simple…

• You need a ClientDependencyLoader to do the loading, only one of these can exist on the request (just like the ScriptManager in ASP.Net)
• You can use CssInclude and JsInclude controls in your User Controls/Pages, etc… to declare that a CSS or JS file is required OR
• You can use the ClientDependencyAttribute to attribute your composite control classes OR
• You can programmatically add a dependency by using the ClientDependencyLoader’s methods (there’s a few of these overloaded methods):

  • ClientDependencyLoader.Instance.RegisterDependency("Content.css", 
                   "Styles", 
                   ClientDependencyType.Css);