Ext JS and Wordpress

Below I am trying to explain why I am preparing an upgrade of Ext JS WordPress Theme (or rather for whom), what shall be fixed in the new version and what new stuff will be added. As an image says more than a thousand words you can find a few screenshots here.

Ext JS WordPress Theme Target Audience

Milord has commented the theme as follows:

it seems to be perfectly suited to using wordpress as a rudimentary knowledge base. It’s very clean and easy to navigate, with screen elements appearing and disappearing as required.
When I look at this example, I see huge potential for it in wikis on intranets. In many ways it is highly familiar to users of desktop applications, and that makes it more approachable to the technophobes

This actually was the purpose of witting the theme: to convince tehnophobes, or let’s say people who get used to desktop applications. To make long story short: the theme has been made to convince your mom and dad and … your boss, that blogging as a knowledge sharing within organizations makes sense.

Milord, I share your opinion in one hundred percent. Although, during last fourteen days of maintaining the site and reading peoples comments I have noticed that there is another target audience of the theme: gadget-addicted people. (I am a member of gadget-addicted group,also.) Thus, I have decided to make an upgrade of the theme by adding few additional gadgets into it. But, first things first:

Bugfixing

1. SEO

Many commenters have pointed out that the theme is not SEO and Ads friendly. This shall be changed in the first place. As you may notice this has been fixed already on this site. The content of the page loads without even one call of XMLHttpRequest and almost all links are permanent. Ajax starts after the page is fully loaded. For example: if you request the http://extjswordpress.net/download/ URL from your any other (then this one) site it will load the Ext JS WordPress Theme with the content of the Download page. But, if you click the link when the theme is already loaded, it will call XHR, get the content of Download page and put it into the center panel. Check this out:

This is an ordinary link: http://extjswordpress.net/download/

This is Ajax call: http://extjswordpress.net/download/

2. Ads

As you can see there is a special container for Ads on the left hand side of the page. In the feature version the idea is expanded, instead of one block there will be four blocks. Please check the list of planned changes:

3. Performance

Although the Ext JS library make heavy use of system resources (try to compare site build with and without Ext JS in Firebug), I would not worry about it in present days. One can say that the bottle neck in case of the theme is bandwidth. It is partially truth: the theme requires ~500kB of Ext JS, then there is ~80kB of CSS and ~60kB of images – now framework is loaded – the Saki’s Panel&Accordion extension (javascript and CSS): ~60kB, then ~10kB of theme CSS plus ~20kB of theme javascript. The last goes Wortpress itself: ~50kB. Together it is ~780kB.

There is a high time to do something with this and I hope I will succeed. There are 14 Yahoo Performance Rules here. On my own installation I am focusing on 7 of them:

Server Side

3. Add an Expires header
4. Gzip components
13. Configure ETags

Client Side

5. Put CSS at the top
6. Put JS at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external

My tests has shown that I have reduced the full size of page from ~780kB to ~280kB having B grade in YSlow on rule no 4 (I will not gzipping images). 280kB transfer is needed for the first time the theme loads (all HTTP headers has code 200). During browsing the site Ajax calls are made (~5KB each) thus no need to worry about bandwidth. When revisiting the ExtJS flavored WordPress, all js, css and images are cached, thus the only call is the WordPress page itself (~15kB).

In short: this 15kB is what I am going to achieve.

More Gadgets

1. Optional Static Boxes

There were few people who wanted to use the theme with advertising boxes, but usually ads does not work well with Ajaxy stuff. Thus the idea is to arrange a special place for such things: not ajax, easy to update from administration panel and optional. There can be many other ways to use static-boxes. Instead of using sidebar for widgets like for example Flickr you will be able to use static-boxes.

2. Optional Left Sidebar

Josef Sakalos has upgraded his brilliant accordion extension and added a feature that allows users to move panels from one accordion to another.
Check this out here. The feature is called “linked” accordions and shall be used within Ext JS WordPress Theme to allow users to moving widgets from between sidebars. Left sidebar will be optional and administrator will decide weather to allow users to move widgets or not. Extra feature here will be “state-saving” which means that when user enters the site again all the changes she has made will remain.

3. Comments Window

If you have ever seen Jack Slocum Blog you are not surprised that comment form can be easily put into a Ext JS Window. I really like the idea. As you may see on Jack’s blog there are additional stuff there: one can comment separated paragraphs of the posts. If you are not familiar with that, you should definitely check it out.

4. Lightbox alike

Few day ago I have successfully adopter LightBox 2.0.3 plugin to this blog. After that I have realized that this does not suits here well. The plan then is to include the plugin into the theme and skin it with Ext JS window.

5. Browsing with tabs

Version 1.0 of Ext JS Theme is able to open two tabs: one with posts and the next one with recent comments. Why not adding a possibility to open posts within separate (saved from session to session) tabs? People may treat it as internal bookmarking.