Thursday, November 18, 2010

guidelines for asp.net development

<!–

ASP.NET Development
guidelines

<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
for ASP.NET AJAX
Performance Improvement

Among the 95% of the .NET developers that said they are
using some flavor of Ajax either in production, development or prototype, the
most used AJAX Framework is ASP.NET AJAX, with 73,7%, followed by the Ajax
Control Toolkit which is used by almost half of the .NET developer that are
using Ajax.

However ASP.NET AJAX model is showing performance problem.
The web application developed in ASP.NET AJAX makes the site slow down.

So following are the few of guideline which will help you
out to improve performance of ASP.NET AJAX application. This will basically
apply to the ASP.NET AJAX version 1.0 final release.

  1. Use HttpWatch to check the network traffic.
    1. This is one of important tool using which you can check the data returned by
      the server. There is dedicated tool available for this. Moreover to that
      you can also utilize Firebux extension of firefox to watch network
      traffic. The dedicated tool is available for the download from following
      URL: http://www.httpwatch.com/download/.

      This is a limited feature version.

  2. Use "ScriptReferenceProfile" to show Javascript reference
    1. ScriptReferenceProfiler is an open source tool on CodePlex, for analysis the JavaScript
      references of ASP.NET AJAX, we can simply add the following code to our
      page in order to show the JavaScript references imported by
      ScriptManager.

      <microsoft:scriptreferenceprofiler runat="server">

</microsoft:scriptreferenceprofiler>

You can obtain it from the following URL

Reference: http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=13356

  1. Web.Config Optimization
    1. To have optimized web.config file our application, all we need to do is to
      have a compression and caching is enabled in web.config file for the
      ASP.NET AJAX Includes. You can use the following code in web.config file
      to enable compression & caching for AJAX includes.

      <system.web.extensions>

      <scripting>

      <scriptResourceHandler enableCompression="true" enableCaching="true"/>

      </scripting>

      </system.web.extensions>

      Also check before and after result of before and after of enabling
      caching & compression in network traffic.

      Now this is limited to the compression and caching for AJAX includes. In our site we also
      generally have many other script files included. There can also be no. of
      different CSS files, JS files etc. We can also compress them so that It make fewer request in bytes.

      Basically there is no any method available in ASP.NET which allows the
      compression of JS & CSS files. We need to do it manually and
      reference those compressed file in our application.

      One very key important point to consider is related to change management
      of those files. Once you have compressed file in place and referenced in
      your different pages, If your JS file or CSS
      file need to have any modification, then you again have to recompress it
      from newer version.

      So this method should be adopted for such scripts or CSS which are less
      frequently changed.

      There are different tools available which allows your script and CSS file
      compression. Following are the different methods which can be used for
      this purpose.

      1) Yahoo compresser (http://yui.2clics.net/)

      2) http://www.vlead.in/resources/tools/minify-javascript/index.php
      (The best one which I utilized)

  2. Optimization of ScriptManager
    1. The ScriptManager control manages client script for AJAX-enabled ASP.NET Web
      pages. By default, the ScriptManager control registers the script for the
      Microsoft AJAX Library with the page. This enables client script to use
      the type system extensions and to support features such as partial-page
      rendering and Web-service calls. Following, we need to setting
      the property of ScriptManager to optimize the performance of ASP.NET
      AJAX.

<!--[if !supportLists]-->·
<!--[endif]-->Set "scriptMode" to Release.

for e.g.

<asp:ScriptManager ID="ScriptManager1″
runat="server" ScriptMode="Release">

</asp:ScriptManager>

Moreover to this set "debug" mode in "compilation" section of web.config file
to false.

<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

<!--[if !supportLists]-->·
<!--[endif]-->Disable partial page rendering

If we using the UpdatePanel in the page, we must set this property to true,
conversely, if the UpdatePanel is not using in our page, it would be better
that we set the EnablePartialRendering to false.

For e.g.

<asp:ScriptManager ID="ScriptManager1″ runat="server"
EnablePartialRendering="false">

</asp:ScriptManager>

  1. Move All Script Tags After Body Content
    1. ASP.NET ScriptManager control has a property "LoadScriptsBeforeUI", when set to
      false, should load all AJAX
      framework scripts after the content of the page. But it does not
      effectively push down all scripts after the content. Some framework
      scripts, extender scripts and other scripts registered by Ajax Control
      Toolkit still load before the page content loads.

So these are the basic general guidelines which can be
followed one by one to have an improved ASP.NET AJAX response.



<!--[if !supportLists]-->·
<!--[endif]-->Guideline
for ASP.NET Application Performance

Following, I will demonstrate some of important guideline
for the improvement of ASP.NET application. These guidelines should be
implemented carefully by taking into consideration of development needs. It is
not necessary to have all following steps followed.

  1. Removing unnecessary HTTP MODUES from site.
    1. There are several ASP.NET default HttpModules which
      sit in the request pipeline and intercept each and every request.

      For example, if you aren't using Membership and Profile provider, you
      don't need "FormsAuthentication" module. If you aren't using Windows
      Authentication for your users, you don't need "WindowsAuthentication".

      We can remove those unnecessary references of HTTP modules from
      web.config using <remove> tag.

      Generally following are the HTTP modules which are not generally used in
      our current development architecture.

      <remove name="WindowsAuthentication" />

      <remove name="PassportAuthentication" />

      <remove name="AnonymousIdentification" />

      <remove name="UrlAuthorization" />

      <remove name="FileAuthorization" />

  2. Removing or compressing "VIEWSTATE" from page
    1. We can override few of method of default System.Web.UI.Page class of .net
      framework.

      Use the following file and include it in your project's APP_CODE.
      Inherits rest of all your pages from this page instead of regular System.Web.UI.Page
      class.

      Ref: BasePage.vb
      <!--[if !supportLineBreakNewLine]-->
      <!--[endif]-->

  3. Use caching for pages which changes less frequently
    1. There are several ways to use the cache; we'll focus on the easiest tricks to
      get you started, then point you toward some resources that will help you
      tackle more advanced ways to utilize the cache.

      The simplest solution is to use the OutputCache directive on your pages
      or user controls.

  4. Disable VIEWSTATE for pages where no Grid related functionality.
    1. One should set the VIEWSTATE disabled in those pages where there is no grid
      level manipulation. When we have a simple page with no complex logic, it
      should be disabled.

      Moreover to that set the following pages which are not security
      sensitive.

      1) EnableViewStateMac="false"

      2) ViewStateEncryptionMode="never"
      <!--[if !supportLineBreakNewLine]-->
      <!--[endif]-->

  5. Use classical ASP type of page for normal pages.
    1. Another important point is to use a classical ASP type of pages which are simple.
      Those pages which do not have any complex display should be developed
      like normal ASP pages. Please check the following referenced page for
      this similar purpose.

      these are such files which do not have underlying code behind file
      attached to it.

      We can also utilize the feature of "include" file method which is there
      in classical ASP.



<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
for structuring ASP.NET Application

In the following, I will demonstrate the basic guidelines
for the structuring of any web application.

See these guidelines are generally be best suitable for SEO
oriented sites. It can also be adopted for general site also keeping
requirement in mind.

These guidelines are prepared keeping modularized
development in mind. So there are no such tricks that by following them you
will be able to better structure your site. One should do the do modularized
development in their programming also to achieve this.

  1. Use dedicated folders for JS & CSS files.In a site generally there are different JS & CSS files for different
    functionality. These JS & CSS files should be accordingly structure
    inside your website. Please take a look at the following example for the
    better illustration of this method.

    Say for e.g. in a site few pages have functionality to display a jQuery
    zoom light box when anyone click on the image of product.

    So following should be the structure of JS & CSS files.

    In this example, assume there are also few global JS & CSS. So I will
    also demonstrate the purpose of integrating them in site.

    Root

    |___js

    | |___lightbox

    | |___lightbox.js

    |____|___global

    |____jquery-1.2.6.min.js

    |____common.js

    |___css

    | |___lighbox

    | |___ lighbox.css

    |________global

    |____global.css

    This modularization can also be used to
    differentiate CSS & JS for each page of site.

    Modularization is also not limited to the CSS & JS files, one can
    follow same modularization concept across different type of files also
    like XML content, flash content, image folders etc.

    <!--[if !supportLineBreakNewLine]-->
    <!--[endif]-->

  2. Use proper naming conversion in CSS files.
    1. Care full design of CSS classes and attributes provide better traceability. As
      you just shown above that the CSS & JS can be modularized. We should
      also use proper naming convention in those CSS file. If you follow these
      conventions, you can easily identify respective class.

      Say for e.g.

      you set naming abbreviation of respective CSS as per below.

      1) global.css
      = glb

      2) lightbox.css = lg

      so now you can have following CSS class/section defined in respective css
      files.

      like in global.css

      glb-main

      {

      }

      .glb-title

      {

      color: #7D3D0D;

      font-family: Arial;

      font-size: 20px;

      font-weight: normal;

      text-decoration: none;

      clear: both;

      }

      in the same way, you can also different class in lighbox.css

      .lg-dvtop

      {

      width: 100%;

      margin: 20px 10px 10px 10px;

      }

      .lg-content

      {

      width: 700px;

      height: 600px;

      }

  3. Configure
    APP_CODE to have two sub directories. Each sub directory can be used for
    different language. It is generally like following.

    APP_CODE
    |___VB

    |___CS

    Respective programming files should be placed in respective folders. Also
    make sure to configure code sub directory in web.config also.



<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
before final release of site

Following, there are some important and necessary checks
that web-sites should be checked against before the official launch.

  1. Favicon
    1. A favicon icon the tab or window in which your website is open in the
      user's browser. It is also saved with the bookmark so that users can
      easily identify pages from your website.

      for e.g.

      <link href="images/fav_icon.ico" rel="icon"
      type="image/Jpeg" />
      <!--[if !supportLineBreakNewLine]-->
      <!--[endif]-->

  2. Title & Meta data
    1. Your page title is the most important element for SEO and is also important so
      that users know what's on the page. Make sure it changes on every page
      and relates to that page's content.

      Also one should make sure that related meta data
      details are also get placed in every pages and are changes as it should
      be to different pages.

  3. Cross-Browser Check
    1. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox
      3, Safari 3. Following are the few methods used to do cross browser check

      1) XecoCode (http://www.xenocode.com/browsers/)

      2) IETester (http://www.my-debugbar.com/wiki/IETester/HomePage)

      3) Browser shot (http://browsershots.org/)

  4. Links
    1. Don't just assume all your links work. Click on them. You may often forget to
      add "http://" to links to external websites. There may be case when some
      URL rewriting related prefix or postfix would be forgotten.
 

No comments: