James Senior - Microsoft Web Evangelist@jsenior - www.jamessenior.com<br />
Microsoft & jQuery: A True Love Story<br />
A few months ago…<br />
Once upon a time…<br />1997: Classic ASP 1, 2, 3<br />2002: ASP.NET 1.0 and WebForms<br />Ajax Control Toolkit<br />2003 t...
Visual studio 2010<br />Demo-tastic<br />
Back in February, it was just another day at work<br />
ASP.NET Ajax Library<br />Open Source JavaScript Library<br />Cool features, including<br />Script Loader<br />Data-Linkin...
Perfect Match<br />jQuery<br />ASP.NET Ajax<br />Templating<br />Data-Linking<br />Script Loader<br />WCF <br />OData<br /...
First Date<br />
All good relationships…<br />Have a clear contribution model<br />Are open, transparent and collaborative<br />Are in the ...
jQueryTemplating<br />1stcontribution from Microsoft<br />Proposal, Spec and Prototype online<br />http://github.com/jquer...
The Contribution model in action…<br />
What is Templating?<br />Data<br />Templating Engine<br />DOM<br />Template<br />
Why client-side templates?<br />Aren’t server side templates good enough?<br />Couldn’t I do this before?<br />
What is a Template?<br />vartmpl = "<li>${ dataItem }</li>";<br />
What is a Template?<br /><script id=“myTemplate" type="text/html"><br />	<li>${ dataItem }</li><br /></script><br />
What is a Template?<br /><script id="productsTemplate" type="text/html"><br /> <div><br /><imgsrc="Content/ProductImages/$...
.render()<br /><script id=“myTemplate" type="text/html"><br />	<li>${ dataItem }</li><br /></script><br />$("#myTemplate")...
.render()<br /><script id=“myTemplate" type="text/html"><br />	<li>${ dataItem }</li><br /></script><br />$("#myTemplate")...
jQueryTemplating<br />Can I haz demo?<br />
And then there was more…<br />
jQuery Data Linking<br />Sync data and UI<br />
jQuery Data Linking<br />Golden Rule - modify data using jQuery<br />
Data linking<br />Demo Fest<br />
Wait a minute…<br />What about the ASP.NET Ajax Library?<br />It’s now RTM quality code<br />Resides in Ajax Control Toolk...
This love story is to be continued…<br />
More Love: Web Camps Update<br />Free, 2 day events – Learn and Build<br />3000 people in 12 cities<br />More events being...
How to find your love<br />Check out the proposals, specs and prototypes <br />Give your feedback to the community<br />Te...
Contact Me<br />James SeniorMicrosoft Web Evangelist<br />@jsenior<br />james@microsoft.com<br />www.jamessenior.com<br />
Upcoming SlideShare
Loading in...5
×

Microsoft and jQuery: A true love story - templating and other contributions

2,687

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,687
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Microsoft and jQuery: A true love story - templating and other contributions

  1. 1. James Senior - Microsoft Web Evangelist@jsenior - www.jamessenior.com<br />
  2. 2.
  3. 3. Microsoft & jQuery: A True Love Story<br />
  4. 4. A few months ago…<br />
  5. 5.
  6. 6.
  7. 7. Once upon a time…<br />1997: Classic ASP 1, 2, 3<br />2002: ASP.NET 1.0 and WebForms<br />Ajax Control Toolkit<br />2003 to 2007: ASP.NET 1.1, 2, 3, 3.5<br />2008: Shipping jQuery & jQuery Support<br />2009: ASP.NET MVC – including jQuery<br />2009: ASP.NET Ajax Library<br />2009: jQuery Support and CDN<br />2010: ASP.NET 4 – including jQuery<br />
  8. 8. Visual studio 2010<br />Demo-tastic<br />
  9. 9. Back in February, it was just another day at work<br />
  10. 10. ASP.NET Ajax Library<br />Open Source JavaScript Library<br />Cool features, including<br />Script Loader<br />Data-Linking<br />Observer class<br />Templating<br />Data Controls<br />jQuery integration<br />
  11. 11. Perfect Match<br />jQuery<br />ASP.NET Ajax<br />Templating<br />Data-Linking<br />Script Loader<br />WCF <br />OData<br />.NET RIA<br /> Selectors<br />Plugins<br /> Animation<br />
  12. 12. First Date<br />
  13. 13. All good relationships…<br />Have a clear contribution model<br />Are open, transparent and collaborative<br />Are in the spirit of jQuerycommunity<br />Have specification & Proposals on jQuery Forums <br />Have prototypes as plugins in Github<br />jQuery Core<br />Cool stuff ++<br />jQuery<br />Core Team<br />ASP.NET Ajax Library<br />Cool Stuff<br />jQuery Plugins<br />Cool stuff<br />Proposal, Specification,<br />Prototype<br />
  14. 14. jQueryTemplating<br />1stcontribution from Microsoft<br />Proposal, Spec and Prototype online<br />http://github.com/jquery/jquery-tmpl<br />
  15. 15. The Contribution model in action…<br />
  16. 16. What is Templating?<br />Data<br />Templating Engine<br />DOM<br />Template<br />
  17. 17. Why client-side templates?<br />Aren’t server side templates good enough?<br />Couldn’t I do this before?<br />
  18. 18. What is a Template?<br />vartmpl = "<li>${ dataItem }</li>";<br />
  19. 19. What is a Template?<br /><script id=“myTemplate" type="text/html"><br /> <li>${ dataItem }</li><br /></script><br />
  20. 20. What is a Template?<br /><script id="productsTemplate" type="text/html"><br /> <div><br /><imgsrc="Content/ProductImages/${Picture}" class="productImage" /><br /><span class="productName">${Name}</span> <br /> Price: ${formatPrice(Price)}<br /> <img data-pk="${Id}" src="Content/AddCart.png" <br /> alt="Add to Cart" class="addCart" /><br /> </div><br /></script><br />
  21. 21. .render()<br /><script id=“myTemplate" type="text/html"><br /> <li>${ dataItem }</li><br /></script><br />$("#myTemplate")<br />.render( dataObject)<br />.appendTo("ul");<br /><ul><br /><li>foo</li><br /></ul><br />
  22. 22. .render()<br /><script id=“myTemplate" type="text/html"><br /> <li>${ dataItem }</li><br /></script><br />$("#myTemplate")<br />.render( arrayOfDataObjects )<br />.appendTo("ul");<br /><ul><br /><li>foo_0</li><br /><li>foo_1</li><br /></ul><br />
  23. 23. jQueryTemplating<br />Can I haz demo?<br />
  24. 24. And then there was more…<br />
  25. 25. jQuery Data Linking<br />Sync data and UI<br />
  26. 26. jQuery Data Linking<br />Golden Rule - modify data using jQuery<br />
  27. 27. Data linking<br />Demo Fest<br />
  28. 28. Wait a minute…<br />What about the ASP.NET Ajax Library?<br />It’s now RTM quality code<br />Resides in Ajax Control Toolkit<br />(still an open source project)<br />Still served on the CDN<br />We are not actively developing new features<br />
  29. 29. This love story is to be continued…<br />
  30. 30. More Love: Web Camps Update<br />Free, 2 day events – Learn and Build<br />3000 people in 12 cities<br />More events being announced after the summer<br />www.webcamps.ms<br />
  31. 31. How to find your love<br />Check out the proposals, specs and prototypes <br />Give your feedback to the community<br />Tell a friend about what you heard today<br />Get free tooling http://microsoft.com/web<br />Come along to a Web Camp www.webcamps.ms<br />Slides and demos are on my blog…<br />
  32. 32. Contact Me<br />James SeniorMicrosoft Web Evangelist<br />@jsenior<br />james@microsoft.com<br />www.jamessenior.com<br />
  33. 33. Thank you!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×