Redis for .NET Developer – Redis String Datatype part 2

Taswar Bhatti February 26, 2016 No Comments

Continuing on with our Redis for .NET Developer, the Redis String Datatype is also used to store integers, float and other utility commands to manipulate strings.

Redis String Datatype using Integers

In Redis float and integers are represented by string. Redis parses the string value as an integer and the neat thing about them is when you do operations on strings they are atomic. When there are multiple clients issuing INCR against the same key, it will never enter into a race condition.

INCR key : Increment the value by one O(1)
INCRBY key value: Increments the value by the given value (integer) O(1)
DECR key: Decrements the value by one O(1)
DECRBY key value: Decrements the value by the given value (integer) O(1)
APPEND key value: Concatenate the existing integer with the new integer O(1)
INCRBYFLOAT key value : Increment the float value by given value (float) O(1)

C# Code using integer and float

var number = 101;
var intKey = "intKey";

if (redis.StringSet(intKey, number))
{
     //redis incr command
     var result = redis.StringIncrement(intKey); //after operation Our int number is now 102
     Console.WriteLine(result);

     //incrby command
     var newNumber = redis.StringIncrement(intKey, 100); // we now have incremented by 100, thus the new number is 202
     Console.WriteLine(newNumber);               

     redis.KeyDelete("zeroValueKey");
     //by default redis stores a value of zero if no value is provided           
     var zeroValue = (int)redis.StringGet("zeroValueKey");
     Console.WriteLine(zeroValue);

     var someValue = (int)redis.StringIncrement("zeroValueKey"); //someValue is now 1 since it was incremented
     Console.WriteLine(someValue);
                
     //decr command
     redis.StringDecrement("zeroValueKey");
     someValue = (int)redis.StringGet("zeroValueKey"); //now someValue is back to 0   
     Console.WriteLine(someValue);

     //decrby command
     someValue = (int)redis.StringDecrement("zeroValueKey", 99); // now someValue is -99   
     Console.WriteLine(someValue);
                
     //append command
     redis.StringAppend("zeroValueKey", 1);
     someValue = (int)redis.StringGet("zeroValueKey"); //"Our zeroValueKey number is now -991   
     Console.WriteLine(someValue);

     redis.StringSet("floatValue", 1.1);
     var floatValue = (float)redis.StringIncrement("floatValue", 0.1); //fload value is now 1.2   
     Console.WriteLine(floatValue);
}

var number = 101;

var intKey = "intKey";

if (redis.StringSet(intKey, number))

{

//redis incr command

var result = redis.StringIncrement(intKey); //after operation Our int number is now 102

Console.WriteLine(result);

//incrby command

var newNumber = redis.StringIncrement(intKey, 100); // we now have incremented by 100, thus the new number is 202

Console.WriteLine(newNumber);

redis.KeyDelete("zeroValueKey");

//by default redis stores a value of zero if no value is provided

var zeroValue = (int)redis.StringGet("zeroValueKey");

Console.WriteLine(zeroValue);

var someValue = (int)redis.StringIncrement("zeroValueKey"); //someValue is now 1 since it was incremented

Console.WriteLine(someValue);

//decr command

redis.StringDecrement("zeroValueKey");

someValue = (int)redis.StringGet("zeroValueKey"); //now someValue is back to 0

Console.WriteLine(someValue);

//decrby command

someValue = (int)redis.StringDecrement("zeroValueKey", 99); // now someValue is -99

Console.WriteLine(someValue);

//append command

redis.StringAppend("zeroValueKey", 1);

someValue = (int)redis.StringGet("zeroValueKey"); //"Our zeroValueKey number is now -991

Console.WriteLine(someValue);

redis.StringSet("floatValue", 1.1);

var floatValue = (float)redis.StringIncrement("floatValue", 0.1); //fload value is now 1.2

Console.WriteLine(floatValue);

}

For source code please visit
https://github.com/taswar/RedisForNetDevelopers/tree/master/3.RedisStringsAsInt

For our next blog post, I will cover more functionality and other datatype in Redis.

For previous Redis topics

.NET, Learn Series, Redis

.net, C#, integer, redis, StackExchange.Redis, string, string datatype

Redis for .NET Developer – String Datatype

Taswar Bhatti November 5, 2015 No Comments

Continuing our series on Redis for .NET Developer, we will be looking into the basic string datatype that Redis provides. First to be clear, Redis is more than just a string cache or to store your serialized objects, it is a data structure server, but nevertheless the basic understanding of using strings in Redis will help us learn the foundation of using Redis.

Strings Data Type

String types are the basic data types in Redis. Strings in Redis can store integers, images, files, strings and serialized objects, since Redis strings are byte arrays that are binary safe and have a maximum size of 512MB.

Sets and Gets

The getters and setters are the basic commands that one can use to set or get values in Redis. For single key-value there are GET, SET, SETNX, GETSET

GET key: This key gets the value O(1)
SET key “value”: This key sets a value for a key O(1)
SETNX key “value”: If key does Not eXist this will sets a value against it O(1)
GETSET key “value”: Get the old value and sets a new value O(1)

For multi key-value there are MGET, MSET, MSETNX

MGET key1 key2: Gets all the corresponding values of keys O(N)
MSET key1 “value1” key2 “value2”: Atomic operation, so all given keys are set at once O(N)
MSETNX key1 “value1” key2 “value2”: Sets the given keys to their respective values if Not eXist O(N)

Example of using single key-value in C#

Below is an example of single key-value using C# StackExchange.Redis

var redis = RedisStore.RedisCache;

var key = "testKey";
           
if(redis.StringSet(key, "testValue"))
{
   var val = redis.StringGet(key);

   //output - StringGet(testKey) value is testValue
   Console.WriteLine("StringGet({0}) value is {1}", key, val);

   var v1 = redis.StringGetSet(key, "testValue2");

   //output - StringGetSet(testKey) testValue == testValue
   Console.WriteLine("StringGetSet({0}) {1} == {2}", key, val, v1);

   val = redis.StringGet(key);

   //output - StringGet(testKey) value is testValue2
   Console.WriteLine("StringGet({0}) value is {1}", key, val);

   //using SETNX 
   //code never goes into if since key already exist
   if (redis.StringSet(key, "someValue", TimeSpan.MaxValue, When.NotExists))
   {
      val = redis.StringGet(key);
      Console.WriteLine("StringGet({0}) value is {1}", key, val);
   }
   else
   {
      //always goes here
      Console.WriteLine("Value already exist");
   }

   var key2 = key + "1";
   if (redis.StringSet(key2, "someValue", TimeSpan.MaxValue, When.NotExists))
   {
      val = redis.StringGet(key2);
      //output - StringGet(testKey2) value is someValue", key2, val
      Console.WriteLine("StringGet({0}) value is {1}", key2, val);
   }
   else
   {
      //never goes here
      Console.WriteLine("Value already exist");
   }
}

var redis = RedisStore.RedisCache;

var key = "testKey";

if(redis.StringSet(key, "testValue"))

{

var val = redis.StringGet(key);

//output - StringGet(testKey) value is testValue

Console.WriteLine("StringGet({0}) value is {1}", key, val);

var v1 = redis.StringGetSet(key, "testValue2");

//output - StringGetSet(testKey) testValue == testValue

Console.WriteLine("StringGetSet({0}) {1} == {2}", key, val, v1);

val = redis.StringGet(key);

//output - StringGet(testKey) value is testValue2

Console.WriteLine("StringGet({0}) value is {1}", key, val);

//using SETNX

//code never goes into if since key already exist

if (redis.StringSet(key, "someValue", TimeSpan.MaxValue, When.NotExists))

{

val = redis.StringGet(key);

Console.WriteLine("StringGet({0}) value is {1}", key, val);

}

else

{

//always goes here

Console.WriteLine("Value already exist");

}

var key2 = key + "1";

if (redis.StringSet(key2, "someValue", TimeSpan.MaxValue, When.NotExists))

{

val = redis.StringGet(key2);

//output - StringGet(testKey2) value is someValue", key2, val

Console.WriteLine("StringGet({0}) value is {1}", key2, val);

}

else

{

//never goes here

Console.WriteLine("Value already exist");

}

Example of using multiple key-value in C#

Below is an example of multi key-value using C# StackExchange.Redis

//mset and msetnx
KeyValuePair<RedisKey, RedisValue>[] values = {
   new KeyValuePair<RedisKey, RedisValue>("a", "x"),
   new KeyValuePair<RedisKey, RedisValue>("b", "y")
};

if (redis.StringSet(values))
{
   RedisKey[] myKeys = {"b", "a"};
   var allValues = redis.StringGet(myKeys);

   //output - y,x
   Console.WriteLine(string.Join(",", allValues));                
}

//mset and msetnx

KeyValuePair<RedisKey, RedisValue>[] values = {

new KeyValuePair<RedisKey, RedisValue>("a", "x"),

new KeyValuePair<RedisKey, RedisValue>("b", "y")

};

if (redis.StringSet(values))

{

RedisKey[] myKeys = {"b", "a"};

var allValues = redis.StringGet(myKeys);

//output - y,x

Console.WriteLine(string.Join(",", allValues));

}

Serialization of objects into Redis with C#

One can use Json.NET serialization of a C# object into Redis. There is also a StackExchange.Redis.Extensions Nuget package that allows one to serialize objects with protobuf, jil, etc. For more details please look at https://github.com/imperugo/StackExchange.Redis.Extensions.
In the example below we will Newton.Json to serialize a User C# object

 //serialization of object
User u = new User {Name = "taswar", Twitter = "@taswarbhatti"};

var userKey = "user:taswar";
var serializedUser = JsonConvert.SerializeObject(u);
redis.StringSet(userKey, serializedUser);           

var u2 = JsonConvert.DeserializeObject<User>(redis.StringGet(userKey));

//output Name = taswar, Twitter = @taswarbhatti
Console.WriteLine("Name = {0}, Twitter = {1}", u2.Name, u2.Twitter);

//serialization of object

User u = new User {Name = "taswar", Twitter = "@taswarbhatti"};

var userKey = "user:taswar";

var serializedUser = JsonConvert.SerializeObject(u);

redis.StringSet(userKey, serializedUser);

var u2 = JsonConvert.DeserializeObject<User>(redis.StringGet(userKey));

//output Name = taswar, Twitter = @taswarbhatti

Console.WriteLine("Name = {0}, Twitter = {1}", u2.Name, u2.Twitter);

For our next blog post, I will cover other functionality that the string datatype has in Redis, and also how Redis can treat strings as integer also.

For source code please visit
https://github.com/taswar/RedisForNetDevelopers/tree/master/2.RedisString

For previous Redis topics

.NET, Redis

C#, datatype, redis, string datatype

Redis for .NET Developer – Connecting with C#

Taswar Bhatti November 3, 2015 21 Comments

In the second blog post series “Redis for .NET Developer” I will show how we will use C# to connect to Redis.
If you want to learn how to install Redis, visit my previous post on Intro to Redis for .NET Developers – Installing Redis on Windows.
We will be using StackExchange.Redis library to connect to Redis. One can download StackExchange. Redis through NuGet.

Dotnetcore Sample

I have added sample code for Dotnet Core also below

StackExchange.Redis is a high performance general purpose redis client for .NET languages (C# etc).

For .NET Framework

1. Let’s Download our Nuget package, you can use the command line like below or use Visual Studio (I am using VS2018).

PM> Install-Package StackExchange.Redis.StrongName

1	PM> Install-Package StackExchange.Redis.StrongName

Search for redis in your nuget window.

Nuget Redis

Once installed you will see in your output windows.

Nuget Redis Result

Now that the nuget package is installed, we can build a C# console app that will connect to your redis server.
Below is a sample code to connect to localhost of your redis.

ConnectionMultiplexer redis = ConnectionMultiplexer.Connect("localhost");

IDatabase db = redis.GetDatabase();

if(db.StringSet("testKey", "testValue"))
{
     var val = db.StringGet("testKey");

     Console.WriteLine(val);
}

ConnectionMultiplexer redis = ConnectionMultiplexer.Connect("localhost");

IDatabase db = redis.GetDatabase();

if(db.StringSet("testKey", "testValue"))

{

var val = db.StringGet("testKey");

Console.WriteLine(val);

}

The above code will allow you to connect to Redis and store a string key “testKey” with a value of “testValue”.

For better modulation of Redis it is recommended to store ConnectionMultiplexer as a static singleton in your application.

Below is example of a RedisStore that stores the ConnectionMultiplexer as a static Lazy loaded singleton.

 public class RedisStore
{        
   private static readonly Lazy<ConnectionMultiplexer> LazyConnection;
       
   static RedisStore()
   {
      var configurationOptions = new ConfigurationOptions
      {
         EndPoints = { "localhost" }
      };

      LazyConnection = new Lazy<ConnectionMultiplexer>(() => ConnectionMultiplexer.Connect(configurationOptions));
   }

   public static ConnectionMultiplexer Connection => LazyConnection.Value;

   public static IDatabase RedisCache => Connection.GetDatabase();
}

public class RedisStore

{

private static readonly Lazy<ConnectionMultiplexer> LazyConnection;

static RedisStore()

{

var configurationOptions = new ConfigurationOptions

{

EndPoints = { "localhost" }

};

LazyConnection = new Lazy<ConnectionMultiplexer>(() => ConnectionMultiplexer.Connect(configurationOptions));

}

public static ConnectionMultiplexer Connection => LazyConnection.Value;

public static IDatabase RedisCache => Connection.GetDatabase();

}

Now our previous code would something like

var redis = RedisStore.RedisCache;
           
if(redis.StringSet("testKey", "testValue"))
{
   var val = redis.StringGet("testKey");

   Console.WriteLine(val);
}

var redis = RedisStore.RedisCache;

if(redis.StringSet("testKey", "testValue"))

{

var val = redis.StringGet("testKey");

Console.WriteLine(val);

}

Dotnet Core Version for Connection

Lets go through the process of creating a dotnet core console application.

$mkdir RedisConnectionDotNetCore
$dotnet new console

1 2	$mkdir RedisConnectionDotNetCore $dotnet new console

We will now need to install all the packages that we require to run dotnetcore with Redis.

$dotnet add package Microsoft.Extensions.Configuration
$dotnet add package Microsoft.Extensions.Configuration.FileExtensions
$dotnet add package Microsoft.Extensions.Configuration.Json
$dotnet add package StackExchange.Redis --version 2.0.519

$dotnet add package Microsoft.Extensions.Configuration

$dotnet add package Microsoft.Extensions.Configuration.FileExtensions

$dotnet add package Microsoft.Extensions.Configuration.Json

$dotnet add package StackExchange.Redis --version 2.0.519

We will create an appsettings.json file to store our connection information, that is one of the reason we have installed all those packages into our project.

I am running Redis on my localhost on Docker

This is how my appsettings.json looks like, with only one key and value.

{
    "redis.connection" :"localhost:32768"
}

{

"redis.connection" :"localhost:32768"

}

We also need to tell our csproj about the output of the json file by modifying our RedisConnectionDotNetCore.csproj, we will add into our ItemGroup

&lt;ItemGroup>
    &lt;PackageReference Include="Microsoft.Extensions.Configuration" Version="2.2.0" />
    &lt;PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="2.2.0" />
    &lt;PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="2.2.0" />
    &lt;PackageReference Include="StackExchange.Redis" Version="2.0.519" />
    &lt;None Update="appsettings.json">
      &lt;CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    &lt;/None>
  &lt;/ItemGroup>

<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>

</None>

</ItemGroup>

Lets modify our code in RedisStore.cs such that it can read from the json file, as you can see most of the code remains the same except for where we pick our configuration from.

public class RedisStore
    {
        private static readonly Lazy<ConnectionMultiplexer> LazyConnection;

        static RedisStore()
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(System.IO.Directory.GetCurrentDirectory())
                .AddJsonFile("appsettings.json");
 
            IConfiguration config = new ConfigurationBuilder()
                .AddJsonFile("appsettings.json", true, true)
                .Build();

            var configurationOptions = new ConfigurationOptions
            {
                EndPoints = { config["redis.connection"] }
            };

            LazyConnection = new Lazy<ConnectionMultiplexer>(() => ConnectionMultiplexer.Connect(configurationOptions));
        }

        public static ConnectionMultiplexer Connection => LazyConnection.Value;

        public static IDatabase RedisCache => Connection.GetDatabase();
    }

public class RedisStore

{

private static readonly Lazy<ConnectionMultiplexer> LazyConnection;

static RedisStore()

{

var builder = new ConfigurationBuilder()

.SetBasePath(System.IO.Directory.GetCurrentDirectory())

.AddJsonFile("appsettings.json");

IConfiguration config = new ConfigurationBuilder()

.AddJsonFile("appsettings.json", true, true)

.Build();

var configurationOptions = new ConfigurationOptions

{

EndPoints = { config["redis.connection"] }

};

LazyConnection = new Lazy<ConnectionMultiplexer>(() => ConnectionMultiplexer.Connect(configurationOptions));

}

public static ConnectionMultiplexer Connection => LazyConnection.Value;

public static IDatabase RedisCache => Connection.GetDatabase();

}

Our Program.cs remains the same

class Program
    {
        static void Main(string[] args)
        {
           var redis = RedisStore.RedisCache;

            if (redis.StringSet("testKey", "testValue"))
            {
                var val = redis.StringGet("testKey");

                Console.WriteLine(val);
            }

            Console.ReadKey();
        }
    }

class Program

{

static void Main(string[] args)

{

var redis = RedisStore.RedisCache;

if (redis.StringSet("testKey", "testValue"))

{

var val = redis.StringGet("testKey");

Console.WriteLine(val);

}

Console.ReadKey();

}

Now we can run with dotnet command line

$dotnet restore
$dotnet run
testValue //output vaule

$dotnet restore

$dotnet run

testValue //output vaule

In my next blog post I will cover the data structures that Redis provides.

For code please visit https://github.com/taswar/RedisForNetDevelopers

For previous Redis topics

Intro to Redis for .NET Developers

.NET, C#, Redis

.net, C#, dotnet, redis, StackExchange.Redis

Intro to Redis for .NET Developers – Installing Redis on Windows

Taswar Bhatti July 3, 2015 No Comments

What is Redis – Installing Redis on Windows

Redis (REmote DIctionay Server) is a very popular open-source, networked, in-memory, key-value data store, sometimes referred to as a data structure server which also comes with optional durability. Redis is well known for high performance, flexibility, provides a rich set of data structures, and a simple straightforward API. The programming language Redis is written in is ANSI C.

The development of Redis has been sponsored by Pivotal since May 2013; before that, it was sponsored by VMware. According to the monthly ranking by DB-Engines.com, Redis is the most popular key-value store. Redis officially runs on Linux and not officially supported on Windows but MS Open Tech has been working with the Redis community to build a production-ready Windows port of Redis, including 64-bit support, an installer for Windows Azure, NuGet support, and much more.

In this series of post I will introduce Redis and it basic functionality using C# and node.js sample code.

To start off lets try to get Redis running on our Windows machine first. We will need to download the MSI from MS Open Tech, the latest version provided by MSOpenTech is 3.2.100 released in 2016.

This is an old version of Redis, I would not suggest installing Redis this way. The recommended way is to use Docker or use the Windows Subsystem for Linux Ubuntu environment

Windows Installation

Launch the msi and follow through the process of the install. Screenshot are attached below:

: Install Redis Part 1
Install Redis, Click on Next

: Install Redis Accept License
Install Redis, accept the license agreement

: Install Redis, default location
Install Redis, destination folder

: Install Redis, default port
Install Redis, accept the default port 6379

: Installation
Install Redis, ready to install

: Install Progress
Install Redis, progress bar

: Install Complete
Install Redis, finish

Linux Install

If you wish to run the latest version 5.0.3 of redis then you will need to install it on a Linux system. The following commands shows how to install redis on a Linux System (Ubunutu)

//Ubuntu 
$wget http://download.redis.io/releases/redis-5.0.3.tar.gz
$tar xzf redis-5.0.3.tar.gz
$cd redis-5.0.3
$make
$make test
$make install
$cd utils
$chmod +x install_server.sh
$./install_server.sh

//start and stop service by
$sudo service redis_6379 start
$sudo service redis_6379 stop

//Ubuntu

$wget http://download.redis.io/releases/redis-5.0.3.tar.gz

$tar xzf redis-5.0.3.tar.gz

$cd redis-5.0.3

$make

$make test

$make install

$cd utils

$chmod +x install_server.sh

$./install_server.sh

//start and stop service by

$sudo service redis_6379 start

$sudo service redis_6379 stop

Ubuntu on Windows Install

There is also another option of installing on your windows machine that is using Windows Subsystem for Linux. One can run Ubuntu on Windows 10 as a subsystem. In order to enable Linux on Windows 10 you will need to run these commands first.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

1	Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Then you can download the Ubuntu version you wish on the Windows Store. Next you can install Redis by launching the ubuntu prompt, the steps are listed below.

> sudo apt-get update
> sudo apt-get upgrade
> sudo apt-get install redis-server
> redis-cli -v

> sudo apt-get update

> sudo apt-get upgrade

> sudo apt-get install redis-server

> redis-cli -v

install-redis-windows-ubuntu

Validating installation

Once installed on windows or linux we can use the redis-cli to verify if redis is running.
On windows launch your prompt and go to C:\Program Files\Redis
run redis-cli.exe and if you are on Linux just simply run redis-cli

Run these commands, to set and get values

127.0.0.1:6379>SET test 1234
127.0.0.1:6379>GET test
"1234"
127.0.0.1:6379>quit

127.0.0.1:6379>SET test 1234

127.0.0.1:6379>GET test

"1234"

127.0.0.1:6379>quit

The end result should look something like this.

Redis Prompt

If you are having issues with connecting to redis, check out if redis is running, use the redis-server.exe to verify.

Summary

We have learned how to install redis in part 1 series of Redis for .NET Developers. in the upcoming post, I will go through the more details of redis.

.NET, C#, Learn Series, Redis

cache, performance, redis, scalability

Blog Post Ideas

Taswar Bhatti May 7, 2015 No Comments

Dear Readers,

I am looking to write on some topics but have not decided on which one would be the best, I wanted your input on what you as reader would like to be covered. I have google survey below, please select one of the topics or if you like other topics to be covered please fill in the other section.

Thanks.
Taswar
Loading…

Misc

blog post, blog post ideas, ideas

Using Grunt: Jasmine and Phantom.js to Test your WebApp

Taswar Bhatti May 6, 2015 No Comments

Sorry for not blogging for a while, have been busy with joining a new company. I wanted to finish up the blog post series with Running Grunt to test your JavaScript application.

In this post I will cover using Jasmine and Phantom.js. I have been a big fan of phantomjs a headless browser to test your web, its super fast and lightweight. In fact I did a local (Ottawa) JavaScript talk on it in 2012.

Jasmine

Jasmine is a BDD test framework for Javascript, we will be using to to test our app. Let’s get started and install jasmine to use in our express 4 application, again we will use npm or visual studio npm installer to install it.

npm install grunt-contrib-jasmine --save-dev

1	npm install grunt-contrib-jasmine --save-dev

Jasmine npm install

Next we will write a simple JavaScript client code, let’s call it client.js script that we will perform the test on.

var AppClient = function (name) {
    this.name = name || "Taswar";
};

AppClient.prototype.setName = function (name) {
    this.name = name;
};

AppClient.prototype.getName = function () {
    return this.name;
};

AppClient.prototype.sayHi = function() {
    return this.name + ' says hi!';
};

var AppClient = function (name) {

this.name = name || "Taswar";

};

AppClient.prototype.setName = function (name) {

this.name = name;

};

AppClient.prototype.getName = function () {

return this.name;

};

AppClient.prototype.sayHi = function() {

return this.name + ' says hi!';

};

We will now add an spec file for it to test the JavaScript client.js file we just created.

describe('The client app ', function () {
    var client;
    
    beforeEach(function () {
        client = new AppClient('Peter');
    });
    
    it("is a constructable object", function () {
        expect(typeof client).not.toBeUndefined();
    });

    it('should say hi', function () {
        expect(client.sayHi()).toEqual('Peter says hi!');
    }); 
});

describe('The client app ', function () {

var client;

beforeEach(function () {

client = new AppClient('Peter');

});

it("is a constructable object", function () {

expect(typeof client).not.toBeUndefined();

});

it('should say hi', function () {

expect(client.sayHi()).toEqual('Peter says hi!');

});

The spec file is where we define our test, now that we have created the spec we can add our grunt task

module.exports = function (grunt) {
    grunt.initConfig({
        jasmine: {
            test: {
                src: 'public/javascripts/*.js',
                options: {
                    specs: 'test/*.spec.js'
                }
            }
        }    
    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-jasmine');
    
    // Here is where we would define our task
    grunt.registerTask('default', ['jasmine']);
};

module.exports = function (grunt) {

grunt.initConfig({

jasmine: {

test: {

src: 'public/javascripts/*.js',

options: {

specs: 'test/*.spec.js'

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-jasmine');

// Here is where we would define our task

grunt.registerTask('default', ['jasmine']);

};

We can now run our grunt task using Task Runner or by command line

grunt jasmine

1	grunt jasmine

The output would be something like

grunt jasmine output

Now that we have Jasmine and grunt working, lets create a JQuery plugin so that we can test Jasmine with JQuery.
In order to do so we need to use bower. If you need a tutorial on bower you can look at my old post.
But first lets install bower using npm or by the npm tool in Visual Studio

npm install bower --save-dev

1	npm install bower --save-dev

Bower NPM Install

Let’s now use bower to install jquery, jasmine-jquery plugin and we will save it to our dev environment.

bower install jquery jasmine-jquery --save-dev

1	bower install jquery jasmine-jquery --save-dev

I will reuse one of my plugin for jquery that I created that does locale sorting. The code base is small enough for us to test, since it sorts elements based on locale of the text. Lets place the file in our javascript folder so that Grunt can pick it up, lets call it localeSort.js

(function ($) {
    $.fn.localeSort = function (options) {
        var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;
        
        return this.each(function () {
            function sorty(list, compare, elem) {
		elem = typeof elem !== 'undefined' ? elem : 'li';
				
                var listElements = list.find(elem);
                
                listElements.sort(compare);
 
                list.empty();
 
                listElements.each(function (index, li) {
                    list.append(li);
                });
            }
            
            if (settings.ul === true) {
                sorty($this, settings.compare);
            }
        });
    };
 
    $.fn.localeSort.defaults = {
        ul: true,
        compare: function localeCompareSort(a, b) {
            var t1 = $(a),
                t2 = $(b);
            return t1.text().localeCompare(t2.text());
        }
    };
}(jQuery));

(function ($) {

$.fn.localeSort = function (options) {

var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;

return this.each(function () {

function sorty(list, compare, elem) {

elem = typeof elem !== 'undefined' ? elem : 'li';

var listElements = list.find(elem);

listElements.sort(compare);

list.empty();

listElements.each(function (index, li) {

list.append(li);

});

}

if (settings.ul === true) {

sorty($this, settings.compare);

}

});

};

$.fn.localeSort.defaults = {

ul: true,

compare: function localeCompareSort(a, b) {

var t1 = $(a),

t2 = $(b);

return t1.text().localeCompare(t2.text());

}

};

}(jQuery));

We also need to let our Gruntfile to know about our “vendor” jasmine and jquery plugin, in order to run the task.

module.exports = function (grunt) {
    grunt.initConfig({
        jasmine: {
            test: {
                src: 'public/javascripts/*.js',
                options: {
                    vendor: [
                        'bower_components/jquery/dist/jquery.js',
                        'bower_components/jasmine-jquery/lib/jasmine-jquery.js'
                    ],                
                    specs: 'test/*.spec.js'
                }
            }
        }
    
    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-jasmine');
    
    // Here is where we would define our task
    grunt.registerTask('default', ['jasmine']);
};

module.exports = function (grunt) {

grunt.initConfig({

jasmine: {

test: {

src: 'public/javascripts/*.js',

options: {

vendor: [

'bower_components/jquery/dist/jquery.js',

'bower_components/jasmine-jquery/lib/jasmine-jquery.js'

specs: 'test/*.spec.js'

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-jasmine');

// Here is where we would define our task

grunt.registerTask('default', ['jasmine']);

};

We will also create a spec file and created a folder called fixtures and placed a html file sampleSort.html in there which contains a unordered list with fruit names, please look at jsfiddle for input

jasmine.getFixtures().fixturesPath = 'test/fixtures';

describe('jquery sort plugin', function () {
    var elem;
    
    beforeEach(function () {
        loadFixtures('sampleSort.html');
        elem = $('#mylist2');
    });
    
    it('should  have French sorting', function () {
        elem.localeSort();
        var li = elem.find('li').map(function (i, el) {
            return $(el).text();
        }).get();

        
        expect(li).toEqual(['Orange', 'Poir', 'Pomme']);
    });        
});

jasmine.getFixtures().fixturesPath = 'test/fixtures';

describe('jquery sort plugin', function () {

var elem;

beforeEach(function () {

loadFixtures('sampleSort.html');

elem = $('#mylist2');

});

it('should have French sorting', function () {

elem.localeSort();

var li = elem.find('li').map(function (i, el) {

return $(el).text();

}).get();

expect(li).toEqual(['Orange', 'Poir', 'Pomme']);

});

The result of our jasmine test would show.

Jasmine Jquery Test

Summary

So this concludes our Grunt series, we have gone through the journey of using Grunt with Visual Studio, here were all the topics that were covered. Hope you enjoyed it.

Grunt, javascript, Node, node.js, visual studio

grunt, Javascript, node.js

Last day at RR Donnelley

Taswar Bhatti March 20, 2015 No Comments

Yesterday, was the last day at RR Donnelley Language Solutions for me, it was great working with an excellent team at RR Donnelley, but the time has come after 5 years working in Language Solutions to move and advance my career.
I will be moving to a new position as System Architect and be working on Security related software. I am excited and also expecting challenging time ahead. I will be still be blogging more on Node/JavaScript/MS .NET and will probably include more Security, Authentication, Performance related articles, so stay tuned.

Rant

career, rant

Using Grunt JavaScript Uglify and Concat

Taswar Bhatti February 18, 2015 No Comments

Using Grunt JavaScript Minification

We will continue from our last blog post on Grunt: using less and css minification to JavaScript minification using a plugin called Uglify.

JSHint

To begin we will use a linting tool called jshint, to help us in taming our JavaScript with some static code analysis to flags suspicious usage.

We can use the command line npm install for it or we can use the visual studio tool to install

npm install grunt-contrib-jshint --save-dev

1	npm install grunt-contrib-jshint --save-dev

Npm JsHint

Now that we have jshint lets add our grunt task for jshint in our Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
    
        cssmin: {
            target: {
                files: {
                    'deploy/style.min.css': 'public/stylesheets/mystyle.css'
                }
            }
        },

        less: {
            compile: {
                files: {
                    'deploy/compiled.css': 'public/stylesheets/layout.less'
                }
            }
        },

        jshint: {
            jsFiles: ['public/javascripts/**/*.js']                             
        }
    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // Here is where we would define our task
    grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles']);
};

module.exports = function (grunt) {

grunt.initConfig({

cssmin: {

target: {

files: {

'deploy/style.min.css': 'public/stylesheets/mystyle.css'

}

less: {

compile: {

files: {

'deploy/compiled.css': 'public/stylesheets/layout.less'

}

jshint: {

jsFiles: ['public/javascripts/**/*.js']

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-less');

grunt.loadNpmTasks('grunt-contrib-jshint');

// Here is where we would define our task

grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles']);

};

You may realize that something different in our jshint section, there are some ** inside the file name. The pattern of /**/ basically mean traverse through all the children levels of the directory hierarchy, and the *.js means all the file with extension of js. By doing so, our script will always scan through any subdirectory for any future js files we may add.

Lets add a file inside of public/javascripts/ directory and call it myapp.js, our file will look something like this.

"use-strict";
var myapp = {};

myapp.name = 'This is a sample app';

myapp.isNull = function (a) {    
    return a == null;
};

"use-strict";

var myapp = {};

myapp.name = 'This is a sample app';

myapp.isNull = function (a) {

return a == null;

};

When we run our task using TaskRunner in Visual Studio or command line for jshint, we will get back a fail task and some suggestion on our JavaScript.

$ grunt jshint:jsFiles

//output
Running jshint:jsFiles (jshint) task

   public\javascripts\myapp.js
      7 |    return a == null;
                      ^ Use '===' to compare with 'null'.

1 error in 1 file

Aborted due to warnings.
Process terminated with code 3.

$ grunt jshint:jsFiles

//output

Running jshint:jsFiles (jshint) task

public\javascripts\myapp.js

7 | return a == null;

^ Use '===' to compare with 'null'.

1 error in 1 file

Aborted due to warnings.

Process terminated with code 3.

In order to fix the script jshint already suggest us to use the “===” for compare. Let’s now add another file called myapp2.js and also fix our myapp.js file.

"use-strict" ;

var myapp2 = {};

myapp2.sayHello = function () {
    return "Hello";
};

"use-strict" ;

var myapp2 = {};

myapp2.sayHello = function () {

return "Hello";

};

When we rerun our task we should have no more errors.

$ grunt jshint:jsFiles
>> 2 files lint free.

Done, without errors.

$ grunt jshint:jsFiles

>> 2 files lint free.

Done, without errors.

Concat

We will now like to concat the file together and there is yet another plugin for grunt to concat files for us grunt-contrib-concat, as always we can use the npm tool in visual studio or the command line to install it.

$ npm install grunt-contrib-concat --save-dev

1	$ npm install grunt-contrib-concat --save-dev

And in our Gruntfile.js we will add our concat task

module.exports = function (grunt) {
    grunt.initConfig({
    
        cssmin: {
            target: {
                files: {
                    'deploy/style.min.css': 'public/stylesheets/mystyle.css'
                }
            }
        },

        less: {
            compile: {
                files: {
                    'deploy/compiled.css': 'public/stylesheets/layout.less'
                }
            }
        },

        jshint: {
            jsFiles: ['public/javascripts/**/*.js']                             
        },

        concat: {
            js: {
                files: {'deploy/bundle.js': 'public/javascripts/**/*.js' }
            }
        }
    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');

    // Here is where we would define our task
    grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles', 'concat:js']);
};

module.exports = function (grunt) {

grunt.initConfig({

cssmin: {

target: {

files: {

'deploy/style.min.css': 'public/stylesheets/mystyle.css'

}

less: {

compile: {

files: {

'deploy/compiled.css': 'public/stylesheets/layout.less'

}

jshint: {

jsFiles: ['public/javascripts/**/*.js']

concat: {

js: {

files: {'deploy/bundle.js': 'public/javascripts/**/*.js' }

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-less');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-concat');

// Here is where we would define our task

grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles', 'concat:js']);

};

From the script we will see that it will add the bundle.js file into the deploy directory.

bundle.js

and if we open the file, we will see that both scripts are combined into one file.

concat

Uglify

Lastly, we would like to uglify the file, as in minification of the Javascript files. As always we will install our plugin and modify our Gruntfile.

$ npm install grunt-contrib-uglify --save-dev

1	$ npm install grunt-contrib-uglify --save-dev

Our new Gruntfile.js would look like

module.exports = function (grunt) {
    grunt.initConfig({
    
        cssmin: {
            target: {
                files: {
                    'deploy/style.min.css': 'public/stylesheets/mystyle.css'
                }
            }
        },

        less: {
            compile: {
                files: {
                    'deploy/compiled.css': 'public/stylesheets/layout.less'
                }
            }
        },

        jshint: {
            jsFiles: ['public/javascripts/**/*.js']                             
        },

        concat: {
            js: {
                files: {'deploy/bundle.js': 'public/javascripts/**/*.js' }
            }
        },

        uglify: {
            bundle: {
                files: {'deploy/bundle.min.js': 'deploy/bundle.js'}
            }
        }
    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Here is where we would define our task
    grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles', 'concat:js', 'uglify:bundle']);
};

module.exports = function (grunt) {

grunt.initConfig({

cssmin: {

target: {

files: {

'deploy/style.min.css': 'public/stylesheets/mystyle.css'

}

less: {

compile: {

files: {

'deploy/compiled.css': 'public/stylesheets/layout.less'

}

jshint: {

jsFiles: ['public/javascripts/**/*.js']

concat: {

js: {

files: {'deploy/bundle.js': 'public/javascripts/**/*.js' }

}

uglify: {

bundle: {

files: {'deploy/bundle.min.js': 'deploy/bundle.js'}

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-less');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-uglify');

// Here is where we would define our task

grunt.registerTask('default', ['cssmin:target', 'less:compile', 'jshint:jsFiles', 'concat:js', 'uglify:bundle']);

};

uglify

And now our bundle.min.js file is a minified javascript file (Uglified).

minified

Summary

In this post we covered quite an area of grunt where we used multiple plugins to accomplish javascript related task (minification, concat, etc), in the next post we use grunt to automate our testing and clean up task.

Grunt, javascript, Node, node.js

concat, grunt, jshint, lint, uglify

Grunt: using less and css minification

Taswar Bhatti February 11, 2015 No Comments

In this post I will go through using grunt for our css minification task and also showcase another preprocessor for css called less.

First off lets start with a express 4 application, we will create it with Visual Studio NTVS, the latest RC contains a template for express 4.

Node Express App Visual Studio

We can install grunt by command prompt npm install

npm install grunt --save-dev

1	npm install grunt --save-dev

or by using the npm installer in Visual Studio, remember to choose the development dependency type

Npm Installer

We should now see grunt in our dev when we expand the npm icon in Visual Studio

Grunt Visual Studio

In our express 4 application we will now add a mystyle.css file to public/stylesheets folder like below.

Css file added

The css contains just 3 styles

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 1px;
}

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;

}

p.three {

border-style: solid;

border-width: 1px;

}

What we want our grunt task to do, is to minify this css for us in our deployment folder, so that it is deploying mystyle.min.css, in order to do so we can use the grunt-contrib-cssmin

Lets first install with npm, again you can use the visual installer if you prefer in visual studio.

npm install grunt-contrib-cssmin --save-dev

1	npm install grunt-contrib-cssmin --save-dev

Now in our grunt task we can load the npm and also call the cssmin in the initConfig object.

module.exports = function (grunt) {
    grunt.initConfig({
    
       
        cssmin: {
            target: {
                files: {
                    //target file : source file
                    'deploy/style.min.css': 'public/stylesheets/mystyle.css'
                }
            }
        }

    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
 
    // Here is where we would define our task
    grunt.registerTask('default', ['cssmin:css']);
};

module.exports = function (grunt) {

grunt.initConfig({

cssmin: {

target: {

files: {

//target file : source file

'deploy/style.min.css': 'public/stylesheets/mystyle.css'

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-cssmin');

// Here is where we would define our task

grunt.registerTask('default', ['cssmin:css']);

};

One thing to note is that in cssmin, in the files enclosure one has to put the destination, following the source file.

Let’s try to improve this css a bit by introducing less, basically less is a preprocessor that allows us to write cleaner css. We can introduce variables inside of less so that we don’t have to repeat ourselves. There is more to less and I will not get into the details of it. If you wish to learn more about less go to http://lesscss.org/

@solidStyle: solid;

div.one {
    border-style: @solidStyle;
    border-width: 5px;
}

div.two {
    border-style: @solidStyle;
    border-width: medium;
}

div.three {
    border-style: @solidStyle;
    border-width: 1px;
}

@solidStyle: solid;

div.one {

border-style: @solidStyle;

border-width: 5px;

}

div.two {

border-style: @solidStyle;

border-width: medium;

}

div.three {

border-style: @solidStyle;

border-width: 1px;

}

We would now need grunt-contrib-less installed with npm and load it into our grunt file.

npm install grunt-contrib-less

1	npm install grunt-contrib-less

Our grunt file would look like

module.exports = function (grunt) {
    grunt.initConfig({
    
        cssmin: {
            target: {
                files: {
                    'deploy/style.min.css': 'public/stylesheets/mystyle.css'
                }
            }
        },

        less: {
            compile: {
                files: {
                    'deploy/compiled.css': 'public/stylesheets/layout.less'
                }
            }
        }

    });
    
    // Next one would load plugins
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-less');
 
    // Here is where we would define our task
    grunt.registerTask('default', ['cssmin:css', 'less:compile']);
};

module.exports = function (grunt) {

grunt.initConfig({

cssmin: {

target: {

files: {

'deploy/style.min.css': 'public/stylesheets/mystyle.css'

}

less: {

compile: {

files: {

'deploy/compiled.css': 'public/stylesheets/layout.less'

}

});

// Next one would load plugins

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.loadNpmTasks('grunt-contrib-less');

// Here is where we would define our task

grunt.registerTask('default', ['cssmin:css', 'less:compile']);

};

But what if we wanted to combine these 2 files, and also to minify them? Then you have to wait till the next blog post, stay tuned.

Grunt, javascript

css, grunt, less, minifcation, task runner

Using Grunt – Copying Files

Taswar Bhatti January 31, 2015 No Comments

Sorry for not posting regularly here, I was on holidays during late December till January, so didn’t get the time or the change to blog, but will get back to the routine of blogging more often.

This blog post will be the continuation on Using Grunt. We went through some basic of using Grunt, in this post I will cover copy of files using grunt. One can definitely use their system commands (cp, mv, del, rm, etc) to copy files but having the task runner to automate it for you, will make the mundane task of copy easier and not to mention portable to other platform.

In our example we will start off with a simple node express app and we wish to copy the html files to build folder.
Our file structure may look somewhat like:

GruntCopySolution

We will now focus on the Gruntfile.js, as some of you may recall a simple grunt file looks somewhat like

module.exports = function(grunt) {

  // Grunt configuration goes into initConfig
  grunt.initConfig({

  });

  // Next one would load plugins

  // Here is where we would define our task
};

module.exports = function(grunt) {

// Grunt configuration goes into initConfig

grunt.initConfig({

});

// Next one would load plugins

// Here is where we would define our task

};

We will be using the grunt-contrib-copy plugin for copying files, the reason we will use grunt to copy files is because it will abstract away the system calls of copy from us, so that we can use the same script in windows, mac or in linux.
To install grunt-contrib-copy, we will use the npm command and save it in our dev

$npm install grunt-contrib-copy --save-dev

1	$npm install grunt-contrib-copy --save-dev

We will now add the copy information and load the npm in our gruntfile.

 grunt.initConfig({
        //use the copy with source and destination        
        copy: {
            html: {
                files: [
                    { src: 'default.html', dest: 'build/' }
                ]
            }
    });
    
    //load the copy module
    grunt.loadNpmTasks('grunt-contrib-copy');

    //register the build task
    grunt.registerTask('build', ['copy:html']);

grunt.initConfig({

//use the copy with source and destination

copy: {

html: {

files: [

{ src: 'default.html', dest: 'build/' }

]

}

});

//load the copy module

grunt.loadNpmTasks('grunt-contrib-copy');

//register the build task

grunt.registerTask('build', ['copy:html']);

We can run the grunt command of copy with html, this will also create the build folder for us

$grunt copy:html
Running "copy:html" (copy) task
Copied 1 file

Done, without errors.

$grunt copy:html

Running "copy:html" (copy) task

Copied 1 file

Done, without errors.

One can also use the build task to run the copy command, note: I am passing the copy:html as an array to the second parameter in our gruntfile, I can continue adding task to the array e.g copy:somedir, etc, etc

$grunt build
Running "copy:html" (copy) task
Copied 1 file

Done, without errors.

$grunt build

Running "copy:html" (copy) task

Copied 1 file

Done, without errors.

We may also want to copy some of our bower component file over to the build, we can add another config object to grunt copy like below (If you are interested in learning Bower please read my other post on Bower)

grunt.initConfig({
        //use the copy with source and destination        
        copy: {
            html: {
                files: [
                    { src: 'default.html', dest: 'build/' }
                ]
            },
            bower: {
                files: [
                    { src: 'bower_components/**', dest: 'build/' }
                ]
            }
        }
    });

grunt.initConfig({

//use the copy with source and destination

copy: {

html: {

files: [

{ src: 'default.html', dest: 'build/' }

]

bower: {

files: [

{ src: 'bower_components/**', dest: 'build/' }

]

}

});

Grunt has a lot of plugin that can help us do a tone of things, in the next post we will go over some plugins that will help us minify css, JavaScript and even contact files for us.

Grunt, javascript, Node, node.js

grunt, Javascript, node.js

Redis for .NET Developer – Redis String Datatype part 2

Redis String Datatype using Integers

Redis for .NET Developer – String Datatype

Strings Data Type

Sets and Gets

Example of using single key-value in C#

Example of using multiple key-value in C#

Serialization of objects into Redis with C#

Redis for .NET Developer – Connecting with C#

For .NET Framework

Dotnet Core Version for Connection

Intro to Redis for .NET Developers – Installing Redis on Windows

What is Redis – Installing Redis on Windows

Windows Installation

Linux Install

Ubuntu on Windows Install

Validating installation

Summary

Blog Post Ideas

Using Grunt: Jasmine and Phantom.js to Test your WebApp

Jasmine

Summary

Last day at RR Donnelley

Using Grunt JavaScript Uglify and Concat

Using Grunt JavaScript Minification

JSHint

Concat

Uglify

Summary

Grunt: using less and css minification

Using Grunt – Copying Files

Opinions are my own and not the views of my employer

LinkedIn

My Book

Archives