Javascript MVC Framework for building reusable components on a non-SPA site

Question

We have an existing Genealogy site which is not a single-page app, and over the years we've created a number of jQuery plugins for doing things such as typeahead, various modal-based utilities, and components that are reusable around the site. We aren't doing a single-page app because we are a content publisher, and we're not yet confident that search engines will reliably index these in our use case.

We are now looking at adding some more complex widgets that have multi-view modal flows. An example for our Genealogy site is that there are numerous cases where a user must select a Person record from a pool of records they are following OR optionally, create a new one.

For example, say you are viewing a person record want to change the family tree relationships on a person. You click on a link and a modal appears allowing you to edit their relationships. We were envisioning a modal flow that looks like this:

• View 1 (Index): A management page that lists current relationships, along with an "Add Person" pulldown that allows you to select a relationship type (Parent, Spouse, Child, Sibling)

• View 2 (Add a person): We show a text input field with typeahead support. As the user types, we look through the pool of people on their graph and try to make a match. If they match something in typeahead, we can capture that and send that back to the parent app.

• View 3 (Search for matches): The user may have just missed the typeahead results - so allow the API to see if there are any potential matches in their graph. Allow the user to choose a match, and send this back. If there are no matches, they can click "These are not my person"

• View 4 (Create person): If we couldn't find a matching person in their graph, this is a completely new person. Give them a form to give details about the person.

I'm at a loss for what might be the best solution for this. I've looked into EmberJS and AngularJS, and folks in both those communities suggested that if you're not building a single-page app, it's not worthwhile using these frameworks.

Can anyone point me in the right direction? I can't be unique in this use case!

Answer 1

I have built several mini-SPA apps using both Knockout.js and Ember.js. There are a lot of good reasons for serving a mini-Single-Page-Application rather than converting your entire app, mainly that client-side code doesn't do everything better.

In my experience, both Angular and Ember.js are very useable without making your whole app client-side. Ember gives you some very useful tools for making "widgets".

For example, if I want my Ember application to render on a part of my server-side page, I can do this:

var App = Ember.Application.create({
  // Set the rootElement property to the div that I want my ember app to render inside
  rootElement: "#your-root-element",
  Resolver: Ember.DefaultResolver.extend({
    resolveTemplate: function(parsedName) {
      // Override this method to make this app look for its templates in a subdirectory
    }
  }),
});

// Don't render the app on any page by default
App.deferReadiness();

// Instead, check to see if the #rootElement is present on the page before rendering.
$(document).ready(function() {
  if ( $(App.get('rootElement')).length > 0 ) {
    App.advanceReadiness();
  }
});

I'm sure you can do similarly with Angular.js. I prefer Ember for the following reasons:

1. A genuine class/mixin system. This is really helpful when you want to share code: it should be very familiar to anyone who is used to working on the server side.
2. Very flexible templating.
3. Clear separation of concerns, allowing many different views and such to be handled elegantly.