Scott Hanselman

The Big Glossary of Open Source JavaScript and Web Frameworks with Cool Names

April 13, '12 Comments [38] Posted in ASP.NET | Javascript | Open Source
Sponsored By

Photo via Dmitry Baranovskiy and used under Creative Commons - http://flic.kr/p/4CdjpjIt's getting to the point where there are so many cool open source projects that I can't keep up. When you add in the currently battle royale of JavaScript projects that are basically just hip sounding words with ".js" added to the end, it's a little overwhelming. Seriously, just pick a word out of the dictionary at random and that's the name of an up and coming JavaScript library.

JavaScript MVC Frameworks and Libraries

This is an area that is very interesting but also very not-yet-baked. In the DOM manipulation and CSS selector space, jQuery won. That fight is over. The next big question is client side MVC frameworks. It seems everyone wants to make the next "Rails" framework on JavaScript and while there are some contenders, there's still lots of room for someone to "win."

DOM manipulation libraries like jQuery are important, but it's clear that making large and rich web applications requires more than just jQuery. More and more applications want smart asynchrony and dynamic loading.

(Reminder: All this IS overwhelming. That doesn't mean you need to know all these frameworks or feel bad that you don't know them all. Just accept that you DON'T know them all. Be OK with that.)

Here's the major players and ones you might want to be familiar with. Remember, these are client side libraries and while they often mention server-side frameworks like node or rails, these are things written in JavaScript that anyone can use.

  • Ember.js - Attempts to remove tedious boilerplate code. Includes a templating engine (no one will agree on just one), encourages an architecture where the browser does most of the work, supports state-management out of the box. Focus on computed properties, and templates that update themselves.
  • Underscore .js - A library of more than 60 functions to make JavaScript more fun and easier to use. Provides a layer that will use a modern browser's native implementation of a method while still supporting older browsers. Has iterators like each, map, reduce, etc. In a way, it's like LINQ for JavaScript.
  • JavaScriptMVC - A jQuery-friendly framework that adds functional testing, MVC plugins, documentation generation, dependancy management and build tools.
  • Spine.js - Seems like less than a Backbone (these libraries all play with each other's names). Introduces models and controllers, but for views, requires you use your own template engine. Intends to be super lightweight.
  • Backbone.js - Everyone loves Backbone. It's the one you'll hear about the most. There's a large community supporting it. Folks have said that large applications can get a little hairy and difficult to manage, though. Lots of great docs and examples.
  • Knockout.js - MVVM on the client rather than MVC. Lots of interesting client-side data-bind expressions. Rich documentation.
    • And, wait for it, Knockback.js, a library that bridges the gaps between Knockout and Backbone and encourages you to use both effectively.
  • Sammy.js - A very small core library that brings in other adapters and plugins to give you just the parts you need. Focused on developer happiness. Works well with apps that are sitting on top of RESTful JSON server sides.
  • Angular.js - Includes templates, two-way data-binding and MVC, again, all on the client. Very small and starting to make a splash.
  • SproutCore - SproutCore seems to be very complete and more prescriptive than other frameworks. It also has a focus on making apps on tablets and other devices. The NPR for Chrome app used them.
  • Cappuccino - If you like and think in Objective-C, you'll like Cappuccino and Objective-J. Cappuccino is kinda of Cocoa (Mac APIs) for the web.
  • Google Closure - Almost doesn't belong in the list as it's a very complete toolkit with a whole worldview, rich library, templates, and lots of extras. You can choose how much you want to embrace, though.
  • ExtJS4 - This is a Sencha product and now on its fourth major release. It includes not only a framework and architecture but also widgets and charts.
  • PureMVC - Another MVC on the client side implementation, but this one was ported from ActionScript. It was originally used on Adobe Air and the like.
  • Batman.js - Bonus points for the best name. Explicitly embraces CoffeeScript as well as JavaScript. Only 2000 lines and very few extras. Very Rails friendly, prescriptive without being oppressive.
  • Require.js - A JavaScript file and module loader.
  • PrefixFree.js - A nice library that expands all your CSS to use the explosion of vendor prefixes correctly.
  • Lawnchair.js - Client-side storage and persistence. Less than a couch, but smaller and outside.
  • Mustache - Templates for views, explicitly without logic.
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};

var output = Mustache.render("{{title}} spends {{calc}}", view);
  • Handlebars.js - An superset of the Mustache template concept with extra features. A fancier mustache. Ahem, "Handlebar Mustache."

Also checkout Gordon Hempton's excellent "consumer reports" table on his blog that covers which JavaScript frameworks support which features.

ASP.NET Libraries, Frameworks and Open Source Projects

You may have heard that ASP.NET MVC 4, ASP.NET Web API and ASP.NET Web Pages v2 (Razor) are all now open source with contributions. They are up on CodePlex using Git. I thought I'd mention some interesting ASP.NET/CLR server side libraries here also as that's the area I work in.  There are thousands of Open Source projects in the .NET space, but I wanted to take a moment and feature these as they are all related and all emerging.

Just like the JavaScript projects above, these .NET projects are all trying to innovate...trying to make something new and modern and compelling without sacrificing the good things about the past.

  • OWIN - This is the "open web interface for .net." It represents the "spec" of the web app function signature. It serves the same purpose as Rack spec on Ruby or WSGI on Python. "The goal of the OWIN interface is to decouple server and application, encourage the development of simple modules for .NET web development, and, by being an open standard, stimulate the open source ecosystem of .NET web development tools."
  • Gate - An OWIN Reference implementation of utilities, host handlers, and web framework adapters for OWIN. This is essentially glue code, with things like Gate.Hosts.Kayak.dll on one hand, and Gate.Adapters.Nancy.dll on the other, to fit together your stack, e.g. "Kayak->Owin->Nancy"
  • Nancy - A "Sinatra" inspired framework. "Nancy is a lightweight, low-ceremony, framework for building HTTP based services on .Net and Mono. The goal of the framework is to stay out of the way as much as possible and provide a super-duper-happy-path to all interactions."
  • Kayak - A 100% C# HTTP Server assembly that can be embedded in your project. "Kayak is an asynchronous HTTP server written in C#. It has been designed to be easy to embed into a variety of applications. Kayak natively supports the OWIN 1.0 Draft specification."
  • Firefly - Another 100% C# HTTP server assembly.
  • Manos - A 100% C# HTTP server in an assembly that is a part of a larger Manos web server + web framework bundle.
    (web frameworks with owin adapters:)
  • AspNetWebApi - A framework optimized for HTTP APIs and services. Part of the open source ASP.NET Web Stack.
  • SignalR -  A socket.io-like message bus that supports realtime communication over Web Sockets, long polling, forever frame, or server sent events. JavaScript and Server-side components.
  • Fubu - A MVC-inspired framework with the beginnings of some OWIN support.
  • OpenRasta - A development framework for building web-based applications and services. Focused on being RESTful.

There is no question that I've missed some. Leave them in the comments and I'll keep this post updated. Projects for this list should be of some renown and be pushing the envelope in some notable way.

Big thanks to Louis DeJardin for his help and bootstrapping the list.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Friday, April 13, 2012 1:33:04 AM UTC
Lest ye forget JuiceUI, which ties into aspects of the first section mentioning jQuery. http://juiceui.com
Friday, April 13, 2012 2:07:47 AM UTC
One category of open source framework is hash-tag / URL management. Here's an open source tool for that:

http://emberex.com/hashrouter/

Friday, April 13, 2012 2:17:40 AM UTC
I've been using a library called Sugar.js. It adds dozens of very useful functions to the native Javascript objects. It's especially useful for date/time processing. Here's the description from their website...

***********************

What is Sugar?

Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.
Friday, April 13, 2012 2:29:37 AM UTC
More a "full stack" framework (and still very green):
http://meteor.com/

My pick is currently on Spine.Js
Friday, April 13, 2012 2:30:27 AM UTC
What about Modernizr?
Friday, April 13, 2012 3:45:53 AM UTC
What about Service Stack:
http://www.servicestack.net/
Friday, April 13, 2012 4:09:20 AM UTC
A JS library list would be remiss without microjs.com
Friday, April 13, 2012 4:27:46 AM UTC
I was about to write a mail to you to write a blog post about the various JavaScript frameworks available to work with, n the very next day (today) I wake up to see this post!!!!

Thanks :)
Friday, April 13, 2012 5:57:49 AM UTC
I think you should include UI frameworks like KendoUI.
Friday, April 13, 2012 7:08:56 AM UTC
Besides the great frameworks Scott mentioned, I would suggest to take a look at JSAnalyse:
http://jsanalyse.codeplex.com/

It is a tool which analyses the dependencies between javascript files. You can even define the allowed dependencies and JSAnalysis checks whether the defined rules are fulfilled or not. That allows to keep track about the javascript dependencies even in big projects and to have a clean architecture.

JSAnalyse can be executed as a command line tool or configured via the Visual Studio Layer Diagramm. It is also easy to integrate into the build. With gated check-ins you can keep the dependencies under control.

More details can be found at:
http://tstune.blogspot.de/2012/03/client-side-architecture-validation.html
Friday, April 13, 2012 8:59:04 AM UTC
I'm maintaining a similar list at What the Framework although the intended use is a quick look-up when someone mentions a framework you've never heard of.

It currently covers 110 "things" but there are some new ones here I can pick up, great work!
Stephen Fulljames
Friday, April 13, 2012 11:06:07 AM UTC
What about JsRender ?
Friday, April 13, 2012 11:57:40 AM UTC
Wakanda!!
Friday, April 13, 2012 12:34:03 PM UTC
Would be nice if you expanded on Angular to include that it also has routing, di and auto updated dom with a focus on testing as well. Having all of those built-in makes a much more compelling framework imo.
Friday, April 13, 2012 12:43:03 PM UTC
You might want to mention TodoMVC. This site demos many of the Javscript MV* frameworks by showing how to create a Todo app in each.

http://addyosmani.github.com/todomvc/
Friday, April 13, 2012 1:33:47 PM UTC
AmplifyJS !! Eventing, DOM Storage, AJAX Request Management
Friday, April 13, 2012 4:02:28 PM UTC
I've used Spine, I've used Backbone, and I've used Knockout in some big projects. I decided that Spine and Backbone are too opinionated to work well in a hybrid AJAX/ASP.NET MVC application; they try really hard to make you write everything on the client (server is for an API only).

I've decided on Knockout as the best fit for my programming style and application style (server-side pages/routing with dynamic interfaces). I am not saying Spine or BB aren't good, they are, but they are truly meant for SPAs. I can easily say I've been able to fly with just using KO and rolling my own client-side AJAX service; I think part of the issue is that it's hard to find the right pattern for what I want so I end up writing it myself. I may reach the point where it all clicks and I say, this is the framework I need.

If you're using Backbone, Backbone.Marionette is a must-have companion. Really it needs to be merged in it's so great.
Friday, April 13, 2012 4:19:02 PM UTC
> In the DOM manipulation and CSS selector space, jQuery won. That fight is over

Such a sad day.

Seriously though, out of all the MVC libraries either [Stapes][1] or [vapor][2] is the best

[1]: http://hay.github.com/stapes/
[2]: http://vaporjs.com/
Friday, April 13, 2012 5:47:24 PM UTC
If you want to use google closure then I built an MVC for it: https://github.com/rhysbrettbowen/PlastronJS
Friday, April 13, 2012 8:15:23 PM UTC
What about OData?
Friday, April 13, 2012 8:32:32 PM UTC
+1 for http://addyosmani.github.com/todomvc/
Friday, April 13, 2012 9:58:09 PM UTC
waht about dojo
Henock
Saturday, April 14, 2012 9:53:54 PM UTC
The big question is - how do I pick a winner?

My Blog - The Art of Managing Software Developers
Monday, April 16, 2012 8:37:35 AM UTC
No Nodejs ?? Shame!
No Nowjs ?? Double shame!
Monday, April 16, 2012 2:42:53 PM UTC
http://jondot.github.com/nina/ Similar to Nancy, build on the top of asp.net.
Monday, April 16, 2012 6:03:10 PM UTC
So what would you recommend for a newcomer to web development look at? Is there a good resource for someone like me, a winforms developer trying to get into web development? I understand html as that hasn't changed too drastically since the last time I used it, but beyond that where do I start? For educational purposes should I forsake the frameworks, learning to do everything at a low level so I can have a deep understanding of how things work and then move to the frameworks once I can appreciate how much easier they make life? Should I start off looking at the Microsoft set of tools for asp.net, or am I better served looking at rails or php?
Monday, April 16, 2012 7:35:15 PM UTC
Glad to see this post because I've been overwhelmed by the number of available frameworks. Using only jQuery and MooTools has been making me feel really antiquated.
Tuesday, April 17, 2012 5:05:51 AM UTC
Scott, Your list doesn't include data.js. Is it not important or is the purpose of data.js taken care by any other framework you listed here?
Friday, May 04, 2012 8:23:36 PM UTC
Nice list, I refered to this link on my last blog post. I have decided to move on with knockout + jQuery for our SharePoint Product. I am also looking at datajs for some of the modules that span across O365.
Wednesday, June 20, 2012 3:51:24 PM UTC
Sad to see overwhelming frameworks for client side rendering and ajax. For me less javascript code is the winner. Currently I am using knockout.js + jquery + asp.net mvc.
ashraf
Saturday, July 14, 2012 5:03:27 AM UTC
“DOM manipulation libraries like jQuery are important, but it's clear that making large and rich web applications requires more than just jQuery”

In reference to the above quote, a new framework called GluJS is one to look at.

What is it?
Specification-driven MVVM framework for building rich apps with Ext JS
GluJS
Thursday, September 27, 2012 1:47:25 PM UTC
I accidentally seen koJS automatically included into MVC 4 web application.
I haven't heard before about it, so I started looking into it and after a few weekends I built my first online game, http://nonstopwords.com

it's just unbelievable how easy it is to work with javascript now
Wednesday, October 31, 2012 4:31:09 PM UTC
Our MIT project:
JayData library is a unified data access library for JavaScript to CRUD data from different sources like WebSQL, IndexedDB, MongoDb, OData, HTML5 localStorage, Facebook or YQL. The library can be integrated with Knockout.js, Sencha Touch 2, SherPoint, TypeScript and can be used in Node.js environment as well.
Tuesday, November 06, 2012 8:16:28 AM UTC
What will you decide? Knockout.js, Backbone.js or Spine.js?
RoRroland
Saturday, December 01, 2012 12:22:57 PM UTC
There is a separate NuGet package called Microsoft.AspNet.WebApi.Owin, which adds Microsoft Web API support for OWIN. It's a sub-part of Katana (the new Kayak), but it seems to be getting very little exposure atm.

BobJ
Tuesday, December 18, 2012 8:28:13 PM UTC
One thing that is very important, which I don't see mentioned here at all, is the accessibility of common control types, which has a huge impact on user experience, contract procurements, marketability, and many other aspects.

There is a Bootstrapping library available at
http://whatsock.com/bootstrap
That can be used to create accessible interactive components using semantic HTML markup, which may help with this.

As an FYI, it is a misconception that ARIA will make things accessible. If the keyboard functionality of interactive components doesn't precisely match the ARIA attributes applied to them, then these components will not work accessibly. I've recently seen this with GWT, and in many other places.
Monday, April 22, 2013 6:51:20 PM UTC
I wish the C# / .NET frameworks were included in this performance comparison so that it would be easy to tell which frameworks were viable - http://www.techempower.com/benchmarks/#section=data-r3.
Friday, May 24, 2013 6:31:39 AM UTC
I'm enjoying Sencha's SDKs and just completed a Sencha Touch production app.

The ExtJS framework has a very rich widget set with heaps of data bound controls, Grid, Tree Grids, Charting and tons more. I personally think it feels mode "designed" than Dojo and higher level than jQuery since you code only JS (almost no HTML). They're class / event model rocks. Done some important performance improvements - especially the latest releases.

Now you add in the open source GluJS kit for ExtJS and you've replaced Knockout/Backbone with even tighter DRYer code. Their SVVM model also buys you much safer UI unit tests since they're based on a UI state model ( = view model) rather than the widgets they eventually bind to. They further enhance the two way data binding of Sencha's grids/list/tree controls and spread it to all UI components.
Tony OHagan
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.