Case Study: A Fast, slick website built with DevExpress components

16 August 2011

Check out this video case study below with Evert Wiesenekker, a developer from the Netherlands who's created a very interesting website.

Evert has created an optimized website that helps his clients manage a Nematode taxonomic database. What is a Nematode?

Nematodes are small, usually microscopic, unsegmented roundworms with a narrow cylindrical body. They are incredibly numerous in soil, water, and inside other animals and plants throughout the world. Approximately 10,000 species are known. Four of every five animals on the planet are nematodes, outnumbering even insects. A single gram of soil can contain more than 1,000 plant parasitic nematodes. -Divergence

And Evert's website is fast, good looking and uses several great technologies like:

Watch the video below as Evert discusses:

  • the website
  • how he chose the technologies
  • and some of his design decisions on the website:

image

Note: You can also view this video on YouTube which supports mobile devices too: http://www.youtube.com/watch?v=e5l44gzL0DU 

One of my favorite things about his website is the speed. About 13 minutes into the video, you'll see how he has leveraged DevExpress ASP.NET Callbacks to retrieve and display different data items in milliseconds. Oh and be sure to check out his unique login screen that uses patterns instead of passwords!

Click on the image above and watch the interesting video case study with Evert Wiesenekker.

Then drop Evert a line below with any thoughts, questions and/or comments about his website.

Follow MehulHarry on Twitter

Save time and money...

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

18 comment(s)
Preetham Reddy

The video doesn't play at all... I've tried it in Firefox and Chrome

16 August, 2011
Mehul Harry (DevExpress)

Preetham,

Sorry to hear that. You can also watch this on YouTube here:

www.youtube.com/watch

Btw, I've tested it locally in my FireFox and Chrome and it seems to work. Do you have any flashblocker? Is you flash up to date?

Thanks.

16 August, 2011
CESAR F. QüEB

Nice Login method... really faster...and the RAVENDB seems interesting.. but not totally free..

16 August, 2011
Mehul Harry (DevExpress)

Thanks Cesar,

Yes, I believe RavenDB has a free open source version and a paid version for commercial purposes.

17 August, 2011
VIKAS B

Cool Stuff. So how do i customize my Aspx Button as in Video.!!

17 August, 2011
Mehul Harry (DevExpress)

Thanks Vikas,

I'll discuss it with Evert and get back to you. In the meantime, you can also check out out our online demos of ASPxButton to get ideas:

demos.devexpress.com/.../Appearance.aspx

17 August, 2011
Felipe R Machado

Despite the "speed" of the demonstration I don't think that using a CallbackPanel and standard ASP.NET controls to be a really good performing solution, at least if it would be an OPEN to the public website. If this is an intranet website then we can live with the ASP.NET solution, bu if you try to put it to the general public, you should try to move to an ASP.NET MVC solution, without any VIEWSTATE to slow EVERYTHING down, and project the site around REAL, light weight AJAX calls, not using AJAX PANELS that add so much weight to each callback that IMHO makes them a very bad compromise... The weight of the VIEWSTATE can be over 400KB for not so much complex pages!!! That's simply crazy...

I believe that this could have been an AMAZING demo 6 years ago... I'm not really excited by it today. It is a very competent job and shows perhaps the best use of ASP.NET possible, but the problem is that I started to hate ASP.NET itself with a fervor that I can't really put into words :-) I can't see any ASP.NET site escalating well in a popular website at all! I think that the only .NET based solution is ASP.NET MVC (I don't like MonoRail that much)...

For any new website I'm building, unless it is an intranet only website with very small footprint, I will go with ASP.NET MVC, DevExpress MVC extensions, XPO (can't live without that anymore), jQuery, jQuery UI and some JavaScript based charting solution when really required... I think this is the best of ALL worlds :-) DevExpress componentes, a mature ORM (with incredible support), HTML markup that makes web-designers/developers happy to work with (instead of cursing like they did with ASP.NET) and all the amazing things of HTML 5 that jQuery makes it easy for us to tap into...

18 August, 2011
Mehul Harry (DevExpress)

Felipe,

Thanks for your passionate thoughts. :)

Imho, Evert has made a very cool and fast website regardless of the platform. Not only has he incorporated DevExpress ASP.NET, jQuery and Raven DB, he's also got some great little usability features in there.

WebForms and MVC are both part of the ASP.NET runtime. And I love both of these because they have advantages in different scenarios.

Check out this video from Microsoft ASP.NET PM: Damian Edwards. Damian helped create WebForms MVP and is an ASP.NET guru all around.

I love what he says here about 'do/use what you love' :)

tv.devexpress.com

About your open source request, well, I'm not sure if Evert can share all the code because he did create this site for a client of his. However, he maybe able to talk about some of the approaches he took. I'll let you know.

Now, can I ask if you'll allow me to show off one of your cool MVC websites that uses our MVC Extensions and XPO? Please? :)

(Thanks Felipe, I enjoy reading your passionate comments.)

18 August, 2011
Evert Wiesenekker

Well thanks all for the comments! And now some feedback:

1. In response to Felipe R. Machado:

I totally agree with you. My next site will be MVC 3 based (alea iacta est). When I started with this site a few years ago I was also working on a MVC 1 site. At that time component support was very limited and it took some (costly) time to achieve some more advanced UI features. So I thought I give it some time until the major component vendors like DevExpress come up with MVC based components. For this site I definitely needed some advanced UI elements like a tree view with load on demand features which were not available for MVC at the start of my project. Reporting was an issue too.

So bringing me back to 'normal' ASP.NET Web technology I was irritated by the sluggishness of 'ASP.NET Update Panel AJAX' based sites and the event mechanism was sometimes confusing, I decided to develop this site using callbacks only. I am now amazed by the speed you get. So no standard AJAX Update Panels are involved. I am banging my head I didn't discover callback technology 5 years ago. Focus is normally on using ASP.NET Update panels in seminars and so. Of course it is difficult to use callbacks out of the box but DevExpress made a very simple abstraction layer in combination with their excellent client script library. And for me I always like (fast) backup support when using components which is sometimes lacking when using open-source components.

By the way the site has a three tier structure (using repositories, dependency injection). So if I switch to another technology (Raven Less or MVC 3) I hope a transition will be less painful.

2. In response to Vikas B.:

In order to style the button the way I do, I give you the 'DevTML', the CSS and something extra. I have a button which opens up a DevExpress based Report Page. The first time you click on this button it takes some time to load the form.

The most important property you must set to 'false' is 'EnableDefaultAppearance'. This way you can use your own CSS using the css related properties 'CssClass' and the 'CssClass' of 'HoverStyle'.

  <dx:ASPxButton CssClass="exportButton" ID="exportButton" runat="server" Text="PRINT / EXPORT"

     EnableDefaultAppearance="False" ClientIDMode="AutoID" UseSubmitBehavior="False"

      CausesValidation="False" OnClick="exportButton_Click" Visible="false" EnableClientSideAPI="True"

  ClientInstanceName="exportButton">

    <ClientSideEvents Click="function(s, e) {

          exportButton.SetText(" PLEASE WAIT...");

      }" />

    <HoverStyle CssClass="exportButtonHover"></HoverStyle>

  </dx:ASPxButton>

The client scripting is of course not needed but is a nice addition if you want the button to show some progress to the user when something is taking to much time.

The CSS (it consists of three parts: a generic part and button specific parts):

/* Generic style */

.exportButton,

.exportButtonHover,

{

   border-style: none;

   color: White;

   cursor: pointer;

   -moz-border-radius: 10px;

   border-radius: 10px;

}

/* Normal style */

.exportButton

{

   background-color: #808080;

   width: 130px;

   height: 25px;

   font-size: small;

}

/* Hover style */

.exportButtonHover

{

   background-color: #C0C0C0;

}

NOTE: It is not working for all DevExpress components, e.g. for menu buttons inside a Menu you have to override some native DevExpress css classes. Luckily Firebug easily shows what you have override.

EVERT's TIP OF THE DAY: http://lesscss.org. I hope CSS will in the future show some inheritance/constant support.

3. In response to CESAR F. QüEB

Yes I have a paid subscription because I like to support the project and of the excellent Support (response within a day), Linq usage and my main reason is the search possibilities it has (using Lucene). But it is free too if used for non commercial purposes.

4. 'Is code free' question.

I will write some blog posts in which I will abstract some parts and I will try to focus on MVC 3 using DevEpress. No I do not get paid by DevExpress or have a free license ;-)

18 August, 2011
Felipe R Machado

Hi Evert,

By seeing the speed of the site I was starting to wonder if you had indeed done something to get rid of ASP.NET "sluggishness" :-) You did an incredible job, and that speed could only be achieved the way you did it! Transfer as little as possible over the wire with low weight, hand-crafted AJAX callbacks.

ASP.NET, IMHO, is one of the most "evil" technologies ever created! It is a leaky abstraction that tries to bring standard WinForms programming paradigms to the web... IMHO this creates an "impedance mismatch" :-) Nothing ends up working as expected, everything is surprising... I can't tell you how many times I've seen experienced (winforms) developers claiming there had to be something broken in ASP.NET, some bug, because the logic had to work... Leaky abstractions are just like that, if you try to hide the inherent nature of web-development from developers they never get to know how everything really works, they do things in the worse possible way, etc.

ASP.NET MVC, on the other hand, don't try to hide how the web works. It works with the web, and even favors the best practices. People become aware of how and what they are doing. There's no magic to adapt a winforms-based approach to the web like ASP.NET did.

You've broken free from this by doing your handcrafted AJAX callbacks and leveraging the client-side with jQuery.

I can't congratulate you on how brave you are to embrace RavenDB... I'm a really big fan of Ayend, and I think RavenDB to be more amazing than nHibernate... (BTW his book "DSLs in BOO" is a MUST!). I would love to see a XPO adaptar for RavenDB... maybe it is possible...

- - -

Mehul,

Regarding Damian Edwards advocating both technologies as a matter of choice, I think he is just being political. It is just like Microsoft stating that WPF is not dead, while everything is moving to HTML5, even Windows 8... They have a vested interest on both technologies, and can't just say: hey ASP.NET (or WPF) was really not a very good idea, or not the ideal implementation, so we're switching to MVC (IMHO they call it ASP.NET MVC only for marketing...) (or HTML 5).

Regarding my amazing, fantastic ASP.NET MVC projects, well, none are in production still (nor even close). The two biggest projects almost ready for release are using in one case standard ASP.NET due to the lack of proficiency of the team with web-technologies and pressing timing concerns, and the other is a very, very BIG XAF application... (with a pure ASP.NET dashboard for the non-administrative user, which will be rewritten entirely in ASP.NET MVC because the speed of ASP.NET will not scale for the thousands of simultaneous users we are expecting!)

I'll check with my management if we can create a presentation or a use-case when it is finally done!

19 August, 2011
Mehul Harry (DevExpress)

Felipe,

Thanks, that would be great. Please, ping me via email if and when its possible for you to do a case study.

Btw, XPO is extensible so you can theoretically wyou're an interface that talks with Raven DB. Then you can use it with XAF or any other .NET platform that XPO works with. However, I have to warn you that it is not simple task to do that.

Thanks. :)

Fair enough. I understand you're not a big fan of WebForms. I really like ASP.NET MVC for many reasons but I don't believe that WF is evil. :)

19 August, 2011
Felipe R Machado

Hi Mehul,

I think WebForms (ASP.NET) to be evil because by trying so hard to hide the very nature of web development from developers it actually helps creating uneducated developers. If all the effort that went in trying to hide what web-development really is went to actually trying to make it better and painless I think we would be centuries ahead in terms of productivity in the web front. Take a look at how far ASP.NET MVC went in so little time!

Another way to look at it: Why ASP.NET WebForms is mostly praised by standard desktop developers switching to web development out of necessity and reviled by almost every single bona-fide web-developer or web-designer out there?

On the other hand I'm still to find a bona-fide web-developer that dislikes ASP.NET MVC!!!

But yes, you can program well and clean in WebForms, this very own article shows the perfect example of well-thought WebForms development (from which I've already borrowed some ideas for my legacy ASP.NET WebForms applications... Thank you for this article, and thanks Evert a lot for his work!)

22 August, 2011
Evert Wiesenekker

Hi Felipe,

Thank you very much for your friendly words! No I did not use any special tricks. Maybe 1 trick: I have a script which keeps the site constantly alive (it is hosted on a external server running Hyper V, assigned with 1 Gigabyte of ram so no special stuff). The reason is I noticed the IIS application pool was recycled very often (I did set IIS7 to the max, so it is something Hyper V related I think). By the way I am not very fond of recycling application pools, in my opinion a site should always be alive even if it is visited only ounce a day.  For the rest:

I only use DevExpress Callback panels and some client scripting.  

And yes I love Raven it keeps things very simple, no extra classes/attributes are needed. You are forced to keep your model simple, reason: if your model has a lot of relations it gets more complicated to manage.

24 August, 2011
Faisal Bashir

Hi Mehul,

Can you provide source code of the example please.

Regards

21 February, 2013
Mehul Harry (DevExpress)

Faisal,

I don't have the source code. You can contact Evert W. and perhaps he can help you.

Thanks.

21 February, 2013
Faisal Bashir

Hi Evert Wiesenekker

Is it possible for you to share the source code.

Regards

22 February, 2013
Faisal Bashir

Hi Mehul,

Do you have any contact of Evert Wiesenekker, not sure if he is still following this thread.

Regards

22 February, 2013
Evert Wiesenekker

Dear Faisal,

Sorry for responding so late (too busy)

Unfortunately my project is not free because it is written for a customer who has owner rights of the code.

But if you give me some clue of what you need I can give you some snippets if you like!

Hope I can help!

12 March, 2013

Please login or register to post comments.