This will be a series of short posts about using functional programming to develop client applications and SDKs.

Functional programming is back in vogue and for me has made developing software exciting again. Quite a long while back, I started incorporating a more functional style into both my C# and JavaScript code by way ofFunc and Action and using lodash in JavaScript.

I highly recommend this book to get you started with developing JavaScript in a more functional style.

I have been learning F# and Haskell for a while now, chiefly concentrating of F# due to my strong .NET background. In these posts I will be demonstrating F# with some Haskell to come later.

For learning F# - hands down - the greatest resource on the internet is F# For Fun and Profit by Scott Wlaschin. I will be linking to this site a lot over the course of this series. Also, this book by Tomas Petricek is awesome and really helped me map my C# knowledge to F#.

For learning Haskell, I have been working through this book which I also highly recommend.

As you can see, there are lots of articles, books and tutorials on functional programming out there already so I will be focusing on developing client applications using Xamarin and writing SDKs or helper libraries that wrap over server-side APIs.

Functional languages are well suited to writing Domain Specific Languages so the goal is the create libraries and applications that are expressive, easy to understand and really demonstrate the versatility of a functional style.

I would also like to demonstrate similarities between JavaScript and F#, which may sound crazy but you will be surprised.

Where do we start?

It’s no secret to anyone who knows me that I am a big fan of types. I have been working full time on a large scale JavaScript code base for a couple of years now and this is the main thing I miss from back-end development.

Yes, we have TypeScript now and I have used it a little, but to move our entire AngularJS application over to a fully typed solution is a massive undertaking, so for now I am dealing with JavaScript patterns like pseudo namespacing and revealing modules etc.

Types in F# are a joy to work with. I am going to introduce the first similarity to JavaScript by way of Record Types:

Record Types

A simple type in F# is a record type. Here we show the same domain entity in both F# and JavaScript:

type User =
    { Id : int32
      Email : string
      FirstName : string
      LastName : string }
var user =
    { id : 0
      email : ""
      firstName : ""
      lastName : "" }

Not too much difference huh? Record types are a neat way to express simple, functional data types. Let’s move on to the next type.

Discriminated Unions

Discriminated Unions are a way to express hierarchical data and on the surface resemble C# enums or even some sort of class hierarchy.

type UserType =
    | Employee
    | Manager

These types wield much more power, as we can combine records and construct types in such a way that we can really express our domain succinctly.

// each discrimination must be of a particular type
type UserType =
    | Employee of User
    | Manager of User

// create a factory function
let createUser predicate email firstName lastName =
  // create a record of type User
  let user =  {
    Id = 123
    Email = email
    FirstName = firstName
    LastName = lastName }

  match predicate() with
  | true -> Employee user
  | false -> Manager user

There are a few things going on here. We have assigned a type to each discrimination of the UserType. Next we create a function that takes a function and three strings as parameters.

Then we build a User record type based upon the parameters, but we need to make a choice on which type to return. Enter pattern matching.

The example (as examples often are) is somewhat contrived, but we are calling the higher order predicate function (representing some business logic) and matching on the boolean result. True will mean we return an Employee, false a Manager. The syntax Employee user is simply the constructor for a record type.

Pattern matching is a foundational construct of all functional languages and is used to match on arbitrary shapes of data or types in order to, perhaps, branch (somewhat like a switch statement in imperative languages - on steroids). There will be much more on this in future posts.

We have laid enough foundations here to start building a toy SDK which we will start in the next post. Have a read through the links provided to learn the concepts if you’re new to functional programming, then moving forward we will focus more on design than “nitty gritty”.

Have fun.

I’ve been having a ton of fun lately with crypto, web workers and sub-optimal performance from Chrome.

Specifically, decrypting large files have been crashing Chrome or running retardedly slow, whereas the same file decrypts just fine in FireFox.

The answer for me was to use progressive ciphering. This is possible using AES and its CBC mode of operation.

The first thing we need to do is to create the ‘decryptor’. The key and initialization vector have been obtained already from our server:

var cryptor = CryptoJS.algo.AES.createDecryptor(CryptoJS.enc.Base64.parse(key), {iv: CryptoJS.enc.Base64.parse(iv)});

The format of the file contents obtained from our service is a Base64 string, so we need to first break that up into chunks.

var chunkCache = {};
var progressiveCipher = null;

var startChunk = 0;
var endChunk = 0;
var i = 0;
var chunkSize = 1024;//whatever chunk size you like.
while (startChunk < c.length) {
    endChunk = startChunk + chunkSize;
    chunkCache[i] = fileBase64String.slice(startChunk, endChunk);
    startChunk = endChunk;

We then need to loop through each chunk in the chunkCache and process it. Each chunk must be parsed from a string into a CryptoJS WordArray.

//a bit of a convoluted loop here, but we are ensuring each chunk is sorted
//in the correct order
//this means in future we could build the chunkCache up asynchronously,
//for example using a FileReader.

var mapper = function (key) {
                 return parseInt(key, null);

var sorter = function (a, b) {
                 return a - b;

_.each(, mapper).sort(sorter),
            function (key) {
                var chunk = CryptoJS.enc.Base64.parse(chunkCache[key]);
                var block = cryptor.process(chunk);

                if (!progressiveCipher) {
                    progressiveCipher = block;
                } else {

Now that we have iterated through and processed all the chunks we need to perform the all important finalization.

var result = progressiveCipher.concat(cryptor.finalize());

And that is it! We are now ready to process the decrypted object in whatever way we see fit.

So, just a quick one here.

I have been working on some performance issues in our application and here are some of the things I did to clean things up a bit.

  • Kill ng-animate. With fire. Just do it™.

  • Make good use of $scope.$on('$destroy') to perform cleanup.

if you are making use of $rootScope.$broadcast or jQuery’s $('#el').on('click' handler) then unhook listeners like this:

//assign your listener to a variable in your controller or directive:
 var subscription =  $scope.$on("event:MyEvent", handler);

 $("#myButton").on('click', handler);


 $scope.$on('$destroy', function () {
        subscription();//calling it will kill it.
        $("#myButton").off('click', handler);//Die jQuery handler!!!
  • Remove closures where possible. This will avoid ‘capturing’ unwanted variables and also improves readability
//turn this:

funcOne().then(function (result) {
                var pants = $scope.doCrazyThingWithGlobal(myGlobalThing);
                var omg = pants * 100;
                //maybe go crazy and hook an event or 2 up here lol
                    .then(function (anotherResult) {
                        $scope.sigh(omg, pants);
                            .then(function () {

//into this


//I've even done behavioural things like this:

var myWorkflow = [handler1, handler2, handler3];


I’ll post more as I find them, in the meantime keep your JavaScript safe, happy and more productive.

Sick of incurring the wrath of your team mates for pushing test-breaking code? Those days are behind you with Git hooks.

My use case: Working on front-end code breaks our Selenium based acceptance tests when I move widgets around. We make use of Gradle to run build tasks so why not run the test task before I push to origin?

Start by creating a hooks directory if there isn’t one already in your $PROJECT/.git folder.

Then in your terminal: touch && chmod a+x && ln -s ../../git-hooks/ pre-push.

You are ready to add logic to your hook. There are plenty of examples of different tasks you can run; from linting your JavaScript to removing comments or not pushing commits with ‘WIP’ in the message.

Here, is my logic for running Gradle’s test task:

  git stash -q --keep-index
  ./gradlew test
  git stash pop -q
  exit $RESULT

Voila. Git won’t push until your tests pass! You can bypass this hook if you want by using the following flag: git push origin master --no-verify

Have fun.

JavaScript Encryption and Decryption

In my previous post on JavaScript crypto we looked at uploading a file which was to be encrypted server-side then downloaded and decrypted in the browser. In this post we will tackle both encryption and decryption and also take a look at some nuances of the HTML5 File Api


First of all we need to get a file off the file system. In our application we are making use of Fine Uploader which takes care of lots of minutiae like chunking for us. I won’t go into detail on setting up Fine Uploader as they have very good documentation.

When a file is selected (or drag-dropped) by the user I need to intercept it, encrypt it, then send it on its merry way. Here’s the interception code:

//create a key and initializationVector .. 
//this can be done by CryptoJS or your own server-side technology
//it is easy to get a file using the HTML File Api, here I'm using Fine Uploader
var file = fineuploader.getFile(someId);

var reader = new FileReader();
reader.onload = function (e) {
    var encrypted = CryptoJS.AES.encrypt(
        //convert to a word array via CryptoJS. 'this' is the file reader.
        //our server generated key happens to be in Base64. 
        //We need to convert it to a word array
            // iv was created on our server with the key 
            iv: CryptoJS.enc.Base64.parse(initializationVector) 

    var blob = new Blob([encrypted], {type: file.type});
    //now give back to Fine Uploader to continue upload to server.
    //or you could store it locally via FileWriter


We really need to call FileReader.readAsArrayBuffer as using any of the other string based variants will mess around with encoding when encrypting.

Then we just need to construct a new Blob with the encrypted result and upload it to the server (or cloud storage of choice).


When we download from the server we need to intercept the file, decrypt the contents and then hand it off to the browser as though it is a normal file download.

Using AngularJS’s $http service:

         url: "path/to/file",
         method: "GET"
     }).then(function (response) {
         var decrypted = CryptoJS.AES.decrypt(
             //again .. we retrieved these from our server.. you may have them elsewhere
                 iv: CryptoJS.enc.Base64.parse(initializationVector)

         //we need to jump through a hoop or two here
         var blob = new Blob([new Uint8Array(toArrayBuffer(decrypted))], 
         var url = (window.webkitURL || window.URL).createObjectURL(blob);
         var a = $("<a>")
             .attr("id", id)
             .attr("download", filename)
             .attr("href", url)
             .attr("textContent", "Download ready")

         (window.webkitURL || window.URL).revokeObjectURL(url);

There’s a few things going on here:

  1. Download the raw encrypted content via $http
  2. We need to decrypt using the same key and initialisation vector as when we encrypted
  3. We then create a new Blob where the contents are converted to a Uint8Array using CryptoJS helpers
  4. The mime type is something we determined on upload and is stored on our server.
  5. We need to generate a Url via createObjectURL
  6. Then we are relying on an anchor tag with the download attribute from HTML5. to get a seamless download experience (you may want to use Modernizr here)
  7. Click it and watch the file pop into your (supported) browser’s download list.

That’s it .. any questions please leave a comment.