microsoft and jquery: a true love story - templating and other contributions
DESCRIPTION
How the Microsoft and jQuery relationship has evolved over time and how Microsoft are now contributing to the world's most popular javascript library, jQuery.TRANSCRIPT
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…
Thank you!