Very large single page application design problems

Question

I am currently writing whats going to be a very, very large single page web/javascript application.

Technologies I am using are ASP.NET MVC4, jquery, knockout.js and amplify.js.

The problem I am having is that most if not all of the single page application examples are for smaller applications where having all of the script templates (be it jquery, handlbars, etc...) are all in the same file along with the rest of the html code. This is fine for smaller apps but the application I am building is an entire maintenance logistics application with many, many, many screens.

The approach I took so far is I have an outer shell (my main index.cshtml file) and I am using jquery's load() method to load or rather inject the particular file I need when a user makes a certain selection.

example:

function handleLoginClick(){

    App.mainContentContainer.delegate('#btnLogin', 'click', function() {

        App.loadModule('Home/ProductionControlMenu', App.MainMenuView.render());

    });

}

here's the code for the App.loadModule function:

App.loadModule = function(path, callback){

    App.mainContentContainer.load(App.siteRoot + path, callback);

};

All was going well until I needed to actually start interacting with the various form elements on the newly loaded screen. jquery can't seem to get a handle on them directly. I can't use .live() or .delegate() because they aren't events, they are textboxes and buttons and sometimes I need to change their css classes.

They only way I found is to get a handle on an element from the outer shell (something that wasn't loaded via .load() ) and use jquery's .find() method like so:

  App.mainContentContainer.find('#btnLogin').addClass('disabled');

clearly I don't want to have to do something like this everytime I need to interact with or even retrieve values from a form element.

Does anybody have any ideas as to how I can create a maintainable very large single page application with potentially hundreds of .html files without having to have all that html code located in a single file and still get around this .load() issue I am having?

Any thoughts would be greatly appreciated. :-)

V/R

Chris

UPDATE

I thought I'd post an update and as to how things went and what worked. After much research I decided to go with Google's AngularJS Javascript framework. It simplified the ordeal exponentially and I would definitely, definitely advise all who are looking into making a large SPA to give it a look.

Links:

Main Site http://angularjs.org/

Awesome free short videos on Angular: http://www.egghead.io/

Solution 1

This is actually a very complicated question as it really gets down to the design of your architecture.

For large-scale single-page applications, it's best to use some sort of front-end MV* style framework such as backbone.js, which ties in to jQuery quite usefully. You should also think about using some sort of dependency management framework such as require.js in order to load your scripts and dependencies asynchronously, and even better -- use the AMD pattern in your application design to make your architecture modular and easier to manage.

As far as how this relates to your MVC4 project, you have some options:

1. Do you want to use MVC as a "service layer" of sorts, that simply returns JSON objects, allowing your front-end to do the markup/template creation (think handlebars.js), or
2. Do you want your MVC project to return partial views (HTML) as a response, where you leverage the Razor templating system and simply use the front end to display what comes back from the server?

Either way, you will have to devise a way to handle front-end events and navigation (backbone provides both of these things when coupled with jQuery). Even more complicated is the pattern you choose to notify one view of another view's activities (there are many ways to do this) -- a publish/subscribe pattern for example.

I hope I have helped a bit, I know I'm not fully answering the question, but the answer could get really long!

Solution 2

Lots of things are wrong with your approach. What I'd recommend is to watch some presentations on how people build Single Page Applications and what tooling is mostly used.

This seems like something reasonable: http://singlepageappbook.com/

You will at least want

• some kind of modules system (I recommend AMD – http://requirejs.org)
• an MV* framework (Backbone, Ember.js etc.)
• DOM/AJAX Framework (jQuery, Mootools etc.). Some frameworks offer this and all of the above (Dojo, YUI, Sencha)
• build solution (to have different environment in development / production)

Couple of good links:

1. http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-talk
2. http://video.copenhagenjs.dk/video/3413395/simon-hjberg-swipely-building
3. http://backstage.soundcloud.com/2012/06/building-the-next-soundcloud/
4. http://www.youtube.com/watch?v=vXjVFPosQHw

Solution 3

If you don't need a complicated truly SOFEA Single Page App then I recommend you go the PJAX route.

Then you just write your app as a normal web 1.0 app with the performance benefits of a single page load. I urge you to consider this an option as it allows you to do most of your validation work server side.

The idea is very simple on every response your sending the whole page back minus the header and footer (which contains the javascript and css includes). DOM rendering time is incredible fast these days... whats not is a full page reload, So don't worry about the size of the HTML your returning back.

Also the "PJAX way" is much easier to cache, Google SEO friendly and is in fact what the new Basecamp does.

Solution 4

Note: Wanted this to be a comment not an answer but don't have enough exp to post comments ;(
[any corrections by community members welcome!]

Important points to consider for single page apps:

• Lazy loading is vital as you don't want hundreds of js files loaded straight away as user first loads the page (very slow load time).
• Good File organisation,- helps making changes easier, reduces complexity a bit and promotes reusable components. Makes testing of components easier.
• Testing,- Since single page apps have a lot of javascript going on under the hood you would need a test framework for automatically testing components. This testing is on top of the tests you would use to confirm if certain user controls are rendered etc as you wouldn't want a viewless component making an ajax call to server when it shouldn't etc.

+1 for gryzzly's point about using a framework.

Sencha have a nice MVC like framework for their ExtJs product. They have data stores, ajax, lazy loading, class hierarchies and a lot more all bundled into the package. They have a good api page also to lookup object properties and methods (handy since there doesn't seem to be any intellisense for javascript :/ ). Their api page is; as far as I know, an example of a single page app. I know much of the stuff ExtJs does you can find an open source alternative but I like that it's just the one library and I don't have to download a couple of different frameworks to do various operations. [note: I have no affiliation to Sencha except for being a customer of theirs and like their stuff.]

Conclusion:

I'd say it would be quite difficult to manage a large single page app without using some client side framework; whether open source or not, and without using some architectural pattern like a client side MVC.

Single page apps I think are more complicated so your team would need to be quite handy at understanding the concept of a single page app and how to implement it. If you pull it off the site will be amazing in terms of user experience.

View more solutions

Comments

[cpeele00]

thanks for info. Those are all things I am planning on using however doesn't my initial problem remain the same: simply too much html to stuff into templates to put on a single page. The size of the page would be huge. I understand about using AMD, require.js for js but I need to solve the problem with handling tons of html via too many templates. Unless I'm missing something?

[Misha Reyzlin]

You can load templates with requirejs via its text plugin. However, most templates, when pre-compiled, actually are JS files (if you are using proper and fast technology over simple HTML partials then modified via DOM API).

[Misha Reyzlin]

very simplified: if your template is <li>{{username}}</li> then after you compile it it will become function (username) { return "<li>" + username + "</li>"; }. Now when you call your template's engine render method, it will take this JS function and call it with appropriate parameters. This is faster and more flexible than using HTML as templates.

[cpeele00]

Plan b, thanks for your help man. I'm thinking I may go with rendering partials and then use jquery templates or some other kind like it on the partials for rendering the json data coming back from the Web API. I'll use Require.js and Knockout for the javascript. How's that sound?

[Bryan A]

I think that's a very reasonable approach! Whatever you do, if this is an "enterprisey" style app that you plan on coming back to, just keep it consistent so you don't drive yourself nuts! That's the hardest part when you you design an app like this.

[Adam Gent]

@cpeele00 If your going the render partial route I would just use PJAX or DJAX then you just develop your app Web 1.0. See my answer.

[Matt Robertson]

Thanks for the links -- very helpful!!