If you are new to AjaxView, read my previous post Ajax View – Rewrite Web App Code at Production Stage.  In this post, I am going to identify performance bottleneck of this blog site without touching the soul of my blog using AjaxView.  If you do not have AjaxView, download it from http://tinyurl.com/ajax-view-download.

Start Walking

  1. Configuring your browser.  AjaxView is running as a proxy (localhost) at port number 8888 so that you should configure your browser to listen from this proxy.  Since, this is a proxy tool, you can use any browser.  I am using Firefox, because IE is running for this blog post writing.
  2. Execute AjaxView.  AjaxView is running in a console window.
  3. Enter the URL.  Type http://www.udooz.net/blog.

Injected Instrumentation

You can do whatever you want in the site to profile the event you want to capture.  You can see the instrumented code based on the performance policy injected into the blog site code.  AjaxView injects necessary code for performing profiling, logging an send it to AjaxView at the head of the page.

<head profile=”http://gmpg.org/xfn/11″>
  <script>
      var PageLoadStart = new Date().getTime();
      // other var declarations
      var emk_OkToSendNextLog = true;
      var verbose = false;

      function emk_CheckLogs() {
          if( emk_LogRecords.length >= emk_MAX_LOG_RECORDS_BEFORE_FLUSH ) {
              emk_FlushLogs();
          }
      }
      function emk_FlushLogs() {
          // implementation
      }
      // other functions
</script>
</head>
<!– actual page code –>

Whereever required, it injects the profile code like the following

(tmpCache_emk_LogRecords.push(‘\r\nLM:PerformancePolicy:PerformancePolicy:SCRIPTENTER,’),
tmpCache_emk_LogRecords.push(new Date().getTime()),

During the loading and other execution of your web application, the above profile codes send the log details back to AjaxView using XMLHttpRequest.  See the following figure.

AjaxView Console

AjaxView Console

Getting the Results

Enough logging, now let us see the analyzed results of the logs by opening new tab in FireFox and type http://fakeurl.com/?&AJAXVIEWREQUEST=GET=main.html.  This is a fake URL for getting analyzed reports from AjaxView proxy.  A two column page will appear.  The left side contains the following links:

  • JS Performance Statistics
  • Proxy Statistics
  • LM Policies
  • Clear Statistics

Our focus in on JS Performance Statistics.

JS Performance Statistics

When clicking on JS Performance Statistics link, JavaScript related performance statistics will appear on the right side.  The result is in a three column tabular, with following items:

  • Site – Actual pages where JavaScript code find
  • Num Functions – The number of JavaScript functions in the page.
  • Worst Performance (ms) – Performance of the slowest function in the page.

In my blog web site, http://fakeurl.com//PerformancePolicy/PerformancePolicy/1646706643?&AJAXVIEWREQUEST=LMINFO shows slowest performance of 164 milliseconds.  By clicking the file displays another tabular results which contains number of JavaScript functions in the selected page.  Meantime (ms) for the function at http://udooz.net/blog/wp-includes/js/jquery/jquery.js?ver=1.2.6 actually shows lowest performance function with line and column details.  Here, it is 164 millisecond.  By clicking this shows the actual code.

Comparison with IE Development ToolBar Profiler

Let us verify the results with IE Development ToolBar’s JavaScript profiler.  The profiler shows the same set of functions with correct count details also.  But it varies in the time.  The highest maximum time was 109.38 taken by three functions.

Tags Tags: , , ,
Categories: JavaScript
Posted By: udooz
Last Edit: 30 Mar 2009 @ 12 09 AM

EmailPermalinkComments (0)
Problem
Monitor and control the client side behavior of a web application without modifying the current implementation normally in the case of production stage.

Forces

  • Finding client side performance of a web application in the production environment.
  • Making changes or adding instrumentation on client side code at production stage is dangerous.
  • HTTP profiling tools do not provide rendering time details.
  • Make the web application behavior uniform across different execution environments like IE 6, IE8, FireFox, Chrome, etc, since Array.sort() consumes processor utilization in IE than other browsers and Array.join() takes very less in IE than others.

SolutionWe are doing performance engineering of our web based product and now we are more concentrated on client side performance improvements.  With the help of available toolset like Fiddler, IE Development Toolbar and some others, it is possible to tweak the code points based on download time and size of the critical ASPX pages.  In addition to this, We would like to know the browser rendering or loading time of a behavior, however none of the tools do not provide such clarity.  IE Development Toolbar enables to profile JavaScript but in an ad-hoc manner. I was googled various places, and failed to get such tool.  I finished my journey at Microsoft Research where I found a tool called “AjaxView”, which enables to inject instrumentation code  such as performance profiling, infinite loop detection, etc on the fly even in the production environment by the following nature of web applications:

  • Easy and instant deployment
  • Dynamic extension (you can add any stuff on the response of a web request)

Thanks to Emre Kiciman and Benjamin Livshits at Microsoft Research for implementing this great tool.

How Does It Works

AjaxView sits between the web server and clients, acts as server-side proxy.  It intercepts and rewrites the JavaScript code generated from the web server for a web request by a client.  It does not affect the production (or development) environment.  See the following figure.

AjaxView Platform

AjaxView Platform

 The instrumented code is sent to the client browser and the instrumentations results are sent back as logs to the proxy by the adaptive and distributed instrumentation.  These log results are then analyzed and based on the instrumentation policies, the tool generates reports.  There are four components in AjaxView platform does this instrumentation.  See the following figure.  This image was taken from Kiciman and Wang’s Live Monitoring: Using Adaptive Instrumentation and Analysis to Debug and MaintainWeb Applications white paper at Microsoft Research.
AjaxView Components

AjaxView Components

 
These components are designed to achive the following based on the adaptive instrumentation approach:
  • A component (Transformer) which automatically rewrites the actual code to serve differently instrumented versions.
  • One or more components (Controller and Log Collector) which should continuously observe the end-to-end application behavior on the client side.
  • The observed results are then analysed and used to guide the adaptation of the dynamic instrumentation policy (Dynamic Extension Generator).

AjaxView supports the following broad categories of instrumentation policies:

  • Performance
  • Runtime analysis and debugging
  • Usability evaulation

Let us see a practical walk-through on the next post for better understanding of this tool.

References

Tags Tags: , , , , ,
Categories: JavaScript
Posted By: udooz
Last Edit: 29 Mar 2009 @ 11 01 PM

EmailPermalinkComments (1)
 25 Mar 2009 @ 7:44 AM 

Microsoft released Internet Explorer 8.0 a couple of days before.  When I installed RC1 months before, I had experienced some page crashes and degrade in performance and usability.  The most critical thing was loading “about:Tab” / “about:blank”.

The final release of IE 8.0 is impressed me lot not only for its performance and usability (of course, it is much faster than Chrome), its compliance with the industry standard and moving twoards the semantic web.  As a developer, it enables to write our web applications much standard way.  In addition to this, the IE 8.0 readiness toolkit enables to add new face to your web application.   From the compatibility perspective, it has three different rendering modes:

  • Quirks – backward compatibility with IE 5.0
  • IE 7.0 – backward compatibility IE 7.0
  • IE 8.0 (standard mode) – the latest

Let us see the IE 8.0’s new features and standards from developer view point.

Web Standards

CSS Expression has been deprecated in IE 8.0 (standard mode) due to its non-standard CSS extension and performane issue.  However, numerous non-CSS 2.1 properties are introduced with “-ms” prefix.  The filters also non-standard CSS, so they are now with “-ms” prefix.

  • Data URI Support.  An attractive feature which already exists on competative browsers is now introduced in IE family.  With this, you can enclose a resource content (or binary data) directly in the URL.  For example, this will help you to avoid unnecessary roundtrip to the server to fetch image data for a &lt;img&gt; tag “src”.   Once downloaded, it can be cacheable. Code sample is:

<img src=data:image/gif;base64, XyVRKzw0CClkeqva…

  • Improved Printing Support using CSS printing constructs.

AJAX now in HTML 5 Standard

  • AJAX Travel Log. AJAX enables to update page content without submitting the page i.e page navigation.  The problem with this is that the browser navigability components (back, forward and address bar) are not getting updated which confuses the user to traverse through their travel log.  IE8 treats window.location.hash updates like navigations and saves the previous document URL.
  • DOM Storage. Cookies are the only way to store bit and pieces of data on client machine today which is limited to 50 key-value pair per domain.  IE 8.0 implements W3C’s HTML 5.0 DOM storage, where you can store per-domain and per-session data as like as Silverlight’s Isolated Storage.  With DOM storage and the new window.navigator.onLine and online/offline events, you can make your application to work in offline mode.   See the following code:

var globalStorage = window.globalStorage["http://www.udooz.net"];

or

var sessionStorage = window.sessionStorage["http://www.udooz.net"];

// to check browser offline

if(!window.navigator.onLine) // do offline behavior

  • XMLHttpRequest Enhancements.  The inventor of XMLHttpRequest object made some enhancements related to timeout in IE 8.0.  This makes better breath for pages with long running or polling type of asynchronous requests.
  • Concurrent Connections.  Based on the internet connection type (narrow 0r broad band), IE 8.0 opens more concurrent connections (max: 6).  Developers can check this number and optimize their delivery.

Cross-domain Communication

  • XDomainRequest. In the Web 2.0 era, mash-ups are very common and critically acclaimed in the enterprise world too.  The fundamental nature of mash-up is getting data from different servers (or services).  The current limitation is when you need data from another domain you have to send your request to your server.  Your server pass through the request to the respective domain and get the data.  To avoid these unnecessary (?) pass-through layer, IE 8.0 introduces XDomainRequest object, you can directly communicate cross-domains.  However, the permission should be granted by your web server using Response.AddHeader(“XDomainRequestAllowed”, “1″); 
  • Cross Document Messaging (XDM).  Even though the XDomainRequest breaks the cross-domain barrier, still widgets with data supplied from different domain cannot interact with each other in a web page.  There are different workarounds for this.  Added to these, IE 8.0 provides “postMessage()” in window object as like:

window.postMessage(“Cross-domain communicated”, “http://www.msn.co.in”);

  • toStaticHTML.  This new method filters potentially harmful HTML content.

Visit http://msdn.microsoft.com/en-au/ie/dd433173.aspx#AJAX for more details.

Native JSON Support

IE 8.0 uses douglas crockford’s JSON API, so that you can natively call JSON.stringfy() and JSON.parse() methods.

In addition these, there are so many other features which makes IE 8.0 more near to the semantic web arena.  I’ll cover those details in a separate post.

Tags Tags: , , , ,
Categories: Semantic Web
Posted By: udooz
Last Edit: 25 Mar 2009 @ 07 44 AM

EmailPermalinkComments (0)

Problem

Consume the application logic from presentation tier with domain entities those are specialized for this tier with minimal plumbing.

Forces

  • Set of code (validation, authentication, etc) to be written specific to presentation tier and the same needs to be written specific to business tier.
  • Automated way to share the logic between the tiers with trusted boundaries.
  • Agile way to consume business logics to RIA (particularly Silverlight) applications.
  • Line of RIA based business application those are not required to scale of SOA.
  • Data driven applications those are again not required to scale of SOA.

Solution

.NET RIA Services framework supports end-to-end use of data from DAL (data access layer) of your choice to presentation tier.  The data can be shaped for presentation tier.  This framework was built on ASP.NET to define and support a pattern for exposing a set of operations on your domain object to presentation tier particularly Silverlight.  A domain object contains set of CRUD and custom business operations with domain entities.  In this framework, the domain object is called as “DomainService”.  Once you define a DomainService at business tier based on the data from database using ADO.NET Entity Framework or LINQ2SQL, this framework generates code corresponding client tier code that can be used for data binding, validation, authentication, etc.

The following image which was taken from .NET RIA Services guide gives you to understand how this framework is designed to scale across different presentation technologies and DAL components.

.NET RIA Services

References

Tags Tags: , , ,
Categories: Silverlight
Posted By: udooz
Last Edit: 20 Mar 2009 @ 09 10 AM

EmailPermalinkComments (1)
 19 Mar 2009 @ 12:40 AM 

For those whomsoever Silverlight x.x may concern, this is the news for you. Microsoft has released Silverlight 3.0 today at MIX09 with numerous new features and improvements.

In addition to 60+ new UI controls and new features, I am really excited with the following features:

  • Silverlight would NOT be isolated from Web 2.0.  With the support of deep linking (making a hyperline that points to a specific page or image on another website), you can bookmark a page.  You can make your database driven Silverlight contents as search engine compatiable.
  • Binary XML.  This compressed one allow you to pass reduced size of data on the wire.

Important Note

Once you installed Silverlight 3.0 Beta tools for Visual Studio 2008, Silverlight 3.0 is the only choice for you.  You cannot use Silverlight 2.0 SDK.

New Features

  1. 3D. This allows to place contents on 3D plane and you can do transformations without writing any additional code.
  2. Easing functions for Animations.  These functions allow you to create and use so many specialized animation effects such as spring and bounce.
  3. Pixel Shaders. Based on HLSL (High Level Shader Language), you can do effects like blur, drop shadow and custom effects.  The instruction sets are targeted for GPU.
  4. New Bitmap API. These APIs allow you to edit photo bitmaps.
  5. Bitmap Caching. This allows to cache UI elements which improve performance.
  6. Out of the box. Now you can make your Silverlight applications as a stand-alone web component which can be executed out of browser.
  7. H264 Video Support. This codec support enables to deliver MPEG-4 quality with a frame size up to four times greater.

Improvements

  1. Simple control skinning.
  2. Improved text rendering and font support.
  3. Application library caching. This reduce application size which imrove performance.
  4. Enhanced deep zoom.
  5. Communication between two Silverlight applications on same client.

Download the SDK and VS 2008 SP1 tools at http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=11dc7151-dbd6-4e39-878f-5081863cbb5d.

Start learning this beta SDK at http://silverlight.net/getstarted/silverlight3/default.aspx

Happy Coding!.

Tags Tags:
Categories: Silverlight
Posted By: udooz
Last Edit: 19 Mar 2009 @ 12 40 AM

EmailPermalinkComments (0)
 06 Mar 2009 @ 12:30 AM 

What is NGen?

A tool comes with .NET framework, which is used to generate native image of a managed assembly.  

The managed assemblies (.dll and .exe)  contain IL code that are not understandable by native operation system.  When executing the managed application, JIT compiler  compiles the IL code into native code.  This would require some amount of memory for JIT compiler and the application takes some time on start-up. 

NGen provides pre-compilation option so that you can compile your application IL code into native code one shot before starting the application itself.  The .NET framework libraries, Paint.NET are some applications use NGen.

How it works?

NGen invokes “Compilation Worker” when you give a managed assembly for native code generation.  Compilation Worker loads runtime and uses JIT compiler to create native code.  It places the JIT generated native code into the assembly cache in a file with name ”YourAssemblyName.ni.dll”.  This file is generally called as “native image”.  The cache folder path is %Windows%\Assembly\NativeImages_v2.0.50727_32.  When you run the application, CLR finds the native image of an assembly and executes it, if the assembly exists on cache; otherwise it does normal path.

Advantages

  • Lesser application start-up time.  Since compilation and module load are not required for native image.
  • Sharable. The NGen generated native image contains memory base address details so that once an assembly is loaded into memory it can directly be usable by another applications those require the specific assembly.

Is It Value-Add?

The advantages make us very happy after all we are the guys working behind virtual machines a.k.a CLR.  However, you cannot write a single rule of thumb for NGen usage.  Using NGen is varied based on the situation or requirement.  One rule of thumb for NGen would be:

Do not use native images for server side applications.  The assemblies for a server side applications are loaded and JITted only once at the first time of request.  For succeeding requests, the JIT compiled codes are executed.  So, there is no benefit using NGen on server side application.

Consider the following for client side applications before decide to use NGen:

  • NGen is not so smart to load native image for a managed assembly.  CLR gets fail to load native image, if it finds assembly version, CPU and CLR version mismatch.
  • The native code generated using NGen are not purely optimized for underlying environment in compare with JIT compilation.  JIT compiler generates more optimized code for the target environment.
  • NGen generated codes typically contain base address which may results more process consumption if the particular base address is already claimed by another application.  Despite C# compiler’s “/baseaddress” option may fix this issue, however a smart way need to be applied which is most of the time not considered. Simply, sharable nature of native image is not consistent.

So, “Think twice before NGen” for client side applications.

Tags Tags: , ,
Categories: .NET
Posted By: udooz
Last Edit: 06 Mar 2009 @ 12 30 AM

EmailPermalinkComments (0)
 04 Mar 2009 @ 8:47 AM 

In 2004, I had bought “Software Factory” book written by Microsoft techies and it was more conceptual and theoretical. This book approaches the model driven development (MDD) in a different perspective, and introduces software factory and domain specific language (DSL) concepts. The theory was successfully implemented in VSTS. Unfortunately, it was not mature and very inconsistent. The software factory and DSL tools were only used by Microsoft itself. They did not touch the heart of ISVs. Event though, I have used Microsoft’s Webclient Software Factory (WCSF) and WCF Service Model Factory successfully and bit consistently in one of our product development. I had really seen the benefit of MDD approach from DSL perspective upfront. However, I am expecting the mature and stable version of this.

Thanks God, Microsoft concentrates more on this and came up with “Oslo”. The hot core part of Oslo is Oslo Modeling Language “M”. The definition for M in MSDN:

M lets users write down how they want to structure and query their data using a convenient textual syntax that is convenient to both author and read.
With Oslo, Microsoft boosts the software factory concept. You can design and develop your application with UML 2.0 standard using M. M is a textual and declarative language which enables you to write down what you want from your data without worrying about underlying technology and platform. M will compile both on Win and Linux.

In parallel, Microsoft is developing Quadrant, a model designer for M which allows you to design graphically.

You can save your models in SQL Server.

Hope, we can see a smart changes in our SDLC by Oslo.

Tags Tags: , , ,
Categories: Design
Posted By: udooz
Last Edit: 04 Mar 2009 @ 08 47 AM

EmailPermalinkComments (2)
 04 Mar 2009 @ 8:43 AM 

Interstingly, when I typed the term “microformats”, my hand confused and typed “Microsoft”. :) However, it took some period to adopt this standard by major web vendors Microsoft and Mozilla.

What is Microformats?
This is one way of enabling web as semantic. The current web markups are very keen on displaying content on the browsers. As an user we know what is on the page, as a system it just displays it. However, how can develop a system to organize, collect and manage the contents from web pages? Previously, it is impossible. There are millions of terra bytes of content exist in the web. But now, Semantic Web which was initiated by Tim Berner Lee helps us to make this possible.

Microformats are one such standard which reuse existing markup elements to convey semantic of the data. For example, the following snippet shows a hCard telephone contact details.

<span class=”tel”>
<span class=”type”>home</span>:
<span class=”value”>+91.044.111090190</span>
</span>

Oomph

Microsoft Oomph is a toolkit to for web developers, designers and users, making it easier to create, consume, and style Microformats. It comes up with:

  • IE add-in to parse Microformats in web pages.
  • Pre-defined CSS styles for Microformats.
  • A cross-browser HTML overlay for Microformats aggregation.

Visit: http://oomph.codeplex.com/ to know more and download the toolkit.

Tags Tags: , ,
Categories: Semantic Web
Posted By: udooz
Last Edit: 07 Mar 2009 @ 01 46 PM

EmailPermalinkComments (0)
 04 Mar 2009 @ 8:27 AM 

At Microsoft Lab, they have developed a language called Spec# for extending C# long back.  The extensions covered now are:

  • Non-null types
  • Preconditions
  • Postconditions

The main outcome of this is Code Contracts .NET.  For more details, http://research.microsoft.com/en-us/projects/specsharp/.

Tags Tags: , ,
Categories: Uncategorized
Posted By: udooz
Last Edit: 04 Mar 2009 @ 08 27 AM

EmailPermalinkComments (2)
 03 Mar 2009 @ 5:54 PM 

Hello All,

I am very happy to announce the launch of my very own blog udooz.net/blog for my technology blogging.

Thank God.

Cheers,

M Sheik Uduman Ali

Tags Tags:
Categories: Uncategorized
Posted By: udooz
Last Edit: 03 Mar 2009 @ 06 08 PM

EmailPermalinkComments Off
\/ More Options ...
Change Theme...
  • Users » 1
  • Posts/Pages » 54
  • Comments » 39
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight