Better Than MVC

Overview

  • A quick overview of MVC
  • What is good and bad about MVC
  • Alternative approaches

The State of MV*

  • So many JS MV* frameworks available
  • Each has a slightly different approach
  • "Why is it so?"

MVC is:

  • A design pattern that describes how a Model, View and Controller should interact to create a structured application.
  • Original implementation -> Smalltalk-80 MVC (conceived in 1978).

MVC isn't:

  • A hash / history API routing engine
  • A synchronization engine for your clientside data and your server-side (real) data
  • A Data Binding approach
  • A pattern for helping you compose your large application from smaller modules

Clientside MVC

The Good

It's a structured approach

One of the main reasons people advocate using an MVC framework is that it helps to prevent your application turning into spaghetti code.

A Proven Pattern

MVC is a proven pattern, and there is a lot of existing knowledge on how to implement it.

Clientside MVC

The Bad

MVC is Misunderstood

There are over 40 JavaScript MVC frameworks to help. ... many of which don't use MVC.
Addy Osmani

It's a Square Peg

  • MVC is a pattern that is best suited to a particular type of application (which admittedly are quite common) and interaction pattern.
  • Bending the MVC patterns to fit applications that miss the sweet spot isn't a good idea.

Tight Coupling

  • Most MVC frameworks are very declarative in the parts of the system are made to talk to each other.
  • While apps written like this are usually easy to comprehend, it's a pattern that limits extensibility.

Noise

  • The ability of clientside MVC (or MV*) to provide a portable, reusable pattern for web application development across different software projects and employers is limited.

  • Knowledge and experience in a single framework (e.g. Backbone, Angular), however, would be portable.

Clientside MVC

The Ugly

Some Frameworks Encourage HTML Abuse

Sometimes I feel like I'm the only person in the world who thinks the use of inline <script> tags to provide client-side templates is messy and wrong.

On Inlining Templates

Embedding scripts in your page that have a unknown content-type (such is the case here - the browser doesn't know how to execute a text/html script) are simply ignored by the browser - and by search engines and screenreaders. It's a perfect cloaking device for sneaking templates into your page.
John Resig
I like to use this technique for quick-and-dirty cases where I just need a little template or two on the page and want something light and fast.

Alternatives to MVC

Use MVC, But Rage against Frameworks

  • Look for good standalone libraries that provide comparable functionality to what you get in the framework.
  • While this is easy for some components, it's really hard (almost impossible) with other parts.

Message Bus

A Bus provides Lightweight Coupling

  • Provision for organic growth of software
  • Strong testability of application components
  • Well geared to dealing with increasingly realtime nature of the web
  • Personally I can worked with and can highly recommend eve

Eve

Reactive UI

Very simple, decoupled handler to keep the UI in sync with the data:

eve.on('todolist.refresh', function(todos) {

  $('ul.todos').html(template(items));
});

Personally, I feel more comfortable using this technique that using automatic UI/View bindings.

Eve

Decoupled "Controller" Actions

Using appropriate event namespacing with eve can provide flexible decoupled handling of application actions:

eve.on('todolist.add.todo', function(todo) {
  // save the todo to the context appropriate storage
});

Eve

Event Handler Priority

Eve supports the ability to register a handler in a particular priority order. For example, it is extremely simple to wire in validation for our add todo event:

// wire in a "before" other actions event handler
eve.on('todolist.add.todo', function(todo) {
  // validate the todo
  var vResults = validator.validate(rules.todo, todo);

  // if the 
  if (! vResults.valid) {
    eve.stop();
  }
})(-1);

Eve

Wildcard Handling

Wildcard matching provides the ability to events matching a particular pattern with a centralized handler:

eve.on('todolist.add.*', function(data) {
  // get the validation rules based on the type of data being added
  var vRules = rules[eve.nt().split('.')[2]],
      vResults = validator.validate(vRules, data);

  // if the 
  if (! vResults.valid) {
    eve.stop();
  }
})(-1);

Cryogenics

Future Developments

There is some great stuff coming down the pipe that makes an MVCesque approach more sensible.

The Challenge

Research

  • Research the current offerings
  • TodoMVC is a great place to start.

Think

  • Consider your specific application requirements
  • Don't get sucked into the hype

Innovate

  • Don't be afraid to try something new and different
  • Recreating familiar environments and patterns is flawed

Thanks