WLS Console beauty more than skin deep

[This originally appeared on my dev2dev blog 10-Nov-2007]
Best practices lead to performance improvements in the Tech Preview WLS Admin Console.

The Weblogic Server 10.3 tech preview was recently released. You can read more about it here including links to download it.

I’m very pleased with my work to improve the look and performance of the Admin Console. If you have used the WLS 10.0 Console before the first thing you will notice is the new look. Things are pretty much still in the same place but the look is lighter and smoother. You will also notice a snappier response. A number of changes have been made to improve performance. My work was exclusively in the presentation layer.

By following best practices for HTML and CSS the page size was reduced about 30 to 40 percent depending on the specific page. Even though additional graphics were added the over all page weight (this includes images, CSS, and JavaScript resources) was reduced around 20%. This means less HTML to generate on the server, less data transfered over the network and less to render on the browser, which adds up to faster response time.

Here is a list of some of the best practices used:

  • Use CSS and semantic markup for layout rather than tables. For Portal apps this means avoiding the grid layout. Console still uses tables for layout of form controls to preserve the existing look.
  • Move all style to external stylesheets. Don’t hard code style in tags or JSPs. This way the dynamic page gets smaller and the stylesheets can be cached. This also makes branding by console extensions easier.
  • Include JavaScript and CSS resources only once. Use the Portal dependencies facility rather than include resource references in tags or JSPs.
  • Keep the junk out of pages. Keep an eye on extra whitespace in JSPs. Use JSP comments <%– — %> rather than HTML comments. There is no need for these to be sent to the client. Prefer JSP documents to JSP pages because they remove whitespace. Console has too many pages to convert all of them to JSP documents but key ones were converted and the new Portal look and feel uses JSP documents.
  • Portal themes have their use but Console didn’t need them. Removing themes eliminated a little markup but more importantly simplifies Console look and feel extensions.
  • Reduce the number of round trips to the server for images by including multiple images in a single file.This technique, called CSS sprites, was used for new images.

The presentation layer is more than just how the app looks it can have an impact on how it performs.

One thought on “WLS Console beauty more than skin deep

  1. [Here are some comments from the original post]

    *

    Very good point jbayer. It points to a different kind of performance improvement. Letting the user do things more efficiently.

    Lets say the page you visit most often takes 10 clicks to navigate to. If the average wait for a page was 2.5 seconds and now it is improved to 1 sec (these aren’t real numbers – just for illustration). The time to get to this page went from 25 sec to 10 sec. But if rather than focus on page load performance we made navigational improvements so that now it took lets say 2 clicks to get to your favorite page the total time to navigate goes from 25 sec to 5 sec.

    I think (but have not tested this theory) that there is a psychological component to this as well. An app requiring 10 quick clicks will still feel fast and an app with just 2 slow clicks will feel slow even though you got where you wanted faster.

    Don’t get me wrong I would like to see lots of navigational improvements in Console. I hope that your comment will help illustrate the need for Console usability improvements so I get to work on that in the future.

    Here is something that might help. You can create bookmarks for pages you go to frequently. You have to log in first for them to work. Another thing is that you will probably want to rename the bookmark because Console uses the same title for every page (I know that’s wrong :-( [update: the page title was fixed]
    Thanks

    Posted by: jsnyders on November 14, 2007 at 1:50 PM

    *

    John, thanks for taking the time to write this up. I think many BEA customers can benefit by applying more best practices in the front-end side of their applications and using the console as an example and talking about the changes is great.

    I have tried the new console and I like it a lot. One thing that I think is still missing is the ability to directly paginating the list Deployments. Clicking next->next->next gets very tiresome when loading lots of applications / libraries as is the case with WLP which might have 50+ deployed artifacts. I hear this as a pain point of customers very frequently.

    Posted by: jbayer on November 14, 2007 at 10:19 AM

    *
    Just downloaded and fired up the console, looks good! Great job.

    Posted by: sghattu on November 11, 2007 at 5:42 PM

    *
    Hi John. I’ve just checked out the console in the TP. Good work!

    Posted by: paston on November 11, 2007 at 2:43 AM

Comments are closed.