Angular JS vs Knockout JS -quotes and links

Our team need to choose a JS framework. Base on the research Angular is the preferred framework. The only essential concern – if you need to support old IE6/7 browsers(but also there are articles how to support/workaround the IE issues)


Knockout supports almost all major browsers:
IE6+, Firefox 2.0+, Chrome, Safari and Opera 10+.
Link – Knockout : Browser support

Angular Supports only A grade browsers at the moment:
IE8 and higher,chorme, safari, FireFox,iOS, Android
Support for ie6/7 is possible in theory, but in practice we don’t run any ouf our regression tests on it, so it probably does not work

Link – Browser Support for Angular – Google Groups

  1. They are also similar in many important things: data-binding and directives. However, Angular does it better and prettier. You can stick your expression practically anywhere in the document using the {{}} clause and this alone give you quite a lot of power and yet readability. You also don’t need to useobservable for model objects – you use normal objects and Angular does its magic.
  2. Angular is more feature complete. It gives you out of the box a complete solution for almost anything you want in client-side web-app development, including mini-jquery, dependency-injection, redirection and deep-linking, animation and powerful, modern event handling. Knockout doesn’t provide any of this. 
  3. Angular’s html templating/customization/
    binding is less limited than KO – it let you build directives which are html tags, attribute, classes or comments. In KO, you can do it to comments (which looks rather ugly) or in the data-binding attribute. Much less expressive and pretty.
  4. Performance: sometimes performance is better in KO, sometimes in Angular (see the other answers for that). But i don’t see it as an issue anyways.
  5. Angular is built from testability and clean project organization better than any framework i know of (but i don’t know all of them).



I found Knockout easier to comprehend and get going with compared to Angular which is always a winner when starting something new but Knockout is pretty much just about binding so for things like routing and separation of concerns you need to use other libraries whereas Angular has all that built in. I think for smaller projects without too much logic required Knockout is ideal and I really like the simplicity of SammyJS however, for larger applications that requires dependency injection, a clear separation of concerns and the easy ability to unit test logic Angular is a winner. In this case the term “pick the right tool for the job” certainly applies.


Angular.js

Angular.js is a very nice framework . Developed by Googler’s, it has some very interesting design choices.

Pros: Very well thought out with respect to template scoping and controller design. Has a dependency injection system (I am a big fan of IOC). Supports a rich UI-Binding syntax to make things like filtering and transforming values a breeze.

Cons: Codebase appears to be fairly sprawling and not very modular. Views are not modular enough .

 Knockout.js

Knockout.js is an MVVM framework that receives lots of praise from its supporters. It stresses declarative UI bindings and automatic UI refresh.

Pros: Binding support. Great documentation and amazing tutorial system.

Cons: Awkward binding syntax and lacks a solid view component hierarchy. I want to be able to reuse components easily. I also feel like identifying as an MVVM framework is deleterious. Hardly any of these frameworks are MVC, but are of the MV* variety (MVP, MVVM, etc)

Additional reasons from my co-worker Krishna Nadiminti 

Which framework to use?

A comparison of Angular Vs. Knockout: – http://www.slideshare.net/basarat1/mvvm-knockout-vs-angular

A sample app some guys did in various frameworks:

·         TODO App in Knockout [Not bad – but still one file with too many things in it]

·         TODO App in Angular [More files, forces you into thinking about structure and avoiding jQuery]

·         TODO Apps in other frameworks (for reference only – I don’t think we can spend days evaluating the best framework – and frankly it does not matter that much.)

 

About that steep learning curve:

I’ve worked with both – it took me almost the same time to get a brand new app running  in KO vs Angular. Once I looked at Angular – I remembered all the additional frameworks (require, sammy, amplify,   I needed to learn to make a ‘properly designed’ client-side app with KO as the basis.

 

Other things we considered in choosing AngularJS:

Momentum behind the framework (Google!)

Completeness in terms of client-side application requirements (clean design, testability, data-binding, routing, module loading, ui-widgets)

Browser support

Plugging into existing apps

Playing well with other frameworks/scripts

 

More links:

Some pro’s of AngularJS over KnockoutJS http://litebyte.net/blog/?p=135

Angular JS and old versions of IE 

Log JavaScript errors to the server.

Some time ago I found debugging – Automatic feedback on JavaScript error – Stack Overflow.  
and the discussion has  links to
Logging JavaScript Errors To ASP.NET(Unfortunately the link to download in the post is broken).
and custom control to help log JavaScript errors by sending error information to the server –thecodepage.com/post/JavaScript-Error-Notifications.aspx.
I’ve downloaded solution from  JSErrorNotifier.zip. When I wanted to include dll into my solution dependencies,  I decided to rename WebControls.DLL to more descriptive JSErrorNotifier.DLL.
I also decided to rename default namespace to be the same as DLL name.
It wasn’t a good idea, because control stopped to work. It took me some time and I had to call  StreamHelper.EnsureWebResourceValid function from my old post Check that embedded resource exist before calling ClientScript.RegisterClientScriptResource or GetWebResourceUrl
to do all consistent changes for namespace renaming.

Finally when I made control working again, I found that it doesn’t work in IE 9. After another half an hour of debugging I found that for my IE9 onerror event is not fired even for example from MS documentation
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onerrorEX.htm.
It worked on other browsers and on IE8, but on IE9 you need to disable script debugging in Internet Explorer (Tools, Internet Options, Advanced). The  same happens if IE9 changed to IE7 or IE8 mode.(Actually I’ve noticed that Developer Tools Browser mode IE7 or IE8 do not emulate correctly native script engine of older IE versions)

However native IE8 on XP fires onerror regardless if debugging is enabled or disabled.

I hope that not too many IE9 users with enabled debugging will have  JS errors in our application.

Select tool to minimize JavaScript and CSS size

There are multiple ways and techniques how to combine and minify JS and CSS files.
The good number of links can be found in http://stackoverflow.com/questions/882937/asp-net-script-and-css-compression
and in http://www.hanselman.com/blog/TheImportanceAndEaseOfMinifyingYourCSSAndJavaScriptAndOptimizingPNGsForYourBlogOrWebsite.aspx

There are 2 major approaches- do it during build or at run-time.

In our application there are multiple user-controls, each of them required different JS or CSS files, and they loaded dynamically in the different combinations. We decided that loading all JS or CSS files for each page is not a good idea, but for each page we need to load different set of files.
Based on this combining files on the build stage does not looks feasible.
After Reviewing  different links I’ve decided that squishit should fit to our needs. http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

Different limitations of using SquishIt.
We had some browser specific CSS files, that loaded conditionally depending of browser type(i.e IE and all other browsers). We had to put them in separate bundles,

For Resources and AXD files we decide to use HttpModule and HttpHandler created by Mads Kristensen

To GZIP html we are using wwWebUtils.GZipEncodePage() http://www.west-wind.com/weblog/posts/2007/Feb/05/More-on-GZip-compression-with-ASPNET-Content Just swap the order of which encoding you apply to start by asking for deflate support and then GZip afterwards.

Additional tips about SquishIt.

Use CDN: https://groups.google.com/group/squishit/browse_thread/thread/99f3b61444da9ad1
Support intellisense and generate bundle in codebehind http://tech.kipusoep.nl/2010/07/23/umbraco-45-visual-studio-2010-dotless-jquery-vsdoc-squishit-masterpages/

Links about other Libraries that were considered

A few links from http://stackoverflow.com/questions/5288656/which-one-has-better-minification-between-squishit-and-combres2

.Net 4.5 will have out-of-the-box tools for JS/CSS combining.
http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx . It suggests default bundle of subfolder, but also seems supporting similar to squishit explicitly specified files.

http://www.codeproject.com/KB/aspnet/combres2.aspx  config XML file can specify expiry etc

https://github.com/andrewdavey/cassette
http://stackoverflow.com/questions/7026029/alternatives-to-cassette

Dynamically loaded JS files requireJS http://requirejs.org/docs/start.html  

http://www.west-wind.com/weblog/posts/2008/Jul/07/Inclusion-of-JavaScript-Files
Pack and minimize your JavaScript code size

YUI Compressor (from Yahoo)
JSMin (by Douglas Crockford)
ShrinkSafe (from Dojo library)
Packer (by Dean Edwards)

RadScriptManager  & RadStyleSheetManager -fromTeleric(not free)

Tools to optimize performance:

PageSpeed tools family http://code.google.com/intl/ru/speed/page-speed/download.html



v

Translate jQuery UI Datepicker format to .Net Date format

I needed to use the same date format in client jQuery UI Datepicker and server ASP.NET code. The actual format can be different for different localization cultures.

I decided to translate Datepicker format to .Net Date format similar as it was asked to do opposite operation in http://stackoverflow.com/questions/8531247/jquery-datepickers-dateformat-how-to-integrate-with-net-current-culture-date

Note that replace command need to replace whole words and order of calls is important

Function that does opposite operation (translate  .Net Date format toDatepicker format) is described in
http://www.codeproject.com/Articles/62031/JQueryUI-Datepicker-in-ASP-NET-MVC


/// <summary>
/// Uses regex ‘b’ as suggested in //http://stackoverflow.com/questions/6143642/way-to-have-string-replace-only-hit-whole-words
/// </summary>
/// <param name=”original”></param>
/// <param name=”wordToFind”></param>
/// <param name=”replacement”></param>
/// <param name=”regexOptions”></param>
/// <returns></returns>
static public string ReplaceWholeWord(this string original, string wordToFind, string replacement,
RegexOptions regexOptions = RegexOptions.None)
{

string pattern =
String.Format(@”b{0}b”, wordToFind);
string ret=
Regex.Replace(original, pattern, replacement, regexOptions);
return ret;
}

/// <summary>
/// E.g “DD, d MM, yy” to ,”dddd, d MMMM, yyyy”
/// </summary>
/// <param name=”datePickerFormat”></param>
/// <returns></returns>
/// <remarks>
/// Idea to replace from http://stackoverflow.com/questions/8531247/jquery-datepickers-dateformat-how-to-integrate-with-net-current-culture-date
///From http://docs.jquery.com/UI/Datepicker/$.datepicker.formatDate to http://msdn.microsoft.com/en-us/library/8kb3ddd4.aspx
///Format a date into a string value with a specified format.
///d – day of month (no leading zero) —.Net the same
///dd – day of month (two digit) —.Net the same
///D – day name short —.Net “ddd”
///DD – day name long —.Net “dddd”
///m – month of year (no leading zero) —.Net “M”
///mm – month of year (two digit) —.Net “MM”
///M – month name short —.Net “MMM”
///MM – month name long —.Net “MMMM”
///y – year (two digit) —.Net “yy”
///yy – year (four digit) —.Net “yyyy”
/// </remarks>
public static string JQueryDatePickerFormatToDotNetDateFormat(string datePickerFormat)
{

string sRet = datePickerFormat.ReplaceWholeWord(
“DD”, “dddd”).ReplaceWholeWord(“D”, “ddd”);
sRet = sRet.ReplaceWholeWord(
“M”, “MMM”).ReplaceWholeWord(“MM”, “MMMM”).ReplaceWholeWord(“m”, “M”).ReplaceWholeWord(“mm”, “MM”);//order is important
sRet = sRet.ReplaceWholeWord(
“yy”, “yyyy”).ReplaceWholeWord(“y”, “yy”);//order is important
return sRet;
}

Syncronize IIS servers in a web farm to enable ETags

It’s known that on web Farm using  of eTags under IIS doesn’t work properly unless all servers are synchronized.
http://support.microsoft.com/?id=922733 suggests to
synchronize the ETag values on all the Web servers that are running IIS using Mdutil.exe that should be extracted from Windows CD

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_11/#comment-14835
suggests to use iiscnfg.vbs script (with the /copy switch) to keep cluster configuration synced up, this keeps the MDETAGCHANGENUMBER synced up too.
 
 
Finally I found extended recommendations how to synchronze IIS databases in
http://weblogs.asp.net/owscott/archive/2006/06/07/IISCnfg.vbs—IIS-Settings-Replication.aspx
It has customized MetabaseMerge.bat script, that seems the most appropriate for the job.
 
Alternative solution is described on codeProject Synchronize file date time on multiple IIS servers and fix ETag discrepency
 

Javascript coding style recommendation: in return and throw statements use only simple variables

My collegue told me that placing the opening curly brace at the end of the line  is safer than at the beginning of the new line, because it prevents some hard-to-debug errors, related to Automatic Semicolon Insertion and  pointed me to the article Basic JavaScript Part 6: Automatic Semicolon Insertion. The article has the recommendation
 Trying to outline curly braces at the end of the line can save you some headaches in case a semicolon is forgotten somewhere in the code.
The statement  is misleading and even incorrect(the problem unrelated to forgotten semicolon).
The article has comments of Elijah Manor with link to JavaScript Semicolon Insertion, that properly explains the issue.

An Expression in a return or throw statement should start on the same line as the return or throw token. A postfix ++ or operator should appear on the same line as its operand. A Identifier in a break or continue statement should be on the same line as the break or continue token.


I really prefer C# style of block notation where new block starts  with curly bracket on a new line and apply it to JavaScript code as well.(You need to untick default setting for curly brackets in Visual Studio Tools->Options-Click Text Editor -> JavaScript  -> Formatting and it should be consistent for all development team).
The restriction above can be avoided by the following coding recommendation.
In return and throw statement use only simple variables and keep them on the same line as the statement:
GOOD:

var ret =

   {   

       shoeSize: 48
   };

return ret;

BAD:    
   return   //WRONG
   {         

 shoeSize: 48
   };

 
 
 

Internet Explorer 9:IE 7 standards accidental change

One of our testers reported, that many pages are not working correctly in her IE9 browser.
It took me a while to find out that in development tools it was set Document Mode:IE7 standards.
The option has a shortcut -Alt-7, but it works only if development tools(F12) are opened.

I couldn’t understand, how the setting was changed accidentally.If it’s possible, many IE users will have unexpected problems.