Best Interactive UI using JavaScript frameworks or simply html5 + pure javascript?

Question

I will be working on a web application project that will be demanding a rich UI interactive & high performance website.

Interactive in every possible sense that could be shown. That includes various types of interaction in terms of keyboard events, animations, simple yet effective usability, drag and drop, lightweight (while loading and rendering) etc.

I know a bit of ExtJS (Sencha JavaScript Library), javascript and some html5 coding.

My question is

• Do I need to mix up all possible available JavaScript UI framework (ExtJS, jQuery, MooTools, Prototype, Angular JS etc ... ) libraries to make rich interactive UI ? If yes, are there any sample demo for the same ?

• If not, is my goal achievable by using only pure html5 and pure javascript ?

Answer 1

Jquery UI, CSS and HTML5 would be enough...if you are really an expert in javascript and enjoy playing with objects, json, events, then it shoudn't be that difficult...otherwise, you have to import loads of libraries which will end up in performance issue, scalability and manageability.

A good approach is to have one single JS file, and one single image on webpage for icons...that you adjust its x, y positions...you can play with animations, no need to use flash objects. ExtJS is no doubt a great library...Use one library, and chose the best which can fulfill all your requirements.

I hope this helps.

Answer 2

MooTools and Prototype actually do DOM alterations whereas jQuery works in its own namespace. I've been only projects that mixed both jQuery and Prototype. You just have to set jQuery to no conflict mode and it should they should fine together although I'd highly suggest using only one.

I'm partial to jQuery since it has a large userbase and jQuery UI has a lot of stock widgets to use as a base, but it really comes down to your own coding style and project needs.

Good luck!

Answer 3

Without knowing about your application, there is no way to know if it can be built using only client-side technologies. Most applications of any significant complexity require at least some server-side logic. Of course you could use node.js to handle this to only require use of javascript.

I would not recommend mixing multiple frameworks if you don't have to. If you do see a framework that you think meets most all of your needs (i.e,. jQuery UI, etc.) then go for it. I would probably recommend jQuery as your main framework however, as there is simply a lot more plug-ins, libraries, etc. that use it than there are for competing frameworks, and a much larger user base to get help from through places like StackOverflow.

I would not expect to find the magic bullet framework that exactly meets all your needs, but with some investment in learning jQuery, you will find it is VERY flexible and VERY powerful to meet most UI needs.

For very complex thick client apps (which it sounds like you are shooting for), I would be remiss not to point out the excellent Backbone.js and Underscore.js libraries. They make building complex javascript applications much easier and play nicely with jQuery.