Friday, January 11, 2013

20 JavaScript Frameworks Worth Checking Out

20 JavaScript Frameworks Worth Checking Out

The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them — specially on the front end. No more static pages, no sir!
You have a ton of sections each interacting with each other and the server and yes, it’s as complicated as it sounds and just as hard to pull off. Today, I’d like to talk about a few, choice JavaScript frameworks that aim to simplify front end application development.


Why We Need Frameworks Like These

If you think jQuery is the answer, you lose a cookie and get an F grade!
Creating responsive, fluid, and maintainable interfaces for web apps isn’t as easy as one would imagine — there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. Desktop developers have it much easier with robust tools and well defined workflows. Us, poor web devs? We’ve been twiddling DOM elements, creating models by hand and pulling our hair out trying to keep everything synched.
The monstrous rise in the number of web apps being built recently has really made it apparent that we need better tools and frameworks and the devs have responded with a staggering amount of solutions. Today, we’re going to go over just a few of these. A couple of these are quite old but I’m certain you can learn a lot from perusing their code base.
Sure, a few of these may be a little old but their code bases have lots of lessons to teach.

Sproutcore

Nettuts+ -- JavaScript Frameworks
Sproutcore powers a lot of high profile apps including MobileMe amongst others. Sproutcore has a steeper learning curve compared to the other options but makes up for it with developer productivity once he/she has learned the ropes.
This framework boasts a UI framework, the market standard MVC architecture and well written documentation.
Related links:

Cappuccino

Nettuts+ -- JavaScript Frameworks
Cappuccino was created by the 280North team, now owned by Motorola. This framework gained significant coverage with the release of the 280Slides — built completely with Cappuccino.
This framework varies dramatically from the others in that a developers doesn’t need to understand or work with any of the front end trifecta — HTML, CSS or the DOM. All you need to master is the framework!
Related links:

JavaScriptMVC

Nettuts+ -- JavaScript Frameworks
Built on jQuery, JavaScriptMVC is a veteran in the front end frameworks battlefield, dating back to 2008. Featuring a familiar, and obvious, MVC architecture, this framework is quite full featured with support for code generators, testing and dependency management.
Related links:

Asana Luna

Nettuts+ -- JavaScript Frameworks
Luna is one of those hush-hush private frameworks that people have been talking about. And for good reason, I must admit.
The framework features a lot of niceties including an evolved MVC architecture, pubsub, caching, routing and authentication.
Related links:

Backbone.js

Nettuts+ -- JavaScript Frameworks
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Related links:

qooxdoo

Nettuts+ -- JavaScript Frameworks
qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, light-weight traditional web applications or even applications to run outside the browser.
Related links:

Spine

Nettuts+ -- JavaScript Frameworks
Spine is a lightweight framework for building JavaScript web applications. Spine gives you a MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.
Related links:

ActiveJS

Nettuts+ -- JavaScript Frameworks
ActiveJS is a JavaScript application framework that provides local and REST based data modeling and pure DOM view construction with back button and history support along with framework agnosticm and lack of external dependencies.
Related links:

Eyeballs

Nettuts+ -- JavaScript Frameworks
eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype. eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.
Related links:

Sammy

Nettuts+ -- JavaScript Frameworks
Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.
Sammy tries to achieve this by providing a small ‘core’ framework and an ever-growing list of plugins for specific functionality.
Related links:

Choco

Nettuts+ -- JavaScript Frameworks
Choco brings the MVC to the client side! A Choco app consists of only one HTML page, all the interactions are managed by Javascript. Your UI only uses HTML and CSS!
Related links:

Agility

Nettuts+ -- JavaScript Frameworks
Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
Related links:

Angular

Nettuts+ -- JavaScript Frameworks
Angular supports the entire development process, provides structure for your web apps, and works with the best JS libraries. With angular, the view and data model are always in sync — there is no need for manual DOM manipulation.
Angular is small, weighing in at 60kb, is compatible with all modern browsers and works great with jQuery.
Related links:

ExtJS

Nettuts+ -- JavaScript Frameworks
Ext JS 4 brings a whole new way to build client applications, by introducing the popular model-view-controller pattern to Ext JS. By allowing the separation of data management, logic and interface elements, Ext JS 4 makes it easier for even large development teams to work independently without worrying about stepping on each other’s toes. Ext JS 4 ships with a helpful MVC guide to get started.
Related links:

Knockout

Nettuts+ -- JavaScript Frameworks
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
Related links:

Jamal

Nettuts+ -- JavaScript Frameworks
Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.
Related links:

PureMVC

Nettuts+ -- JavaScript Frameworks
PureMVC is a lightweight framework for creating applications based upon the classic Model, View and Controller concept.
Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, is now being ported to all major development platforms.
Related links:

TrimJunction

Nettuts+ -- JavaScript Frameworks
The open source Junction framework is a conventions-over-configuration, synchronizing web MVC framework for JavaScript. TrimPath Junction is a clone or port of the terrific Ruby on Rails web MVC framework into JavaScript.
Related links:

CorMVC

Nettuts+ -- JavaScript Frameworks
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture.
Related links:

batman

Nettuts+ -- JavaScript Frameworks
batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.
Related links:

That’s a Wrap!

And we’re done here. The number of options here might border on overdoing things at first glance but each of these are a little different in how they tackle this problem and given a problem, different solutions and choices are always a welcome addition.
As I mentioned earlier, if you think a framework should be here but isn’t, just drop us a line below and we’ll update this roundup accordingly. Thank you so much for reading!
Siddharth is Siddharth on Codecanyon
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Mark Deam
    Do not forget about YUI MVC: http://yuilibrary.com/yui/infrastructure/
  • http://www.compzets.com/ Compzets |Gadgets for Computer
    No underscore.js, raphael.js ??? Are these not so useful or famous???
  • http://www.facebook.com/scott.tesler Scott David Tesler
    What about Twitter’s bootstrap.js?
  • M.
    I agree with Luis; learn Javascript, then jQuery so you can create your own objects that do the same thing. Then use Kendo to create bad-a** visualizations out of your objects.
    Simple.

top best javascript framework list





web-design-tutorial
JavaScript – an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks become more powerful and more specialized; they can do many things in just a few basic steps.
However, when you decide that you need a JavaScript framework it can be quite a challenge to figure out which framework to should use, which framework is best for your needs, … ? This is mainly because there are so many frameworks out there you can choose from.
In this post, I want to summarize the list of frameworks that Google assumes most popular, maybe you wonder why it’s Google? Because it’s the most popular search engine, so I think the results will be most relevant and accurate to the majority of web developers. Here’s the list of top JavaScript frameworks by Google, with the keyword: “javascript framework”.

ElegantThemes
Hostgatorhttp://envato.s3.amazonaws.com/referrer_adverts/tf_260x120_v2.gif
ThemeForest
Advertisement

1. jQuery: The Write Less, Do More, JavaScript Library

jQuery: The Write Less, Do More, JavaScript Library
Yes, jQuery is really a new kind of JavaScript library, you can write less but do more; maybe jQuery is the JavaScript framework that have the biggest collection of plug-ins and add-ons. Some things you should know:

  • Current version: 1.3.2
  • Size: 19 KB (Minified and Gzipped) and 120 KB (Uncompressed Code)
  • Author: John Resig
  • Tutorials in 19 languages: 183 (data on 19 October, 2009)
  • Sites in use: 1000+
  • Plugins: 3.493 (data on 19 October, 2009)
  • Easy to learn
  • Support designers very well, by using CSS syntax
  • A lots of nice and lovely extensions
  • Great community, maybe largest
  • Used by millions of website and well known companies like Google, DELL, CBS, NBC, DIGG, Bank og America, WordPress, Drupal, Mozilla etc…

2. MooTools – a compact javascript framework

MooTools - a compact=
MooTools is an Open Source MIT application, which you have the possibility to use it and modify it in every circumstance.
  • Current version: 1.2.3
  • Uncompressed Size: 95 KB (client) and 22 KB (server)
  • Author: Valerio Proietti
  • Using: w3c, cnet, bing, …
  • Plugins on Official site: 4
  • Better OOP structure
  • The animations are smoother
  • The syntax and the handle of elements are more logical

3. Prototype: Easy Ajax and DOM manipulation for dynamic web applications

Prototype - Easy Ajax and DOM manipulation for dynamic web applications
Used by the big media companies and organizations, Protorype is unique JavaScript framework that is quickly becoming the codebase of choice for web application developers. And now with the latest version, 1.6.1, Protorype has improved performance, new user-action events, and compatibility with the mordern browsers.

  • Lastest version: 1.6.1 (1st September, 2009)
  • Uncompressed Size: 136 KB (closely 5.000 code lines)
  • Creator: Sam Stephenson
  • Using: NASA, CNN, NBC, …
  • Plugins: 150+
  • Better for the big web apps, give you many choices to write custom code

4. Dojo Toolkit: great experiences for everyone

Dojo - great experiences for everyone
Dojo Core features small, fast, deep – gives you a rich set of utilities for building responsive applications; great interface widgets with accessibility and localization built right in.

  • Lastest version: 1.4 Beta
  • Compressed Size: 26 KB (closely 5.000 code lines)
  • Foundation: Dojo Foundation
  • Dojo Users: AOL, IBM, Sun, …
  • Client-side data storage
  • Server-side data storage
  • Asynchronous communication

5. script.aculo.us: easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us - easy-to-use, cross-browser user interface JavaScript libraries
Update to the lastest version, script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours, have some improved features as: loading work maker, Windows Media player/RealPlayer checker, fixing old issues, … check more at here

6. ExtJS: Cross-Browser Rich Internet Application Framework

Ext JS - a cross-browser JavaScript library for building rich internet applications
ExtJS is a very cool cross-browser JavaScript framework for helping you build rich web applications, support all modern web browsers. Plus plenty of plugins and extensions, your ExtJS based web applications become more attractive by features such as well designed, documented and extensible Component model, high performance, easy-customizable UI widgets, …

7. UIZE: supporting widgets, AJAX, DOM, templates, and more

UIZE - a powerful, open source, object oriented JavaScript framewor
Some things about UIZE you should know:

- is an open source Javascript framework
- easy-to-change your own CSS skins
- plenty of built-in widgets
- amazing effects and powerfull features

8. YUI Library: is proven, scalable, fast, and robust

YUI is proven, scalable, fast, and robust
YUI
is one of the biggest JavaScript frameworks in this list. YUI has all things to help you build interactive web applications using techniques such as DOM scripting, DHTML and AJAX by a set of powerful utilities and controls. YUI has countless powerful features, plugins, extensions that take you the very long time to learn.

9. Archetype

Archetype JavaScript Framework
Let sees the power of Archetype by yourself to understand what it can do.

  • Lastest version: 0.10.0 (September 2009)
  • Size of package: 2.14 MB
  • Creator: Temsa & Swiip
  • In use: GifTeer, Meteo France, …

10. qooxdoo: the new era of web development

qooxdoo - the new era of web development
What’s qooxdoo? That’s great and powerfull JavaScript framework to create rich internet applications (RIAs) by taking the advantages of object-oriented JavaScript. qooxdoo includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license.

Conclusion

The top 10 Frameworks on Google is all worth investigating if you’re considering to start using one. It is likely that if you query the keyword: “javascript framework” on google, that you will not get the exact same result. This is not a problem really, because the all the JavaScript frameworks featured here are very good & powerful. It is likely that picking on of them will address all your needs.
Bonus: lists of top 10 JavaScript frameworks by Yahoo and Bing: