Lately I’ve been playing around with a cool little library called DotLiquid, a templating system ported from the Ruby Liquid library, originally created by the folks at Shopify. The beauty of this templating system is that it is very designer friendly, and is uber easy for anybody to get to grips with. Check out this little snippet and see for youself:
<ul id="products"> {% for product in products %} <li> <h2>{{ product.title }}</h2> Only {{ product.price | format_as_money }} <p>{{ product.description | prettyprint | truncate: 200 }}</p> </li> {% endfor %} </ul>
Simple right? One of the other great features of DotLiquid is also how restrictive it is. That might sound like it should be a negative, with most people thinking flexibility is the key, but in reality it means template development is secure and template designers can only have access to what you want them to.
Whilst playing around with DotLiquid, I thought it would be cool if it could be used as an ASP.NET MVC ViewEngine. After a bit of a search though, I wasn’t able to find one. There were view engines written for Nancy and Jessica, but nothing for ASP.NET MVC. So like any respectable developer, I decided to write one ๐
DotLiquid.ViewEngine
To get started, either download the view engine from the NuGet gallery, or just install it directly in an ASP.NET MVC project by issuing the command:
PM> Install-Package DotLiquid.ViewEngine
Once you have it installed, you are pretty much ready to rock. Simply create your views in your views folder as per normal, but with a .liquid file extension (you’ll need to prefix your partials / masters with an ‘_’ as per the DotLiquid requirement) and just start using the liquid syntax. The rest should just work automatically.
One other important note, and related to the deliberate restrictive nature of DotLiquid, is to make sure that any models passed down to your view, must be ILiquidizable. The simplest way to do this, is to have your ViewModels to just inherit from the DotLiquid Drop class. The ILiquidizable interface simply lets DotLiquid know which properties should be available to the template designer via the Liquid syntax.
It’s as simple as that.
For more information on the Liquid syntax, checkout the documentation on the DotLiquid and Liquid sites, and if you give the view engine a try, be sure to let me know if you have any problems / suggestions. And lastly, if you’d like to have a poke around the code for the view engine, you can find it now over on bitbucket.
Hi Matt, nice work. It’s always encouraging to see DotLiquid being used in new ways. As you say, DotLiquid is deliberately restrictive (so it can be used by customers), and because of that, I wasn’t sure how many people would want to use it as an ASP.NET MVC view engine (which will be used by developers). But it’s great to have it available as an option, so thank you!
Hey Tim,
It’s been fun playing with it, so thanks for writing it ๐
I agree, it’s not going to suite everyone, but as a developer on the open source CMS Umbraco, we are always on the lookout for ways to make developing on the platform more welcoming to designers aswell as developers.
Now, what I’ve written so far is by no means ready for use in Umbraco, but I think it’s a pretty cool PoC, and could be usefull for others interested in making their .NET projects more welcoming for designers (I don’t care how similar people say Razor is to JS, it’s just not something many designers wish to learn).
So IMO, it’s most definately worth having a DotLiquid ViewEngine implementation. I’m glad I could be the one to write it ๐