JavaScript frameworks to build single page applications

Question

My goal is to migrate an existing web application to a RESTful single page application (SPA). Currently, I'm evaluating several Javascript web application frameworks.

---

My requirements are as follow:

• RESTful data layer (like ember-data)
• MV*-structure
• Dynamic routes
• Testing-support
• Coding by convention
• SEO-support
• Browser-History-Support
• Good (API-) documentation
• Production-ready
• Living community

---

Backbone

The current application is using backbone.js. Overall, backbone.js is a nice project, but I'm missing well-defined structures that determine where what has to happen and how things must get implemented. Working in a bigger team with changing developers this leads to some kind of unstructured code, difficult to maintain and difficult to understand. This is why I'm searching now for a framework, that already defines all this stuff.

Ember

I looked into ember.js the last days. The approach seems very promising to me. But, unfortunately, the code changes almost daily. So, I won't call it production-ready. And, unfortunately, we can't wait for it to be version 1.0. But I really like the idea behind this framework.

Angular

Angular.js is a widely spread framework as well, maintained by Google. But I could not get familiar with angular. For me, the structure seems kind of unclear, explanations are missing of the overall responsibilities of each part of the framework, and the implementations feel circuitous. Just to get this straight: this is just my personal impression and might be based on missing knowledge.

Batman and Meteor

As I understood, both frameworks need a server part as well. And since we just want a RESTful backend - no matter what language, technic or software, this is not what we want. Further, the backend API does already exist (RoR).

Knockout, CanJS and Spine

I did not go any deeper into these three candidates. Maybe this will be my next step.

---

So my questions now:

• Am I missing any good SPA-frameworks?
• What framework would you suggest/recommend?
• Would you avoid any of the mentioned frameworks?
• What is your experience in bigger SP applications?

---

PS: I'd would like to recommend a great blogpost from Steven Anderson (core developer from Knockout.js) about the "Throne of JS"-conference (from 2012) and javascript frameworks in general.

PS: Yes, I know there are already some question on SO. But since the development is so rapidly and fast for SPAs, most of them are already out-of-date.

Solution 1

I recently had to decide on a JavaScript SPA framework on a project too.

• Ember

  Looked at Ember early on and had similar thoughts as you about it - I really liked it but it felt like it was still too early to use... about half the tutorials I read didn't work with the current version because something had recently changed in how templating works.

• Backbone

  Backbone was the first frameworks we seriously looked at. I'm not sure I understand why you think it doesn't have "well defined structures"? Backbone is pretty clear about how to divide up Model and View code. Maybe you mean there's not some kind of app template? Anyway, Backbone seems really focused on the model/REST-binding part, but doesn't really prescribe anything for view binding. If model binding's important to you and you're using Rails it should be a breeze to do this. Unfortunately, the web services for my app didn't really match up, and I had to write my own .sync and .parse methods for everything. The separation of Model and View code was nice, but since we'd have to write all our bindings from scratch it wasn't worth it.

• Knockout

  Knockout is like the Yin to Backbone's Yang. Where Backbone is focused on the Model, Knockout is a MVVM framework and is focused on the View. It has observable wrappers for JavaScript object properties and uses a data-bind attribute to bind properties to your HTML. In the end we went with Knockout since view binding was mainly what we needed for our app. (...plus others, as discussed later...) If you like Knockout's view binding and Backbone's model bindings there's also KnockBack which combines both frameworks.

• Angular

  Looked at this after Knockout - unfortunately we all seemed pretty happy with how Knockout did view binding. It seemed a lot more complex and harder to get into than Knockout. And it uses a bunch of custom HTML attributes to do bindings, which I'm not sure I like... I may take another look at Angular later, because since I've come across multiple people who really like the framework - maybe we just looked at it too late for this project.

• Batman, Meteor, CanJS, Spine

  Didn't really look too closely at any of these. Though I know Spine is a similar framework to Backbone with explicit Controller objects, and is written in CoffeeScript.

• Afterword

  As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).

  Javascript app development is more like the Java ecosystem than the Rails ecosystem. Rails provides a solid core of stuff you're going to use for every app (Rails framework), and the community provides a lot of customizations on top of that (gems). Java provides... a language. And then you can choose Java EE or Spring or Play or Struts or Tapestry. And choose JDBC or Hibernate or TopLink or Ibatis to talk to the database. And then you can use Ant or Maven or Gradle to build it. And choose Tomcat or Jetty or JBoss or WebLogin to run it in. So there's more emphasis on choosing what you need and what works together than choosing THE framework to use.

Solution 2

it's been a year since we started development on our Cloud services project with numerous SPAs, so it was a big decision, which javascript framework to use for our UI to satisfy our RESTful architecture needs. and after a lot of researches we ended up using Dojo framework .

main features you'll love:

1. educated community and a team that came up with a perfect design pattern. great conventions and modular/object-oriented architecture. with CrossBrowser programming attitudes :)
2. MV* structure. build UI widgets with external .htm templates and for production, build all your javascript & templates into a single, minified and small .js
3. build classes with inheritance. property setters, a lot of function tools.
4. pub/sub mechanism (named topics in dojo)
5. a lot of UI controls, from validation form control, dialogs/tooltips to a heavy featured, highly customizable (but lightweight) chart & data-grid solution.
6. a good unit test system named DOH. it also have a robot to reproduce mouse/keyboard actions.
7. a querying tool (like JQuery) named NodeList with all jquery features and even a lot of it's plugins.
8. and the good but not so complete part. it has a JsonRest module to use with your REST services. its a handy tool but it lacks a lot of features.

to overcome these issues, we developed an AJAX poller, error handling and universal, loading & notifications solution. we did it very easily using dojo framework conventions and structures. if you don't want to do that, perhaps you have to use another framework for this part.

looking at great SPAs around the web you'll find out all of them are customized and using multiple frameworks. but our experience with Dojo alone was fantastic. and therefore I suggest you to don't think of any other framework since all of them are incomplete for a SPA. but ultimately you have also another option (which I don't recommend and have no details information on). go with a JAVA framework that is capable of building SPAs, by automatically generating UI & javascript.

Comments

[onlyurei]

Checkout the knockout-based SPA framework I just open-sourced: knockout-spa github.com/onlyurei/knockout-spa

[Christopher Will]

Thank you much for your detailed answer. Some questions regarding knockout.js: 1) Does it provide some kind of data-layer for keeping model in frontend/backend in sync? 2) How is the support to include one template into another (probably together with requireJS)? 3) Is it easy to put all files (models, views, controllers, helper etc) separately and in different folders? Beside these questions I set your answer to accepted, since you gave a lot of information.

[Nate]

@ChristopherWill Thanks! 1.) Much like Backbone leaves it up to you for view binding, Knockout leaves it up to you for REST->Model binding. There are some examples in the documentation - knockoutjs.com/documentation/json-data.html or you can use KnockBack to combine Backbone's REST->Model population.

[Nate]

2.) It depends on what you mean - Knockout has a built-in data binding that lets you take a collection from the model, bind to a list tag or table tag and for each one render a specified template. For large scale stuff, like how you build your overall views and swap them out - that's still somewhat manual (at least how I'm doing it, still learning) - RequireJS w/ the text plugin makes it a little easier to do this, but you still have to specify the logic and swap out divs - I just do this in the methods that respond to my routes. You may be able to wire up Knockout events to do this, though.

[Nate]

3.) RequireJS is what lets you do this.

[Christopher Will]

Thanks Nate. I think I will give KnockBack a try.. sounds kind of promising. And, of course, with your mentioned libraries as well (requireJS, crossroads etc)

[Nate]

Actually, with Knockback you won't need crossroads - it uses Backbone's routing.

[Christopher Will]

Ah, cool. Thanks for note.

[Elisabeth]

@Guys really... you can not compare apples with bananas. KnockoutJS is a mvvm databinding toolkit. Its functionality is a subset of the AngularJS application framework. I you want to do a large scale SPA and use only knockoutjs + requirejs + jquery as we did... its hacking. What you need besides an mvvm is a mvc structure on client side and this is what angularjs offers among lots of other stuff. Do not reinvent the wheel by swaping views with jquery. Use the tools which offer what you will need.

[Moorthy]

@Elisa That's exactly Durandaljs has done. Instead of reinventing they have built a SPA framework using jQuery, Knockout and RequireJS.

[coffekid]

I've done Knockout for 2 years and since September I switched to angular.js. It is a complex framework and the documentation really won't help, but once you get used to it and learn how powerful angular .js can be, you'll see huge time savings compared developing with KO.

[Lucas]

If I was to build a sort of multi-user blogging website, what frameworks would you recommend?

[Dunaevsky Maxim]

Hello! Do you use Dojo now? Have you blog about Dojo?

[Unicornist]

Hi! Yes we still use it for the same product and we maintain it. out in-house framework is wrote on top of dojo, and we are adding to it each day.. nope I don't have a blog for that. if you are going to start with it it's nowadays considered an old tool. They are still working on the Dojo 2.0 but for now it's may be better to use other options. we have React/Angular at the top of the list.