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,738
-1

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,738
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.

×