Any advice for optimizing web application

[smart+]

Hello,

I doing optimization (page speed, page size, viewstate size etc.) for our web application which is developed with ASP.NET and Ext.Net.
We mostly use DirectEvents for saving user data in our controls and JSON web services for reading data through gridpanels.
Also we using a lot usercontrols.

So, I have following questions:
1) On which Ext.Net controls is smart using EnableViewState="false" and for which controls is not?

2) If we set on page EnableViewState="false" does it disable viewstate on all Ext.Net controls in page or we must set this option separately on each control?

3) Can you advise any tool for optimizing our web site (viewstate size, page size etc.)?

4) Do you have any other advice for optimizing web application?

Thanx and best regards,
Sasa

[webclouder]

1. I would recommend to reduce/eliminate the use of user-controls: I built big application with awesome structure without using any user control. extjs/ext.net wrapped tooooo much stuff in the web controls that no other web ui controls do! so just sub-class the ext.net controls and do the customizations you need. take look at :
https://examples1.ext.net/#/Combinat.../Simple_Tasks/
and study the code deeply. although the example can be done in much faster way but it'll give you good kick on how to start doing things in the proper way!

2. in this point i'll give a hint that i would say its copyrighted to me unless someone else had that before [but feel free to use it]:
ajax is nice thing but sometimes we use it in wrong places: for example why on earth when we do page request to the server we wait until the page is domReady then we initiate ajax request to the server!! that very dump! I did that mistake myself be using json webservices with remote store i was loading the grid data after page response received from the server. so the fix is to do all possible things that can be done while you are in the server side before it return the response! when the system get too much users the number of requests to complete a task is very important compared to single little larger response!

hope that's help!!!

[smart+]

1. I would recommend to reduce/eliminate the use of user-controls: I built big application with awesome structure without using any user control. extjs/ext.net wrapped tooooo much stuff in the web controls that no other web ui controls do! so just sub-class the ext.net controls and do the customizations you need. take look at :
https://examples1.ext.net/#/Combinat.../Simple_Tasks/
and study the code deeply. although the example can be done in much faster way but it'll give you good kick on how to start doing things in the proper way!

2. in this point i'll give a hint that i would say its copyrighted to me unless someone else had that before [but feel free to use it]:
ajax is nice thing but sometimes we use it in wrong places: for example why on earth when we do page request to the server we wait until the page is domReady then we initiate ajax request to the server!! that very dump! I did that mistake myself be using json webservices with remote store i was loading the grid data after page response received from the server. so the fix is to do all possible things that can be done while you are in the server side before it return the response! when the system get too much users the number of requests to complete a task is very important compared to single little larger response!

hope that's help!!!

Thanx for your answers.

I looked this example and you are right, this is better way for developing application. But, for now I don't have any time for rewriting application (in future probably I would rewrite complete application on this way). Now, I need some advices for optimization without too much work.

Can you tell me about subclassing ext.net controls and writing UI,
do you use some special editor for doing this and than generate UI logic in .cs (C# code)?

I mean, without some editor writing UI on this way is difficult and need much more time.

[geoffrey.mcgill]

Hi,

In general, ViewState is not required. You can completely remove ViewState from being sent to the browser by setting DisableViewState="true" on the <ext:ResourceManager>. This can result in a significant weight savings depending on your Page.

Example

<ext:ResourceManager runat="server" DisableViewState="true" />

Another quick tip is to always try and use Layouts. Configure your components within the <Items> Collection of a Container, and set the .Layout property of the Container. Avoid directly adding Components to the <Content> section. Absolutely avoid using html <table> elements to layout your components.

Example

<ext:Panel runat="server" Title="Example" Layout="AccordionLayout">
    <Items>
        <ext:Panel runat="server" Title="Item 1" />
        <ext:Panel runat="server" Title="Item 2" />
        <ext:Panel runat="server" Title="Item 3" />
    </Items>
</ext:Panel>

Hope this helps.

[geoffrey.mcgill]

Moving to Open Discussions forum.

[smart+]

Your advice helped me and I see improvent.

I have other question about subclassing Ext.Net controls:
1) If I make some control in this way (for example, some Ext.net window control for user input),
how can I attach external .js script file only to this window which is destroyed after closing window?
Or I must make main .js script file which is linked in HEAD section on .aspx page (in this case main .js file can growth if I have a lot controls)?

Best regards,
Sasa

[webclouder]

it's not bad idea at all to have common/main js file shared between all pages. i do that myself. in your case the sub-classed window can have property that can be set to method signature implemented in main.js assuming all pages consume that window have the main.js defined in head section.

code segment:

public class SasaWindow : Ext.Net.Window
    {
protected override void OnInit(EventArgs e)
         {
            base.OnInit(e);
            this.Listeners.Show.Handler += String.Format(
                    @"doSomething({0},{1});", this.otherInternalControl.ClientID, this.ClientID
                );
           }
      }

where doSomething exist in main.js [var doSomething = function(a1,a2){//some stuff}]

Remember: Js file will be downloaded only once [then cached] unless its being changed! but that's should not lead you to make one with size above 50KB! make sure your code is optimized when writing js!

note: 50 KB is just a number of my choice [nothing standard about it].

hope this help

[smart+]

Thank you for answer and clarification.

I have for you one other question, because I see that you have a lot experience with developing web applications in that way:
1) In this above example (subclassed window) how can I declare custom store which I want use in this .js script

<ext:Store ID="storeProfil" runat="server" IDMode="Explicit">
    <Reader>
        <ext:JsonReader IDProperty="idrec">
            <Fields>
                <ext:RecordField Name="idrec" />
                <ext:RecordField Name="teachingposition" />
                <ext:RecordField Name="teachercabinet" />
                <ext:RecordField Name="teacheremail" />
                <ext:RecordField Name="teacherphone" />
                <ext:RecordField Name="teacherconsultation" />
                <ext:RecordField Name="teachercv" />
                <ext:RecordField Name="teacherpublication" />
                <ext:RecordField Name="teacherphoto" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>

I know how do this in markup, but I don't know if it is possible doing this through sublassing ext.net window.

[Vladimir]

Hi,

In the latest version of Ext.Net we added Bin property, using this property you can add any widget to the container.
Difference between Bin and Items:
- widgets in the Bin are not rendered automatically (I mean rendering on the client side to DOM)
- widgets in the Bin don't participate in the layout logic
- Bin is implemented for Store, Template, context menu and similar widgets (none UI or widgets are not required manual rendering (like context menu) )

Here is the sample

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        List<object> data = new List<object>
        {
            new {Text = "Text 1", Value = 1},
            new {Text = "Text 2", Value = 2},
            new {Text = "Text 3", Value = 3}
        };

        Store1.DataSource = data;
        Store2.DataSource = data;

        Store1.DataBind();
        Store2.DataBind();
    }
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FormPanel ID="FormPanel1" runat="server" Height="350" Width="300" Title="Form">
            <Bin>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Text" />
                                <ext:RecordField Name="Value" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
                
                <ext:Store ID="Store2" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Text" />
                                <ext:RecordField Name="Value" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
                
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem runat="server" Text="Item from Menu1" Icon="Application" />
                    </Items>
                </ext:Menu>
                
                <ext:Menu ID="Menu2" runat="server">
                    <Items>
                        <ext:MenuItem runat="server" Text="Item from Menu2" Icon="Note" />
                    </Items>
                </ext:Menu>
            </Bin>
            
            <Items>
                <ext:ComboBox ID="Combo1" runat="server" 
                    FieldLabel="Combo1"
                    StoreID="Store1"
                    DisplayField="Text"
                    ValueField="Value"
                    TriggerAction="All"
                    Mode="Local"
                >                
                </ext:ComboBox>
                
                <ext:ComboBox ID="Combo2" runat="server" 
                    FieldLabel="Combo2"
                    StoreID="Store2"
                    DisplayField="Text"
                    ValueField="Value"
                    TriggerAction="All"
                    Mode="Local"
                >                
                </ext:ComboBox>
                
                <ext:Panel runat="server" 
                    Title="Menu Area 1 - Click right button" 
                    Height="100"
                    ContextMenuID="Menu1"
                />                
                
                <ext:Panel runat="server" 
                    Title="Menu Area 2 - Click right button" 
                    Height="100"
                    ContextMenuID="Menu2"
                />   
            </Items>
            
            <Buttons>
                <ext:Button runat="server" Text="Get Store1" OnClientClick="alert(#{FormPanel1}.bin[0].storeId);">                    
                </ext:Button>
                
                <ext:Button runat="server" Text="Get Store2" OnClientClick="alert(#{FormPanel1}.bin[1].storeId);">                    
                </ext:Button>
                
                <ext:Button runat="server" Text="Show Menu1" OnClientClick="#{Menu1}.showAt(e.getXY());">                
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>

[webclouder]

that's very nice mr. Vladimir! you keep us amazed and happy by joining ext.net :)

+10000000 for Bin feature!

@smart+ use Bin or use examples and forums search [all UI controls can be created in code behind] but you have to be aware of asp.net events page cycle for best results!

this a summary i made for the events but you got study more in msdn to be in safe side!

while overriding ASP.NET page-life cycle EVENTs handlers follow these best-practices:
-if the base is .net framework then call the base.EVENT before anything.
-if the base is part of your framework call the base.EVENT after everything "last statement".
-use OnPreInit() for dynamic controls creation (work for asp.net but not ext.net as i remember
Checking IsPostPack property and setting themes/masterpage dynamically.
-use OnInit() for reading or initializing the controls properties only.
-use OnLoad() for attaching the events to events handlers, setting controls properties and establish DB connection.
-use OnPreRender() for binding controls to datasources and performing final changes.
-use OnRender()for registering controls scripts

if you want to know more about subclassing then server controls development is what you need to look at!

this post should help to do store in code behind:
http://forums.ext.net/showthread.php...ng-directEvent

Enjoy!