New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

JavaScript MVC 1.1 - You need a good JavaScript MVC Framework

This is part 1 of my short series about JavaScript MVC Frameworks. It will cover some basics, compare the most popular frameworks and provide some recommendations on how to get into this topic. In Part 1 we'll focus on what MVC is, how the JavaScript MVC relates to MVC and why you should learn it ASAP.

What is an MVC Framework?

Many ASP developers have heard of MVC or similar terms like MVP, MVVM when talking about MVC, a second-generation, Ruby-oriented server side development system. This causes a lot of wrong concepts, which I would like to clean up.

#1 MVC is not a 3-tier setup…

Many developers hear of 3 tiers (data, business, view) and think that MVC somehow reflects these three layers (data=model, business-layer=controller, view=view). This leads to some very creative code-structuring, but it's wrong.

#2… it's a way to split the View-Layer

In reality, the View-Layer has been getting more and more attention as the layers beneath it get automated. Thanks to technologies like Entity-Framework or PetaPoco a developer spends very little time in the DAL (data access layer) - and most web-applications also have a very meager business-layer. So this is where MVC fits in the 3-layer scheme:

Why split the UI-Layer?

There are a few reasons, but the most important is that as views become more complex, it's important to apply the SoC-pattern (separation of concerns). This helps manage the code and keep things clean. It also allows developers to automate certain aspects (like url-to-view-mapping) in a consistent, clear way. And this separation also allows automated testing of parts of the code - which is almost impossible in the everything-is-together jumble.

What's a Controller?

Simply speaking the controller decides what data is shown with what view, and how to handle data-changes in the UI (the controller could decide to show/hide something or to save data to the backend).

What's a View?

This is the Template to be used for displaying the data to the user. It's typically some mix of HTML and various placeholders.

What's a Model or a ViewModel?

The model is neither the database nor a copy of the data in the database - it's actually the data-currently-relevant-to-the-view. So it can contain database fields, but it can also contain things like "show-details-pane" or "user-input-is-valid" states. The model can also contain data from multiple sources and calculated fields. I haven't figured out why it's called a model - if you know, post it below. For more infos, I found this great article covering the model.

What is a JavaScript MVC-Framework?

It's a system which allows to you combine data (usually delivered as JSON) with some templates (usually HTML + placeholders) within the browser and wire-up clicks and other actions to do things you want to do. It helps you organize your code into "data", "visuals" and "rules/logic" and drastically reduces the amount of time needed to do this.

Such a framework also helps with many standard problems like async data-loading (very common), choosing which view to show and helps really separate the work, so that the developer can program the logic without having to design it, and the designer can make it nice without needing real programming skills.

Some common JavaScript MVC-Systems

The most common today are probably:

  1. AngularJS
  2. Ember.js
  3. Backbone.js

And also popular, but mainly in the Microsoft ecosystem:

  1. knockoutJS
  2. Kendo UI Core

Why not use MVC?

There's an old MVC-Framework, why not use that?

Good question. In short: it's an concept which had a lot of trouble taking off, because it ended up placing parts of the MVC on the server and parts of it on the client. This spreadeagled approach inherited many of the Webforms weaknesses. The way I interpret Microsofts current work on vNext, I believe it's dead and will be replaced by WebAPI and JavaScript MVC-Frameworks - more about it in this blog post.

Why is JavaScript MVC better than ASP MVC?

Users nowadays expect the UI to react immediately to any kind of action. So if you click on a thumbnail, you expect a lightbox immediately, and if you type in your ZIP-code you expect a "this is the wrong-format" hint to appear without delay. Most of this requires JavaScript - this is unavoidable. And it can be done completely in JavaScript (assuming that the data is delivered to the client) and does not benefit much from HTML-rendering on the server.

Now ASP MVC tries to keep some parts of this rendering on the server - with very little benefit to the whole solution but with a lot of overhead, debugging and more.

Simply put: JS MVC works without needing ASP MVC, but ASP MVC can never be good without JS MVC. So why bother with both, if one solution is simpler and does it all?

Safe-Apps - another reason for JavaScript MVC

We see a rapid shift from server-code to client code, mainly because it can't kill the server. Imagine creating an image-rotator - something mainly requiring some JavaScript. In old-school programming on DNN you would create a module with all the overhead this contains - and with a DLL! This DLL can easily stop your DNN from functioning and will be one of your core problems in every DNN-upgrade and cause compatibility problems with other DLLs. In addition to that, a problem in your DLL can stop DNN even if your image-rotator is not used on any page. The advent of server-safe apps, with ZERO server code, will remove this problem forever.

This is the Future, so you need one - now!

Just to be clear: the entire web is moving this way - and even Microsoft has realized this and has been secretly shifting in this direction for about 3 years now. I've written a series about this called The Future of DNN Speaks Razor.

So it's never to early to start - especially since other CMSs are already placing a strong focus on this and DNN8 will too.

Next steps

In the next parts of this series we we'll look into

  1. What is it and why you need it (this post)
  2. Comparing the currently most popular frameworks AngularJS and knockoutJS
  3. A simple example how to use such a framework
  4. The entire setup with data-delivery from the server - ideally without server code
  5. Discovering some sample Apps for you to adapt to your needs

Loving open-source in Switzerland,
Daniel, Raphael and Benjamin 

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.


Bruce de Beer
Great article Daniel, can't wait to read the follow ups.
Bruce de Beer Thursday, October 23, 2014 10:50 AM (link)
Bruce de Beer
Great article Daniel, can't wait to read the follow ups.
Bruce de Beer Thursday, October 23, 2014 11:25 AM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out