Microsoft and jQuery: A true love story - templating and other contributions
- 1. James Senior - Microsoft Web Evangelist@jsenior - www.jamessenior.com
- 3. Microsoft & jQuery: A True Love Story
- 4. A few months ago…
- 7. Once upon a time…1997: Classic ASP 1, 2, 32002: ASP.NET 1.0 and WebFormsAjax Control Toolkit2003 to 2007: ASP.NET 1.1, 2, 3, 3.52008: Visual Studio 2008 - including jQuery2008: Official Support for jQuery2009: ASP.NET MVC – including jQuery2009: ASP.NET Ajax Library2009: jQuery on the Microsoft CDN2010: ASP.NET 4 – including jQuery
- 8. Visual studio 2010(now with better Javascript support)Demo-tastic
- 9. Back in February, it was just another day at work
- 10. ASP.NET Ajax LibraryOpen Source JavaScript LibraryCool features, includingScript LoaderData-LinkingObserver classTemplatingData ControlsjQuery integration
- 11. Perfect MatchjQueryASP.NET AjaxTemplatingData-LinkingScript LoaderWCF OData.NET RIA SelectorsPlugins Animation
- 12. First Date
- 13. All good relationships…Have a clear contribution modelAre open, transparent and collaborativeAre in the spirit of jQuerycommunityHave specification & Proposals on jQuery Forums Have prototypes as plugins in GithubjQuery CoreCool stuff ++jQueryCore TeamASP.NET Ajax LibraryCool StuffjQuery PluginsCool stuffProposal, Specification,Prototype
- 14. jQueryTemplating1stcontribution from MicrosoftProposal, Spec and Prototype onlinehttp://github.com/jquery/jquery-tmpl
- 15. The Contribution model in action…
- 16. What is Templating?DataTemplating EngineDOMTemplate
- 17. Why client-side templates?Aren’t server side templates good enough?Couldn’t I do this before?
- 18. What is a Template?vartmpl = "<li>${ dataItem }</li>";
- 19. What is a Template?<script id=“myTemplate" type="text/html"> <li>${ dataItem }</li></script>
- 20. What is a Template?<script id="productsTemplate" type="text/html"> <div><imgsrc="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>
- 21. .render()<script id=“myTemplate" type="text/html"> <li>${ dataItem }</li></script>$("#myTemplate").render( dataObject).appendTo("ul");<ul><li>foo</li></ul>
- 22. .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>
- 23. jQueryTemplatingCan I haz demo?
- 24. And then there was more…
- 25. jQuery Data LinkingSync data and UI
- 26. jQuery Data LinkingGolden Rule - modify data using jQuery
- 28. Wait a minute…What about the ASP.NET Ajax Library?It’s now RTM quality codeResides in Ajax Control Toolkit(still an open source project)Still served on the CDNWe are not actively developing new features
- 29. This love story is to be continued…
- 30. More Love: Web Camps UpdateFree, 2 day events – Learn and Build3000 people in 12 citiesMore events being announced after the summerwww.webcamps.ms
- 31. How to find your loveCheck out the proposals, specs and prototypes Give your feedback to the communityTell a friend about what you heard todayGet free tooling http://microsoft.com/webCome along to a Web Camp www.webcamps.msSlides and demos are on my blog…
- 32. Contact MeJames SeniorMicrosoft Web Evangelist@jseniorjames@microsoft.comwww.jamessenior.com
- 33. Thank you!