Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

The Gang of two JavaScript libraries

, 9 May 2011
Rate this:
Please Sign up or sign in to vote.
In this write up we will explore Knockout and Linq for Javascript Libraries

Editorial Note

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)

Share

About the Author


Comments and Discussions

 
GeneralReason for my vote of 4 Good explanation of new libraries. Pinmembersaitmemis18-Dec-11 21:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 10 May 2011
Article Copyright 2011 by Niladri_Biswas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid