Decision criteria are as follows:
1) The stack should be fast, it should perform and add minimal overhead to my pages.
2) It should not impede interoperability. I want my code to play nice with others.
3) It should not slow me down. I do like Studio as an IDE and don’t think at this point I could switch to Eclipse.
4) The stack shouldn’t limit my control. With ASP.NET AJAX the biggest gripe I have is lack of fine grained control over the markup rendered.

Nowadays I’m favouring the following stack

a) Javascript library: JQuery and Prototype are my current favourites. They’re both fairly equal and I use them both interchangeably. I’m using Prototype for my next project although when I switched this site to WordPress I used JQuery. Both are small <30KB and easy to rampup on.

b) Visual effects: With minimalist design you don’t need a whole lot here. I use a mixture; I like Script.acul.ous as a core so far with add ons like jCarousel for special circumstances.

With this combo total JS over the wire is under 50KB compressed.

c) CSS layout: I write my own CSS but for layout I use YUI Grid. Very small, cross browser, does everything I need and nothing I don’t. 4KB thank you very much.

d) Server-side: (data-side) I’m still using ASP.NET nowadays but no ATLAS. I need to produce less markup and only that which I can control. No wacky $ concatenated Ids here please. I use the DataSerializers to produce JSON for data. JSON has proven more flexible than web services, just as interoperable as XML and less verbose. For transactional systems I’d still favour web services with the WS-* stack, everything in it’s place.

I can’t point at the site yet but there is one coming that uses this stack. Compared to Foolstr.com it has been a much more pleasant development experience and the site does run faster.

With so many options out there, what’s YOUR preferred stack?

We have a big set of releases coming up at work and I’ve become a bit obsessed with performance. We’re not using WordPress but I figured performance improvement, just like anything, starts at home. So ever since installing WordPress with this Arthemia theme I’ve been tweaking to try to get the most out of it.

I’m measuring performance using Fiddler 2, starting with clear browser, no cache and summing up the entire browser session, the HTML, CSS, JS and media. Not very scientific but better than nothing.

The first place to look was the plugin space and there are a few third-party HTML fragment caching plugins available. Naturally I tried WP-CACHE, that didn’t do much and is pretty much acknowledged as being out of date. It’s successor is an add on called “Super Cache” so I tried that. Not as smooth as I expected.

As soon as it was installed I noticed was my site throwing PHP errors all over the place. A few minutes debugging showed the config had incorrectly chosen some non-existent directory settings. With that fixed Super Cache started caching. I noticed de-activating and then re-activating this plugin screwed up the config and I had to manually edit some files each time. Less than ideal to say the least.

With caching on, response time improved as PHP no longer had to generate pages on the fly but I wasn’t blown away by any means.

After a few weeks I noticed the site would hang periodically and time out. Just doing nothing. I couldn’t diagnose this issue but once I de-activated Super Cache things seemed to come back to life.

My thinking is that Super Cache had used a Mutex to lock a file and somehow reached a race condition. In any case I started looking for a new caching product. That’s when I met Hyper Cache.

Hyper Cache is a lighter-weight caching plugin than the aforementioned SC. No directories to mess with, no editing extraneous files. I just installed it and off it went.

Measuring page rendering time through Fiddler there was not much improvement but the cache seems to rebuild faster with HyperCache and I haven’t had any mutex/file locking issues so far.

So with PHP on IIS I’ve found Hyper Cache worked better for me than Super Cache.

ATLAS on top of ASP.NET is an example of a retro-fitted round tube jammed into a square hole. The whole notion of AJAX is that it’ll serve PARTIAL pages, snippets of data, merged with presentation on the browser side. Unfortunately ASP.NET AJAX adopted the notion of the UpdatePanel with which I have the following issues:

a) Update Panels are not partial page, they’re full page. The entire page posts back. Where’s the speed gain?

b) The page’s DOM is brutalized. Each <div> tags’ id is generated for you which could’ve been nice. Unfortunately the generated ids are incredibly verbose, meaningless strings of dollar concatenated craziness. Here’s an example from Foolstr:

<a id="ctl00_contentMain_ContentList1_repContents_ctl02_cmdAgree" class="myH1" href="javascript:__doPostBack('ctl00$contentMain$ContentList1$repContents$ctl02$cmdAgree','')">Agree</a>

c) Not only are these ids/names duplicated and incredibly long, they’re impossible to reference from anything other than ASP.NET AJAX. For example, if you want to combine with a third party JS library like Scriptaculous, you’re out of luck (it can be done but only with some big hoop jumping through). Unfortunately there’s little the developer can do to trim them down without overriding a lot of the default behaviour of .NET.

d) It’s non-intuitive. Essentially ASP.NET AJAX adopts a server-side style and mindset to client-side processing.

e) There’s no focus on the data contract. I don’t have to write a JSON API or an XML/REST api or anything. This might be good for some but I think it’s never a good idea to shift focus off the data.

f) It’s lazy. It encourages a laziness in the developer. Just code as normal and slap it in an Update Panel. Meh.

Those are the gripes. I have to say the third party vendors have only compounded the problem. You’d think 3rd party controls’d be lightweight, optimized and fast but so far what I’ve seen is they’re even worse. This is mostly a symptom of them having been built on top of an already broken paradigm.

Most 3rd party controls include the ASP.NET AJAX stuff as a pre-requisite. That makes them heavy. I’m talking 100KB of javascript before you’ve drawn anything. 250KB plus in pure javascript alone for a grid. That’s before you bind it to data. There has to be a better way, there IS a better way.

What do YOU consider the perfect web development stack?