Unity support for Windows 8

image

Big news for game publishers today from the Unite conference, Unity announced support for Windows 8 & Windows Phone 8.

“Our mission at Unity has always been to provide solutions for developers to effortlessly bring their work to as many different platforms as possible,” said David Helgason, CEO of Unity Technologies, “The Unity community has been asking for access to Windows Phones and have been eagerly anticipating the release of Windows 8. We’re happy to announce that we will support both.”

[Article from Develop Online]

Good stuff!

We’ve also published some guidance for designing games on Windows 8, check out our “Designing great games for Windows” article to get a head start creating your next blockbuster!

Modeling User Satisfaction for in-flight wifi

I’m a frequent flier. When in-flight wifi first emerged about 18 months ago on airlines like Alaska and Delta, I was in heaven. I could be productive and stay in touch with colleagues, partners and friends whilst in the air. Fast forward to present day and the experience is unreliable, slow and almost impossible to use. I often just disconnect and ignore that it’s even available.

It got me thinking, at what point does the service level of in-flight wifi drop to levels where it degrades customer satisfaction, to the point where it almost makes more sense to not offer the service in the first place. I’d love to see that model.

Adobe: Omniture support for Windows 8 coming soon

Good news for app publishers given that measurement is so important, especially on new platforms where developers & designers are beginning to master the UX Guidelines.

Since the pub­lic announce­ment of Microsoft’s Sur­face tablet, my inbox has been flooded with ques­tions on when our Win­dows 8 app mea­sure­ment library will be avail­able.  I’m hop­ing this post will address those ques­tions and serve as a place for peo­ple to ask ques­tions or comment

Our Win­dows 8 library will be posted to devel​oper​.omni​ture​.com when it is ready and will be avail­able as a pub­lic beta until the pro­duc­tion release of Win­dows 8.  Cur­rent plan is to post the beta ver­sion by the end of July.  I’ll add the link to it in this blog post when it’s ready.  The library at gen­eral avail­abil­ity will be com­pat­i­ble with the full ver­sion of Win­dows 8 as well as the RT ver­sion for ARM devices.

Full blog post here.

Being emotional about London

image

I couldn’t help get a bit teary eyed on my flight from Austin to San Francisco today. United (whom I don’t fly with often, but enjoyed their service) and their Hemispheres magazine had a lovely piece on London, positioned as a city steeped in history, culture, art… yes I’m still talking about London, dear reader.

The thing that really got me was the history part. Having been in the USA for nearly four years, and living life at a frenetic pace, I’ve come to appreciate the history, the slower pace of European life amongst other things. The following paragraph filled me with a lot of pride and passion for London, it almost made me want to be back there, drinking a warm, dark beer and complaining about the cost of the Olympics. Oh, England, I miss you sometimes.

WITH THE OLYMPIC GAMES starting up later this month, the world’s eyes will turn to London. That is, if they ever turned away to begin with. The biggest city in Europe and the former capital of a vast empire, London offers in equal measure cutting-edge culture and a history so pervasive it’s almost impossible to comprehend.

Founded by the Romans nearly 2,000 years ago, London (née Londinium) endured plagues, invasions, wars, fires and other forms of upheaval and unpleasantness on its journey to become the capital of England, the center of the British Empire and, more recently, a global trendsetter in literature, music and fashion.

Today the city is vibrant, a financial powerhouse even amid an economically shaken European Union — but from the stately parks of Kensington to the bohemian haunts of the East End, the wide and low megalopolis affectionately known as “The Smoke” has lost none of the inimitable contrasts that have long defined it. It remains, as ever, London.

I feel obliged to admit that once I arrived in San Francisco, I upgraded my rental car to a real American muscle car… a Corvette, and nearly killed myself on the way to my hotel.

Windows 8 UX Fundamentals–Free Virtual Training

Metro style apps are the focal point of the user experience on Windows 8 Release Preview, and great Metro style apps share an important set of traits that provide a consistent, elegant, and compelling user experience.

With the first apps in the Windows Store, it’s exciting to see the designers begin to push the boundaries of the Metro design language on Windows 8. There’s plenty of innovation and beautiful apps to come, and if you want to learn how to get started, this free virtual training is perfect for you.

On 14th June from 9am to 5.30pm PST, the Windows User Experience Team will be presenting sessions on how to design great apps that leverage the full extent of the platform and adhere to UX guidelines. After this training, you will understand the tenants of a great app, how to think about information architecture, best practices for designing flexible layouts, touch, how to leverage contracts in the platform, and much more.

14th June, 9am-5.30pm PST – Event Agenda

  • Metro style design
  • Commanding, Information Architecture & Navigation
  • Designing for Touch, Mouse & Keyboard
  • Animations
  • Designing for view states
  • Designing apps with adaptive layouts
  • Using Contracts
  • Connected and Alive
  • Anatomy of an App: Case Study

Register today, you’ll be able to login to the event when we publish the event URL later this week. We’re looking forward to seeing you there!

Web Camps–30 new events in the calendar, seats going fast!

Web Camp SantiagoFlair001   DSCN5251

The Web Camps team has been busy working on organizing new events around the world and we’ve got a bunch of new events to share with you!  We’ve also been getting reports in on the first Web Camps where developers have been getting free training on how to build web applications using cutting edge technologies.

A couple of weeks ago the Chile team held their first Web Camp in Santiago!  The event was a big success with hundreds of developers learning about IE9, HTML 5, WebMatrix and Razor, ASP.NET MVC 3 and Silverlight!  On the other side of the world, the clip_image001[7]team in Karachi, Pakistan ran a Web Camp on ASP.NET MVC teaching the fundamentals to developers to get them started building web app.  Meanwhile in Seoul, Korea developers packed into the Microsoft office to learn about ASP.NET MVC too! 

We’ve got a bunch of new events planned all around the world covering a bunch of interesting technologies.  Check out the www.webcamps.ms website and the event list below for a sample of some of the events we have planned for you!

 

 

 
Web Camps India – Bangalore

On the 16th November Jon Galloway and I start out Web Camp India tour in Bangalore with a one day Web Camp covering ASP.NET MVC 3 where attendees can learn what’s new in the latest version of the framework, Razor as well as NuGet the package management tool for ASP.NET!  To sign up for this event register here!

Web Camps India – Hyderabad

Next, we travel onwards to Hyderabad and on 18th/19th we’ll deliver a two day event on ASP.NET MVC 3 with presentations and demos on the first day and fresh new labs on ASP.NET MVC 3 on day two to put your learning into practice! To sign up for this event register here!

Facebookalt

 

Full Web Camps Calendar

The full calendar is maintained and updated here.

City

Country

Date

Presenters

Registration Link

Hyderabad

India

18-Nov-10

James Senior &
Jon Galloway

Register Here

Amsterdam

Netherlands

20-Jan-11

James Senior &
Scott Hanselman

Coming Soon

Paris

France

25-Jan-11

James Senior &
Scott Hanselman

Coming Soon

Austin, TX

USA

7-Mar-11

James Senior &
Scott Hanselman

Coming Soon

Buenos Aires

Argentina

14-Mar-11

James Senior &
Phil Haack

Coming Soon

São Paulo

Brazil

18-Mar-11

James Senior &
Phil Haack

Coming Soon

Silicon Valley

USA

6-May-11

James Senior &
Doris Chen

Coming Soon

 

City

Country

Date

Technology

Registration Link

Bangalore

India

16-Nov-10

ASP.NET MVC

Register Here

Paris

France

25-Nov-10

TBA

Register Here

Bad Homburg

Germany

30-Nov-10

ASP.NET MVC

Register Here

Bogota

Colombia

30-Nov-10

Multiple

Register Here

Chennai

India

1-Dec-10

ASP.NET MVC

Register Here

Pune

India

3-Dec-10

ASP.NET MVC

Register Here

Moulineaux

France

8-Dec-10

TBA

RegisterHere

Sarajevo

Bosnia and Herzegovina

10-Dec-10

ASP.NET MVC

Register Here

Bad Homburg

Germany

16-Dec-10

ASP.NET MVC

Register Here

Moulineaux

France

11-Jan-11

TBA

RegisterHere

Cape Town

South Africa

22-Jan-11

Web Matrix

Coming Soon

Johannesburg

South Africa

29-Jan-11

Web Matrix

Coming Soon

Tunis

Tunisia

1-Feb-11

ASP.Net MVC

Register Here

Cape Town

South Africa

12-Feb-11

ASP.Net MVC

Coming Soon

San Francisco, CA

USA-West

18-Feb-11

ASP.NET MVC

Coming Soon

Johannesburg

South Africa

19-Feb-11

ASP.Net MVC

Coming Soon

Redmond, WA

USA-West

18-Mar-11

Odata

Coming Soon

Munich

Germany

31-Mar-11

Web Matrix

Register Here

Moulineaux

France

5-Apr-11

TBA

RegisterHere

Moulineaux

France

17-May-11

TBA

RegisterHere

Irvine, CA

USA-West

10-Jun-11

ASP.NET MVC

Coming Soon

Moulineaux

France

14-Jun-11

TBA

RegisterHere

New PayPal Helper for WebMatrix

This week I’ve been at the PayPal Innovate Conference in San Francisco where Microsoft and PayPal have been talking to thousands of developers about the work we have been doing to create the easiest way to build apps that use PayPal for payments.  Today we are releasing the PayPal Helper for WebMatrix (in beta) which provides a simple way to do PayPal payments from the websites you build in WebMatrix.

What’s included in the PayPal Helper?

The helper we are shipping today, provides methods for the Button Manager API and Adaptive Payments API which are two of PayPal’s most popular APIs.  Here’s what PayPal says about both:

  • Button Manager APIs let you create, manage, edit, and delete Website Payments Standard buttons. Create payment buttons that let customers purchase single or multiple items, make donations, set up recurring payments, or buy gift certificates.
  • Adaptive Payments enable developers to build apps that process transactions. App builders can control the entire transaction within a single interface.
Downloading and installing the PayPal Helper
  1. Download and install WebMatrix
  2. Download the assemblies for the Helper (PayPal.dll, paypal_base.dll, log4net.dll)
  3. Create a new website or template in WebMatrix
  4. Create a bin folder off the root
  5. Copy and paste the assemblies into the bin
  6. You’re done!
PayPal Helper: Using Button Manager

Note – If you’re not familiar with the Button Manager API from PayPal, check out PayPal’s developer portal to find out more

The first thing you need to do is initialize the helper with your PayPal account credentials.  You can of course do this inline in the page, but the recommended option is to place the init call in your _AppStart.cshtml page so that it is called once when the app runs.  Here’s the init call code:

PayPal.Profile.InitializeBMProfile(
           “[API Username]”,
           “[API Password]”,
           “[API Secret]”,
           “sandbox”);

 

Next, to create a button on the PayPal side, call the method below.  When the Create AddToCart Button is fired, it returns the HTML code needed to display the button which we can then save to the database. We’ll typically use this HTML when we display the product detail page.

var payPalButton = PayPal.AddToCartButton.Create(
                                           Business : “[insert your sandbox account]”,
                                           ItemName : name,
                                           Amount : price.ToString(“N2″));

 

Now, if you login to PayPal (remember to use your Sandbox account if you have been using that) and click the “Profile” link and then “My Saved Buttons” under Selling Preferences, you will be able to see the button you have just created:

image

PayPal Helper: Using Adaptive Payments

Note – if you are not familiar with the Adaptive Payments service from PayPal, check out their developer portal for more information

I’m a big fan of the Adaptive Payment API because it has some cool features like Split Payments which allow you to pay other people “behind the scenes” without the customer knowing.  This is great if you have suppliers that you want to pay whenever an item gets sold through your online application but you don’t want to bother the customer with the details or let them know what you are paying your suppliers Smile

First up you’ll need to Initialize the profile, just like we did for Button Manager.  Here’s the code for that:

PayPal.Profile.InitializeFNProfile(               
       “ThreeToken”,
       “[API Username]”,
       “[API Password]”,
       “[API Key]”,
       “SOAP11″,
       “SOAP11″,
       “https://svcs.sandbox.paypal.com/”,
       “[App ID]”,
       “[PayPal User Email Address]”
   );

 

Next, we prepare the payment by setting up a single instance of a “receiver” which will the store that is receiving the payment.  After that we setup a list of receivers, which represents our suppliers (or other people that we need to pay after the transaction).  Up top I’ve done a quick calculation to give the supplier 10% of the product price, of course you would typically pull this information from a database where you stored the amount you want to pay them.

Once all that is setup we then call the PayPal.ChainedPay.Execute method passing in the receivers, an empty string (this is the sender of the payment – to be specified on PayPal’s side) as well as some information on the transaction. 

PayPal returns a response from which we can get a PayKey which represents the transaction on the PayPal side.  We then redirect the user to PayPal’s site, passing in the PayKey in the querystring so that PayPal knows how the transaction has been setup.

var supplierAmount = decimal.Round(product.Price * .10m, 2);
          
        var MyStore = new Receiver();
       MyStore.amount = product.Price;
       MyStore.email = “[Store Email]”;
        
        var Suppliers = new List<Receiver>();
       var Supplier = new Receiver();
       Supplier.email = “[Supplier Email]”;
       Supplier.amount = supplierAmount;
       Suppliers.Add(Supplier);

       PayPal.ChainedPay.Language = “en_US”;
       PayPal.ChainedPay.CancelUrl = “http://www.mystore.com/ohtoobad.cshtml”;
       PayPal.ChainedPay.ReturnUrl = “http://www.mystore.com/thanks.cshtml”;
       PayPal.ChainedPay.CurrencyCode = “USD”;
      �
       var response = PayPal.ChainedPay.Execute
           (MyStore, Suppliers, “”, “Test Payment”, “127.0.0.1”, “MyDevice”);
      �
       if (response == null) {
           Response.Write(“null”);
       }
       else
       {
           Response.Write(“full”);
       }   
      �
       var payKey = response.payKey;
       var redirectUrl = “https://www.sandbox.paypal.com/webscr?cmd=_ap-payment&paykey=” + payKey;           
      �
       Response.Redirect(redirectUrl);

 

This is what the consumer sees – note it’s just one line item to James’ test store.

image

Thanks to Chained Pay, the store sees this in it’s transaction log.  Note that our supplier has been paid automatically.

image

Open source

The code for the helper is based on the existing PayPal Base library for .NET that PayPal ship as part of the developer SDK.  This is already under the Apache license so it seemed natural to continue the tradition and release the helper in CodePlex under the Apache license.  You can download it here.

Future work

As this is a beta there’s a few items that we wanted to polish up for the final version.  

  • Remove dependency on Log4Net
  • Merge PayPal base assembly code with the new Helper assembly
  • Consolidate initialization methods for Button Manager and Adaptive Payments

As always please contact me if you have other suggestions, or leave feedback on the Codeplex project site.

New Facebook Helpers in WebMatrix Beta 2

Today we launched WebMatrix Beta 2 with a bunch of new features.  Here are my favorites:

  • Themes – quickly switch between different themes on your website
  • New HTML5 Templates in the box – rounded corners, transitions, sexy HTML5 templates. yum.
  • NuPack Package Management – get the bits you need, when you need em
  • New @Helper Syntax – adding helpers is now even easier

The new @Helper syntax makes it super easy to create your own helpers for WebMatrix.  Why would you want to do that? Well, there’s a couple of reasons.  Firstly, as a timesaver.  If you find yourself writing the same code or HTML time after time in your websites, it might be time to package up your code in a reusable Helper that you can utilize throughout your websites instead of writing the same thing over and over again and wasting time.  Secondly, if you are trying to foster a developer community that can use your service or website, then creating WebMatrix Helpers to make their life easier is a smart thing to do – because it removes friction for people to use your service.

Take the new Facebook Social Plugin Helpers in WebMatrix Beta 2 as an example.  They make use of the new @helper syntax to make it easier for developers to add social widgets to web pages.  The way you get these helpers is also worth mentioning, because it highlights a use of the NuPack technology that we announced today also.  Facebook’s Social Plugins Helper includes shortcuts to the following social widgets:

  • Login Button
  • Like Button
  • Comments
  • Recommendations
  • LikeBox
  • Facepile
  • LiveStream
  • ActivityFeed

As well as the ability to easily add metadata which shows up in rich ways across Facebook.

Getting your Helpers using NuPack

NuPack is an open source project driven by Microsoft that provides package management for developers in WebMatrix or Visual Studio 2010.  Within WebMatrix there is a package management page that you can visit where you can manage which packages are installed in your website projects.  With NuPack, it’s super easy to get Helpers and other things you’ll need to develop your website.

Note -  the current structure of our website if we create a new website from template.  Inside our app_data folder we have a bunch of folders including packages.  This is where the assets for our packages live.  We can see that we already have microsoft-web-helpers.1.0 installed by default and this package provides Helpers like Twitter, ReCapture and more.  There is also a packages.config file which contains information which points WebMatrix to the packages installed in App_Data.

image

To manage the packages installed in our website, we need to get to the admin page by simply navigating to http://localhost:xxx/_admin where xxx is your port number.  (Note – by default this is only enabled when running websites locally, as a security precaution).  If it’s the first time you’ve visited the page, you’ll be asked to create a password, remember this for future visits to the package manager page.

image

Next, you’ll be presented with a list of packages that you can install to use within your website.  Clicking on the Install button next to the Facebook.Helper 1.0 will install the files and pre-requisites for the helper to work correctly.  In the case of the Facebook Helper there are no dependencies however.

image

image

Once installed, the package “explodes” (in a useful, not violent way) in your website, installing various assets.  If we now look at the structure of the website in WebMatrix we see the Facebook Helper package has been installed successfully:

image

The most important asset is the Helper itself – FacebookSocialPlugin.cshtml and you can see that it was installed under the App_code folder in the root of website.  In this particular helper, we’ve also included some docs which explain how to get started as well as a full reference for all the methods in the helper.

To get to the docs just navigate to http://localhost:xxx/facebook/docs/starthere.htm

Note – There is already a Facebook Helper included in the Microsoft-web-helpers library which provides a shortcut to adding the Like Button to your website.  The FacebookSocialPlugin helpers has the like button as well as all the other Facebook Social Plugins and other good stuff like Open Graph etc.  In the next release we’ll merge the two Helper libraries so they are consolidated.

@helper syntax

Let’s explore the Facebook Social Plugin Helper a little more to understand how to use the @helper syntax.  The naming of the FacebookSocialPlugins.cshtml file is a good place to start.  This name will be taken as the class name at runtime, so the developer will use FacebookSocialPlugins.Foo() when using the helpers within the file.  Exploring the file, we see that all the methods use the @helper syntax, which mixes markup and code so that it’s possible to build up quite complex HTML and then inject parameters from the method or from calculated values in the helper code itself. 

Let’s take the helper method “GetInitializationScripts” as an example.  This method emits the JavaScript required by Facebook to allow their Social Plugins to work and must be added to every page that wants to use the plugins.  It’s not a trivial amount of script and before the Helper I would have to goto Facebook’s developer portal, hunt it down and copy and paste into every page.  Now with the Facebook Social Plugins Helper I can simply add the method to my _Layout.cshtml page, and by default it’s included on every page.  That’s a nice timesaver.

@helper GetInitializationScripts() {
   <div id="fb-root"></div>
   <script type="text/javascript">
       window.fbAsyncInit = function() {
           FB.init({appId: '@FacebookSocialPlugins.AppId', status: true, cookie: true, xfbml: true});
        };
       (function() {
           var e = document.createElement('script'); e.async = true;
           e.src = document.location.protocol +
           '//connect.facebook.net/en_US/all.js';
           document.getElementById('fb-root').appendChild(e);
       }());
   
       function loginRedirect(url) { window.location = url; }
   </script>
}

Notice how we inject he AppId from the FacebookSocialPlugins class?  This notion of mixing code and markup within a class method is very powerful and useful in lots of ways.  There’s a couple additional steps that you must do in order to have the Social Plugins working including calling the following method in _AppStart.cshtml.

@{
   FacebookSocialPlugins.Initialize("[Your App Id]", "[Your App Secret]", "bakery");
}

Secondly you must register the Facebook namespace in _Layout.cshtml which tells the page about the Facebook markup:

<html xmlns="http://www.w3.org/1999/xhtml" @FacebookSocialPlugins.FbmlNamespaces() >

 

Normally this would be a copy and paste from the depths of the Facebook developer portal, now it’s simply a case of using the Helper and you’re done.

This then clears the path for us to easily add Facebook’s Social Plugins to a WebMatrix website:

    <p>
   @FacebookSocialPlugins.Comments()
</p>

 

Results in:

image

It’s important to note that some Social Plugins require your site to be published to an external host that Facebook can communicate back and forth to.

I recommend checking out the documentation which comes as part of the Helper NuPack for more information on getting started, simply press the “run” button in WebMatrix  with startHere.html opened to browse the docs.

image

Other good reading on WebMatrix Beta 2

Top Links to get started with WebMatrix

WebMatrix is everything you need to build Web sites using Windows. It streamlines Web site development and makes it easy to start Web sites from popular open-source apps.

Getting Started
  1. Download WebMatrix
  2. Top 10 features for Web Matrix
  3. Twitter Archive of everything WebMatrix
  4. Scott Gu’s Blog Post on WebMatrix
  5. API Reference Guide
  6. ASP.NET Web Pages Forum
  7. How to Create an ASP.NET Application from Scratch Using WebMatrix Beta
  8. Web Matrix eBook
  9. FAQs for Open Source and Free web applications
  10. Get help in the forums
Find Web Hosting for your projects

Microsoft’s Web Hosting Gallery

Make Suggestions and Submit Bugs

Help us make WebMatrix better! Make a suggestion or submit bugs to the team.

Pragmatic Press and Blog Coverage of Web Matrix

Microsoft Web Matrix: What’s In It for Dev Professionals? (Michael K Campbell)
WebMatrix – A Path To Enterprise Web Development? (David Hayden)

jQuery Templating in the wild

It seems like longer, but it’s only been 6 months since we announced that Microsoft was going to start contributing to jQuery instead of developing our own JavaScript library.  Today, Scott Guthrie announced that we’ve had our code checked in to the main branch of the jQuery project – you can read more about that on his blog and also check out the Web Camps TV interview I recorded with Stephen Walther on the subject.  John Resig has also confirmed that jQuery Templates will ship as an official plugin in v1.4.3 and then in the core library in v1.5.  (Data-linking will also be shipped the same way).

Check out the Web Camps TV interview with myself and Stephen Walther where we demo some of the new features:

Get Microsoft Silverlight

Holy miracle, Batman!? Microsoft are contributing to open source!

alt

Yes that’s right, Microsoft are contributing to jQuery, which is an open source project.  That means we have real life developers working on shipping code – you can see what they’ve been up to on github.  Boris Moore the lead dev on our contributions has been writing up his thoughts on working at Microsoft on an open source project which make for some interesting reading. He also provides some details on using the templating engine and some of the advanced features that all templating ninjas should know.

Why use jQuery Templates?

There are basically two reasons to use jQuery Templates:

  1. Performance
  2. Maintainability of your code

On Performance. This benefit comes in two flavors, user experience and bandwidth.

First, let’s discuss user experience.  Modern websites are behaving more and more like desktop applications, with data that is constantly being refreshed with no user interaction.  Think about Twitter or Facebook and how they are regularly pulling data from the server to provide a refreshed look automatically.  jQuery Templates make it simple to declare the shape of your HTML and then insert fresh data to them, appending the resultant HTML to the DOM where appropriate.

Secondly, there’s bandwidth to think about.  Chatty applications that send/receive excessive amounts of data are bad for your bandwidth bills and bad for latency.  Instead of refreshing the entire page when just one portion needs updating, we can keep the noise down to a minimum with HTTP calls between JavaScript/jQuery and the server.    jQuery Templating allows you to take that data and then do something useful with it in an easy way. With this approach you are going to be making fewer calls and moving less data to the client.  There’s also the caching to think about as well – templates are cached on the client which will further reduce the data you are moving about.

On Maintainability of your code

Given that you’ve bought into rendering your data on the client-side because of the perf benefits, let’s also assume that your sanity is important too – this is another reason to use jQuery Templates.  It is of course possible do the job of jQuery Templates manually, using string concatenation to build up complex strings of HTML and injecting your data items as you go.  Rinse and repeat for each row of data you have and then have jQuery append it to your DOM.  However, there are more rewarding things in life than doing this, and if you’ve ever tried to match up HTML elements and tried to troubleshoot a complicated nugget of HTML you’ll know it’s pretty painful.  This is where templating helps by allowing you to declare a template inline in a code block so you can see the structure of the template at first glance (see examples below).  It’s also worth calling out that templates make it easy to separate the logic on the client into app, structure and style, i.e. JavaScript, HTML and CSS.  For example, in my applications I like to have all my templates in a JS file called templates which I reference in my app when needed.

Pop quiz: which is easier to understand? This template?

<script id="movieTmpl" type="text/x-jquery-tmpl">    
    <div>        
        <div>
            <img src="${BoxArt.LargeUrl}" />
        </div>        
        <strong>${Name}</strong>        
        <p>{{html Synopsis}}</p>        
        <input type="button" title="Buy tickets for '${Name}'" value="Add to cart…" class="buyButton"/>        
        <br/>    
    </div>
</script>

or this concatenated string?

<script id="movieTmpl" type="text/javascript">    
    var myString = "<div><div><img src=";
    myString += BoxArt.LargeUrl;
    myString += "/></div><strong>";
    myString += Name;
    myString += "</strong><p>";
    myString += Synopsis;
    myString += "</p><input type=\"button\" title=\"Buy tickets for\"";
    myString += Name;
    myString += " value=\"Add to cart…\" class=\"buyButton\"/>;
    myString += "<br/></div>";
</script>

Hopefully the difference is clear Winking smile

Who’s using jQuery Templates?

imageThese bits are pretty fresh so there are only a few examples of websites using them.  One early adopter is hiFi, a website publishing engine.  They take performance seriously which is why they chose to use jQuery Templating engine to render their comments to the client.  The team at hiFi have also written up a really nice post on the subject of jQuery Templates.

To get started with templates I recommend checking out the jQuery API documentation and also the samples that Boris has created on github.com.  Rey Bango also has some great tutorials on the different ways you can declare templates too.