The Gang of two JavaScript libraries

Niladri_Biswas

Rate me:

4.83/5 (6 votes)

9 May 2011CPOL5 min read

18.6K

In this write up we will explore Knockout and Linq for Javascript Libraries

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

JavaScript is a very powerful scripting language and in the recent past many libraries has come over to facilitate its power by creating wrapper libraries on top of it. One of those well known is the JQuery plug and play library that brings a lot to the developers giving a complete flexibility to do complex operations, client side validations, asynchronous calls and lot more while hiding the under lying complexity of such operations from the developers. A few more addition under the hood of JavaScript libraries has gained importance recently which deserves special attention (at least I am paying to it). Out of those, I am listing only my favorite two

a) Knockout.js
b) Linq for Javascript (Linq.js)

Background

JQuery is undoubtedly one of the best JavaScript plug and play libraries. But there are other libraries which when added with JQuery may bring lot of power to the developers for writing scripting code. In this article, we will introduce ourselves with those libraries which I think needs to have some attention.
An Introduction to MVVM pattern in JavaScript using Knockout

What is Knockout?

Knockout is a JavaScript library that allows us to create interactive, responsive UI by respecting the observer pattern with a clean underlying data model. It is an attempt to bring the Model View View Model [MVVM] feel into JavaScript that offers declarative bindings similar to WPF or Silver light applications. It works on any kind of mainstream browser like IE 6+, Firefox 2+, Chrome, and Safari etc.

Where can we get the knockout library?
We can download Knockout.js file from here

Key terms of MVVM

Model: It is the storage place of applications data.
View Model: A representation of data and operation to be perform on UI.
View: The interactive UI (say Html or Aspx etc.) that represents the state of the View Model. It closely interacts with the View Model by sending commands whenever an action takes place and updates itself whenever the View Model state changes.

Demonstration

Kindly note that we will use Knockout version 1.2.0 for the demonstration purpose. Let us start with a simple hello world example.

<html>
<head>
<title> Simple hello world example </title>
<script language="javascript" type="text/javascript" src = "knockout-1.2.0.js"></script>
</head>
<body>
<p>Enter a name <input data-bind="value:name"/></p>
<button data-bind="click:buttonCommand">Say hello</button>
<script type="text/javascript">
// View model
var viewModel = {
    name : ko.observable(""),
    buttonCommand : function() {
            alert('Hello ' + this.name() + ', welcome to knockout');
            }
};
// This makes Knockout to work
ko.applyBindings(viewModel);
</script>
</body>
</html>

Code Explanation

We have a textbox control as well a button control in the view.

In the View Model, we have two properties namely name and buttonCommand. The buttonCommand is bound to the button control while the name property is to the textbox control. The ko.observable is use to assign the value to the property. The reason is that, the model properties are declared as observables which notifies the subscribers about changes and can automatically detect dependencies. Henceforth, whenever the user enters his/her name in the textbox and clicks on the button, the value that is being assigned to the name property is read and is displayed to the browser.

Also the observable properties need some attention. The values are set or get from the properties through methods. This is to ensure the cross browser compatibility since the getters and setters are not understandable by many browsers.
The data-bind attribute binds the view models properties to the view and the communication sails between these two.

We need to activate Knockout to take effect of the data-bind attribute which is a non native Html attribute. For this reason, we need to call the ko.applyBindings (ViewModel). The first parameter to the applyBindings should be the view model; There is an optional second parameter and if specified should be a DOM node e.g. ko.applyBindings(viewModel, document.getElementById('ElementID')).

This is very cool right.We will look more into it in some broader fashion in the form of an article.

An Introduction to LINQ for JavaScript(linq.js)

Language integrated query has been introduce into dot net from framework version 3.0. The taste is now available in JavaScript too with linq.js. Currently it supports 90 methods. We can use Enumerable. From (...) to convert an Array to an enumerable and to query them. Moreover it supports intellisence when use with dotnet framework.

Where can we get the LINQ for JavaScript library?

We can download it file from here

Some simple programs to get ourselves familiar

Let us see the linq.js into action with some simple program

For the first two examples, we will use the below Data Source

var sourceArray1 = ["Niladri Biswas", "Jeeva Baby", "Rudra", "Deepak"];

Example 1: Display names whose length is greater than 10.

Query

Enumerable.From(sourceArray1)
.Where("i => i.length > 10")
.ForEach("i=>alert(i)");

Output

Niladri Biswas and Jeeva Baby as expected

Code Explanation

In Enumerable.From(sourceArray1), we are converting the array into enumerable for further querying.

Where("i => i.length > 10") does the filtering.

ForEach("i=>alert(i)") is where we are looping thru the filtered collection and is printing them.

Example 2: Sort names.

Query

Enumerable.From(sourceArray1)
.OrderBy("o=>o").
ForEach("i=>alert(i)");

Example 3: Given a json datasource, we will first filter the records by CountryName, then ordfer the records by player names and will display them.

DataSource

var jsonArray = [
          { "player": { "id": 1, "PlayerName": "Niladri" }, "CountryName": "India" },
          { "player": { "id": 2, "PlayerName": "Deepak" }, "CountryName": "Australia" },
          { "player": { "id": 3, "PlayerName": "Eshwer" }, "CountryName": "US" },
          { "player": { "id": 4, "PlayerName": "Naina" }, "CountryName": "India" }

Query

Enumerable.From(jsonArray)
                .Where("$.CountryName == 'India'")
		.OrderBy("$.player.PlayerName")
		.Select("$.player.id + '|' + $.player.PlayerName + '|' + $.CountryName")

Jquery.Linq.js

This library also has a jquery extension (jquery.linq.js). As a quick example

$.Enumerable.Range(1, 10).Where("$%2==0").ForEach("alert($)");

Will display the even numbers

Features in Linq for JavaScript are as under

- Implement 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
- NuGet install support(linq.js, linq.js-jQuery, linq.js-Bindings)

Hope this gives some insight about the usage of linq.js.

Conclusion

In this short write up we have seen two of the powerful JavaScript libraries that will help us to speed up the client side operations in a more organized manner.

Thanks for reading.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

The Gang of two JavaScript libraries

License

Comments and Discussions