Monday, March 28, 2016

Problems With Abstraction over DI Container. a.k.a : Conforming Container

Recently , I've started to build a project by using onion architecture. And  I have followed  one of the basic principle of software  designing  that says  ;


 "Program to an interface, not an implementation"
which is quite accurate. However , I've lost at some point when i was designing my infrastructure layer. I came up with the idea of putting an abstraction over DI framework and designing top layers without them knowing which DI framework is used in application. Aim was in case i want to swap my DI framework , I could do it easily at Infrastucture layer by adding a concrete container implementation and activate it on runtime. One common container abstraction to rule them all!

At first it appeared quite logical to me , so I've made a researched on github if someone already done it and  I've found ;  LAN.Core.DependencyInjection .

This implementation was exactly  what i was looking for except that they didnt implement container for  Autofac  which i am currently using in my project. I added source codes to my project and made Autofac implementation myself. Everthing was great, so abstract!

Well, not really. Problems occured as your needs in your project grow. Autofac is quite rich framework in terms of functionality and it was so wrong to restrict it to a common abstract container. I ended up adding those functions up to the abstract container.It slowly turned into Autofac container itself!

As a result, I just removed that abstraction because it was going to be an abstraction on another abstraction which is not really good. And i was recently reading  Mark Seemanns  blog and I have seen my faul design there , which is described as an anti-pattern :  Conforming-Container

In summary ;  do not put abstraction over your DI framework and make it more complicated. It will create more problems than it solves. Just use DI framework as itself!

Regards,

Sunday, March 20, 2016

Internet Explorer Performance Tips

Recently at work,  I  was asked to develop an HTML Grid  to be replaced  with current Grid we do use in our web application. The reason was, the grid  we use was simply insufficent in terms of usability ( has lack of features )  , visuality ( had some visual problems in same cases and at some IE versions )  and extendability . Source code of  the existing  grid component  was poorly documented, badly coded and hard to understand. So I've decided  not to maintain existing grid component , develop a new one instead.
Long story short  ; I've found the amazing Datatables which is a jquery plugin that provides awesome, extendable and easy to use  html grid. After finished  developing the required grid ( that has custom filters, customized css , customized sorting and paging ...etc)  started to test it. It was working great on Chrome. However, it was extremely slow on Internet Explorer.
In my test ,  1.500 records of json data was bound to the HTML grid. It was taking 3-4 seconds for Chrome to render, while Internet Explorer was rendering it in about 50-55 seconds.
It was unacceptable.I knew IE's rendering performance was shit, but still  I wasn't expecting this kind of slow rendering.Since , in our company we use Internet Explorer as browser for our application, i had to work on the grid and optimize it for IE.

After searching performance killer function calls by using profiler , we made some fixes and could manage to make our grid render 1.500 records in 9-10 seconds on IE. It was still bad performance comparing to Chrome , but it was kinda acceptable.


TL DR; Here are tips

  • use  table-layout: fixed; If you rendering table , use  : 
    
    table-layout: fixed;
    
  • Avoid using  css class selector :    Class selector is an optimization killer for IE. Especially if the page is crowded in terms of DOM.  Better  select element by id , or  narrow down the element set.
For instance; 


$('.filter-row');// Bad performance 
$('#myTable .filter-row') ; //Better performance
$('#myTable #filterRow') ; // Much better performance
  • Use pure javascript instead of jquery functions :  No doubt, jquery is great. Makes javascript much easier and readable. However, this comes with a performance cost. Each jquery call is extra CPU cost for us. It is nothing big , but if you need to call a jquery function like 1500 times ( as in my tests) ,things get slow. If your priority is performance  better use pure javascript functions.
You can see it by yourself by using  IE Profiler.  In my case, i had function calls such as ;  html()  , wrapInner , addClass  and removeClass. After converting them to pure javascript calls , i got huge performance boost.

I would be glad to hear advices, tips or questions from you as well. Waiting for comments...