Why Functional Programming [Still] Matters

With some of my break time i've been reading the paper Why Functional Programming Matters by John Hughes. It's a short paper, weighing in at only twenty-two pages in length. However, after hours of reading i'm only eleven pages in. Although i haven't finished it, i want to sum up my thoughts on it so far in 2012-speak. The original paper was written in 1984 and used Lisp for all the examples, which is sort of an obsolete vernacular for today's web-based programmers. All and all, i thought i'd attempt breathe some life into this classic and write up a bit of it using javascript instead.

So here goes, Why Functional Programming Still Matters in 2012:

Introduction

In the introduction John stated a few facts that blew my mind:

• Functional programs contain no assignment statements. Variables are given a value once, and then they never change. (otherwise known as immutability)
• Functional programs contain no side-effects at all (and less bugs), since "a function call can have no effect other than to compute its result." Reminds me of a chapter i just finished reading in DDD
• Expressions can be freely replaced with variables and (more importantly in my opinion) vice versa. It's so important that I want to write it out-- variables can be replaced by expressions
• Functional programs are more modular, and functionality is easier to swap
• Programmers who take the functional program route are an order of magnitude faster than ones that do not

At this point you should want to find out why functional programming is the greatest thing in the world. At least that's where i was at mentally at this point. I don't mean to spoil it for you, but as we read we'll find out that the key to functional programming's greatness is its modularity.

An Analogy with Structured Programming

John unofficially defines a structured program as something that allows for modularity. Anyone who has done anything even remotely serious in programming knows how important modularity is. I really like John's quote on the matter:

When writing a modular program to solve a problem, one first divides the problem into sub-problems, then solves the sub-problems and combines the solutions. The ways in which one can divide up the original problem depend directly on the ways in which one can glue solutions together. Therefore, to increase ones ability to modularize a problem conceptually, one must provide new kinds of glue in the programming language.

I think all of us can speak to that in one shape or another-- we create functions that plug in to other functions that plug into the main execution of the program and it's all reusable and all that-- but the point John is trying to make is that the difference between functional programs and others is where you're able to be modular.

So in other words, the argument is that "functional programming has the best glue." Let's start taking a look at the sort of glue John would have us use.

Interlude-- A Bit of Lisp

Before we get there we need to bring the conversation into the present. IMO John has a little something going for him and his argument--Lisp. Yes, although Lisp is years old it's really advantageous for functional programming. Why? To start with, because its lists are functions. (This is all in my opinion, please note that i am not a Lisp-master and only briefly messed around with languages like Lisp and MIT Scheme in college @ Wheeling Jes)

I know you need that explained. In Lisp, lists are created using the function cons. So what we call [1,2] in JavaScript is (cons 1 (cons 2 nil)) in Lisp. Simply put, cons means "make the two things after me into a list." The nil you see there is null in Lisp, which essentially in this example means "end of the list." So the second half (cons 2 nil) means "make 2 and nothing else into a list." Lisp is also written in prefix notation, meaning that 2+2 in JavaScript is (+ 2 2) in Lisp--the function/operator comes first. It looks wierd but you could get used to it.

The 2+2 code is just another advantage Lisp has-- it lacks JavaScripts syntactical impedence between functions and operators.

All and all, there's a ton of swapability baked into that. Again, let's use the 2+2 example. If i wanted to change the JavaScript one to instead call a function we made called Superify(x,y) on it that does more than just add, we would have to convert 2+2 to Superify(2,2). In Lisp, we would only have to swap all instances of the + operator to make (Superify 1(Superify 2 nil)) and we're all done.

And there's more that we'll get into later... back to the paper.

Glueing Functions Together

If i asked the majority of programmers to make a function that adds up items in a list, i'd probably get something like so:

If i then asked them to create a function that multiplies all the items in a list, i'd probably get someting like so:

A lot of duplicate code between those two, and not a ton of modularity-- take a look. Both are iterating through a list, doing something with the item, and then returning the result. Further, each has its own default/start value in the form of sum--notice how its defaulted to 1 for multiplication and 0 for sum?

John discussed this, suggesting instead that we make the code more modular by creating a function that allows us to keep the similarities, and pass in the differences. In his paper, he suggested a function called reduce with the form reduce(func, list, a), where func is a function to apply to each item, list is a list/array of objects, and a is what to substitute in instead of nil, or what to use as a default.

Here's what this may look like in JavaScript:

Look at how modular that is-- we can create new functions that work with a list of items and easily get them up and running without rewriting all of that boilerplate iteration code. Hughes calls functions like reduce "higher order functons."

John also describes a function that walks over a list, applying a function to each item in the list and returning a new list containing the results--map. Here is an example of map written in JS.

So let's say we wanted to print out all the items in an array, we could do that pretty simply with the map function like so: map(alert,anArray) and skip all the boilerplate for-each-ing.

Where to Go From Here

While I may at a later date write up more about the rest of the paper (such as what lazy evaluation is) and how to achieve it in JavaScript, i'm pretty happy with the time i've spent so far on this.

One more small piece of advice-- don't write your own map/reduce. Use something like underscore.js that is as browser-optimized as possible.

A Very Quick Look at d3.js

I finally got a chance to dig into d3.js today. From what i can tell, d3.js is an amazing dom/svg animation framework. To be honest, i have no idea how to describe it. There very well is much, much more under the hood than i'm aware of.

The jQuery-like Parts

d3.js is a lot like jQuery insofar as many of the operations are based upon items selected with CSS-selector style syntax. For example, d3.selectAll('div') probably looks fairly intuitive to anyone who has written jQuery before-- it grabs all divs on the page.

Another jQuery-esque thing about d3.js is that its API is chainable, so the following code:

obviously sets the width of all divs to 300, height to 400

d3.selectAll('div').on('click',function(){alert('hi!');});-- i bet you can already tell how events in d3.js work--exactly like (post 1.7) jQuery.

d3.js data()

One of the things that makes d3.js initially difficult to understand is the .data() function. Here's a code snippet that does a little explaining.

So the above script maps (hmmmm...) the data to the items it gets passed in order. So "hello" would be the innerHtml of the first div, "world" would be the content of the second... makes sense. The data that you pass in can be strings, numbers, object literals, anything. (Hmmm I wonder what you could do with functions...?)

What if you had 2 divs on the page, and the data() array had 3 items in it? How would it map that? Well, it would map the first 2 to the first 2 divs, neglecting the other piece of data. There is a way to work with that extra piece of data though--.enter().

d3.js enter()

.enter() allows you to do something with left over data. Here's an example:

So we were able to add extra divs on with .enter() in order to represent all the data that we passed into it.

Full Bleed d3.js example

Example: Animating SVG Circles on Mouseover

The really interesting stuff i see with d3.js involves the transition() function and SVG, which is supported in Chrome, Firefox, IE9, iOs, and Android(Honeycomb). Here's a script i wrote that draws circles in the DOM which move as soon as you hover over them.

Working with Selections and Ranges in CKEditor

Working with ranges and selections in CKEditor is almost unbearable. In order to make it a bit easier, i recommend using rangy, a free library that makes the html selection/range api cross-browser-proof. Well, at least it made what i was trying to accomplish cross-browser...

The Repository Pattern

I'm not sure if Martin Fowler conceptualized the repository pattern, but his book Patterns of Enterprise Application Architecture (PoEAA) is where I first came across the definition:

"Mediates between the domain and data mapping layers using a collection-like interface for accessing domain objects."

He has very carefully selected his words. I have my own definition. Consider it the layman's version:

"Separates data from its source." 

Let's dig into an example.

The Repository Pattern in .NET

Every .NET programmer has written some sort of code that accesses a database or web service and returns something. Traditionally, the ever-present n-tier/three-tier philosophy dictates that the code for that should be in its own package/layer, the data access layer. What that philosophy does not dictate is the method signature and the return type; they're extremely important. Let's look at your traditional DAL:

What will the dev on this project do if the People DB gets outsourced and is now accessed via webservice? Convert the web service return into datasets, or change all the business layer classes to work with whatever the new return is? Or, what if they change to a db that doesnt easily convert into datasets? Not a great position to be in... Why not change it to something more generic that will never change?...

Here's a look at the repository pattern implementation:

Notice how this implementation could survive through any sort of data source change because it is using "a collection-like interface"? Much more maintainable.

The Repository Pattern in JavaScript

JavaScript's implementation would need to take into account the fact that AJAX requests (or all node.js functions) are meant to happen asynchronously. In order to allow for this, all we really need to do is implement the callback pattern, which really just boils down to passing an extra function.

That's it!

Making Cross Domain jQuery AJAX Calls

Today's web browsers do not allow web pages to make cross-domain ajax calls. By this i mean that if you are at www.ajax.com and try to make an Ajax call ( an HTTP request using the XmlHttpRequest object) to www.other-domain.com the browser would not allow this to happen. Why? For security purposes that i cannot currently name.

However, at some point you get to a project where you're interfacing this third-party site that needs to talk to your main site, or some other similar situation where the only way you're going to get the data you need from point a to point b is with some javascript magic. Here is how to accomplish it:

How to get/post data using jQuery/javascript (JSONP)

The short answer: its not ajax at all, its JSONP. Yes, JSONP is not Ajax. I just learned this today. Like i said earlier, browsers do not allow XHR/Ajax cross-browser requests. JSONP avoids this by making a request for a script file-- no Ajax at all. Let me explain:

1. Instead of accessing the XHR object, the browser first creates a new script tag to inject into the HTML DOM
2. The script tag's URL is set to the URL you're looking to get/post(using HTTP GET) data to
3. The script tag is injected into the page, causing...
4. The request is sent to the server, even if its cross-domain
5. The server returns the data in the form of a javascript function call
6. The browser receives the data and executes the function call

jQuery code

//use a get to post a querystring value via HTTP GET to an asp.net webhandler
$.getJSON("http://www.example.com/get-post.ashx?var1=var1value&callback=?",function(data){
     //really no need to do anything here, we're just posting data
     //but this will output success
     alert(data.return);
});

asp.net generic handler/webhandler code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace jsonp_test
{
    /// 

    /// Summary description for $codebehindclassname$
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class get_post : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string callback = "";
            try
            {
                if (!string.IsNullOrEmpty(context.Request["callback"]))
                {
                    if (!string.IsNullOrEmpty(context.Request["var1"]))
                        SaveData(context.Request["var1"]);
                    callback = context.Request["callback"];

                    context.Response.Write(callback + "({ \"return\": \"Success\" })");
                }
            }
            catch (Exception exc)
            {
                //hopefully this error doesnt contain any quotes... you know?
                context.Response.Write(callback + "({ \"return\": \"" + exc.Message + "\" })");
            }
        }

        private void SaveData(string value)
        {
            //do something with the var1 posted to us
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

So what we effectively have here is the setup for asp.net cross domain ajax calls using jQuery

How to do cross-domain calls to others' servers: YQL

What if you need to do a get but don't have the ability to make the page its posting to return a JSONP response? Using YQL is a great way to achieve this.

YQL is a way to query the internet like it is a database. For example, one could easily run

select * from html where url="http://www.microsoft.com"

and recieve a JSONP return containing all of the site's HTML. You could also, do the following

select * from html where url="http://www.mircorosft.com?var1=var1value"

and HTTP GET values to the server. YQL does not allow this to happen on any area of any site that is blocked by the robots.txt file. Here's full example code:

//feel free to add querystring vars to this
var myurl="http://www.example.com/get-post.ashx?var1=var1value&callback=?";
//make the call to YQL 
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(myurl)+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            //this data.results[0] is the return object you work with, 
            //if you actually want to do something with the returned json
            alert(data.results[0]);
          } else {
            var errormsg = '
Error: could not load the page.
';
            //output to firebug's console
            //use alert() for other browsers/setups
            conole.log(errormsg);
          }
        }
      );

CodeProject

jQuery & .NET WebMethods: An Introduction

At some point in my programming I began to dislike the .NET page life-cycle. Sometimes I feel as though it was Microsoft's way of trying to impose a structure on something that really didn't need a structure. PHP and Java Servlets have proved this.

Regardless, with the advent of .NET AJAX WebMethods one can skip the life-cycle. For those of you who have been living in a cave for the last few years: 1) Your beard rocks. 2) AJAX (Asynchronous Javascript and XML) basically means that the web browser has a new role. In the old days, the browser would make a request and the server would send it an entirely new page for it to spit at the user. With AJAX, the browser sends a request and the server returns data, and then the browser performs actions on that data (like applying logic to the data and then updating page content). With AJAX the browser is in on the action; it is no longer just a middleman.

Setting Up Your First WebMethod

How do you add a WebMethod to your .NET page-behind code? Check out this code:

[WebMethod]
public static string SayHi()
{
       return "Hi";
}

If you were to add this code as well as import System.Web.Services, you could call this function from your client-side JavaScript. No page life-cycle, no post-back; just a request for some data and a response. Using jQuery, the JavaScript code for this would look something like:

//this is the same as jQuery's $(document).ready([function])
//which means that it will call this function as soon as the page is loaded
$(function() {
      $.ajax({
              type: "POST",
    //notice we put the page name and the function name here
    url: "default.aspx/SayHi",
    //the json data to send to the server (we'll discuss later)
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    //if the request is a success do something with the data
    success: function(msg) {
      //this alert box would say hi
      alert(msg.d);
      //this paragraph with id="hiparagraph" would say hi
      $('p#hiparagraph').html(msg.d);
      //this textbox with class="hitextbox" would say hi
      $('input.hitextbox').val(msg.d);
    },
    //if the request is a failure, blame the user
    error: function(xhr, textStatus, exception) {
      alert('You are a failure.');
    }
  });
});

I know what you're thinking-- wow this is boring. And it is at this point. However, if you were to ask .NET to do this the old fashioned way, with a label and some code-behind assign-age I bet it would take twice as long-- maybe longer. In my experience, I have seen request/response times get cut to 1/10th (even 1/20th) the original time by using jQuery and WebMethods. For real.

What is JSON and What Happened to the XML?

All I know is that I haven't used XML directly yet in an AJAX call. JSON is JavaScript Object Notation. Its simple to learn-- check out this page for a little background.

What can you send or receive in the JSON? Short answer: anything. In our example we sent nothing, and received a string. With AJAX calls you can send any sort of JavaScript object. As for what you can receive, feel free to use any of the .NET generic types and any of your own custom made classes-- .NET will translate them into JSON for you.

In Conclusion

Now that we have a better way of communicating with the server, what can we do with it? In the next post we will get into some advanced scenarios and techniques with jQuery and .NET WebMethods.