Archive for the 'Web Dev' Category

The first website I’ve ever worked on…

Cleaning up my hard drives and found this

The first site I’ve ever worked on

The site is dated back to 2001, the first site I’ve ever worked on (and get paid for it) back when I was in high school grade 10. I guess I’ve come a long way since then :).

No Comments »

Teera on May 22nd 2009 in Web Dev, Personal

ASP.NET MVC Q&A

Last week I presented at BC .NET user group and there are a number of good questions I didn’t have time to answer. So here’s a recap.

Download sample code here

Why would I choose ASP.NET MVC over traditional WebForms?

The answer to this question deserves its own post. So you can read it the answer here. 

I’m an ASP.NET WebForm developer, how difficult is it for me to learn MVC?

Although development on MVC framework is different from WebForms, I don’t think it is difficult at all. In fact, if you are familiar with the MVC pattern, polymorphism, HTML, HTTP, and how the web works in general, you’ll feel right at home with MVC.

The fastest way to get a to know MVC is to create a new blank MVC project in Visual Studio and look at how the  HomeController class, model, view (under the folder Views/Home/Index.aspx), and routing in Global.asax are put together.

From this, you’ll get the basic idea of how MVC wire things up together. After that there are a number of sample applications you can inspect:

These 3 sample applications should be able to demonstrate how you can get MVC to work and how you can effectively leverage the framework and pattern. Also don’t forget to check out loads of tutorial on ASP.NET MVC website. 

Should I use JQuery with MVC? Can I use other JavaScript library?

ASP.NET MVC is shipped with JQuery (I believe now it’s 1-3.2 version), but you are NOT tied to the library. You can use any client side library you want. My team and I have been using MooTools for most of our MVC projects.

What do you mean when you say that ASP.NET MVC is stateless?

WebForms keep state (original values of ASP.NET controls on a page) inside ViewState. This ViewState is usually stored as a hidden field or inside a session. When an ASP.NET form does a postback, the server side then reads the values kept in the ViewState, restores the controls object model, and allows you to manipulate the values. This is the way ASP.NET WebForms tries to make the web stateful (every controls seem to remember their previous values).

ASP.NET MVC does NOT rely on ViewState. MVC view interacts with the controller (server side) via simple form post request to designated URI. All the values are encapsulated within the HTTP request. The server side controller only works the posted values and return final output of rendered HTML back to the browser.

Can I use both WebForm and MVC in one project?

Yes, you can but it is NOT recommended. In the project I’ve worked on, there are a migration period where we have to have both WebForms and MVC coexist in one project. Although it is possible to have both, it comes with a price of maintainability.

Do I have to use TDD or BDD in MVC project?

You do NOT have to do TDD or BDD in your MVC project. Test-Driven development is a good development principle but MVC is not tied to it.

How can I do databinding in ASP.NET MVC?

Please see the sample code accompanying the presentation. In the source code download, I show 2 ways of data binding, one with using <% foreach %> and another binds to ASP.NET repeater control.

Can I still use user control in MVC? Is there any 3rd party controls or components for MVC?

You can still use user controls in ASP.NET MVC via Partial Rendering. Though you may have to simplify your user control code for consistency with the framework.

AFAIK, I don’t think there’re free controls for ASP.NET MVC released just yet. But you really should check out MVC Contrib project on CodePlex, it offers a lot of helper classes that you will find very useful. On the commercial side, Telerik has released its MVC-Compatible web controls suite.

What about Ruby on Rails?

There were a lot of people showing interest in learning more about Ruby on Rails after the presentation. And I think they definitely should check it out. A lot of good ideas from Ruby on Rails community have been incorporated into MVC framework. But despite what some people would say, I don’t think ASP.NET MVC is intended to be Rails-clone.

I do work on Ruby on Rails as well and they are different. One reason that Rails is cool is because it leverages a lot of dynamic feature of Ruby the language. The only similarity I see between ASP.NET MVC and Ruby on Rails right now is the fact that it implements the MVC pattern and good guiding principles such as Convention over Configuration, DRY, and YAGNI.

If you want to learn and find out more about Ruby on Rails, it’s definitly worth check out this free online course.

Any comment or questions, feel free to leave comment on this post or contact me at teera@zolomedia.com

Why would I choose ASP.NET MVC over WebForm?

During my presentation on ASP.NET MVC  last week, an audience asked me the question of why he should consider MVC over ASP.NET WebForm. Hence this blog post.

ASP.NET MVC is an alternative to implement web site/application on Microsoft Platform. It has been emphasized countless times that it’s not a replacement for WebForm. WebForm will continue to improve in parallel with MVC.

MVC incorporates a lot of feedback on the lacking of WebForms. It also adopts a lot of good ideas from other community especially Ruby on Rails community. IMHO, here are why you should consider MVC over WebForm

Simplicity for complex application

From my experience, WebForm works well when the application is simple and well-architected from the get-go. But when you build a complex web app, the layer of abstractions can become a thorn.

Imagine a common complex scenario, you have a nested master pages and a user control in the content page. You want the user control to call change binding of a DataGrid in the top-level master page and trigger DataBind() method when pre-render event of the user control is executed? This is a common scenario when you build a large enough application with ASP.NET WebForm, and it can easily make your application become unmaintainable. The cause of this is ASP.NET WebForm tries to abstract away complexity and web based environment (HTTP, statelessness, REST). It promotes event based model like that of the desktop application.

ASP.NET MVC promotes a simpler way to develop an application. Following Model-View-Controller pattern, master pages, pages, user controls (partials), take the data model passed from controller and manage their own rendering. ASP.NET MVC framework does not try to abstract way complexity but address it with the pattern.

Designer Friendliness

ASP.NET MVC gives you more control over HTML. WebForms “Controls” tries to abstracts complexity with auto-gen gibberish IDs, hidden fields, and auto-gen javascript. This can be a big deal if you work with designers who have no experience working with ASP.NET. Most of the designers would agree with me that

this

<h3>Products</h3>
<ul class="productList"/>
 
<% foreach(Product product in ViewData.Model.ProductList){ %>
 
<li><img src="Photos/<%= product.ProductID %>.jpg" /><br/><%= product.Name %></li>
 
<% } %>
 
</ul>

makes more sense than

Sample code of ListView

Testability

If you don’t do Test-Driven Development or don’t do testing this is probably not a big deal for you :). And it’s probably OK if you don’t test your application. I’ve been working in several teams on large scale project whose done zero testing.

But I am a TDD practitioner and believe that testing is good. So, ease of test is a big deal for me. It is possible to do TDD and good testing coverage with WebForm but it is not easy. I did try Model-View-Presenter on WebForm but it comes with a price of complexity and bloated code. Just for the sake of testing. A good testable framework should allow you to do this without additional complexity. I found it fun and much easier to do this with MVC.


WebForm is not evil!

All that said, I don’t think WebForm is evil at all. MVC and WebForm are just different and there are times when I would recommend WebForm over MVC

Investment in WebForm for existing projects

Although some aspect of webform and MVC can coexist in the same project, it is not recommended. And converting your WebForm project to MVC is not trivial.

MVC may requires more investment

MVC offers you a greater control over your development, however, that means you have to roll up your sleeves and invest a more in extending the MVC framework to get it to work as you expect. Unlike Rails, MVC framework does not provide you with full support in many aspects, especially in the Model (’M’ of the MVC).

That’s why we now have multiple view engines to choose from and different inversion of control containers. Some people are comfortable with choices and building their own extensibility, but not everybody does. In terms of tooling, Microsoft still have to give developers answer in Visual Studio. IMHO, the tooling support for MVC is not there yet.

Another related issue would be the use of open source libraries in your projects. There are a lot of open source libraries and extensions available for MVC. You can find it a lot easier and fun if you can use them, but this is not the case for all projects.

3rd party controls and component

If you are working on application that rely on 3rd party controls and components it might not be a good idea to switch over to MVC (at least not yet). Especially when the components are in the core or crucial part of your application, I would suggest you stay with WebForms until your component vendors have something to offer in MVC space. Some 3rd party controls vendors like Telerik already made components that work on MVC.

Developers preference

In the end, if you are project managers or business managers, you really should talk to your development teams on what they’re comfortable with. Many developers prefere working with WebForms, especially if they have background in desktop application development. If a developer is new to web application development, he/she may find MVC to demand more learning on MVC and web environment.

Well, and that’s my not-so-short answer to the question. If you have any further questions or want to discuss more please feel free to comment on this post or drop me an email at teera@zolomedia.com

When to do the TODOs

Yesterday I worked on fixing up a legacy Java code and I found it laced with a lot of  “//TODO” comments. A class with most TODOs topped at 12. Worse, these TODOs are mostly critical make-or-break feature and assumptions. Here’s an example:

public void run(){
 
   ...  //TODO: Should notify user for failure and rever the transaction
 
  //or we can set a maximum number of rety or batch processing?
 
   if(resultBatchId == 0){
 
      //Should not happen!
 
      resultBatchId = 1;
 
}
 
   ...
 
}

I was baffled when I saw this kind of coding througout an application that is now running live. Worse, to apply fixes to some of these todo tasks break the application entirely since so many features have been developed on top of these assumptions. Adding a //TODO deposits technical debt on your project significantly. After that I had to call for a meeting and make it clear for everyone on the team, especially junior developers and interns on how to deal with todo tasks.

A few guidelines we came up to deal with to-do tasks are

  1. Never check in a code with //TODO . All the unknown assumptions or decisions on a feature should be made clear when you work on a task or a bug ticket.
  2. If //TODO is necessary because the decision cannot be made at the moment or have to wait for response from other stakeholders, log it as a ticket or work item. This is to make sure that they won’t be forgotten.
  3. The convention we have with was
    //TODO: #RW1251 - description here

    where #RW1251 here is a log ticket number

  4. Code review is strict for every check-in.
  5. If assumption or a hack is applied to bypass the //TODO, you must notify your team lead for approval and record the detail in the ticket and email.

In software development, any to-do tasks are not likely to get done. Developers are known to prefer working on a new features instead of coming back to help and adjust the code. So when should we do the TODOs? My answer is always “NOW”.

No Comments »

Teera on April 18th 2009 in technology, c#, Software Development, Web Dev, .NET, Java

ASP.NET MVC Presentation at BC .NET User Group Next Month

Next month I’ll be presenting at BC .NET user group on ASP.NET MVC framework. The talk will be focusing on how and why you should consider ASP.NET MVC for you next project.

Instead of the usual “presentation” I decide to kick it up a notch and make it more of a real-world case study walkthrough the process of moving a traditional ASP.NET project to MVC framework. And one thing I can promise you is that this talk will have no fluff, no marketing talk, only candid opinion from my side :).

Here’s the full description of my talk on the user group website.

ASP.NET MVC is out but should I use it on my next project? What’s the development experience like? In this presentation, I’ll take you through the real world experience my team had converting traditional ASP.NET application to MVC. We’ll examine the good and the pain points we found and show you how to unleash the full capability of the MVC framework. I’ll also introduce you S#arp Architect framework and show how it can help you in your next MVC project.

And here’s a rough agenda of topics and a few things I’m planning to include:

  • ASP.NET MVC, what’s in it for me?
  • I have an application developed in ASP.NET web form, is there any way I can migrate it to MVC framework?
  • How to unleash and take full benefit of the MVC framework
  • And of course, I’ll show a lot of code
  • I’m planning to have a lot of time for Q&A and discussions at the end as well.

Date & Time: May 5th, 6.30pm

Location: Building SW3 room 1750, BCIT Burnaby campus, 3700 Willingdon Ave, Burnaby BC

For more detail, check out the event detail page on the user group website.

So if you are around the area, I hope to see you there :).

   

YSlow web page optimization for ASP.NET MVC

Recently a client asked me to help speeding up his business website (built with ASP.NET MVC beta). He’s got a few complaints from customers of how slow the site is. So I ran YSlow extension to see how bad it was and…not surprisingly it was really bad.

 1.jpg

First of, it got an F on YSlow. What worse was the time it took the site to load

 21.jpg

 As you can see, this page takes 10.56s to load. The first request for HTML content took ridiculously long (7.6s)!!

YSlow offers quite a comprehensive advices on how to make your web page load faster. Some key points can be implemented easily, some are difficult, and some are possible only if you have total control over the web server.

GZip Filter

The first thing I do was googling for how to gzip the output. I found this blog post by Kazi Rashid showing how to create ASP.NET MVC GZip and caching filter. This action filter applies GZip compression to HTML output from controller action. The cache filter allows you to take control of the output caching per action. The code works right off the bat and they’re very useful.

Reducing number of requests

What I set out to do was to reduce number of request for JavaScript and CSS down to one for each. I came across Omar’s blog on how to implement a handler to combine multiple files and cache them for faster return. Though I tweaked Omar’s original code a bit so that the handler would cache the static file content for each individual files, and compose/recompose based on the set of files I specify in web.config file.

Minifying JavaScript

Next, I downloaded YUI compressor. To run the compressor, you’ll need to have Java installed on your machine. Follow the page instruction and apply compression on all JavaScript and css files. Alternatively you can create MSBuild task for Visual Studio by follow this blog post.

Removing ETags

ETags are evil. You can read more on the effect of ETags from Yahoo site from YSlow web page. On Removing ETags on IIS 7 is quite easy. I found this blog post to be descriptive and very useful on removing ETags from IIS 6 and 7.

The Result

 Let’s see what we got from doing all these improvement. Well, it’s not yet an “A” site, but as you can see, there’s a lot of improvement.

 3.jpg

 These little improvement points may seem trivial but the effect can be paramount. Following these simple steps, the loading time for this site is reduced from 10 seconds to 1.30 seconds! (Note: I disabled my cache and refreshed the IIS cache). 

61.jpg

 Looking at the time it takes to load the site. The major impact is from GZipping the output HTML. 

6.jpg

 Future improvement

A few things I wasn’t able to do require control over IIS. This was not available since the site itself is going through a web hosting and not VPS or dedicated server. For more information on caching, it’s worth checking out the following resource:

- Caching and cache control 

- Setting static resource cache in IIS7 

If you are running a e-commerce site and want to go full blown on optimization and speed, you should also consider content delivery network like Akamai as well. 

ASP.NET MVC 1.0 is Released

Though it’s a bit late but let me congratulate ASP.NET MVC team on 1.0 release. The official announcement was made by Scott Guthrie at MIX 09 in Vegas. You can read the full blog post about this release on Phil’s blog. This is a great achievement for both Microsoft and the community. As we all know, MVC is one of the very first products from Microsoft with the source freely released and taking full feedback from the community.Â

If you have not done so, go get ASP.NET MVC 1.0 RTM here and have fun :).

ASP.NET MVC selecting SelectItem in SelectList..do you think this code would work?

I ran into a bug in this piece of code in my mvc project. I modified it a little but the logic is essentially the same.

            IList<Gallery> galleries = new List<Gallery>();
            galleries.Add(new Gallery(1) { Name = "gallery 1" });
            galleries.Add(new Gallery(2) { Name = "gallery 2" });
 
            vm.GalleryList = new SelectList(galleries, "ID", "Name");
 
            foreach (SelectListItem item in vm.GalleryList)
            {
                item.Selected = true;
            }
 
            return View("Edit", vm);



Do you think this would work? My goal here is to initialize a SelectList containing Gallery data and set all of the item to “Selected”. From the first glance, all of SelectListItem  in SelectList should have “Selected” value set to true. But that would be wrong!


It turned out to be that, once items in SelectList are initialized, it cannot be changed. To set select value for SelectList you have to do it through SelectList controller: SelectList(IEnumerable collections, string dataField, string textField, object selectedValue).  If you want to do a multiple selected items collection, it’s better to use either MultiSelectList or IList<SelectItem>.

No Comments »

Teera on February 11th 2009 in ASP.NET MVC, ASP.NET, Software Development, Web Dev, .NET

Notes on upgrading S#arp Arch project to ASP.NET MVC RC1

Just upgraded my sharp architect/mvc applications to ASP.NET MVC RC1 from beta, a few things worh to note

  1. You need  to get a new “Microsoft.Web.Mvc.dll” from codeplex. I got “System.ExecutionEngineException” using the dll that comes with S#arp Arch (Beta 1 rev337).
  2. Update MvcContrib.dll, you can get it from MvcContrib project site. The February 9th release seems to be working well with ASP.NET MVC RC1
  3. For some reason the route path in controller has to be more explicit. I’m not quite sure if this has to do with Mvc or the way I configure my routing. I’m still investigating into this issue. Though I didn’t change view path or any routing logic as I upgraded to RC1.ASP.NET MVC RC1 Controller routing path changeIndicating view only by “Index” used to work in asp.net mvc beta, but need to change in RC1ASP.NET MVC Controller routing change in rc1This is the change I made, explicitly indicating the path.

Apart from these 4 things, simply changing S#arp Arch classes (e.g. DomainObject to Entity) were trivial and the app’s running fine.

What if Microsoft suddenly kills off ASP.NET MVC?

This same question was asked on ASP.NET MVC forum a few days back. The origin of concern came from a comment from Scott Hanselman’s blog. I think this concern is perfectly legitimate given that Microsoft had done it before. Then Gerry Lowry took the same question to asp.net forum. A few people chimed in their opinions and the conversation went so far that Phil Haacked (the MVC senior program manager) and ScottGu got involved in the discussion.

This is what Phil had to say:

I have a very high confidence ASP.NET MVC will not get killed off any time soon. We have internal web properties planning to build sites using ASP.NET MVC. Several major external partners are committed to it as well. Not sure where that fear is originating from.

And this is what ScottGu said:

I’m not entirely sure where the concern came from, but just to clarify - there is absolutely no chance of Microsoft killing ASP.NET, nor the ASP.NET Web Forms or ASP.NET MVC feature areas within it.  The final release of ASP.NET MVC 1.0 will ship very, very shortly and has had fantastic feedback and buzz with customers and within the community.  The first beta of ASP.NET 4.0 will also ship in a few months, and includes significant improvements and investments in ASP.NET Web Forms and other feature areas of ASP.NET.

Hope this helps provide a “definitive” answer to the concerns,

IMHO…

Well, here’s my take on this. I’m not being a pro-MS here but I think words from a senior program manager and a VP do carry some weight. Aside, I like the way MS is doing MVC (actively listening to feedback from community, transparent development process, and releasing the source for public viewing). And as far as it is in beta, it’s one of the products that doesn’t suck.

So what would happen if MS really kills MVC? I think (and I hope) the community will pick it up, perhaps as an open source project. Already the project has inspired other open source projects (MvcContrib, FubuMvc, …).