Xtreem Geek

Geeking around The Web

SharpTemplate

SharpTemplate is a HTML templating engine that seamlessly integrates with Script# to provide compile time, strongly typed, super efficient HTML templating capabilities for productive rich web application development.  Some of its advantages are listed below…

  • Converts HTML into C# that gets compiled by Script#
  • Benefits from strong typing for all variable / API references that occur within the HTML
  • Generated HTML templates are super efficient due to compile time pre-processing that helps avoid regex matching in JavaScript unlike many other templating engines
  • Familiar templating syntax (based upon Asp.Net)

If you are not already using some sort of compile time HTML templating with Script# then you must definitely give this a try and see the productivity boost for yourself.

SharpTemplate has Script# as its prerequisite.  It can work in VS2008, VS2010 and Visual C# express.

Latest Release: 12/14/2010, Version 1.0.0.0   Download SharpTemplate Download Sample Project
Shout it kick it on DotNetKicks.com

Installation

  • You need to have Visual Studio 2008 / Visual Studio 2010 / Visual C# Express with Script# installed
  • Download SharpTemplate from the above mentioned link and run the setup
  • You’re Done

Usage

To create a new template file

SharpTemplate setup installs a new file template type for Visual Studio under Script# category as shown below.

Tutorial

Please visit this codeproject article for a tutorial on SharpTemplate.

Sample

Below is a contrived example to highlight the different templating syntaxes available with SharpTemplate.

<%@ Register Namespace="System.XML" %> <!-- Not used, just for showing how to add namespace -->
<%@ Register Alias="SysScript = System.Script" %>   <!-- Not used, just for showing how to add aliases -->

<%
  // code-only static methods and properties go here
  private static int _Cube(int num)
  {
    return num * num * num;
  }
%>

<!-- a template file can contain multiple template methods -->
<!-- a template method is indicated by the @template tag as below -->
<!-- the 'name' attribute mentions the name of the template method -->
<!-- the 'args' attribute lists the arguments that the template method accepts -->
<!-- 'args' attribute can mention zero or more arguments -->
<%@ template name="Render" args="int[] numList" %>
<table border="1" cellpadding="1" cellspacing="1">
    <tr>
        <th>Number</th>
        <th>Square</th>
        <th>Cube</th>
        <th>Square Root</th>
    </tr>
    <!-- code is embedded within <% %> tag -->
    <%
        for(int i = 0; i < numList.Length; ++i)
        {
        %>
            <tr>
                <!-- inline expressions (that result in some value) is embedded within <%= %> tag -->
                <td><%= numList[i] %></td>
                <td><%= numList[i] * numList[i] %></td>
                <td><%= _Cube(numList[i]) %></td>

                <!-- template calls can be nested by passing the special variable 'b' to the nested templates -->
                <td><% RenderSquareRoot(b, numList[i]); %></td>
            </tr>
        <%
        }
    %>
</table>

<!-- occurrence of another @template tag or the end of file marks the end of the previous @template -->
<%@ template name="RenderSquareRoot" args="int num" %>
<%= Math.Sqrt(num).Format("F2") %>

Following is the C# code emitted by SharpTemplate for the above template.

using System;
using System.Collections;
using System.DHTML;
using System.XML;

using SysScript = System.Script;

namespace DemoScript
{
	public static class DemoTemplate
	{
		// code-only static methods and properties go here
		private static int _Cube(int num)
		{
			return num * num * num;
		}

		public static string Render(ArrayList b, int[] numList)
		{
			bool parentBuffer = (b != null);
			b = b ?? new ArrayList();
			b.Add(Script.Literal(@"'<table border=""1"" cellpadding=""1"" cellspacing=""1""><tr><th>Number</th><th>Square</th><th>Cube</th><th>Square Root</th></tr>'"));
			for(int i = 0; i < numList.Length; ++i)
			{
				b.AddRange(new object[] {
					Script.Literal(@"'<tr><td>'"),
					numList[i],
					Script.Literal(@"'</td><td>'"),
					numList[i] * numList[i],
					Script.Literal(@"'</td><td>'"),
					_Cube(numList[i]),
					Script.Literal(@"'</td><td>'")
				});
				RenderSquareRoot(b, numList[i]);
				b.Add(Script.Literal(@"'</td></tr>'"));
			}
			b.Add(Script.Literal(@"'</table>'"));
			return parentBuffer ? "" : b.Join("");
		}

		public static string RenderSquareRoot(ArrayList b, int num)
		{
			bool parentBuffer = (b != null);
			b = b ?? new ArrayList();
			b.Add(Math.Sqrt(num).Format("F2"));
			return parentBuffer ? "" : b.Join("");
		}
	}
}

To generate the HTML from the template, we can do something like below…

Document.Body.InnerHTML = DemoTemplate.Render(null, new int[] { 1, 2, 3, 4, 5 });

FAQs

Can I use SharpTemplate in commercial projects?

You can use SharpTemplate wherever you’re using Script#.  The EULA associated with SharpTemplate is fully in sync with Script# EULA.

I’m already using a client side HTML templating solution.  Is it worth switching to SharpTemplate?

Absolutely!  Client side templating typically uses RegExs to parse the template and they also extensively use Eval, together they heavily impact performance.  Further, SharpTemplate enables html crunching, static type checking, more intuitive debugging and faster execution on the client side.

How mature is the SharpTemplate project?

The project has been alive (privately held) for over a year now and is being extensively used within the author’s circle.  It should function reliably on whatever it promises.  Any new feature requests need to be factored in if it is worth it.

Why is the template code generated having strong resemblance with Google Closure Templates?

This is pure coincidence.  As mentioned above, this project has been alive for quite a long time before Google Closure was publicly released.

Will the SharpTemplate project be open sourced?  If so, when?

The project will be open sourced after the initial set of feature requests (and bugs if any) are handled.

Feedback / Questions / Bugs

You can reach the author using the contact details provided here.

5 Responses to “SharpTemplate”

  1. Great to see this and the use of script# … I just tweeted about this, and will look into doing a blog post too. Need to understand this a bit more. Maybe I’ll get deeper understanding upon reading your CodeProject article or checking out the sample.

    One basic question –
    Is the HTML file you have converted to script on the server and sent down as script in its entirety? Can I instead have a chunk of HTML in the context of a larger page that remains as vanilla HTML? I am thinking about SEO, Accessibility etc. In some sense, I am wondering if a way to think of this HTML templating solution is a parallel to the scriptlet feature in script# … perhaps there is a way to bring them together. Need to think further.

    • shiva said

      Nikhil, Yes, the HTML template gets converted to a script class at development time itself. Thus it helps strong typing and avoids client side pre-processing. Not sure how we may be able to retain the HTML but still benefit from compile time verification..

  2. Erik Källén said

    If you like this, please check out Saltarelle at http://code.google.com/p/saltarelle. It’s kind of the same, but still different.

  3. Kaung Yam said

    Do you have any tips to solve this problem? Thanks!

    When running this.

    C:\ScriptSharpDemo\Tools\ScriptSharp\ssc.exe /ref:C:\ScriptSharpDemo\Tools\ScriptSharp\Framework\sscorlib.dll /ref:C:\ScriptSharpDemo\Tools\ScriptSharp\Framework\ssfx.core.dll /ref:C:\ScriptSharp\Framework\ssfx.ui.forms.dll /debug /out:Demo.debug.js C:\ScriptSharpDemo\ScriptSharp\demo.cs

    I get this.

    Type.createNamespace(‘DemoScript’);

    ////////////////////////////////////////////////////////////////////////////////
    // DemoScript.Demo

    DemoScript.Demo = function DemoScript_Demo() {
    }
    DemoScript.Demo.start = function DemoScript_Demo$start() {
    // ERROR: Check that your C# source compiles and that you are not using an unsupported feature.
    // ERROR: at C:\DATA\Demo\ScriptSharp\ScriptSharpDemo\ScriptSharp\demo.cs(10, 13)
    }

    DemoScript.Demo.createClass(‘DemoScript.Demo’);

    // —- Do not remove this footer —-
    // This script was generated using Script# v0.5.5.0 (http://projects.nikhilk.net/ScriptSharp)
    // ———————————–

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: