Awesoome: AJAX

29 Ekim 2013 Salı

Awesome Top 10 Javascript Frameworks – Which do you prefer?

17:27 AJAX, JavaScript Libraries 15 comments

Javascript libraries have become fundamental to good web design, almost all site nowadays have some element of Javascript or Ajax present. It is probably the main element in developing the Web 2.0 movement.
There are many Frameworks, which do you prefer?

Please note that this post is fairly old and some of the information may be out dated.
Perhaps you would prefer to browse our Javascript or jQuery categories.

1. script.aculo.us (http://script.aculo.us/)

URL: http://script.aculo.us/.
Blog: n/a.
Documentation: http://wiki.script.aculo.us/.
Note: script.aculo.us is not a Framework by its self but it is an addon for Prototype.

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

2. Prototype (http://www.prototypejs.org/)

URL: http://www.prototypejs.org/.
Blog: http://www.prototypejs.org/blog.
Documentation: http://www.prototypejs.org/learn.

“Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.”

3. Moo Tools (http://www.mootools.net/)

URL: http://www.mootools.net/.
Blog: http://blog.mootools.net/.
Documentation: http://docs.mootools.net/.
Demos:http://demos.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 documented, and coherent API.”

4. jQuery (http://jquery.com/)

URL: http://jquery.com/.
Blog: http://jquery.com/blog/.
Documentation: http://docs.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”.

5. MochiKit (http://www.mochikit.com/)

URL: http://www.mochikit.com/.
Blog: http://www.mochikit.com/blog.html.
Documentation: http://www.mochikit.com/doc/html/MochiKit/index.html.
Demos:http://www.mochikit.com/demos.html.

“MochiKit – makes JavaScript suck a bit less”.

6. Rialto (http://rialto.improve-technologies.com/wiki/)

URL: http://rialto.improve-technologies.com/wiki/.
Blog: n/a
Documentation: http://rialto.improve-technologies.com/js/doc/.
Demos:http://rialto.improve-technologies.com/rialto/.

“Rialto (Rich Internet Application Toolkit) is ajax-based cross browser javascript widgets library”.

7. Dojo Toolkit (http://dojotoolkit.org)

URL: http://dojotoolkit.org/about.
Blog: http://dojotoolkit.org/blog.
Documentation: http://dojotoolkit.org/docs.
Demos:http://dojotoolkit.org/demos.

“Dojo is an Open Source DHTML toolkit written in JavaScript. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development”.

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

URL: http://labs.adobe.com/technologies/spry/.
Blog: n/a.
Documentation: http://www.adobe.com/go/labs_gnav_wiki.
Demos:http://www.adobe.com/go/labs_gnav_showcase.

“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”.

9. ASP.NET Ajax Framework (http://asp.net/ajax/)

URL: http://asp.net/ajax/.
Blog: n/a.
Documentation: http://asp.net/ajax/documentation/.
Demos:http://asp.net/ajax/showcase/.

“ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers”.

10. Cean Ajax Framework (http://sourceforge.net/projects/clean-ajax/)

URL: http://sourceforge.net/projects/clean-ajax/.
Blog: n/a.
Documentation: http://sourceforge.net/docman/?group_id=145307.

“Easy to use AJAX framework that provides message queue, XSLT, XPath, encryption (SHA1, MD5), web service access (SOAP, XMLRPC), JSON-RPC, cross browser AJAX, AJAX history and cache control”.

Awesome 70 of the Best Ajax & Javascript Resources

I have taken all of the Ajax and JavaScript posts that I have written over the past year and analyzed the stats and figures (outgoing links, page popularity etc. ) to find what really are the best free Ajax Resources. This has been a good exercise in tracking current Ajax web trends.

Have a look for yourself, whether you agree or not, these are the results.

Top 5 Javascript Frameworks

Top 10 AJAX Directories

1. MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts

2. Ajax Scripts and Applications :: Hot Scripts

3. AjaxDaddy – Ajax Examples in Action

4. Ajaxian

5. Funky Ajax

6. CrackAjax

7. ajax.clear-mind.be -unlimited ajax resources

8. Free Ajax Scripts

9. Ajax-Source.com

10. Best Ajax Scripts

Top 5 Ajax CheatSheets

Top 10 jQuery Downloads

1. jQuery Virtual Tour

Description:jQuery Virtual Tour allows you to add interactivity and transform a panoramic image into a virtual tour.
This is a pretty cool plugin that will give your readers a lot more detail within your image galleries. Recommended.
Demo: jQuery Virtual Tour Demo.
Download: jQuery Virtual Tour Download.

2. jSocialize – jQuery version of mooSocialize!

Description: This is the jQuery version of the phenomenal mooSocialize (which was, obviously, built on the mooTools framework).
jSocialize allows you to integrate your bookmarks for every post on your blog, website etc.
By clicking the jSocialize button, a window will appear, which lets you choose your favorite Social Bookmarking Network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.
It then opens up the page in a hovered layer. Click the X and the window closes.
Try the Demo you will love this.
Demo and Download: jSocialize Demo and Download Page.
Compatability: It’s been tested in Firefox, IE7 and Opera 9+.
Note: This is also available as a WP plugin.

3. Flexigrid – Data Grid/Table

Description: This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
Features: Resizable columns ; Resizable height and width ; Sortable column headers ; Cool theme ; Can convert an ordinary table ; Ability to connect to an ajax data source (XML and JSON[new]) ; Paging ; Show/hide columns ; Toolbar (new) ; Search (new) ; Accessible API.
Demo: Flexigrid Demo.
Download: Flexigrid Download.

4. Anti-aliased Rounded corners with JQuery

Description:This is a variation of the very good jQuery plugin CurvyCorners, smaller file (in at 15kb) and runs a lot faster.
Demo: Anti-aliased Rounded corners Demo.
Download: Anti-aliased Rounded corners Download.

5. jQuery Shoutbox

Description:This shoutbox is a chat-like feature for your website that allows people to quickly leave messages without any form of user registration. As with most ajax there is no need for refresh making the effect very smooth. Unlike other shoutboxes this integrates seemlessly into your theme by styling the CSS file.
Screehshot: jQuery Shoutbox Screenshot.
Download: jQuery Shoutbox Download.
Developer: Ajaxdaddy.

6. Coda Bubble Tooltip

Description: This script will help you recreate the amazing puff popup bubble effect as seen on panic.com/coda. Inessence this is probably the best tooltip script I have seen. Its not a script for every site, but implemented properly it would look amazing.
Demo: Coda Bubble Demo.
Download: Coda Bubble Download.

7. Featured Content Glider

Description:This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. For the ultimate in the ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task. Visit the homepage to read about all the features. Excellent.
Demo: Featured Content Glider Demo.
Download: Featured Content Glider Download.

8. Humanized Messages

Description: Humane Messages is a system for displaying and temporarily logging non-modal messages, for use in web applications. It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action. In practice, the message is both noticeable yet unobtrusive.
Demo: Humanized Messages Demo.
Download: Humanized Messages Download.

9. Img Notes

Description: A simple way to display notes over images when you roll your mouse over the image. This is not unlike the jQuery Virtual Tour, but a lot simpler to use.
Demo: Img Notes Demo.
Download: Img Notes Download.

10. jqDnR – Minimalistic Drag’n'Resize

Description:jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. jqDnR provides the all the basic elastic functionality most dialogs will need. Basic and simple and easy to use.
Demo: Anti-aliased Rounded corners Demo.
Download: Anti-aliased Rounded corners Download.

Top 10 Mootools Downloads

1. Slider

Slider URL: http://www.phatfusion.net/slider/.
Description: Horizontal or Vertical bar and slider.
Demo:View Demo.

2. Simple 3D Carousel

Simple 3D Carousel URL: http://www.hotajax.org/content/view/491/420/.
Description: A (not so) basic 3D Carousel.
Demo:View Demo.

3. Click to change the background

BG Change URL: http://www.hotajax.org/content/view/468/420/.
Description: Dynamic color selector- colors swatch animate to pick and change the background.
Demo:View Demo.

4. Photo Gallery

URL: http://www.hotajax.org/content/view/211/420/.
Description: A marvellous interactive Photo Gallery.
Demo:View Demo.

5. Noob Slide

Noob Slide URL: http://www.outcut.de/.
Description: This is another image gallery slideshow, nicely done..
Demo:View Demo.

6. Tips

Tips URL: http://www.hotajax.org/content/view/213/420/.
Description: A stylish tool tip demo.

7. Pamoorama

Pamoorama URL: http://www.silverscripting.com….
Description: It show only part of your fullsize image, the image can then be scrolled by moving the mouse over it.
Demo:View Demo.

8. Sample Nav Bar

Sample Nav Bar URL: http://www.hotajax.org/content/view/212/420/.
Description: A stylish and easy to use nav bar.
Demo:View Demo.

9. Javascript Image Gallery

Javascript Image Gallery URL: http://tutorialdog.com….
Description: A simple but very useable Image gallery.
Demo:View Demo.

10. Slidinglist

Slidinglist URL: http://www.hotajax.org/content/view/210/420/.
Description: A tree-like sliding navigation system.
Demo:View Demo.

Top 10 Script.aculo.us Downloads

1. ModalBox

URL: http://www.wildbit.com/labs/modalbox/.
Description: ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. Pretty cool.
Demo:View Demo.

2. Auto-Scrolling Page Navigation

Auto-Scrolling Page Navigation URL: http://tobielangel.com….
Description: A simple scrolling/sliding page navigation. Easy to use.
Demo:View Demo.

3. Sexy Sliding Menu for script.aculo.us

Sexy URL: http://www.andrewsellick.com.
Description: There is also a MooTools variation with this menu, this truelly is a sexy sidebar. I am using this script on a new site I am designing.
Demo:View Demo.

4. CoolTips

URL: http://www.wildbit.com/labs/cooltips/.
Description: CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

5. Sliding Date-Picker

Sliding Date-Picker URL: http://ajaxorized.com….
Description: Basically, pick any date with a slider bar. I like this.
Demo:View Demo.

6. Sortable Lists

Sortable Lists URL: http://demo.script.aculo.us/ajax….
Description: ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. Pretty cool.
Demo:View Demo.

7. DatePicker using Prototype and Scriptaculous

DatePicker URL: http://www.eulerian.com….
Description: A nice and light date picker.

8. Collapsable Effects with Script.aculo.us

URL: http://www.dustindiaz.com….
Description: I like this better than other Accordian effects purely because it doesn’t call itself an Accordian (a now well overused term).
Demo:View Demo.