Basic Javascript & MVC Best Practices

Basic JavaScript & MVC Best practices:

JavaScript is fundamentally about objects. Arrays are objects. Functions are objects. Objects are objects. So what are objects? Objects are collections of name-value pairs. The names are strings, and the values are strings, numbers, booleans, and objects (including arrays and functions). Objects are usually implemented as hash tables so values can be retrieved quickly. [ Douglas Crockford]

Blindly applying a “best practice” is just as irresponsible as never applying a “best practice”, but asses the trade before you commit to any implementation.

Shoot for library or framework:

• Make your script as Generic as possible
• Foster Code reuse
• Make functions self-sufficient (Message based over Address Based communication)
• Stay away from global variables , stop polluting the global name space

• o myglobal = "hello"; // antipattern
• o console.log(myglobal); // "hello"
• o console.log(window.myglobal); // "hello"
• o console.log(window["myglobal"]); // "hello"
• o console.log(this.myglobal); // "hello"

• o Rule of thumb: always declare variables with var
• o Name pollution prohibits portability or reuse

• Never write a function within the default namespace(window)
• Determine if the object should be a singleton or instance based
• Capitalizing Constructors for readability
• Writing Comments helps
• Avoid Heavy nesting
• Optimize loops (Specially DOM manipulations, for loop .length is tricky )

Never write JavaScript inside a view

• Writing JavaScript inside a partial view makes your code obtrusive and gives your fellow developer s hard
time when troubleshooting dynamic behaviors and degrades performance as js is not cached
• Writing JavaScript inside a view degrades reuse if not make it next to impossible

Never hardcode string or label or title inside a view
• Makes globalization a lot more difficult

Please do not store a string literal inside a JavaScript
• Literal can be a basic default value( like ‘Enter Value’)
• Literal can be a business rule message
• Notification title etc.

Do not use View Data (View Bag) if possible but instead stick with ViewData.Model
• In complex page figuring out the why the data is required is not an easy task

Think twice before formatting any value
• Date
• Currency
• Numbers

Learn when to use Ajax vs regular request and Get vs Post
• Http requests are expensive make sure your afford it, there is no one to bail you out

Use Action Filters for cleaning controller actions
• Actions filters are one good way of code reuse between Controller actions

Do not stuff Controller Actions with Logic (Separation of Concern rules)
• Fosters unit testing

Never keep logic inside a View but instead create a reusable Html Helper
• Duplicating a logic inside a view will eventually lead to issues
• Duplicating a helper makes maintenance a breath and promotes reuse


Examples: The following code was repeated three times in my current App.

<%if ((Model.Campaign.IsLaunchable) && Model.Campaign.IsAuthorized && (!Model.Campaign.IsPaused) && canLaunchCampaign)
{%>
<a href="#" class="t-button t-state-default updateOptimizer" campaign="<%:Model.Campaign.CampaignId%>"
message="Please complete all required sections in order to reserve this campaign." actualaction='<%=Url.Action("Wizard", "Activation", new { area = "Customer", id = Model.Campaign.CampaignId })%>'
updateaction="<%=Url.Action("UpdateOptimizer","Campaign",new {area="Customer",planId=Model.PlanId})%>"
confirmaction="<%=Url.Action("GetCampaign","Campaign",new {area="Customer",id=Model.Campaign.CampaignId,actionRequested="launch"})%>">
Launch</a>
<%} %>

And Has Now become:

<%=Url.If(Model.Campaign.ShowLaunch, url => url.Launch(Model.Campaign.CampaignId, Model.PlanId))%>


I have seen href=”#” in <a> tag causing issues several times, understand what it means

• Defines a local navigation(jumps to the top of the page )
• Why is it an anchor if you do not use the href (better be a button)
• Href=”#self” Could help
• Or href=”javascript:void(0)”…obtrusive but works
• Href=”#” but you should remember to return false from all functions
• e.preventDefault();


DON'T overuse session; instead use TempData for short lived (intra-request) storage.
• Degrades performance
• TempData for intra request data

Hiding a link from user view does not make a resource unreachable

Unit Testing with QUnit

QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).    ..Qunit... 

Usage and Examples

QUnit uses a set of top-level functions to provide semantic meaning in unit tests:

• module(string) - defines a module
• test(string, function) - defines a test
• ok(boolean, string) - validates to true or false
• equal(value1, value2, message) - compares two values
• expect(any) - defines a value to expect from a test

A basic example would be as follows:

test("a basic test example", function() {
  ok( true, "this test is fine" );
  var value = "hello";
  equal( value, "hello", "We expect value to be hello" );
});

Knockoutjs

Knockout is a JavaScript library that allows developers to create rich, responsive display and editor user interfaces with a clean underlying data model.  

Features

1. Declarative bindings

   A simple and obvious way to connect parts of your UI to your data model.
   Example:
   <p>First name: <input id= "elementId" data-bind="value: firstName" /></p>
   <p>Last name: <input data-bind="value: lastName" /></p>
   <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
   Or:
   $("#elementId").attr("data-bind","value: firstName");
   
   
   View Model
   

   var viewModel = { 
                   firstName : ko.observable("Planet"),
                   lastName : ko.observable("Earth"),
                   fullName = ko.computed(function() {
                       return this.firstName() + " " + this.lastName();
                   }, this);
               };

    
   ko.applyBindings(viewModel);
               

   Here is the list of all built in Bindings.

2. Automatic UI refresh

   When the data model's state changes, the UI updates automatically.

3. Dependency tracking

   Implicitly set up chains of relationships between model data,
   to transform and combine it.
   
   Automatically updates the right parts of your UI whenever your data model changes.

4. Templating

   Quickly generate sophisticated, nested UIs as a function of your model data.
   Templates are a simple and convenient way to build sophisticated UI structures -
   possibly with repeating or nested blocks.           

Practical MVVM with Knockoutjs

MVVM

Model -View- ViewModel 

Highlighting Active menu item the ASP.NET MVC way

As you deduced from the title we will investigate different options we have to highlight menu items in the view based on our user's current navigation in the web application.

Requirement:

• A single menu items usually ends up representing multiple views
• I assume you are using ASP.NET MVC areas to logically group views in the application together 
• and you want to highlight/select the menu item that represents the current section/area that your user is working on
• You implemented a menu system on the master page(lay out page as MVC 3 nerds wish to name it) as it is shared by all views of the application.

To meet the above requirement we need to device a mechanism to:

1. Keep track of the  current section/area of the application that our user is using. 
2. High light the menu item
3. and finnally pass the current section to the view 

Lets us dig into the solution using a simple example, for the menu system displayed below, we want Posting menu item to get highlighted for any view in the posting area/section and like wise for the rest of the areas. 

I created the TopMenu enum to represent the menu items:

and this HtmlHelper extension for reasons that become apparent as you read on :

and finally the portion of the view in the master page that contains the menu items : 

For those of you who got lost, the ActiveMenu HtmlHelper extension returns either nothing or something like class="active" and web designers know how to associate a style to the css class.Taking it from here our next concern is how we are going to determine and pass the proper TopMenu object as a ViewData entry.

The first dirty option

 Obviously this is not a good option, not maintainable and not clean!

The Second option
The second option is to use ASP.NET MVC ActionFilter to keep the logic DRY.

The idea is simple the filter encapsulates the logic to determine the active menu and add the correct TopMenu object to ViewData, neat right? But we still need to apply [MenuFilter] to controller actions or on every controller or better yet on a base controller if you have one.

The Third option


This is my preferred method: The only difference with option 2 is how I am going to apply the Filter to my actions: Here is where global filter comes in handy. I don't want to discuss global filters on this post because that is not my intention(DRY ... aha), refer Brad Wilson's blog about the subject.

Here is the filter provider:

Once we have the filter provider registering our MenuFilter globally is very simple, include the following code snippet in the Global.asax.cs:

Take it easy, the first line is not part of menu system, as depicted above it only takes three lines to register your filter globally. You probably need the Filter for HTTP GET requests that is why we have the lambda expression on the third line.


 I appreciate your time, Thanks.


Abiy 

Posting a javascript array using jQuery to ASP.NET MVC controller action

Posting a data from a JavaScript has become a lot more easier  as more and more cool jQuery plugins continue to avail themselves on top of the core jQuery  library. In my current project I needed to post a JavaScript complex array object back to my ASP.NET MVC controller action which expects  a collection of custom objects. An example is worth a thousand words, I don't want to beat around the bush while you wait:

First the model:

and controller action:

So the idea here is to post a JavaScript array of Employee's to the controller action ExportUser, here is the JavaScript constructor for the Employee object and other utility JavaScript functions.

I like creating my JavaScript in this style, it some how allows me to modularize my script , as you see the above script contains everything we need to achieve our goal namely posting arrays of custom objects. The Employee constructor "create" begins at line number 12 and runs all the way to line number 16 in fact it very short. Never include server URLs in your JavaScript instead pass them and any other view specific data elements to your script, that is why the init method is there for. 

Or using the new Razor view engine  syntax: by the way working with razor is exciting.

I am sure this will get the message across, though the example is simplified. Now let us see the underpinnings of  the function Employee.post(). This function wraps the jQuery ajax function inside, meaning you need to have a reference to jQuery in your view to get this up and running .The other heavy lifting is done by json2.js  at line number 23, the call toJSON() converts the input array to json format making it easier for the jQuery $.ajax function. Since we are sending the data as json the content type for the ajax request should be  application/json and this allows the MVC model binder and json value provider to reassemble the data and pass it on to the controller action. Whereas model binders are used to bind incoming data to an object model, value providers provide an abstraction for the incoming data itself. How awesome is this? Leave a comment and any questions.

Cheers!