20 JavaScript Frameworks Worth Checking Out

20 JavaScript Frameworks Worth Checking Out

on Sep 23rd 2011 with 79 comments

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
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • kisin

    great, i want to learn a new js framework for my new site.
    i need a full solution to all my js needs.

    what you recommend me to learn?

  • http://www.freshclickmedia.com Shane

    Good post – some are new to me, so I’ve got a bit more reading to do :)

    In your ‘qooxdoo’ you write ‘…you build rich, interactive applications (RIAs)’. In my understanding, RIAs are Rich *Internet* Applications. You can use that as an option in your next quiz ;)

    • http://www.ssiddharth.com Siddharth
      Author

      Haha, yes, the I in RIA stands for internet but hey, the site’s marketing page says that so I just went ahead with it.

  • gno

    too bad you there’s no more backbone tutorials on nettuts! still waiting for episode n.2 :)

    • brick

      bump

  • Nik G

    Great article. What would be really awesome is to have a feature comparison or breakdown across most popular frameworks. If someone wants to learn one or two, which one should they start with?

  • Joshua Gdovin

    Great article, I hadnt heard of a few of these. One thing though, can we get a works with under them? Like Choco, I was excited to go look into it, but its a Ruby gem, not stand alone. Which is fine, I will use it in my next RoR project :)

  • okeowo aderemi

    Ehmmmm let’s see so shocked Ext JS made the list and not Dojo. They are basically the same type of modular frameworks. Especially the fact that Dojo has toolsets that don’t even require coding. Dojo Widgets.

    • http://www.nicklowman.co.uk Nick Lowman

      Lists will always result in ‘what about…’ responses, so I don’t normally indulge in such practises. Until now. You missed off Dojo! Possibly the best (open-source) framework for large scale application development.

      • Elod

        There’s a bit of a misconception here. I see a lot of people asking about Dojo and jQuery and such. This list refers to JS frameworks. Bundles of separate packages that do various things as they would for the most part on the server side (authentication, l10n, file management, etc) while Dojo and jQuery are libraries. A group of functions and extensions that do various small tasks on the client side to enhance user experience.

        And I get the feeling I’m gonna get a nice beat down for opening this subject but please feel free to correct me if I’m wrong.

    • http://www.jeffrey-way.com Jeffrey Way

      Yeah – I must agree. Sid – can you add a Dojo item to this list, and change the title to “20+ JavaScript….”

  • Jay Young

    Not a framework per se, but in any list like this, I would always add Google’s Closure Tools[1], which includes the massive Closure Library[2] on which GMail, Google Docs, and many of their other apps are written. And if you’re already using Closure for front-end development, there’s also the Relief Framework[3] on top of it.

    [1] http://code.google.com/closure/
    [2] http://code.google.com/closure/library
    [1] http://code.google.com/p/relief/

  • ben

    I really laughed as I read “_20_ …”. Didnt know there were so much frameworks (needed).

    • AJ

      Same here.. its my first time to hear about the other.. I knew only 8 out of the 20.. and I havent seen the yahoo framework

  • Danmaster

    jQuery RULES… everything else sucks!!!

    • Okeowo Aderemi

      Everything else sucks really. Try reading sm1 else’s jquery code and see if the chaining makes it easier to read. No doubt jquery is awesome.

    • http://www.marakana.com Rick

      Wisest words on this page.

  • http://anthonymclin.com Anthony McLin

    A listing like this is fairly pointless if you aren’t pointing out the differences between them and why you would choose one over another.

    The descriptions you provide of all of them are generic enough that there’s little distinction and boils down to “This framework uses MVC and lets you build interactive apps without messing with the DOM”.

    We would be better off if you had broken the 20 down into 4-5 groups that follow different patterns, or are designed for specific conditions, or just about any way of categorizing them. Fewer products, more information, and most importantly, editorialize. Otherwise what sets your article apart from a simple list of links?

    • http://www.ssiddharth.com Siddharth
      Author

      Criticism duly noted. This is more of a ‘hey, you should check these out’ kind of article rather than an explanatory one. For what it’s worth, we’ve already covered Backbone, Sproutcore, Knockout and Sammy to a good extent here. That being said, I guess a more comparitive article, like Backbone vs Knockout, needs to be done here considering we cover a lot of front end dev related topics. Look for something along those lines next week.

      Thank you for reading and your constructive criticism! :)

    • http://mathiasphilippe.com/ Mathias

      It’s not the best article ever but it’s still not that pointless in my opinion.
      I did not know half of the frameworks shown above so it was good in my case to have a quick look at some of them.

    • Duane Gran

      I was thinking the same thing. I’m a big JQuery fan so I was coming into it open minded after reading up front that I get an F. This gave me a good reading list but a grouped list would be nice. That said, I’m intrigued by a few.

  • chandra

    No Dojo! shocked!!!

  • Enrique

    What about Dojo and Google Closure???????????? -1 for that :P

  • Bill

    Mind answering me this question, why would you need a javascript framework? I never used one before for javascript, I tried codeIgniter php and compass css and found them amazing, saved me like weeks of work for crossbrowsing. Now i’m starting to use jquery and find it so simple to code javascript and its crossbrowser too. So now I’m like really puzzle, should I learn a javascript framework?

    • http://www.ssiddharth.com Siddharth
      Author

      Well, for web sites and such, a library like jQuery should do. But when you’re building complete web apps, these lead to a lot of frustration and spaghetti code since jQuery turns up insufficient here — you still have to bind everything, update the models, check the views and update them etc. This is where the frameworks noted above help you.

      • okeowo aderemi

        I totally agree with u on this one. Jquery is frightening when it comes to large scale applications it is possible but it doesn’t have Class Support maybe unless via plugins. Tried dojo and I don’t think I’ve seen any reason to regret.

      • Bill

        Thanx for the quick reply imma try cappuccino then. Since google bought motorola, and it seems more responsive and sleek compare to the other framework, judge by the demos lol. Anyway imma give it a chance and see how far it can bring me : )

  • Pavel

    Hey, what’s about DHTMLX? It’s a very mature and rich JavaScript framework with modular structure. Maybe not so well known, but it’s worth to be added to the list.

  • http://linkedin.com/in/koistya Konstantin

    Did you list all JavaScript somehow MVC-related frameworks you could find in Google?

    That would be a more valuable post if you could list no more than 5, mature ones.

  • http://www.evanbyrne.com Evan

    We tried using Cappuccino for a web project at work, because many of the other programmers were already experienced with objective-c. However, it did not work out well. Cappuccino is poorly documented, buggy, and it simply does not work like a desktop objective-c application does. Do yourself a favor and don’t waste your time with it!

  • http://www.howtomake.com.ua/ HTM

    perfect

    go using!

  • http://www.creativesoapbox.com Kelly Packer

    This is a great list of micro js frameworks and you can filter the list by and their purpose http://microjs.com/

  • KKK

    What about Node.js? I heard that it is new, but promising framework.

    • okeowo aderemi

      I think Node.js is meant to handle server request and stuffs like that. These are client sided frameworks nodes is SSJS server sided Javascript.

  • Victor Vilche Torres

    Some nice Frameworks here.

    Thankyou

  • http://eneza.wordpress.com/ Eneza

    Having All of these framework, Can I jump to any one of them without any basic knowledge?
    Well many are overwhelmed how fast programming is evolving.

    Thanks for sharing!

    • http://www.ssiddharth.com Siddharth
      Author

      No, I don’t think you could just jump into any of these willy-nilly. Considering what they’re trying to fix, they do have a learning curve associated with them.

    • http://www.brianfidler.com brian fidler

      knockoutJS has a very user friendly 6-part tutorial on their site which will give you a good sense of how useful it can be in your situation.

      @Danmaster…yes jQuery rules, however it can be used in combination with many of these frameworks. The frameworks simply help manage much of the application logic while the jQuery library can still be used for dom manipulation and effects which seems to be where it excels most.

  • http://labs.deeptechtons.com Deeptechtons

    For the upteenth time don’t ever include ExtJS. that the least library / Framework i ever wanted to use. It’s targeted only for Enterprises and not the open web we loved to develop. But batmanjs, Luna, Cormvc are totally new to me thanks for those links too

  • numan

    How come no mention of Dojo? Granted that programmers like it more than designers but its on par with Ext JS as one of the best engineered javascript frameworks

  • http://www.yourdigitalspace.com Swamykant

    Excellent Collection. Thanks for share.

  • Hassan

    I was interested to check Asana luna, but it doesn’t seem to be any download links. Do you know how to get start with it?

  • http://rolling-webdesign.com Theo

    As some of them are new to me will have to check them out, or wich one would you recomend?

  • Andreas

    Angular was new to me and I am totally blown away after looking at the video in the link and reading some more about it. This is how it should be, I am definitely going to use it. Can you please write some tutorials and stuff about this here on tutsplus!?

  • http://supergeekery.com John Morton

    I have found myself relying on Base.js for a lot of my recent JS needs. I guess it’s not the same level of framework as those on this list. I basically just lets you build objects with inheritance. I’m going to give these a look and see what I’m missing. Thanks for the post.

  • http://www.thoughtresults.com Saeed Neamati

    I’ve worked with JavascriptMVC and Knockout.js and they are both powerful and fun to work with. However, I just got really really depressed by finding out that there are almost tens of JavaScript libraries out there and I don’t know about almost 80% of’em.

    I think JavaScript libraries are just becoming something like server-side programming languages, and you should only pick one, two or 3 at maximum to work with. This way, you can get sure that your productivity won’t come down.

  • http://Techreuters.com Dheeraj

    Very Nice information.
    Few days ago new framework of JavaScript is launched named CoffeeScript.
    Thanks.

  • http://www.kurucu.org Kurucu

    It would have been useful to provide an overview, even a table if possible to summarise in that way, so that a reader could look at the types of framework and then quickly be able to identify which frameworks on your page to read.

  • http://www.web4you.co.in/ Web4you

    Really nice framework list, I was looking for good one and now learning JavascriptMVC for my next project. Thanks alot for this information.

  • http://tutsupport.wordpress.com tutsupport

    Hi Siddharth, Amazing post you provide short but necessary information to get understand which framework should you use. Right now I am building a web app that will include any all the tutorials and howtos on one place . you can post your net.tut+ url there or any other url you have . I am writing a blog to keep the update on my progress. please checkout my blog http://tutsupport.wordpress.com and any feed back will appreciated.

  • http://wakanda.org Alexandre Morgaut

    Nice selection

    I knew most of them but you made me have a look to others.
    I’m currently also working on a JS Framework. It is called Wakanda. The URL of the project is http://wakanda.org

    If you have the occasion to give it a look, I’m sure your feedback would be very valuable. It’s still in developer preview stage but we already have a little community starting to play with it.

    Regards,

    Alexandre

  • Jason

    Anyone have any experience with Grails?

    • http://www.winwinhost.com/ Robert

      I had to use some Grails. But its also like, one of those, “wtf, a new language, wtf for” type of situations. Just cause Grails has built in CRUD and is programming by convention doesn’t mean you need to learn it. In fact in my opinion. F*K Grails.

  • Javier

    You must to include DHTMLX.com.
    For me, the best.

  • http://say-daily.com say-me

    nice framework list!I was looking for good one and now learning kendo for my next project.

  • Sridhar

    Thank you for the nice post about various javascript mvc frameworks and found some excellent micro js library. Good to learn that there are lot of frameworks here. Is there any mvc framework like Yii framework for php (like code generation, Scaffolding, simple REST forms[Login, Register, Contactus]) and inflection and i18 libraries built in so that it should be easy to start new web application using Nodejs and mongoDB?

  • Davide

    Instead of create tons of similar libraries, why doesn’t we concentrate to improve the existing ones? This behaviour is a real plague.

    • http://www.winwinhost.com/ Robert

      I totally agree with you! No more new libraries! I know that the job of a computer scientist is to create a way to interface with a computer view a programming language. So I understand the advent of Ruby and Grails in my lifetime. But really. 50 new frameworks for an interpreted language? We need more standards here. Someone needs to take Ownership of JavaScript and mainline 5 frameworks. Really over bloated world we live in, here.

  • Max

    Application Craft (http://www.applicationcraft.com) hasn’t been mentioned. You should look at the Phonegap case study :
    http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/

    Suggest you add this to your list. It’s actually a lot more than a framework. It’s a complete IDE with UI and Code editing and incorporates both Phonegap and jQuerymobile. Bit like a cloud based Visual Basic for mobile and desktop apps.

  • http://www.kreativtheme.com Kreativ Theme

    wow, I never knew there are so many. I thought that JQuery, Mootools and Prototype are best and the only ones out there

    thanks!

    • JustMessin

      You didn’t read the article, did you? :P

      • Prathap

        How did you find that ;-)

  • someone

    LoungeJS

    has anyone here used this framework, looking for something easy to use for my project.

    http://code.google.com/p/loungejs/

  • Luis González

    If you don’t know what these frameworks are for, or if you wonder whether you need one or not, this is my little piece of advice:

    Forget about it (at least for now). Simply stick to plain old jQuery, master it, be your friend.
    If you suddenly find yourself getting swamped into a lot of jQuery spaguetti code, that means that your application is getting way too complex and your code needs some structure to make it maintainable.
    This is where an MVC framework can help you, by giving some logical structure to your code, making it more modular and reusable, easier to read and to understand.

    However, it’s hard to learn a solution to a problem you never had…
    If you are happy today with jQuery, and only JQuery, that’s perfectly ok.
    Time and experience will tell you when you need to add a new tool to your belt.

  • Pad

    Hey !

    Great article !

    There are new kids in town here too.. Ember.js is a new and very interesting one, maybe there would be some new article diving into Ember.js.. ?

    Thanks for all the nettuts website, content is awesome and extremely rich !

  • CandyMan

    FCUK this!

    That’s it, I’ve had enough.

    Am I expected to learn this forever mutating SH!T,
    every day and night for the rest of my working life,
    which now is deemed by my government to be exactly the day that I die,
    for ever diminishing returns?

    Its not like B(W)ankers have to update their skill set every micro second, do they ?
    I mean, think about it, they get money for virtually free from the private central banks and then lend it at interest. How bloody hard could it be to not make a whopping profit and keep on making a profit for eternity ? You’d think only a complete moron would screw up, would’nt you. But, somehow these dim whits have just managed to completely turn the world economy t!ts up by screwing up, big time. And, whats more is there doing it again and again and again ….

    Anyone know ‘Candy Floss’, I think I am going to learn it.

  • http://www.sameerast.com Sameera Thilakasiri

    All good, and I just got EmberJS that is also one of goof MVC.

  • WWW Trainee

    I wonder why extjs is not at the top of the list since it is the best on many accounts. JQuery, Prototype and others are so far from etxjs.

  • http://wpmonkeys.com Banhawi

    Awesome list, thank you Siddharth

  • FightTheFUD

    I love you, CandyMan. I.T. *is* the snake that eats it’s own tail.

    However, if the MVC frameworks DO make my JS apps more maintainable and truly help save time (longer term), then I can put that savings into creating something of true value.

  • Venk

    Does anyone know about ember js?

    • http://twitter.com/mBeloula Malek Beloula

      sure, the perfect for very complex projects

Newer Comments →