+  Mats Bryntse, November 2008 www.mankz.com/ext.ppt High Performance Ajax with ASP.NET and ExtJS
Agenda <ul><li>About me </li></ul><ul><li>Setting up VS for working with JavaScript </li></ul><ul><li>Debugging efficientl...
2 sides of Mats <ul><li>SW engineer in Sweden at Avensia AB </li></ul><ul><li>5 years working with .NET, 1 year using Ext ...
Setting up Visual Studio  for working with JavaScript <ul><li>Get  VS 2008 SP1  (adds JS intellisense) </li></ul><ul><li>F...
Debugging efficiently <ul><li>Use the  debugger;  keyword in your JavaScript files </li></ul><ul><li>Use  Fiddler  (if not...
What is ExtJS? <ul><li>What is ExtJS?  </li></ul><ul><li>Including the full Ext library minified (not GZIPped) means aroun...
Setting up ExtJS <ul><li>Latest ExtJS version is 2.2 </li></ul><ul><li>Including on a page: </li></ul><ul><ul><li><link hr...
Example 1 – Ext.ajax.Request <ul><li>Code.... </li></ul>
Example 1 – Worth noting <ul><li>DOM ready detection - Ext.onReady(function(){ ... })  </li></ul><ul><li>Watch out for OnR...
Example 2 – Ext.grid
First, check out Ext.data basics
Example 2 - Code <ul><li>Ext.onReady(function() { </li></ul><ul><li>Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/defaul...
Example 2 – Worth noting <ul><li>Always add  Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/default/s.gif'; </li></ul><ul...
Error handling in Ajax/Ext apps <ul><li>When data doesn’t load as expected, first determine where the error is occurring (...
AJAX performance <ul><li>Follow the tips from  Yahoo Exceptional Performance  team and use Yslow </li></ul><ul><li>Use scr...
Conclusions <ul><li>Not using the ASP.NET Page model anymore. Remember to disable viewstate. Pages without any .NET contro...
Questions ? <ul><li>My email: mats.bryntse@avensia.se </li></ul>
Upcoming SlideShare
Loading in...5
×

Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET

3,112

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,112
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET

  1. 1. + Mats Bryntse, November 2008 www.mankz.com/ext.ppt High Performance Ajax with ASP.NET and ExtJS
  2. 2. Agenda <ul><li>About me </li></ul><ul><li>Setting up VS for working with JavaScript </li></ul><ul><li>Debugging efficiently </li></ul><ul><li>What is ExtJS? </li></ul><ul><li>Setting up ExtJS </li></ul><ul><li>Example 1 – Ajax request </li></ul><ul><li>Example 2 – Grid/FormPanel in ViewPort </li></ul><ul><li>Error handling in Ajax/Ext apps </li></ul><ul><li>Ajax performance </li></ul><ul><li>Conclusions </li></ul><ul><li>Questions </li></ul>
  3. 3. 2 sides of Mats <ul><li>SW engineer in Sweden at Avensia AB </li></ul><ul><li>5 years working with .NET, 1 year using Ext </li></ul><ul><li>No affilitation with Ext nor MS. </li></ul><ul><li>Alias ’Mankz’ in Ext forum </li></ul>
  4. 4. Setting up Visual Studio for working with JavaScript <ul><li>Get VS 2008 SP1 (adds JS intellisense) </li></ul><ul><li>First in your JS files, add Ext intellisense by using </li></ul><ul><li> /// <reference src=”YourExtFolder/adapter/ext/ext-base.js”/> </li></ul><ul><li>/// <reference src=”YourExtFolder/ext-all-debug.js”/> </li></ul><ul><li>Use JavaScriptLint / JsLint / JSure , map as External Tool or as a PostBuild command to find quickly find syntax errors </li></ul><ul><li>Decorate web services with [ScriptService] attribute to be able to call from script </li></ul><ul><li>No snippet support for JS </li></ul><ul><li>No function browsing as for cs/aspx/... files </li></ul><ul><li>Editing huge JS files like the ext-all-debug.js (35k lines) is a disaster in VS, there are other alternatives (Aptana Studio, JsEclipse) </li></ul>
  5. 5. Debugging efficiently <ul><li>Use the debugger; keyword in your JavaScript files </li></ul><ul><li>Use Fiddler (if nothing turns up in the log use localhost. or computer name for IE7) </li></ul><ul><li>Fiddler works for FF too ( by modifying proxy settings ) </li></ul><ul><li>Fiddler plugins : JSONViewer , SyntaxView </li></ul><ul><li>Use FireBug - plugins YSlow , FireCookie etc </li></ul><ul><li>IE developer toolbar - features ”Disable script”, ”Disable cookies” etc </li></ul><ul><li>CustomErrors property in web.config controls if callstack is included in web service exception </li></ul><ul><li>Get a ”view rendered source” plugin, for Firefox and for IE </li></ul>
  6. 6. What is ExtJS? <ul><li>What is ExtJS? </li></ul><ul><li>Including the full Ext library minified (not GZIPped) means around 550kb of JS and 80kb CSS </li></ul><ul><li>Also simplifies DOM-operations & event handling etc, though if that is the only thing you need you can find smaller libraries that fit your purpose better. Jquery weighs in at 15kb (minified and GZIPped) </li></ul><ul><li>Nice online documentation: http://extjs.com/deploy/dev/docs/ </li></ul>
  7. 7. Setting up ExtJS <ul><li>Latest ExtJS version is 2.2 </li></ul><ul><li>Including on a page: </li></ul><ul><ul><li><link href=&quot;ext-2.2/resources/css/ext-all.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> </li></ul></ul><ul><ul><li><script src=&quot;ext-2.2/adapter/ext/ext-base.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul><ul><ul><li><script src=&quot;ext-2.2/ext-all-debug.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul><ul><li>Include any Ext theme CSS file after the default ext-all.css </li></ul>
  8. 8. Example 1 – Ext.ajax.Request <ul><li>Code.... </li></ul>
  9. 9. Example 1 – Worth noting <ul><li>DOM ready detection - Ext.onReady(function(){ ... }) </li></ul><ul><li>Watch out for OnReady bug (called twice) in Ext2.2, user patch available but is not official. Thread in ExtJS forums : </li></ul><ul><li>Keep Ext overrides in a separate .js file </li></ul><ul><li>JSON data returned by .NET is served differently in .NET 3.5 and .NET 2.0 </li></ul><ul><ul><li>.NET 2.0 : Served bare </li></ul></ul><ul><ul><li>.NET 3.5 : Wrapped in {d:} to protect agaist JSON hijacking </li></ul></ul><ul><li>Using ’jsonData’ applies header ”application/json” </li></ul><ul><ul><li>Content-Type: application/json; charset=UTF-8 </li></ul></ul><ul><li>Using ’params’ property applies </li></ul><ul><ul><li>” Content-Type: application/x-www-form-urlencoded; charset=UTF-8” </li></ul></ul><ul><li>Using the [ScriptMethod(ResponseFormat = ResponseFormat.Xml/Json)] doesn’t always seem to produce the expected result. How you pass parameters to .NET control how the data is being served </li></ul>
  10. 10. Example 2 – Ext.grid
  11. 11. First, check out Ext.data basics
  12. 12. Example 2 - Code <ul><li>Ext.onReady(function() { </li></ul><ul><li>Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/default/s.gif'; </li></ul><ul><li>Ext.QuickTips.init(); </li></ul><ul><li>var record = Ext.data.Record.create([ </li></ul><ul><li>{name: 'Country'}, </li></ul><ul><li>{name: 'LastName'}, </li></ul><ul><li>{name: 'FirstName'}, </li></ul><ul><li>{name: 'ShippedDate', type:'date', dateFormat:'msajaxdate'}, </li></ul><ul><li>{name: 'OrderID'}, </li></ul><ul><li>{name: 'SaleAmount'} </li></ul><ul><li>]); </li></ul><ul><li>... </li></ul>
  13. 13. Example 2 – Worth noting <ul><li>Always add Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/default/s.gif'; </li></ul><ul><li>If you want JSON data in your widgets, create a custom HttpProxy to get the parameters json encoded </li></ul><ul><li>If returning data as DataTable/DataView/DataSet create custom a JavaScriptConverter to avoid circular reference issue . </li></ul><ul><li>Remember to set the root property of the JsonReader </li></ul><ul><li>Create override to handle MS JSON date format </li></ul><ul><li>Watch out for the maxJsonLength attribute in web.config, default value is 102400 characters </li></ul><ul><li>Same origin policy applies to XHR requests. Can be resolved by using ScriptTagProxy, see Ext forums. </li></ul><ul><li>Watch out for saving state in cookies using Ext.state.CookieProvider, Ext auto-generates component id’s </li></ul>
  14. 14. Error handling in Ajax/Ext apps <ul><li>When data doesn’t load as expected, first determine where the error is occurring (client or server) by using Fiddler/Firebug. </li></ul><ul><li>When using web services you loose the functionality of Application_Error in global.asax </li></ul><ul><li>To be able to log errors and control what’s being sent over the wire, you could either </li></ul><ul><ul><li>Wrap each web service call in try/catch blocks, lots of extra code </li></ul></ul><ul><ul><li>Use an AOP library(for example PostSharp AOP ) to inject the try/catch code at compile time </li></ul></ul><ul><li>Catch & Log JavaScript errors using window.onerror. Check PDF by Nicholas Zakas on Enterprise JavaScript Error Handling. window.onerror does not catch the ”Operation aborted” error if you modify the DOM too early. </li></ul><ul><li>Ext.lib.Ajax.request = Ext.lib.Ajax.request.createInterceptor(function(method, uri, cb, data, options) { </li></ul><ul><li>options.failure = options.failure || function(response, options) { </li></ul><ul><ul><li>// Log error </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  15. 15. AJAX performance <ul><li>Follow the tips from Yahoo Exceptional Performance team and use Yslow </li></ul><ul><li>Use script combining, minification ( YUICompressor ) and GZIP </li></ul><ul><li>Web service output can be GZIPped as well, test in Fiddler by setting Rules->Apply GZIP encoding </li></ul><ul><li>Use caching, make sure right versions of js/css files are being served. Append version number or last file write date. </li></ul><ul><li>Be aware of memory usage, Ext can be heavy on memory. IE6/IE7 have memory issues, use Drip/SIEve to track memory leaks. Lots of information on this in Ext Forums </li></ul>
  16. 16. Conclusions <ul><li>Not using the ASP.NET Page model anymore. Remember to disable viewstate. Pages without any .NET controls could be changed to static HTML pages instead. </li></ul><ul><li>You don’t have to use pages anymore, new apps could use Single Page Interface pattern for maximum performance. History/back-button and bookmarking is harder though. </li></ul>
  17. 17. Questions ? <ul><li>My email: mats.bryntse@avensia.se </li></ul>
  1. A particular slide catching your eye?

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

×