关于js框架选择，发篇我去年的内部预研吧..

当初我们部门因为原有的框架是我们自己写的，渐渐不能适应要求，所以打算引入个第3方的js框架来做原型之用..这报告是我刚毕业加入部门不久后写的，算是一个预研吧，写的比较幼稚，呵呵，大家随便看看吧..

<!---->

Purpose:

The purpose of this study is to find a suitable JavaScript framework for UCD in future prototyping.

The framework should fulfill these features:

There are a lot of JavaScript toolkits or frameworks available, and it feels hard to choose a suitable one for us. Every coins have two sides. So does these frameworks. Almost every framework has some disadvantages, but we still have to make a choice.

So, what we really want? There are some important factors we may take into account:

ü      Ajax support. E.g. sortable table, drag& drop etc.

ü      Well documentation. This is a important and must part of one good framework.

ü      Cross-browser support .Almost all frameworks will fulfill this.

ü      Licensing issue. It will be great news if it’s a free lunch.

ü      Extensive users, good community atmosphere. So it’s easy to get feedback or help.

ü      Quality (bug-free, reliable) It better has a good maintenance or support team.

ü      Learning curve. How much time and effort should we paid for?

ü      Rich UI component. It’s good if the framework provide us many available components.

ü      Easy to use, and easy to integration with DEV side.

Available good frameworks:

After a long search and study, I added below frameworks to my cart as our candidates.

• Dojo (dojotoolkit.org)

Dojo is the Open Source JavaScript toolkit that helps you build serious applications in less time. It fills in the gaps where JavaScript and browsers don't go quite far enough, and gives you powerful, portable, lightweight, and tested tools for constructing dynamic interfaces.

My comment:

It’s a powerful and big framework. But it’s complicated and not easy to use. If we use it, may have many potential problem, as Dojo still have many bugs to fix. According to other's comment, Dojo is not so stable for enterprise usage.

• Rico (openrico.org/rico/home.page)

Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.

My comment:

Rico provide basic Ajax, Drag&Drop, Cinematic and Behavior features . But I found this framework has many bugs, some of its demo cannot work properly, and really worry about its support and update.

• ActiveWidgets (www.activewidgets.com/)

ActiveWidgets is a powerful javascript component library which makes web application development (especially AJAX-style apps) a lot easier and more productive. ActiveWidgets provides you with a set of common visual elements (like datagrid, tabs, tree, combo) sharing professional look-and-feel and simple programming model.

My comment:

Though it’s a commercial product, but it’s not so good because we already found Ext which is same type like ActiveWidgets but better framework that I will introduce later.

• SmartClient (www.smartclient.com)

SmartClient delivers on the promise of AJAX, enabling high-performance, high-productivity web applications to be deployed today. SmartClient offers:

    * the most mature and proven AJAX technology available

    * a complete solution: complete GUI toolkit, complete documentation

    * the right architecture: cutting edge service-oriented, metadata-driven architecture

    * true, tested, certified cross-browser, cross-platform support

My comment:

This is a very good framework, a real Enterprise Ajax framework. But it’s commercial. And it’s mainly for developer to use. So, if we want to use this, we have to know many details of its API, and the way how to write in its grammar.

• MochiKit (mochikit.com)

MochiKit.Visual provides visual effects and support functions for visuals.

My comment:

It also provide many common features such as draggable, Ajax tables, sortable tables etc. But it has less support and not very extensible. Seems the maintenance to it is not so good. No new update over one year.Compared to other framework, it has little advantage as our framework.

• Spry (http://labs.adobe.com/technologies/spry/ )

The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages.

My comment:

Actually, I like Spry framework for Ajax. It’s integrate very well with Dreamweaver( they are from same family—Adobe). And it’s easy for us UI designers to use.But it’s just prerelease 1.6, so that means its functions is limited and maybe exists may bugs. When the final release of Spry framework come out, I think it is likely to be the most suitable one for us, but currently, it is not the one.

• script.aculo.us (script.aculo.us)

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

My comment:

It’s based on Prototype which is a famous Ajax framework. If using Ruby on Rail, then it will be the most suitable framework. But for us, not the best choice.

• MooTools (mootools.net)

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful,flexible, and cross-browser code with its elegant, well docuemnted, and coherent API.

My comment:

MooTools provide basic functions to us, e.g. Ajax support, Animation Effects, Drag&Drop, Sortables. Its code is compact, elegant, but has few plugins. So if we want more function, we have to dev by ourselves. And also it does not have a strong community, and few support can get if have trouble.

• jQuery (jquery.com)

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript. If we want more, then we can find other frameworks which is build upon jQuery framework.

My comment:

jQuery is for designers, developers, and suited for many different applications. Also have many good plug-ins to support. Its community is very active and has many successful customer stories. I would recommend jQuery as one of our choice.

• Ext (www.extjs.com)

Ext is a client-side, JavaScript framework for building web applications. In early 2006, Jack Slocum began working on a set of extension utilities for the Yahoo! User Interface (YUI) library. These extensions were quickly organized into an independent library of code and distributed under the name "yui-ext."

My comment:

Very good framework.  And have extensive user and strong support. It’s very good for Rich Internet Application development. I also pick it out as our choice. 

• Others…

There are still many good framework or library that I probably missed, or they are not the kind of framework we truly seeking for, e.g.GWT. So, welcome additions to this list. Any feedback on other overlooked good framework is most welcome.

Frameworks fulfill our requirement:

So, we already got two likely candidates, will we hire both or just one of them? That really depends on how we want to use them.

Anyway, let's further dig out what advantages and disadvantages they have, and what roles they can play for us. 

jQuery

Advantage:

1. jQuery is small size (14kb, Minified and Gziped)
2. jQuery is currently available for use in all personal or commercial projects under both MIT and GPL licenses. So it’s have no potential legal issue for our project.
3. It provide us foundation JavaScript support such as Mouse Interaction(Draggables,Droppables,Sortables,Selectables,Resizeables),User Interface Extensions(Accordion, Calendar, Dialog,Slider, Table,Tabs), Effects(Shadow,Magnifier), Ajax support, and also many utilities functions.
4. If we need more functions, jQuery also provide us hundreds of plugins for self-service. These plugins include DOM, UI, Widgets, Ajax etc. Really thoughtful for us. And if this cannot meet our needs, then we can also write our own plugins.
5. Many successful customer stories, e.g. Google,Amazon,Intel,AOL,Oracle,Cisco etc. This also means jQuery have every good and proven quality.

Disadvantage:

1. It does not provide UI components or widgets, but we can solve this by adding some of its plugins.

2. Should take some time to learn modern style JavaScript through it's a must for most currently popular frameworks.

Ext

Advantage:

1. Ext provides Real Enterprise support for Grids and Trees, Tabs and Layouts, Forms & Combo Box and other UI component.
2. It supports YUI/prototype/jQuery. So, it will work well if we are using jQuery as its base library.
3. It’s a really powerful and almost full-function JavaScript framework.
4. It has very fast and good support, and its community is very active.
5. It can be use free in our commercial project. But it also has premium help if we paid for it.
6. Even it’s a full function framework, Ext still have very excellent performance.

 Disadvantage:

    1. Ext is suitable for develop "one page one application", maybe not so same as we used to design the web UI flow.

    2. Ext library is heavy for traditional web, full size Ext has 491kb. Through Ext be proved has very good performance, but we still need cautious for our enterprise usage.

    3. Ext is kind of complicated if we want to adjust it to suit for our project, and may pay many effort to learn it.

    4. Developer may also need to learn Ext, it may have impact on our current process.

Conclusion:

Finally, My advice is we can just use jQuery as our foundation 3rd party JavaScript Library, thus we will not have much change to our current Web UI design way. And can easy append our own functions to this library or adopt some proven plug-ins (we shall take a full test for these plug-ins before choose it).

And if we want to change to new Web Application UI design way (Web 2.0? One page one application?), then we can also easily move to Ext as Ext is also based on jQuery.

So, mates, I want to know how do you guys think? If you have any concern, please let me know.

And if we have common agreement on jQuery or Ext or other framework (if have) , then I will host a meeting to detail discuss how we to use the framework, impact on our project, best practice, and  A.O.B.

Thanks.

-------------------

从email里拷出来的，格式有点乱，不过实在懒得再排版了，大家见谅 :-)