Javascript Implementation Patterns for Server-side MVC Websites

Question

I'm looking for information on common patterns for initializing and executing Javascript page by page in a "traditional" server-side MVC website architecture.

A few months ago, my development team began, but abandoned, a major re-architecture of our company's primary web app, including a full front-end redesign. In the process, there was some debate about the architecture of the Javascript in the current version of the site, and whether it fit into a clear, modern design pattern.

Now I've returned to the process of overhauling the front end of this and several other MVC websites (Ruby on Rails and MVC.net) to implement a responsive framework (Bootstrap), and in the process will again need to review then revamp and update a lot of Javascript.

These web applications are NOT single-page Javascript applications (in fact, we are ripping out a lot of Ajax) or designed to require a Javascript MVC pattern; these apps are basically brochure, catalog and administrative sites that follow a server-side MVC pattern. The vast majority of the Javascript required is behavioral, pre-built plugins (JQuery and Bootstrap, et al) that execute on specific DOM nodes.

I'm going to give a very brief (as brief as I can be) run-down of the current architecture only in order to illustrate the scope and type of paradigm I'm talking about. Hopefully, it will help you understand the nature of the patterns I'm looking for, but I'm not looking for commentary on the specifics of this code.

What I've done in the past is relatively straight-forward and easy to maintain, but, as mentioned above, some of the other developers don't like the current architecture.

Currently, on document ready, I execute whatever global Javascript needs to occur on every page, and then call a page-specific init function to initialize node-specific functionality, retrieving the init method from a JS object.

On each page load, something like this will happen:

$(document).ready(function(){
  $('header').menuAction();
  App.pages.executePage('home','show'); //dynamic from framework request object
});

And the main App javascript is like

App = {
  usefulGlobalVar: 0,
  pages:
  {
    executePage: function(action, controller)
    { 
       // if exists, App.pages[action][controller].init()
    },
    home:
    {
      show:
      {
         init: function()
         {
            $('#tabs').tabs(); //et. al
         },
         normalizeName: function()
         {
            // dom-specific utility function that
            // doesn't require a full-blown component/class/module
         }
      },
      edit:
          ...
    },
    user_profile:
      ...
  }
}

Any common features and functionality requiring modularization or compotentizing is done as needed with prototyping. For common implementation of plugins, I often extend JQuery, so I can easily initialize a plugin with the same options throughout the site.

For example,

$('[data-tabs]').myTabs()

with this code in a utility javascript file:

 (function($) {
      $.fn.myTabs = function() {
        this.tabs( {
          //...common options
        });
      };
    })

Pointers to articles, books or other discussions would be most welcome. Again, I am looking for a site-wide implementation pattern, NOT a JS MVC framework or general how-tos on creating JS classes or components.

Thanks for your help!

Answer 1

Well, it's really hard to suggest a pattern without knowing your exact Requirements. I've personally used Revealing Module Pattern in couple of applications -- for some big international organizations, and the development team is quite happy with it. But as I said before, it really depends to your requirements.

Generally I can recommend you to take a look at Addy Osmani's JavaScript book to somehow get more familiar with what options you have.

To me both Module and Revealing Module patterns sounds like a good fit for an MVC backend.

Here is kinda similar to what I usually use:

/* main.js */
( function ( window ) {
    window.App = {
        ...
    }
})( window );

/* moduleA.js */
( function ( App ) {
    App.functionA = {
        ...
    }
})( App );

/* moduleB.js */
( function ( App ) {
    App.functionB = {
        ...
    }
})( App );