Too many scripts will slow us down

by ishaih 3/1/2009 9:01:00 AM

I’ve been ‘away’ from this blog for a while. It’s been a very interesting year for me but I’ve been neglecting this blog for too long.

If you’ve read the previous posts, you can see I’m not a big fan of the Asp.Net postbacks and update panels. Too much information is sent back and forth for small actions that can be easily done in javascript.

As I’ve shown before, there are hugh performance benefits to using client side rendering in a web app. Instead of sending the entire HTML for every request, we load javascript code for creating that HTML once and after that we just send the data for subsequent requests.

One of the side effects of moving from server side rendering is that you start getting more and more javascript files. I’ve been using JQuery for a while, there are a lot of great plugins for JQuery, but loading all of those include files introduces some problems:

  1. More scripts = more requests = more loading time
  2. Managing includes can become messy

Using a Script Combiner to reduce the number of requests
Ideally you want to have only one js file and one css file, but you don’t want to have your files merged while you’re developing, a hugh file will be a pain to work with. The solution is to merge all the scripts into one big file later, either in the build process or at run time.
if you use the same scripts for all pages in your app (or if you have a one page app), merging during the build process is a good solution but I needed different files for different pages.

Asp.Net AJAX 3.5
If you’re using Asp.Net AJAX 3.5, achieving this is very simple. The scripts from Microsoft will already be combined by default and to add your own scripts all you need to do is include your scripts using the ScriptManager.

<asp:ScriptManager runat="server" ID="ScriptManager1" >
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/JScript1.js" />
            <asp:ScriptReference Path="~/JScript2.js" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

Script Combiner - The Other Solution
If you don’t use Asp.Net AJAX and don’t want those scripts loaded (or you’re still using 2.0) you can create your own handler to combine scripts.
Here’s a project I foundby Omar Al Zabir (Who wrote the excellent book Building a Web 2.0 Portal with ASP.NET 3.5 and co-founded PageFlakes)
You might want to change the way you decide which scripts to load, I use an xml configuration file to specify the location of each script file and which js files should be loaded based on the page name that’s passed to the handler. (I use the page name as the key for now). I also have a separate path for the minified version and the debug version, and based on a config I use the right one

<ClientScripts>
   <Script name=”jquery” minPath=”Scripts/JQuery/jquery.1.2.6.min.js” debugPath=”Scripts/JQuery/jquery.1.2.6.js”/>
   <Script name=”jqvalidation” minPath=”Scripts/JQuery/plugins/jquery.validate.min.js” debugPath=”Scripts/JQuery/plugins/jquery.validate.js”/>
</ClientScripts>
<Pages>
   <Page name=”home” Scripts=”jquery,jqvalidation” />
</Pages>

There are several benefits when using this custom handler

  • You can use it for css files too
  • It compresses the js files using gzip
  • The files are only read from the file system once and are then cached on the server for subsequent requests
  • You can easily add versioning to the handler and set client side caching to never expire.
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Currently rated 3.7 by 3 people

  • Currently 3.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

AJAX | Asp.Net | Javascript

Upgrading ASMX web services to WCF

by ishaih 6/15/2008 9:21:00 AM
There is a lot of information on the web on using WCF for JSON, but I figured I’ll writing something short on the way I use it.

When I decided to try WCF, the first thing I noticed was how simple it was to upgrade. All you need to do is add a new WCF Service to the web project, copy the code from the ASMX service, change the [ScriptService] to [ServiceCntract] and the [WebMethod] tags to [OperationContract] and add some definitions in the web.config file.
You’re supposed to use a separate Interface to define the service contract, but it’s not a must and you can add the tags to the actual class with the implementation.

The second thing I noticed is that I can get JSON by changing some configuration settings.
When I was working on the AJAX search page, WCF was not around (it was by the time I posted the series on it here). I used XSLT to transform data to JSON and arrays. It was another step I had to do on the server side but it’s worth it, JSON is smaller than XML and very easy to work with in JavaScript.
With WCF I just change a small definition and I get the results in JSON, no need for the XSLT transformation.

Another thing we get with WCF is Data Contracts. The way I’m using it in this sample, it’s pretty much the same as using the .Net AJAX GenerateScriptType.
All I had to do is add a [DataContract] tag to the class and [DataMember] tags to each property.
I think it’s better to define this on the exposed class itself instead of adding some register definition in a web service.

The attached project is the same search page sample with the WCF service. The changes to look for are:
  • The new DataService.svc file
  • The Entities.QueryParameters classes now have the DataContract tags
  • web.config has the new serviceModel section at the end, that defines the service as an HTTP JSON enabled service
  • default.aspx – the service defined in the ScriptManager was changed to the svc file and the path was updated in the javascript Search method

WcfAjaxSearchSample.rar (883.99 kb)

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

AJAX | Asp.Net | WCF

Ajax Data Controls (Repeater, Data List and Grid View)

by ishaih 2/18/2008 1:14:00 PM

ADC is a set of data controls that try to mimic the Asp.Net controls using Asp.Net AJAX Extensions.

I'm looking at the GridView in particular, although I never really liked the Asp.Net control, the AJAX version might work well for my search pages.
For the current project I'm working on I won't be using the server side wrapper, just the client side code.

The grid view control supports paging, sorting, column dragging, links, checkboxes and in-place editing.

I'm going to try it out, see if it takes the places of my upgraded WebFXColumnList...

check it out at Ajax Data Controls - Home

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

AJAX | Asp.Net | Javascript

You should never forget your (browser) history

by ishaih 2/18/2008 10:44:00 AM

One of the most annoying things in AJAX based applications is clicking the back button and going back to a previous url and not the previous state of the application.
Users are trained at clicking the back button if they went to the wrong place and need to get back to the last place they were at. Even when I know I'm using an AJAX app, I would click it by mistake.

What happens when uses click the back button in your AJAX application?
I've worked on a lot of back office web applications and when an application uses AJAX with only one real page (in the same way gmail does), clicking back will usually take you to the login screen, and that's not where you wanted to go.

Adding History to an AJAX application
Fortunately, this problem has been solved. You can manipulate the browser history and control what happens when a user clicks the back button.
Even better, Microsoft’s AJAX library adds easy support for setting history points and going back to them, so you don't have to write the code yourself.

Let’s take a look at the AJAX search sample, where we had next and previous buttons to navigate the search results.

Whenever a results page is shown I want to add a history point.

Here's the code I'll use to set a history point in JavaScript:

Sys.Application.addHistoryPoint({showPage:pager.CurrentPageIndex},'MyTakeOnNet - Search Results - Page ' + pager.CurrentPageIndex);


Sys.Application.addHistoryPoint takes two parameters, the first one can be any object you want, you will use this object to decide what to do when the user goes back to this history point. the second parameter is the title of the page.

If you add this line of code to the pager's ShowPage method, you'll see the history button's drop down will have a new entry for each page.


Handling the history navigation
Every time a user navigates through the browsers history by clicking the back button or selecting a history point from the back buttons drop down, the MS AJAX library raises an event.
To subscribe to this event, add the following line of code when the page loads.

Sys.Application.add_navigate(onNavigate);

and add the onNavigate function to handle the event
function onNavigate (sender, e) {    //get state and make change to application    var state=e.get_state();    if (typeof(state.showPage) != 'undefined') {        if (pager.CurrentPageIndex != state.showPage)            pager.ShowPage(state.showPage);    }}

The get_state() call will return the object you saved as the first parameter of the history point, you can then use this parameter to show the page.

Pretty simple, right?
It does get more complicated if you remember that a user might execute several searches and page through them, so the search parameters should be saved as well with the history point.
You have to make sure you cover the entire state of you AJAX enabled page to make sure you can re-create that state when the user clicks the back button, but at least you don't have to write the code to deal with the browser's history
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Currently rated 4.7 by 3 people

  • Currently 4.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

AJAX | Asp.Net | Javascript

How To: Use connections not saved in web.config with the Data Application Block

by ishaih 2/15/2008 6:18:00 PM
While working on the search pages solution (read about it here) I realized I need to be able to save data connections in a database.

I’m using a database to manage everything that has to do with the application itself (membership, roles, search page info, etc…) but the actual data comes from other databases.

The Data Application Block supports using different connection as long as these connections are defined in the web.config file.
Because I didn’t want to make changes to the config file too often, and I also wanted users to be able to add new data connections without my help, having these connections in a database will be great.

After looking through the data block’s code, I realized I need to create a new configuration source.
I figured someone has already done this, and sure enough, a quick google search later I found out that such a solution exists right there in the enterprise library’s Quick Starts folder.

I quickly added the SqlConfiguration project to my solution and thought my problems were solved.
Unfortunately, it just didn’t work.
I also didn’t really want to save the entire connections section as on row in a table, that will make it harder to maintain. So I decided to create an implementation just for the connections section and inherit the rest for the SqlConfiguration.

The DataConnections table:
ConnectionId
ConnectionName
ConnectionString
ProviderName

you can see the columns are the same as the connection attributes in web config.


The Configuration Source:

namespace IshaiHachlili.RapidBackOffice.Configuration.ConnectionsSqlConfigurationSource
{
    public class ConnectionsSqlConfigurationSource : IConfigurationSource
    {
        private string defaultConnectionString = String.Empty;
        private const string GetConfig = "EntLib_GetConfig";
        private const string SetConfig = "EntLib_SetConfig";
        private const string RefreshSection = "EntLib_UpdateSectionDate";
        private const string RemoveSection = "EntLib_RemoveSection";

        public ConnectionsSqlConfigurationSource()
        {
            if (ConfigurationManager.ConnectionStrings.Count > 0)
            {
                defaultConnectionString = ConfigurationManager.ConnectionStrings[0].ConnectionString;
            }
        }

        public System.Configuration.ConfigurationSection GetSection(string sectionName)
        {
            if (sectionName != "connectionStrings")
            {
                IConfigurationSource source = new SqlConfigurationSource(defaultConnectionString, GetConfig, SetConfig, RefreshSection, RemoveSection);
                return source.GetSection(sectionName);
            } 
            ConnectionStringsSection section = new ConnectionStringsSection();

            //System.Configuration.ConnectionStringsSection
            //Get the connections from the DL
            ConnectionsDL dl = new ConnectionsDL();
            IDataReader dr = dl.GetDataConnections();
            while (dr.Read())
            {
                string connectionName = dr["ConnectionName"].ToString();
                string connectionString = dr["ConnectionString"].ToString();
                string providerName = dr["ProviderName"].ToString();
                section.ConnectionStrings.Add(new ConnectionStringSettings(connectionName, connectionString, providerName));
            }

            return section;
        }
    }

    public class ConnectionsDL
    {
        public IDataReader GetDataConnections()
        {
            Database db = DatabaseFactory.CreateDatabase();
            DbCommand cmd = db.GetStoredProcCommand("GetDataConnections");
            IDataReader dr = db.ExecuteReader(cmd);
            return dr;
        }
    }
}


The GetDataConnections stored procedure simply returns all the connections in the DataConnections table.
Because I'm using the CreateDatabase() method with no DB name, the default database will be used. This is the management database for my application and the only connection that will be saved in the web.config.


Using the new configuration source in the data layer

protected Database getDatabase(string DBName)
{
    if (String.IsNullOrEmpty(DBName))
        return DatabaseFactory.CreateDatabase();

    IConfigurationSource source = new ConnectionsSqlConfigurationSource();
    DatabaseProviderFactory factory = new DatabaseProviderFactory(source);
    Database db = factory.Create(DBName);
    return db;
}


I added this method to a base class that all the classes in my data layer inherit from. now instead of using the DatabaseFactory.CreateDatabase() I use getDatabase(DBName).
As you can see, when there's no DBName, I still use the DatabaeFactory method, there's no reason to get the connections from the database when using the default connection that's saved in the web.config.
You can also add caching to avoid calling the database everytime you need to get the connections list.
Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Asp.Net | Enterprise Library | Sql Server

Powered by BlogEngine.NET 1.3.1.0
Theme by Mads Kristensen

About the author

Name of author Ishai Hachlili
I've been developing web applications using Microsoft technologies for over 10 years. This is my way of doing things, it might be a little different...

E-mail me Send mail

Calendar

<<  July 2010  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar

Pages

    Recent comments

    Authors

    Disclaimer

    The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

    © Copyright 2010

    Sign in