There are many libraries/frameworks out there (and many more emerging) that will help abstract such things as all the nasty browser differences.
Three good libraries are The Dojo Toolkit, Prototype, and DWR.
(1) The Dojo Toolkit contains APIs and widgets to support the development of rich web applications.
The Dojo toolkit is very different from Prototype in that it is a toolkit, not a framework, and thus offers you a whole slew of functionality that is "plug and play"-ready.
*Notes:
A library is essentially a set of functions that you can call. A collection of objects that you can use, but in contrast to a framework you don’t have to use all of it- just take the bits and pieces you need.
Framework is a structure, a skeleton. It enforces some design pattern on the developer and give some tools for code generation. A framework is a structure, a skeleton.
A toolkit is a set of tools for a developer, a good example is MVVM Light, which has a framework (an MVVM framework), bits and pieces that you may or may not use, templates and so on.
Main features
- visual /UI effects and animations,
- drag-and-drop functionality,
- layout and form controls (called Widgets),
- event abstraction,
- client storage,
- AJAX interaction, and
- DOM manipulation helpers.
Event system
One of Dojo’s key components is its Event system. This system makes it possible and easy for you to keep track of any kind of event and perform functions at many events that can take place. With an Animation, for instance, you have the following events available to you:
* onBegin—fired when an animation is played from the beginning * onAnimate—fired every iteration of the animation * onEnd—fired when the animation has completed * onPlay—fired when the animation is played from any point (including the beginning) * onPause—fired whenever the animation is paused * onStop—fired whenever the animation is stopped (by calling the stop() function, not by finishing)
DOM-related helpers
Much like Prototype, Dojo also offers you a lot of DOM-related helpers, but unlike the former, Dojo doesn’t attempt to clean up code by using shorthands (速記). Instead, you get a lot of additional DOM methods that use the same naming scheme as the original DOM methods themselves.
Widgets Engine
One of Dojo’s biggest and best features is its Widgets engine. Widgets are essentially HTML objects that you bind to JavaScript objects, which is a fairly vague (含糊的﹐不明確的﹐不清楚的) way of saying they provide you with "templates" that you can use to quickly prototype (note the lowercase P!) your enhanced user interface in HTML and CSS.
Navigation
Dojo solves common usability issues such as support for dealing with the navigation such as the ability to detect the browser back button, the ability to support changes to the URL in the URL bar for bookmarking, and the ability to gracefully degrade when AJAX/JavaScript is not fully support on the client.
Dojo is the Swiss Army Knife of JavaScript libraries.
It provides the widest range of options in a single library and it does a very good job supporting new and older browsers.
(2) Prototype focuses on AJAX interactions including a JavaScript AJAX object that contains a few objects to do basic tasks such as make a request, update a portion of a document, insert content into a document, and update a portion of a document periodically.
Prototype JavaScript library contains a set of JavaScript objects for representing AJAX requests and contains utility functions for accessing in page components and DOM manipulations.
Script.aculo.us and Rico are built on top of Prototype and provide UI effects, support for drag and drop, and include common JavaScript centric widgets.
If you are just looking to support AJAX interactions and a few basic tasks Prototype is great.
If you are looking for UI effects Rico and Script.aculo.us are good options.
(3) DWR (Dynamic Web Remoting) is a client-side and server-side framework that focuses on allowing a developer to do RPC calls from client-side JavaScript to plain old Java objects in a Java Enterprise Edition web container.
On the server side DWR uses a Servlet to interact with the Java objects and returns object representations of the Java objects or XML documents.
DWR will be easy to get up and running and plays well with other Java technologies.
If you are looking for a client-side and server-side framework that integrates well use DWR.
* Yahoo UI Library is a utility library and set of widgets using the APIs to support rich clients. The utility library includes support for cross-browser AJAX interactions, animation, DOM scripting support, drag and drop, and cross browser event support. The Yahoo UI Library is well documented and contains many examples.
* Google Web Toolkit (GWT) is client/server framework provided by Google that allows a developer to write an AJAX application in pure Java. The GWT takes care of the details of generating all the client-side code using a Java-to-JavaScript compiler.
One of the key benefits of the GWT Software Developer Kit (SDK) is that it allows you to debug your applications in what is known as GWT hosted mode using an embedded browser (IE on Windows and Mozilla/Gecko on Linux) that is tied to the toolkit.
In GWT hosted mode you setup through the code and debug it as it is running on both the client and server. The GWT contains a default set of widgets and widget containers.
An application is built by coding a set of widgets and containers together much like would be done in a Swing application.
The GWT Software Developer Kit (SDK) is limited to Linux and Windows XP/2000 though the web applications it generates are compatible with the latest generation of the mainstream browsers.
There are many new and emerging libraries for JavaScript and this list only reviews some of the more common libraries. When making a choice choose the library which suites your needs the best. While it might be better to choose one, there is nothing stopping you from using more than one framework.
Comparison of MooTools vs jQuery vs Prototype vs YUI vs Dojo
There are conclusion:
- Safari under Windows XP is really blazing fast
- Mootools and Prototype JS do not work under Konqueror (KDE’s default browser)
- Dojo performs great. If we take only these test into consideration it safe to say it is the fastest Javascript Framework
- Linux browsers are relatively slower against their Windows versions
- Prototype is insanly (瘋狂地；狂暴地) slow under Internet Explorer
This is a short description, based on my experience and knowledge (and IMO):
jQuery -> is the most popular javascript library available (great support available on the net and a lot of plugin written for it), it's simple for all (included designers). It's the best choice for dom manipulation and to write code quickly (ideal for front-end)
DOJO -> advanced js library which offers mechanism for loading js "modules" as necessary
ExtJs -> one of the most advanced and powerful js library. It's build with OOP in mind, it offers an huge number of UI components. It's not intended for designers, it's pretty heavy (size of sources). It's the ideal choice for advanced backoffice UI
Prototype -> the evil! Simply avoid this library, it extends default js objects by causing a lot of troubles
YUI -> similar to ExtJS (ExtJs was born as an extension of YUI, so if you have to choose one of the two go for ext :P) Mootools -> I don't know :P
Scriptaculous -> as far I know, the best for js animations (it was one of the firs library for this task)
Spry -> it introduces some new "concepts" such dataSet. Few people use it :(
jQuery -> is the most popular javascript library available (great support available on the net and a lot of plugin written for it), it's simple for all (included designers). It's the best choice for dom manipulation and to write code quickly (ideal for front-end)
DOJO -> advanced js library which offers mechanism for loading js "modules" as necessary
ExtJs -> one of the most advanced and powerful js library. It's build with OOP in mind, it offers an huge number of UI components. It's not intended for designers, it's pretty heavy (size of sources). It's the ideal choice for advanced backoffice UI
Prototype -> the evil! Simply avoid this library, it extends default js objects by causing a lot of troubles
YUI -> similar to ExtJS (ExtJs was born as an extension of YUI, so if you have to choose one of the two go for ext :P) Mootools -> I don't know :P
Scriptaculous -> as far I know, the best for js animations (it was one of the firs library for this task)
Spry -> it introduces some new "concepts" such dataSet. Few people use it :(
Reference
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
http://www.peachpit.com/guides/content.aspx?g=webdesign&seqNum=281
http://stackoverflow.com/questions/6743820/what-is-the-difference-between-jquery-prototype-extjs-mootools-scriptaculous
No comments:
Post a Comment