Microsoft and jQuery

Show how Microsoft contributes jQuery project.

Transcript

1. 上官林傑 (ericsk) @ OSDC.tw 2011
2. About myself  上官林傑 a.k.a. ericsk  Experiences  Developer Evangelist @ Microsoft Taiwan 2011.03 ~  Organizer @ Taipei GTUG 2009.08 ~ 2010.12  Military Service @ CHT 2007.01 ~ 2011.02  http://plurk.com/ericsk http://facebook.com/ericsk0313
3. Outlines  What’s jQuery?  jQuery Integration in Microsoft Products  Microsoft’s Contributions to jQuery
4. What’s jQuery?  http://jquery.com https://github.com/jquery  Lightweight, powerful, cross-browser JavaScript library  Full CSS3 Selector Support  Easy and useful DOM, Event, AJAX APIs  Active communities, includes UI, tool, plugins, etc.
5. jQuery Sample [DOM Manipulation] <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('<h1>Hello, world</h1>') .css({color: 'red', display: 'none'}) .appendTo($('#foo')) .show('slow'); </script> [Event, AJAX] <button id="btn">Click</button> <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('#btn').click(function(e){ $.getJSON('/path/to/json', function(data) { // do something with data }); }); </script>
6. Integrates with MS Products  Starts from Visual Studio® 2008 SP1  jQuery code intellisense  Microsoft CDN also supports intellisense (VS2010)  http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js
7. jQuery Control for ASP.NET  Implements ASP.NET toolkits with jQuery  AJAX Control Toolkit  Client Templates  …
8. Community Engagement  Created proposals to jQuery developer forum  template、globalization、datalink  jQuery accepted them as official plugins:  http://github.com/jquery/jquery-tmpl  http://github.com/jquery/jquery-global  http://github.com/jquery/jquery-datalink
9. jQuery Template  Project: https://github.com/jquery/jquery-tmpl  Document: http://api.jquery.com/category/plugins/templates/  CDN: http://ajax.microsoft.com/ajax/jquery.templates/bet a1/jquery.tmpl.min.js  Render template with Array or Object.  Simple template syntax
10. Templates  3 ways to prepare the template:  $('<div>${foo}</div><div>${bar}</div>').tmpl(data)  <script id="my-tmpl" type="text/x-jquery-tmpl"> <div>${foo}</div><div>${bar}</div> </script> <script> $('#my-tmpl').tmpl(data)... </script>  <div id="my-tmpl" style="display:none"> ${foo} says ${bar}. </div> <script> $('#my-tmpl').tmpl(data)... </script>
11. Template Syntax  ${variableOrExpression}  {{html variableOrExpression}}  Output HTML content  {{if}} {{else}} {{/if}}  Conditional tags. (else could be used as `else if`)  {{each data}} ${$index} ${$value} {{/each}}  Iterate over an array or object  {{tmpl template}} ... {{/tmpl}}  Composite templates  {{wrap template}} ... {{/wrap}}  Wrap with another template
12. jQuery Template Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.tmpl.min.js"></script> <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content">${Comment}</div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp) .appendTo($('#message-list')); }); </script>
13. jQuery Template Sample <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content"> {{html $item.NL2BRComment()} </div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp, { NL2BRComment: function() { return this.data.Comment.replace(/\n/g, '<br>'); } }) .appendTo($('#message-list')); }); </script>
14. jQuery Datalink  Project: https://github.com/jquery/jquery-datalink  Document: http://api.jquery.com/category/plugins/data-link/  Link fields from one object to another automatically.
15. jQuery Datalink Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.datalink.js"></script> <form> <input type="text" name="userid"> <input type="text" name="text"> </form> <script> var foo = {}; $('form').link(foo); $('input[name=userid]').val('ericsk'); alert(foo.userid); // ericsk $(foo).setField('text', 'kscire'); $('input[name=text]').val(); // kscire </script>
16. jQuery Globalzation  Project: https://github.com/jquery/jquery-global  Used to make page i18n.  $.global.cultures defines “culture” of each locale, such as number format, calendar format, etc.  Set $.global.culture to switch locale  Localize words (tokens)
17. [Global] Date Format // 2011/03/25 var dateStrEn = $.global.format( new Date(2011, 3, 25), 'yyyy/MM/dd' ); // 2011年3月25日 var $zhTW = $.global.cultures['zh-TW']; var dateStrZhTW = $.global.format( new Date(2011, 3, 25), $zhTW.calendars.standard.patterns.D, $zhTW );
18. [Global] Localize Words $.global.localize('trans', 'zh-TW', { 'Hello': '哈囉', 'world': '世界' }); $.global.localize('trans', 'ja', { 'Hello': 'こんにちは', 'world': '世界' }); var tz = $.global.localize('trans', 'zh-TW'); alert(tz.Hello + ', ' + tz.world); // 哈囉, 世界 var tj = $.global.localize('trans', 'ja'); alert(tz.Hello + ', ' + tz.world); //こんにちは, 世界
19. JSDefer  https://github.com/BorisMoore/JsDefer  Deferred script loader $.defer('/path/to/js') .done(function() { // DO something }) .fail(function() { // DO something when fail });
20. Future  Watch Boris Moore’s repositories:  https://github.com/BorisMoore
21. Ads  Try Visual Web Developer® Express FREE  http://www.microsoft.com/express/Web/  BizSpark / DreamSpark for Startups!  http://www.microsoft.com/taiwan/bizspark/  http://www.microsoft.com/taiwan/dreamspark/