Wednesday 12 July 2017

Using ES6 Generators to implement Where Skip Take

This article will present the use of ES6 Generators to implement in Javascript some handy functions for collections (arrays) that can filter and limit the size of that result. The technique will use the new ES6 generator functions.

ES6 Generators are functions of Ecmascript 6 that let's the programmer take control of iterators using the yield keyword and use custom logic.

We will use Traceur to support ES6 syntax. Traceur is a Javascript compiler in the form of a library. In production you should instead use a transpiler, that rewrites your ES6 syntax into ES2015, which is more supported by current web browsers. One transpiler is Babel.

First off we include Traceur into the Html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
        <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
        <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        
    </head>
    <body bgcolor="teal" style="font-family:Verdana, Courier,Helvetica, Arial">
        
        <h1 style="color:yellow;font-family:Arial">ES6 module demo</h1>



We now have the compiler loaded into our HTML page and can make use of ES6 Generator functions and other ES6 syntax. First lets look at the WHERE function in Javascript. Think of it as WHERE in Linq, we will also use ES6 Arrow functions here, which is an important functional programming concept and syntax that ES6 introduces.


   <script type="text/javascript">

         var where = function* (predicate, collection){
                for (let item of collection){                  
                    if (predicate(item)){                   
                        yield item;      
                    }
                }
            }




We assign where here to the function defined at the right hand side. Note the asterisk (star) here. This is what a generator function looks like in ES6. It must not be mixed with function pointers as in C++, the star here is just to separate generator functions with ordinary functions. On a operational level, generator functions are just like iterators in C# that hey hand off control from the function to the program that calls the functions. Generator functions are usually used in iteration loops, which will be seen later on in this article.

The where function passes in a predicate (an arrow function that returns a boolean which is true or false of course) and if that predicate on the current item of the collection is true, yield will return that item. The sample also uses the of operator of the collection passed in.

Next off, let us look at the take function. This function will take a desired number of the result set and end iteration early if a result set is found. On a very large collection, this is very efficient. Imagine searching a huge collection for a desired item defined by an arrow function and exit early if for example one item is found. Then take(1, mycoll) will return control to the calling program when that item is found.


            var take = function* (size, collection){

            if (size < 1) 
                return;

            let count = 0;

            for (let item of collection){
                yield item;
                count = count + 1;
                if (count >= size){
                    return;
                }
            }
        }



Make note that we end the looping here by doing a return when the amount of items return is the desired size specified. Next off, let us look at the Skip function. We could do a reserve on the passed in collection, and use the take function. Instead the Skip method will use tailored logic to iterate on the passed in collection from start to finish, skipping the specified number of items first.

  var skip = function* (size, collection){
         
            let skippedItems = 0;

            for (let item of collection){
                skippedItems = skippedItems + 1;
                //console.log(item);
                //console.log(skippedItems);
                
                if (skippedItems <= size){
                    continue;
                }
                else {
                    yield item;
                }
            }

        }
The sample HTML code below tests out the JS code above using ES6 arrow functions and ES 6 generator functions on a simple array and looping through with our new powerful functional programming constructs that let us search even huge collections with filtering and skipping or taking the desired result.

         
            var coll = [ "Tammy", "Tom", "Betty", "Marge", "Joey", "Tim", "Jane", "Tommy" ];

            //console.log(coll);
            
            for (let i of take(2, where(n => n.startsWith("T"),coll))){
                   $("body").append("<li>" + i + "</li>");
            }

Next off, we will combing all the uses of WHERE, SKIP and TAKE to both filter and provide paging functionality. Consider this code:


            var coll = [ "Tammy", "Tom", "Betty", "Marge", "Joey", "Tim", "Jane", "Tommy" ];

            console.log(coll);

            let pageSize = 1;
            let pageIndex = 1;
            
            for (let i of take(pageSize, skip(pageIndex*pageSize, where(n => n.startsWith("T"),coll)))) {
                   $("body").append("<li>" + i + "</li>");
            }
                  
Here we use the following to get a PAGE of our result by using the formula:

PAGE_INDEX = TAKE(PAGE_SIZE) of (SKIP(PAGE_INDEX * PAGESIZE) of COLLECTION WHERE Predicate(x)). It is impressive that we can implement Linq like functionality by using ES6 Generator functions in ES6 sticking to ES6 syntax. This promises that Javascript in the future will be a very versatile language when it comes to functional programming. We use Traceur in the meantime to support ES6 syntax in different web browsers. I have included a Plunk in the link below so that you can test this out yourself.

ES6 Generator functional programming sample

Sunday 9 July 2017

Ecmascript 6 Modules in Javascript

Javascript is a programming (or scripting) language known for its wide use. It is mature by the fact that it is used for many years since its creation in the mid 90s. But at the same time Javascript or just JS is immature by the fact that it lacks a lot of features built into the language. This is an observed by the large number of different libraries to add features to JS that programmers using other programming languages take for granted. For example, modules and classes are not something easy to create with JS.
The good thing is that JS is finally evolving in large steps now with Ecmascript 6 or ES6 with a common standard that many browsers vendors can agree upon. There are different ways to run JS code with ES6 features. One can use a transpiler such as Babel that will rewrite the JS code with ES6 scripts into to compatible ES2015 syntax which more browsers support. Or one can use a javascript library that contains polyfills and fills to support ES6 code in browsers. The sample code in this article has been tested with Internet Explorer 11 and is available as a Plunk. The following url contains the running demo:
Plunk with ES6 modules

First in this sample a class called Employee is created. This uses ES6 new class feature.

        export class Employee {

 
 
 constructor (name) {
  //console.log("Constructor of Employee");
  this._name = name; 
 }

 get name() {
  return this._name;
 }

 doWork(){
  return `${this.name} is working`;
 }
}

ES6 classes can export a class and then be imported in other classes and build up modules. The employee class also uses ES6 template string feature. Note that the backtick quote is used and ${..} is used to refer to variables. The next class then imports the Employee class. Note that you must change url here to match your Plunk in the running editor to adjust the session url that Plunkr uses to give unique urls. ES6 can support static urls of course.

import {Employee} from "http://run.plnkr.co/gIljKiTbjZ0IOX8b/Employee.js"
export class Company {


 hire(...names) {
  this.employees = names.map(n => new Employee(n));
 }

 doWork(){
  console.log(this.employees);
  $("body").append("<ul>");
  for (let e of this.employees){
   console.log(e);
   $("body").append(`<li style='list-style-type:circle'>${e.doWork()}` + "</li>");
  }
  $("body").append(">/ul<");
  return 1;
 }
}

Again the class keyword is used to define a class and then exported to be used in another class or module with the export keyword. To import the Employee class the import keyword. The Company class above uses the rest operator (...) to allow passing in an arbitrary number of elements. Then the map operator built into Arrays in ES6 is used to return a mapped array. The use of the let operator is used and also the of operator of iterable collections.
Finally the sample HTML code below is used to define the use of an ES6 module. Here the script tag with the tag module is used.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
        <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
        <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        
    </head>
    <body bgcolor="teal" style="font-family:Verdana, Courier,Helvetica, Arial">
        
        <h1 style="color:yellow;font-family:Arial">ES6 module demo</h1>
        <script type="module">
        import {Company} from "http://localhost/babeldemo/src/Company.js"
        var c = new Company();
        c.hire("Tim", "Tom", "Betty", "Maggie");
        c.doWork();
        </script>
        
    </body>
</html>

Note that Traceur is a good option to test out ES6 features. In production, using a transpiler such as Babel to create a ES2015 compatible JS code is probably much better since there is a performance cost with Traceur. The reason Traceur is used in this sample is to show how an old browser such as Internet Explorer 11 can run ES6 code with a Javascript library such as Traceur.

To see a compatibility matrix of which browsers supports which ES6, see the Kangax table at the following url:
https://kangax.github.io/compat-table/es6/
With the help of Traceur more browsers can run more feature of ES6 and you can test out and use ES6 in your development or production environments and structure your code with classes and modules for example. Make note that the current state of Javascript module loaders of browsers will be improved in the future. Until then, additional frameworks such as AMD or Require.Js can be used to support module loading in more complex scenarios.

Sunday 14 May 2017

Redis Image Cache Provider

Caching images in web sites and web applications is possible to achieve using many methods. This article presents an image cache provider to use in MVC applications using Redis as a caching server.

First off, create a new MVC web application and add the Nuget package RedisImageCacher (created by me):
RedisImageCacher

Install-Package RedisImageCacher

This Nuget package will also add in the dependencies for libraries ServiceStack.Redis and Microsoft.Web.RedisOutputCacheProvider.


Next off, one will need a Redis server. It is possible to install a local Redis server in Windows using the binaries here:

Redis 2.6 Windows (32/64 bits) on GitHub from MSOpenTech.


Tips on how to use Redis client and server and code in this article is written in another article of mine:
ASP.NET and Redis

Download Redis 2.6 and start it up on your local developer box. Start the server from a command-line for example :

C:\redis26\redis-server

Start a Redis client also from the commandline e.g. :
C:\redis26\redis-cli



  <caching>
      <outputCache defaultProvider="MyRedisOutputCache">
        <providers>
          <!-- Either use 'connectionString' and provide all parameters as string OR use 'host','port','accessKey','ssl','connectionTimeoutInMilliseconds' and 'operationTimeoutInMilliseconds'. -->
          <!-- 'databaseId' and 'applicationName' can be used with both options. -->
          <!--
          <add name="MyRedisOutputCache" 
            host = "127.0.0.1" [String]
            port = "" [number]
            accessKey = "" [String]
            ssl = "false" [true|false]
            databaseId = "0" [number]
            applicationName = "" [String]
            connectionTimeoutInMilliseconds = "5000" [number]
            operationTimeoutInMilliseconds = "1000" [number]
            connectionString = "<Valid StackExchange.Redis connection string>" [String]
            loggingClassName = "<Assembly qualified class name that contains logging method specified below>" [String]
            loggingMethodName = "<Logging method should be defined in loggingClass. It should be public, static, does not take any parameters and should have a return type of System.IO.TextWriter.>" [String]
          />
          -->
          <!-- For more details check https://github.com/Azure/aspnet-redis-providers/wiki -->
          <!-- Either use 'connectionString' OR 'settingsClassName' and 'settingsMethodName' OR use 'host','port','accessKey','ssl','connectionTimeoutInMilliseconds' and 'operationTimeoutInMilliseconds'. -->
          <!-- 'databaseId' and 'applicationName' can be used with both options. -->
          <!--
          <add name="MyRedisOutputCache" 
            host = "127.0.0.1" [String]
            port = "" [number]
            accessKey = "" [String]
            ssl = "false" [true|false]
            databaseId = "0" [number]
            applicationName = "" [String]
            connectionTimeoutInMilliseconds = "5000" [number]
            operationTimeoutInMilliseconds = "1000" [number]
            connectionString = "<Valid StackExchange.Redis connection string>" [String]
            settingsClassName = "<Assembly qualified class name that contains settings method specified below. Which basically return 'connectionString' value>" [String]
            settingsMethodName = "<Settings method should be defined in settingsClass. It should be public, static, does not take any parameters and should have a return type of 'String', which is basically 'connectionString' value.>" [String]
            loggingClassName = "<Assembly qualified class name that contains logging method specified below>" [String]
            loggingMethodName = "<Logging method should be defined in loggingClass. It should be public, static, does not take any parameters and should have a return type of System.IO.TextWriter.>" [String]
            redisSerializerType = "<Assembly qualified class name that implements Microsoft.Web.Redis.ISerializer>" [String]
          /> -->
          <add name="MyRedisOutputCache" type="Microsoft.Web.Redis.RedisOutputCacheProvider" host="localhost" accessKey="" applicationName="RedisCache" port="6379" ssl="false" />
        </providers>
      </outputCache>
    </caching>
    



It is also possible to control how long time Image Data is to be kept in the cache in seconds. In web.config:
  <add key="RedisImageCacheTimeout" value="10" />



This sets a timeout of caching image data to 10 seconds for example. It is possible to change this of course, using 600 will cache image data for 10 minutes for example.


To cache an image, the following razor code show an example of its use:
 <img src="@Url.Action("ShowImage", "Images", new { id = Url.Encode("Croatia6-jpg") })" width="500" />
Using the syntax "filename"-"extension" like "myfile1-jpg" and using the embedded controller ImageController and action method ShowImage will also cache the image to Redis. A parameter of id is provided to the file to cache and load or retrieve from cache directly. This will be taken care of by the embedded images controller in the library. It is possible to use different image file formats, such as JPG, GIF, PNG and BMP.


Inside redis-cli Redis Client we can see that loading the image in the example will add a cache item in Redis:
redis 127.0.0.1:6379> keys * 1) "RedisCache/IMAGEBANK/Content/Images/Croatia6.jpg"

Note that images must be put into the Content/Images folder of your MVC solution! A configuration of changing this can be added later to the library. We can also ask Redis how long the cache item will exist until it expires and is removed by using TTL (Time-To-Live):

redis 127.0.0.1:6379> ttl "RedisCache/IMAGEBANK/Content/Images/Croatia6.jpg" (integer) 2


Note that TTL will show -1 if the cache item is expired. Redis client got many other handful commands to control the Redis memory cache, see Redis documentation here: Redis documentation The way the RedisImageCacher is saving data is actually done very generic and can be extended to support other data and cache this. For implementation details, see: ASP.NET and Redis


To download the source code for the RedisImageCacher and Demo library a download Mercurial repository is available on Bitbucket here:

RedisImageCacher Bitbucket repo


Or if you have Mercurial (hg) installed, from a command-line issue:
hg clone https://bitbucket.org/toreaurstad/redisimagecacher