microsoft and jquery: a true love story - templating and other contributions

James Senior - Microsoft Web Evangelist@jsenior - www.jamessenior.com

Microsoft & jQuery: A True Love Story

A few months ago…

Once upon a time…1997: Classic ASP 1, 2, 32002: ASP.NET 1.0 and WebForms

Ajax Control Toolkit

2003 to 2007: ASP.NET 1.1, 2, 3, 3.52008: Visual Studio 2008 - including jQuery2008: Official Support for jQuery 2009: ASP.NET MVC – including jQuery2009: ASP.NET Ajax Library2009: jQuery on the Microsoft CDN2010: ASP.NET 4 – including jQuery

VISUAL STUDIO 2010(NOW WITH BETTER JAVASCRIPT SUPPORT)

Demo-tastic

Back in February, it was just another day at work

ASP.NET Ajax Library• Open Source JavaScript Library• Cool features, including– Script Loader– Data-Linking– Observer class– Templating– Data Controls

• jQuery integration

Perfect Match

Selectors Plugins Animation

jQuery ASP.NET AjaxTemplatingData-LinkingScript LoaderWCF OData.NET RIA

First Date

All good relationships…

ASP.NET Ajax Library

Cool Stuff

jQuery Plugins

Cool stuff

jQuery Core

Cool stuff ++

Proposal, Specification,Prototype

1. Have a clear contribution model2. Are open, transparent and collaborative3. Are in the spirit of jQuery community4. Have specification & Proposals on jQuery

Forums 5. Have prototypes as plugins in Github

jQuery Core Team

jQuery Templating

• 1st contribution from Microsoft• Proposal, Spec and Prototype online– http://github.com/jquery/jquery-tmpl

The Contribution model in action…

What is Templating?

Data

Template

Templating Engine DOM

Why client-side templates?

• Aren’t server side templates good enough?

• Couldn’t I do this before?

What is a Template?

var tmpl = "<li>${ dataItem }</li>";

What is a Template?

<script id=“myTemplate" type="text/html"><li>${ dataItem }</li>

</script>

What is a Template?

<script id="productsTemplate" type="text/html"> <div> <img src="Content/ProductImages/${Picture}" class="productImage" /> <span class="productName">${Name}</span> Price: ${formatPrice(Price)} <img data-pk="${Id}" src="Content/AddCart.png" alt="Add to Cart" class="addCart" /> </div></script>

.render()

$("#myTemplate").render( dataObject ).appendTo("ul");

<script id=“myTemplate" type="text/html"><li>${ dataItem }</li>

</script>

<ul><li>foo</li>

</ul>

.render()

<script id=“myTemplate" type="text/html"><li>${ dataItem }</li>

</script>

$("#myTemplate").render( arrayOfDataObjects ).appendTo("ul");

<ul><li>foo_0</li><li>foo_1</li>

</ul>

JQUERY TEMPLATINGCan I haz demo?

And then there was more…

jQuery Data Linking

Sync data and UI

jQuery Data Linking

Golden Rule - modify data using jQuery

DATA LINKINGDemo Fest

Wait a minute…

What about the ASP.NET Ajax Library?– It’s now RTM quality code– Resides in Ajax Control Toolkit

(still an open source project)

– Still served on the CDN– We are not actively developing new

features

This love story is to be continued…

More Love: Web Camps Update

• Free, 2 day events – Learn and Build• 3000 people in 12 cities• More events being announced after

the summer• www.webcamps.ms

How to find your love• Check out the proposals, specs and prototypes • Give your feedback to the community• Tell a friend about what you heard today• Get free tooling http://microsoft.com/web• Come along to a Web Camp

www.webcamps.ms• Slides and demos are on my blog…

Contact Me

James SeniorMicrosoft Web Evangelist

@jseniorjames@microsoft.comwww.jamessenior.com

Thank you!