Showing posts with label telerik controls. Show all posts
Showing posts with label telerik controls. Show all posts

Sunday, July 17, 2011

Asp.Net MVC vs Asp.Net Web Forms

We were working on this project which was build using C#, .Net 4.0 and Asp.NET Web Forms.

I come from a Java background where MVC pattern has been around since ever.  There are tons of Java based web frameworks out there that implement the MVC pattern.  It looked quite surprising to me that, till very recently there was no equivalent of MVC pattern in the .Net world.  But, recently the things have changed, Microsoft has come up with its own implementation of the MVC pattern called Asp.NET MVC3.

I certainly like the MVC approach over the Web Forms approach for multiple reasons, I had to present these reasons to the client and convince them to move to Asp.Net MVC3 instead of the current Asp.Net Web Forms approach.  Finally, after quite some talking and presenting and discussions we managed to convenience the client to adaopt the Asp.Net MVC 3 approach over the Web Forms approach.

This blog post highlights the points why I think, MVC makes a better choice as the presentation framework over Web Forms.

Separation of Concerns (SoC) And Single Responsibility Principle

If you ask me, what are the two most important principles which helps in keeping the code clean, modular, readable and maintainable?

My Answer would be, Separation of Concerns (SoC) and Single Responsibility Principle. 

Its extremely important that every class in the system has a well defined job for itself.  No class should try and do too many things, in fact it should do only *one* thing and do it well (Single Responsibility Principle).  If one class tries to do too many things, then the code of the class would be messy, difficult to understand and maintain.

The code behind classes of the Web Forms approach are victim of this problem.  Lot of times, I have seen the code behind classes are bloated and are longer than 2000 lines.  Such classes are difficult to maintain and understand.  The code looks convoluted.

Why does this happen?  

Because, code behind classes have lots of responsibility.  They deal with
  • Showing the view
  • Dynamically rendering JavaScript
  • Updating the model
  • Validating the values entered by the user
  • Implementing some business logic
  • Making a call to the service
  • Differentiate the Post and Get requests etc.  
End result is a truly complex and gumped up code behind.
MVC on the other hand, implements these principle very well.
  • Controller classes are only responsible to update the model, decided which view to render and that's about it.
  • Views only responsibility is to use the model to render itself.  
  • Model just holds the business realted information.  
End result of all this is clean, modular, readable and maintainable code.

MVC gives full control over the rendered HTML

In the Web Forms approach, we were using third part controls called Telerik controlsAt times its really difficult to control the HTML that gets rendered from these controls.  Many times the HTML that is rendered is more complex than what would be required.  Because of this, designers find it difficult to style it the way they want it.

With MVC, you get full control of the exact HTML that gets rendered.  This is an absolute boon for the designers and developers

Unit Testing

I don't want to talk about how difficult it is to unit-test web forms code behind classes.  The web form code behind classes are tightly coupled with things like Session, ViewState Request, Response etc.  This makes them extremely bad candidates for unit testing.  To unit test web forms code behind classes one needs a very strong will and extremely good mocking and Unit testing skills.

On the other hand, MVC has been build with Unit Testing in mind.  One can easily do Test Driven Development with MVC controllers.  Controllers are not coupled with Session or Request or Response object which makes them easily unit testable.

Search Engine Optimizations and RESTful URL's

Web Forms application URL's end with .aspx extension.  They represent a physical file in the file system.  The MVC URL's do not have any extensions.  They do not logically map to a file on the file system.  Instead they map to a controller and an action method inside the controller.  The URL of MVC application look like
  • http://localhost:8080/appname/customer/create
  • http://localhost:8080/appname/customer/1
  • http://localhost:8080/appname/customer/list
  • http://localhost:8080/appname/customer/edit
Integration with Third Party JavaScript libraries

Its difficult to integrate the web forms application seamlessly with a JavaScript library.  For e.g. If you wanted to do Ajax with jQuery in a web forms application, imagine how much code you will have to write.  How will you render the dynamic HTML in this case.  How will you preserve the view state?  Its all very messy.

With MVC, we do not have a problem like this ever.  By default, MVC application comes integrated with jQuery.  However, you could go ahead and integrate any other JavaScript library of your choice.  Since view is not tightly coupled with controller integrating any JavaScript library is extremely easy.

No IsPostBack

I think there is no Asp.Net application in the world that does not have code which looks like

One class/method to handle both the get and post requests. At every step we have to decide whether its a get request or a post request and change the business processing.

This is infrastructure code. We should not be bothering about checking whether the request is a get request or a post request. Framework should do this for me.

With MVC, we do not have to keep checking whether its a get request or a post request.  We can simply put an attribute to a method marking it only accessible via the GET request or only accessible via the POST requests.  With MVC the above code would look like

Notice that we simply have to mark which methods are invokable over which protocol using either the HttpGet or HttpPost attributes. End result, simplified and easy to understand code.

No View State 

Web Forms provides a wrapper over the stateless HTTP protocol to make it state-full.  It achieves this by adding a hidden field called __VIEWSTATE__ to the rendered page.  If not handled correctly and especially when you are using some third party control library like Telerik controls ViewState can easily get out of hands.  I have see pages that have ViewState that goes in MB's.  This ViewState will be sent/received to/from the server for every Post requests.  Its sent/received to/from the server even when you do a Ajax request.  The performance of such pages goes for a toss!

MVC has no concept of ViewState.  MVC does not add a wrapper over the stateless HTTP Protocol.  In fact it harnesses the HTTP protocol.  Hence, MVC pages are much faster and they can easily out perform the Web Forms counter parts on any day. 


These are some of the points why I think, MVC is definitely a better choice over Web Forms for building Customer Facing, fast Web 2.0 applications.  

This list is by not means an extensive comparision of Web Forms vs the MVC appraoches.  Just some little peaces which I though were really important.

We have made our choice to move to MVC, have you?

Monday, March 21, 2011

Telerik Controls - A perfect example of how not to do things!

As you might have known already from my previous post, in one of my projects we use Telerik Controls extensively for showing various GUI controls.

I personally *hate* using Telerik controls.  Lot of people have asked me, why I hate them, hence for the benefit of the community, I have decided to document the reasons of my hatred for Telerik controls.

Telerik has provided a lot of controls that could be used in variety of situations.  They have provided lots of demos for various controls that they provide.  Looking at just the demo, anyone will be impressed with these controls and would want to give them a shot.  But, once you start using them, you will realize how badly they have been architected.

Oh! by the way, tell me one thing.

What are demo websites meant for?

I would say, to showcase the power of the product/tool.  Demo websites make the first impression about any product/tool.  Its extremely important to get this right.  But, for me, Telerik has failed in making a solid impression.

The Telerik controls demo website does not working in Firefox 64 bit!  

My hatred starts here.  More and more machines are getting 64 bit OS pre-installed on them.  Companies and People are moving towards 64 bit platform.  If entire Telerik demo website not working on Firefox 64 bit, its a shame if not anything else.

I am going to bitch about some of the basic Telerik controls, because I believe, if you can't get the basics right, you cant get it right at all!


Lets talk about the most basic Telerik control, the RadTextBox.  You might feel, surely there is nothing wrong with the text box right!  But unfortunately, Telerik has got the most basic control wrong.

The asp.net code to use the RadTextBox in your page looks like

Nothing fancy here right? Yes, I would agree. The asp.net code does not look too bad. Lets look at the generated HTML for a moment.

What? Where did the "span" and two extra "input" tags come from?

Yep, believe it or not. One RadTextBox gets rendered as a span and three input tags!

Why would any one decide to render one Text box as using three input tags!

Whats the problem with rendering one TextBox as three input tags?

Well, none of your traditional JavaScript would work!

For e.g. lets say, you were using jQuery for your JavaScript manipulation (BTW, jQuery is an excellent JavaScript framework.  I recommend it for every web based project!  Great work guys!), the code to update the value of the text field to "Hello World" should look like

But unfortunately, the above code does not work. Since Telerik uses 3 input tags to render one text box the above JavaScript code does not set the value of the text field!

Instead, Telerik provides JavaScript wrappers for their controls.  In this case to update the value of the first name text box we have to use the following JavaScript.

Update: $find function is part of the Telerik JavaScript.  $find is part of the "MicrosoftAjax.js".  Thanks bugventure for pointing me to the right direction.

This effectively means none of the awesome jQuery api can be used with any of the Telerik Controls.

Yes, you read it right.  I will say it again, JQuery api would not work as expected with Telerik Controls. 

Imagine, how you will show/hide, enable/disable the text box. What about adding/removing a class from the text box. These are just a few examples of what you will not be able to do using jQuery because of Telerik controls.  Believe me, without jQuery, JavaScript manipulation is going to be tough!

Now you understand my frustration?

Lets look at one more control and I promise we will be done after that.

RadComboBox:

This one is my favorite control, I just love bitching about this control.  I am amazed at how badly they have messed this up.

The asp.net code to use the RadComboBox in your asp.net page would look like

The above RadComboBox is suppose to show users a list of countries. Notice that, we have not attached any special behavior to it.

Before looking at the generated HTML, do you want to take a guess at how should it look like?

10 Bucks if you get this right!

But, I can guarantee that,  the generated html looks nothing like you would have thought

Usually for us "the mortal developers", Combo Box is rendered via the "select" tag.  We use CSS to style it.

But, Telerik had different plans for the Combo Box.  May be, Telerik thought,

"Oh! that is too simple, lets make peoples lives complicated". 

Telerik uses a complex tree of "div's, ul, li, table, tr, td, a, input and an hidden input", for something that could have been easily achieved using a simple "select" tag, some JavaScript and some CSS!


Telerik, did you forget the KISS principle?

I am simply speechless!  What can I say, its a disaster.  Needless to say that, the traditional JavaScript does not work with Telerik RadComboBox.

This is just developer side of the problem.
  • What about automated functional tests?  
  • What about the QA's who take so much effort to write functional tests using selenium and other tools?
Tools like selenium rely heavily on use of traditional JavaScript, because of this functional tests written using these tools do not work well with Telerik Control.

For e.g. looking at the html generated for a simple combo box, imagine what will the code look like to select a country from the drop down.  Its just terrible.

One last thing and I will stop.

Lets say, if you wanted to do something when client side onblur event occurs for a RadTextBox and RadComboBox.  This is how you will have to do it.

The above code shows how we attached an client side onblur event with RadTextBox. Lets see how we have to attach the client side onblur event for the RadComboBox

Did you notice the inconsistency between two Telerik controls themselves?

I can only say, surely there are better ways of doing things!


Telerik, if you are reading this, you better pull up your socks and start doing some major rearchitecting!

I think that is enough bitching for a post.

Ah, almost forgot, if you are still interested in using Telerik Controls in your project, you need to pay for it, They are not free!

Wednesday, March 9, 2011

31 reasons to hate IE. Styles not loading up?

Recently, I have been facing quite a few issues with IE.  And believe me all of them are really weird.  My hatred for IE is at all time high :)

I mentioned about a bug in IE8’s Lookahead Downloader in one of my previous post.  This post is dedicated to another such bug in IE.

What was the issue we were facing?

The problem we were facing was weird.  A page would render correctly on all browsers except IE (of course :)).

Yea, I know, nothing new about such behavior right?  But this issue is special in many ways.  Why?

Because:

I have decided to stay away from Telerik controls as much as possible.  If you asked me, I would only suggest to never ever, never ever, never ever, use them in your project.  The more I use them, more I get convinced not to use them ever.  

Why I hate Telerik controls so much?  

May be I will write that in a separate post.  

Why are we using it in our project?  

Client is not yet ready to move on.  

Anyways, Let me stop bitching about Telerik controls and focus on the issue we were facing.

The frameworks that we were using, assure that the site renders correctly on most modern browsers including IE.  Then why would it not render correctly on IE?

What were the rendering issues we were facing?

List box does not have proper styles
Alert box does not have proper style
Menu bar is unaligned and does not have proper styles

Look at the things highlighted in red in the above screenshot.

The issues we were facing were:
  • Sometimes List Box would lose its styles
  • Sometimes Alert box would lose its styles
  • Sometimes Tab Strip would lose its styles

Initially, I was really confused, didn't know what exactly was going on.  

Decided to intercept the HTTP traffic using Fiddler, to find out what is wrong with IE.  Why is it not sending requests for certain styles?

Found out that, IE does send requests for all style sheets.  But, IE just prefers to ignore a few style sheets (of course without showing any error)!  Typical IE, isn't it?

Googling a little we found that:
  • IE will load only the first 31 style sheets and will ignore the rest of the styles for a page request. This includes the <style> attribute tag as well if defined on the page
  • IE load only 4095 CSS selectors for a single request
  • On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

Have a look at this link for more details.

That was it, we discovered another hidden treasure of IE!  Don’t we love IE for such hidden treasures?

The solution was simple enough, we removed few unused CSS references from the page.  Bingo, the page started working!

PS:  Why where unused CSS referred on the page?  Long story.  We will keep that for some other post.  Till then keep having fun with IE.

Have some Fun!