Skip to main content

MVVM And Linq In Javascript for .NET Programmers

image If you are not using a well structured javascript library like JQuery, and still manage to do web development, you are .. hm.. probably interested in contributing too much to the garbage that is already there in the web (I am being nice here :)).

Anyway, this post is about few more cool Javascript libraries other than JQuery, that may generate a lot of interest for .NET Programmers (I am talking with Vin lately a lot about this). In this post, I’ll cover two nice little JavaScript libraries, that’ll bring Model View View Model and LINQ to JavaScript.

1 – Knockcout.js

Knockcout is a cool Javascript library that’ll bring the MVVM concepts to the Javascript. If you are already familiar with MVVM, you are good to use Knockout once you learn the little syntax differences. Here is a quick example that shows how to bind a text variable and a command.

<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: clickCommand">Click me</button>
</div>
 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0), 
        clickCommand : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

In the viewModel, we’ve a numberOfClicks variable, and also a clickCommand. You’ll see that we are binding the clickCommand to the button. When ever the button is clicked, the numberOfClicks variable is incremented. If you are wondering why we are using ko.observable to assign value to our numberOfClicks property, it is because

you need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.

Also, note that to get/set values to our numberOfClicks property, we are relying on methods (), to ensure cross browser compatibility. For this reason, all observable objects are functions. Also, note the data-bind attribute we use for binding the view model variables to the UI elements. Apart from these little differences, it is pretty easy to sail through knockout, and you can easily master MVVM in Javascript

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Have a look at http://knockoutjs.com/

2 – Linq.js

If you love Linq, you’ll love Linq.js – it is an almost complete implementation of Linq for Javascript. You can use Enumerable.From(…) to convert an Array to an enumerable, to query them. Here is a quick example.

var array = [100, 200, 30, 40, 500, 40, 200];
var ex1 = Enumerable.From(array).Distinct().ToArray(); // [100, 200, 30, 40, 500]

Linq.js also has a JQuery extension, which is very handy.

Features include

  • implementation of all .NET 4.0 methods and many extra methods (inspiration from Rx, Achiral, Haskell, Ruby, etc...)
  • complete lazy evaluation
  • full IntelliSense support for VisualStudio
  • two versions - linq.js and jquery.linq.js (jQuery plugin)
  • support Windows Script Host
  • binding for Reactive Extensions for JavaScript(RxJS) and IntelliSense Generator -> see documentation
  • NuGet install support(linq.js, linq.js-jQuery, linq.js-Bindings)

Get it from http://linqjs.codeplex.com/

 

Happy coding, Enjoy.

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi