JS Windows a Modern Web UI Anti-Pattern

Recently I’ve been helping a developer friend with a number of issues he’s been having with web application he’s writing. The problem? “User opens this JS Window, which contains a 3rd party PDF viewer, then they close that and click another document, and the JS Window is empty”. My first gut reaction, why are you using a JS Window. But I helped him with his problem and then he had another JS Window issue, this isn’t going to end.

On of the tenants of his application is to be mobile friendly, JS Windows are not mobile or touch friendly, quite frankly the more I think about it they aren’t friendly in pretty much any way.

There are some great JS Windows out there, personally I use Telerik’s Kendo Web and Twitter Bootstrap, both have their place and we use both in Resgrid, which is a cloud company founded in 2012 by myself and Jason Jarrett (staxmanade). Resgrid provides logistics and management tools for first responders (volunteer fire departments, career fire departments, EMS, hazmat, search and rescue, public safety and more). The difference is that in Resgrid I can count those occurrences on one hand, additionally I have plans to refactor them out in the future.

In my first enterprise-ie ASP.Net application I was all in with JS Windows. I used RAD Controls at the time and almost every operation had some form a window. I thought to myself “man this is great, it’s like Windows programming on the web!”.

Over the years I’ve slowly phased them out of my web development. They still make it in there from time to time though. The primary reason I used them was because I believed that they saved the user time, or mouse clicks. But now I firmly believe that if your applications UI is designed well they aren’t needed for the most part.

Issues I’ve have with JS windows:

• They are not optimized for mobile or touch
• If your using them modal style they block your site’s UI
• They compact the screen size to the window viewport
• Responsive design is with them is difficult
• Unneeded chrome
• DOM management get’s difficult depending on window complexity

A lot of time it’s a product owner wants JS windows because they save clicks, look cool (yes that is a PO requirement more times then you think) and saves page loads. But all of those are accomplished with good UI design and patterns without windows.

They Save Mouse Clicks

This could be true if the JS Window wasn’t modal. But the vast majority of time I see the windows implemented they are modal (shade out the entire site, allowing interaction only in the window). The user still needs to click to close the window. This is the same as using a back button in the UI or the browser back button, still one click. If you application doesn’t have back button support, that’s a usability issue.

They Look Cool

JS Windows can look cool, all sliding in, fading or some other type of animation. But that user experience won’t be the same for all your users. Having an animation effect can look really bad on older browsers or underpowered machines (for example older phones). Your app should look cool because the user experience is stellar, the UX is crisp, clean and well organized. Not because of animations, or modal effects.

They Save Page Loads

Page loads themselves are rarely ever the problem. Depending on how your app is constructed, i.e. SPA’s, this may never be an issue. But rarely is a page load itself a problem. When your page loads is it loading too much data synchronously? AJAX some elements on that page. Your page should load up synchronously with the minimum elements to make the page useful, then load everything else up async. If your site is already designed that way then the window isn’t saving you anything, especially if the window itself has to make AJAX calls.

For me this is where JS windows work good:

• Small isolated, quick operations (Settings, page options, filtering, etc)
• Options selection, like filtering
• Context sensitive help/information
• Quick View/Preview

There are a lot of checkpoints when your developing software, I feel JS windows is one of those checkpoints. When you adding and window is it core to the operation of the application? If so why are you using a window, is it to work around a problem or design, or because you think you need to implement one? Every time you choose not to implement a JS window a mobile phone get’s wings.