How to build a desktop like application interface using JavaScript?

Hi

I just came across following demo application: http://mochaui.com/demo/

I have a few questions about this:

  1. What is the right approach to start a project, which have heavy use of JS?
  2. how to choose which library is best, or one should develop his own library specific to requirements to keep the file size smaller?
  3. Can you suggest any study material (tutorials or books etc.) to learn building this type of interfaces.

Thanks.

You can build a true Windows desktop application (as opposed to a “desktop-like” application) in JavaScript and HTML with Windows HTML Application Host (HTA).

If you choose this route, you won’t have to worry about cross-browser scripting because HTA uses a special mode of Internet Explorer.

In any case, the size of the scripting library or framework wouldn’t be a major issue in a continuously-running application because it would only be evaluated once when the page loads.

It would be a good idea to keep the business logic (e.g., an native JavaScript object model) separate from the presentation (HTMLElement objects and other DOM elements manipulated by jQuery or whatever). Then wire them together with event handlers to obtain the desired interaction between UI and application.

If directly manipulating DOM elements (via a framework or standard DOM methods) and/or string concatenation proves cumbersome, you can easily evaluate JavaScript Templates (JST) in the context of the model to update entire sections of the page in one operation.

http://blog.markturansky.com/BetterJavascriptTemplates.html

The link in my signature is to a small JavaScript application platform that demonstrates some of these ideas.

Another option is to use Adobe AIR to build the application. JavaSscript is one of the several options available there for writing applications.

If you are going to create application like web pages for the internet then the most important step is to first get it working without JavaScript.

Thanks for your comments.

Do you mean it only works for IE? I think a web application should support all browsers.

That’s a nice option, but i don’t want to force my users to install Adobe AIR to use my application.

I appreciate this thought, but what if application relies heavily on it’s interface. I think i will need to create 2 versions: one JS based and another one without JS. What do you suggest?

No you create one version and make sure that it works without any JavaScript. Then you add the JavaScript to that version so as to reduce the number of steps involved in various processes. Creating two separate versions is the wrong approach but one you are likely to end up with if you start adding JavaScript before you finish testing the application without it.

The sole purpose of JavaScript in a web page is to enhance the functionality already built into the page.

You might have a ten step process without JavaScript that can be combined all into one step with JavaScript. By building the ten step process first and then adding the JavaScript that combines them into one step those people without JavaScript can still perform the ten steps to achieve what those with JavaScript can do in one and you still only have one version of the application.

I understand the rationale behind this, but honestly, I don’t agree.

There are certain (and in my business, often) instances where JS is not only required for usability, but because it simply can’t be done without it. Certain tools and features, made to accomplish a specific task, require a certain level of technology before they can be used.

An example of this is gaming. Every new game seems to require an even higher level of hardware. Without this hardware, the graphics and frame rates we expect are not possible - and honestly, I wouldn’t play the game on old hardware anyway, because the experience wouldn’t be a positive one.

The same goes for the UI. The level of interactivity and ease-of-use that users have come to expect require certain technologies. Without them, you just can’t produce that level of quality.

Obviously, there are cases when this is not true. Audience is important. If you’re site is geared toward third-world countries, you need to build for that. Same with disabilities.

I have a site that is very heavy on GUI. 10,000 monthly subscribers - and I’ve never had anyone complain that it “doesn’t work with JavaScript turned off”. And if I did, I’d tell them nicely that if they don’t want to use JavaScript, they don’t have to purchase a subscription.

Why would I do that?

Simple cost/profit analysis. It doesn’t make sense to spend 1/3 (at least) more of the time making it work for 1/10,000 of potential customers. It just doesn’t make sense.

If you want to go 4-wheeling the Utah desert, you have to have a 4 wheel drive vehicle - not to mention bigger tires, good suspension, a roll cage - the list goes on.

I believe your statement holds true, felgall, for a public sites aimed at the general population. Or perhaps a contact form for lead generation where you don’t want any chance that someone can’t submit. But when you’re talking about an advanced UI with enhanced functionality aimed at a specific end result - it just doesn’t make sense.

(Obviously, if someone does log in and turns JS off, you need to make sure they can’t do things (like submit a form) that would cause undesired or dangerous outcomes.)

PS. By the way, felgall, you’re awesome. Thank you for all you contribute to this community! I just disagree with you on this point :wink:

The Ajax engine allows the user’s interaction with the application to … you couldn’t accomplish the same effects using a technology

Yes. It behaves like a Windows application that you download and execute, rather than a website.

I think if you’re bent on having a desktop-like interface, you should write two versions. Bolting a modern interactive UI onto an old-fashioned CGI-style website isn’t very elegant.

What about using silverlight, then you can run multithreaded application on browser and able interact more dynamically with local files.

Definitely MooTools or ExtJS. Ext is designed for building complicated RIAs (rich internet applications) and handles all of the layout for you. If you need something very custom go with MooTools. People are only voting for JQuery because they know it. MooTools is better for RIA development because of its class like inheritance. JQuery is mainly a powerful DOM manipulation library.

YUI is probably also a good choice but I haven’t worked with it before.

Edit: Of course if you plan to sell anything you build with Ext you need to pay for some steep developer licenses.

Such an application should either be on an extranet (where only selected people have access at all) or should be written to run outside the web browser using a platform such as Adobe AIR.

For all public sites on the internet the site needs to be accessible without JavaScript. At least one web site that made the mistake of not building their site that way is now millions of dollars poorer as a result.

I’m glad someone else recognizes that jQuery is primarily a GUI framework and not a full client application platform. That said, I use it extensively with my own client platform, although any other UI library should presumably work with it as well.

Also, do NOT roll your own. Anyone suggesting that you make your own javascript library is showing their inexperience with web development (looking at you, darkecho). Frankly, the size of a javascript library is irrelevant. And there are a whole bunch of other reasons not to roll your own. Do NOT do it. You will be sextupling your workload for literally zero gain.

I completely disagree.

That’s the point of the Internet. To be able to reach the masses easily with you’re unique product or information. The point of a profit-oriented site is to make money. If you put too many obstacles and regulations and technical “musts” in the way, it’s not worth doing in the first place.

Why does putting it in AIR fix the problem? Just to say it’s not public? If we want to get technical, visiting my site on my server isn’t public, either.

I think something like Sproutcore would be a better to build a desktop like application interface using JavaScript. It’s just about to go 1.0 soon. However Apple already makes use of it in it’s Mobile Me and iWorks Services. So I think that would be something to take a look at.

Also see cappuccino that’s look good too, but I think is Sproutcore better.

Sproutcore Demos

I agree with that statement and requiring JavaScript is just such a MAJOR obstacle that will make it not worth doing. That’s why ALL web sites should be able to be used without JavaScript.

If you want to build something that requires JavaScript then the web is the wrong place to build it.

Hey sweet their demos don’t load in Opera. I will never touch whatever the hell this library is.

I don’t get it. Why not?

How’s that any different than “requiring” them to download software?

@felgall:

Is it okay to provide toll free operator assistance for users who experience trouble using a site, or is the developer legally obligated to anticipate every possible difficulty the user may have?