Using partial HTML UI + ASHX to speed up page loading

Just to share with everyone that I developed many LOB app (line of business application) and I'm still developing new LOB for my clients. LOB is very different from blog engine, corporate websites and static websites. In LOB, we can happily ignore the contents to be "readable" by SEO because some of the contents were loaded by AJAX.

As per my last blog dated 26th-June-2016, I mentioned the new strategy: JQuery + AJAX + partial HTML UI. Now, the question is how is partial HTML UI that can help out is speeding up the page loading? The answer is simple, we need to rely on the browser cache by checking the "If-Modified-Since" flag in the request header. Then, responding either status code 304 (resource has not been modified) or returning the partial HTML to the browser.

You will find tons of references if you are searching for "asp.net If-Modified-Since". Below is one of the reference that I found:

  http://madskristensen.net/post/use-if-modified-since-header-in-aspnet

The down side of this strategy is that the user will feel a bit slower on the first request to load the full page. But, the subsequent page loading or if the user is requesting for the same page, then, the time taken will be shorter. For example, we want to develop a page for user to key in the sales invoice and it allows the user from choosing the item from the list. The sales invoice is stored in a HTML file (not ASPX) and the item list HTML design is stored in another HTML file (where this item list will be reused by supplier invoice).

One of the advantage using this strategy is that it allows all these partial HTML file to be hosted in CDN (Content Delivery Network). Then, the whole LOB app will be loaded faster than using only one ASPX which could be crazily huge and hard to reuse some of the HTML design.

Note: "partial HTML UI" can be refer as "template" and it does not contains the HEAD and BODY tags. It just contains some DIV-s which eases the web designer to design and test in the browser. You don't need a programmer to start full coding but just some simple JQuery and AJAX to complete the demo.

Color settings in VS2015

After working years and years on computer, it's time to adjust the color in VS2015. This can be done by selecting Options from Tools menu. Then, look for "Fonts and Colors" under Environment and you may start editing the colors for "Text Edit":

• Plan text - adjust the background color to RGB(228, 228, 228)

I'm adjusting the background color to green color for the following options:

• Brace Matching RGB(0, 185, 0)
• Brace Matching (Rectangle) RGB(0, 128, 0)
• Hightlighted Definition RGB(185, 194, 154)
• Hightlighted Reference RGB(249, 182, 100)

You may have to adjust the text color to any color that you like:

• Preprocessor keyword
• User Types - xxx

You may also need these add-on:

ColorThemeEditor.vsix - to change the VS color scheme.

https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.VisualStudio2015ColorThemeEditor

VisualCommander_263.vsix - to automate some text to be injected and binding the command to shortcut key.

https://marketplace.visualstudio.com/items?itemName=SergeyVlasov.VisualCommander

Sample code to inject current date, time & my name to the text editor:

Sub Run(DTE As EnvDTE80.DTE2, package As Microsoft.VisualStudio.Shell.Package) Implements VisualCommanderExt.ICommand.Run

        Dim textSelection As EnvDTE.TextSelection
        textSelection = CType(DTE.ActiveDocument.Selection(), EnvDTE.TextSelection)
        textSelection.Text = "//" + System.DateTime.Now.ToString("d.MMM.yy") + ", myName-"

    End Sub

Don't forget to customize the "keyboard" and bind it to any shortcut that you like. As for myself, I reset CTRL+[0 to 9] and bind it with my command.

System design with ASHX web services (JQuery + AJAX + partial HTML UI)

Recently, we are working on a few new systems with ASP.NET. In the past, we are using Page (ASPX) + ScriptManager and we are facing some limitation in the system design which includes the following:

• The system does not allow the user to add a new "item" into the drop down list on the fly.
• The drop down list contains a few hundred items and we need to incorporate the 'search' functionality or paging to avoid all items to be loaded in one shot.
• The data submitted to server failed to meet the validation process and causing the entire page sent back to the client (which travel from client to the server and then back to the client).

To solve these types of problem, we need to have a new design to the foundation of the system.

• We must use JQuery + AJAX + partial HTML UI design so that it allows the user from adding "item" to the drop down list on the fly. The partial HTML UI will appear on the screen as a popup for user adding new item. After the user has submitted the new item to the server, validated OK and it will be added to the drop down list on the fly (with JQuery) without reloading the page or navigating to another page.
• The drop down list that contains lots of item will be replace by a textbox. Upon the user clicking on this textbox, the items will be loaded from the server (with AJAX calls) and then display in the popup (with JQuery + partial HTML UI). To improve the user's experience, you may consider the auto-complete feature upon the user typing the text or divide the data using the paging concept.
• We must do more AJAX calls for submitting the user input to be validated by the system. In case of any failure such as validation failed, the server should returns the error message only. This avoids the entire page to be re-created in the server and then send to the browser.

With the new design, the system becomes more responsive and lesser network traffic. But, we still have a problem on how to handle the AJAX call. Are we going to have one ASHX to handle one process (that will end up on lots of ASHX)? Or are we going to have only one ASHX entry point that handles all the requests?

To solve this problem, here is the list of frequent use "web service" to be implemented with Handler (ASHX):

• ~/q  - this web service handles the "query" that includes CRUD (create, return, update & delete) processes, daily process, ad-hoc process and all other business processes. The report request is another area which you may consider to put into this service.
• ~/t - this web service returns the "HTML template" (partial HTML UI design) to be injected to the current web page. By creating the partial HTML UI file, it allows the designer to work on the layout without have to go through all the JQuery + the DOM element generation (i.e., low level stuffs). Modifying the DOM elements using JQquery is very time consuming and it requires a more expensive Javascript programmer. But, we have done it with a cheaper costing. The nice partial HTML UI has been done by the designer and the programmer requires to populate the JSON data into the appropriate placeholder.
• ~/f - this web service handles all the file services that include upload, download/view. For example, when the user calls out the "contact list", it shows the profile photo of the contact. This profile photo IMG SRC is "~/f?contact_id=124567" where "contact_id" is the primary key value of the contact. It does not point to any physical file name. The "f" service will do all the necessary at the server side and returns the binary of the photo (an image file).

To setup the above shortcut, you have to create mapped URL in web.config. For example,

  <system.web>
    <urlMappings>
      <add url="~/q" mappedUrl="~/myWebService/q.ashx"/>
    </urlMappings>
  </system.web>

The design these web services:

• Client is making a request to the web service:
• "code" - the command code, object type or process code to be executed.
• "action" - this includes CRUD and other actions (such as run daily job, run hour job).
• "query parameters" - the query parameters are wrapped into a JSON object. For example, the client is requesting the customers who is owing more than $10,000 for more than 90 days.
• Responding to the client:
• "msg" - the message to the client. "ok" to indicate the query has successfully executed. Otherwise, it contains the error message.
• "list" - the list of JSON formatted data requested by the client. This information is optional.

Some of you might be thinking why we are not using REST for these web services. The answer is simple: we don't need to given definition to the "method". Such as PUT or POST method. What if the user wants to execute an ad-hoc process (POST or custom method)?

WebSocket

Implementing WebSocket in ASP.Net is quite easy. You need 2 components:

1. The ASHX that handle the web socket communcation.

2. The client side Javascript which sends message to the server and waiting for server message.

The WSHandler.ashx page resides in "WSChat" folder

<%@ WebHandler Language="C#" Class="WSHandler" %>

using System;

using System.Web;

using System.Threading;

using System.Threading.Tasks;

using System.Web.WebSockets;

using System.Net.WebSockets;

using System.Text;

using System.Collections.Generic;

using System.Linq;

//22.Dec.15,lhw-

public class WSHandler : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        if (context.IsWebSocketRequest)

        {

            context.AcceptWebSocketRequest(ProcessWSChat);

        }

    }

    public bool IsReusable { get { return false; } }

    private async Task ProcessWSChat(AspNetWebSocketContext context)

    {

        WebSocket socket = context.WebSocket;

        //<<=======

        MyConnection cn = new MyConnection(socket);

        _conn_list.Add(cn);

        //<<=======

        while (true)

        {

            ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]);

            WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, CancellationToken.None);

            //------------------------------------------------------------------------------

            if (socket.State == WebSocketState.Open)

            {

                string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);

                if (userMessage.StartsWith("helo from"))

                {

                    // user has signed in with his ID.

                    cn.uid = userMessage.Substring("helo from".Length, userMessage.Length - "helo from".Length).TrimStart();

                }

                else if (userMessage.ToLower().StartsWith("b:"))

                {

                    // broadcast the message.

                    userMessage = "You sent: " + userMessage + " at " + DateTime.Now.ToLongTimeString();

                    await Broadcast(userMessage);

                }

                else

                {

                    // echo the message

                    userMessage = "You sent: " + userMessage + " at " + DateTime.Now.ToLongTimeString();

                    buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage));

                    await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);

                }

            }

            //------------------------------------------------------------------------------

            else if (socket.State == WebSocketState.CloseReceived)

            {

                // remove current connection from the memory

                var v = _conn_list.Where(n => n.sess_id == cn.sess_id).FirstOrDefault();

                if (v != null)

                {

                    _conn_list.Remove(v);

                }

                // inform everyone that the current user has left the chat.

                await Broadcast(cn.uid + " has signed out");

            }

            else

            {

                break;

            }

        }

    }

    //------------------------------------------------------------------------------

    async Task Broadcast(string msg)

    {

        ArraySegment<byte> buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(msg));

        foreach (var item in _conn_list)

        {

            await item.socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);

        }

    }

    //------------------------------------------------------------------------------

    public class MyConnection

    {

        public string sess_id { get; private set; }

        public DateTime connected_on { get; private set; }

        public WebSocket socket { get; set; }

        // value from the browser. The user must send 'helo from xxx' where 'xxx' is the user id.

        public string uid { get; set; }

        public List<string> chat_room_list { get; set; }

        public MyConnection(WebSocket sk)

        {

            this.sess_id = Guid.NewGuid().ToString();

            this.connected_on = DateTime.Now;

            this.chat_room_list = new List<string>();

            this.socket = sk;

        }

    }

    static List<MyConnection> _conn_list = new List<MyConnection>();

}

The client side JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>WebSocket Chat</title>

    <script type="text/javascript" src="js/jquery-1.7.js"></script>

    <script type="text/javascript">

        var ws;

        $().ready(function () {

            $("#btnConnect").click(function () {

                $("#spanStatus").text("connecting");

                ws = new WebSocket("ws://" + window.location.hostname +

                    ":64495/WSChat/WSHandler.ashx");

                ws.onopen = function () {

                    $("#spanStatus").text("connected");

                    post_msg();

                };

                ws.onmessage = function (evt) {

                    $("#spanStatus").text(evt.data);

                };

                ws.onerror = function (evt) {

                    $("#spanStatus").text(evt.message);

                };

                ws.onclose = function () {

                    $("#spanStatus").text("disconnected");

                };

            });

            $("#btnSend").click(function () {

                if (ws.readyState == WebSocket.OPEN) {

                    ws.send($("#textInput").val());

                }

                else {

                    $("#spanStatus").text("Connection is closed");

                }

            });

            $("#btnDisconnect").click(function () {

                ws.close();

            });

            var _timer = null;

            function post_msg() {

                _timer = window.setInterval(function () {

                    send_msg('helo from lau - ' + (new Date()).getSeconds().toString());

                }, 300);

            }

            function send_msg(s) {

                if (_timer != null) {

                    clearInterval(_timer);

                }

                if (ws.readyState == WebSocket.OPEN) {

                    ws.send(s);

                }

                else {

                    $("#spanStatus").text("Connection is closed");

                }

            }

        });

    </script>

</head>

<body>

    <input type="button" value="Connect" id="btnConnect" />

    <input type="button" value="Disconnect" id="btnDisconnect" /><br />

    <input type="text" id="textInput" />

    <input type="button" value="Send" id="btnSend" /><br />

    <span id="spanStatus">(display)</span>

</body>

</html>