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
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:
- Using SproutCore 2.0 with jQuery UI
- Build a Micro-Blog with SproutCore
- When To Use SproutCore, and When Not To
Cappuccino
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
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
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
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
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
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
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
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
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
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
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
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
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
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:
- Into the Ring with knockout.js
- Creating Rich Interactive Web Apps With KnockoutJS
- Build Dynamic Pages with Knockout.js
Jamal
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
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
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
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
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Siddharth
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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?
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 ;)
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.
too bad you there’s no more backbone tutorials on nettuts! still waiting for episode n.2 :)
bump
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?
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 :)
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.
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.
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.
Yeah – I must agree. Sid – can you add a Dojo item to this list, and change the title to “20+ JavaScript….”
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/
I really laughed as I read “_20_ …”. Didnt know there were so much frameworks (needed).
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
jQuery RULES… everything else sucks!!!
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.
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?
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! :)
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.
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.
No Dojo! shocked!!!
What about Dojo and Google Closure???????????? -1 for that :P
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?
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.
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.
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 : )
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.
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.
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!
perfect
go using!
This is a great list of micro js frameworks and you can filter the list by and their purpose http://microjs.com/
What about Node.js? I heard that it is new, but promising framework.
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.
Some nice Frameworks here.
Thankyou
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!
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.
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.
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
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
Excellent Collection. Thanks for share.
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?
As some of them are new to me will have to check them out, or wich one would you recomend?
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!?
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.
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.
Very Nice information.
Few days ago new framework of JavaScript is launched named CoffeeScript.
Thanks.
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.
Really nice framework list, I was looking for good one and now learning JavascriptMVC for my next project. Thanks alot for this information.
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.
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
Anyone have any experience with Grails?
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.
You must to include DHTMLX.com.
For me, the best.
nice framework list!I was looking for good one and now learning kendo for my next project.
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?
Instead of create tons of similar libraries, why doesn’t we concentrate to improve the existing ones? This behaviour is a real plague.
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.
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.
wow, I never knew there are so many. I thought that JQuery, Mootools and Prototype are best and the only ones out there
thanks!
LoungeJS
has anyone here used this framework, looking for something easy to use for my project.
http://code.google.com/p/loungejs/
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.