Phubar Baz

Javascript Inheritance Part 2

PhubarBaz — Mon, 05 Nov 2012 15:15:00 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2012/11/05/javascript-inheritance-part-2.aspx

A while back I wrote about Javascript inheritance, trying to figure out the best and easiest way to do it (http://geekswithblogs.net/PhubarBaz/archive/2010/07/08/javascript-inheritance.aspx). That was 2 years ago and I've learned a lot since then. But only recently have I decided to just leave classical inheritance behind and embrace prototypal inheritance.

For most of us, we were trained in classical inheritance, using class hierarchies in a typed language. Unfortunately Javascript doesn't follow that model. It is both classless and typeless, which is hard to fathom for someone who's been using classes the last 20 years. For the last two or three years since I've got into Javascript I've been trying to find the best way to force it into the class model without much success. It's clunky and verbose and hard to understand.

I think my biggest problem was that it felt so wrong to add or change object members at run time. Every time I did it I felt like I needed a shower. That's the 20 years of classical inheritance in me. Finally I decided to embrace change and do something different. I decided to use the factory pattern to build objects instead of trying to use inheritance.

Javascript was made for the factory pattern because of the way you can construct objects at runtime. In the factory pattern you have a factory function that you call and tell it to give you a certain type of object back. The factory function takes care of constructing the object to your specification.

Here's an example. Say we want to have some shape objects and they have common attributes like id and area that we want to depend on in other parts of your application. So first thing to do is create a factory object and give it a factory method to create an abstract shape object. The factory method builds the object then returns it.

var shapeFactory = {
getShape: function(id){
var shape = {
id: id,
area: function() { throw "Not implemented"; }
};
return shape;
}
};

Now we can add another factory method to get a rectangle. It calls the getShape() method first and then adds an implementation to it.

getRectangle: function(id, width, height){
var rect = this.getShape(id);
rect.width = width;
rect.height = height;
rect.area = function() { return this.width * this.height; };
return rect;
}

That's pretty simple right? No worrying about hooking up prototypes and calling base constructors or any of that crap I used to do. Now let's create a factory method to get a cuboid (rectangular cube). The cuboid object will extend the rectangle object. To get the area we will call into the base object's area method and then multiply that by the depth.

getCuboid: function(id, width, height, depth){
var cuboid = this.getRectangle(id, width, height);
cuboid.depth = depth;
var baseArea = cuboid.area;
cuboid.area = function()
{
var a = baseArea.call(this);
return a * this.depth;
}
return cuboid;
}

See how we called the area method in the base object? First we save it off in a variable then we implement our own area method and use call() to call the base function.

For me this is a lot cleaner and easier than trying to emulate class hierarchies in Javascript.

Get Func-y v2.0

PhubarBaz — Wed, 26 Sep 2012 17:31:58 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2012/09/26/get-func-y-v2.0.aspx

In my last post I talked about using funcs in C# to do async calls in WinForms to free up the main thread for the UI. In that post I demonstrated calling a method and then waiting until the value came back. Today I want to talk about calling a method and then continuing on and handling the results of the async call in a callback.

The difference is that in the previous example although the UI would not lock up the user couldn't really do anything while the other thread was working because it was waiting for it to finish. This time I want to allow the user to continue to do other stuff while waiting for the thread to finish.

Like before I have a service call I want to make that takes a long time to finish defined in a method called MyServiceCall. We need to define a callback method takes an IAsyncResult parameter.

public ServiceCallResult MyServiceCall(int param1)...

public int MyCallbackMethod(IAsyncResult ar)...

We start the same way by defining a delegate to the service call method using a Func. We need to pass an AsyncCallback object into the BeginInvoke method. This will tell it to call our callback method when MyServiceCall finishes. The second parameter to BeginInvoke is the Func delegate. This will give us access to it in our callback.

Func<int, ServiceCallResult> f = MyServiceCall;

AsyncCallback callback =

new AsyncCallback(MyCallbackMethod);

IAsyncResult async = f.BeginInvoke(23, callback, f);

Now let's expand the callback method. The IAsyncResult parameter contains the Func delegate in its AsyncState property. We call EndInvoke on that Func to get the return value.

public int MyCallbackMethod(IAsyncResult ar)

{

Func<int, ServiceCallResult> delegate =

(Func<int, ServiceCallResult>)ar.AsyncState;

ServiceCallResult result = delegate.EndInvoke(ar);

}

There you have it. Now you don't have to make the user wait for something that isn't critical to the loading of the page.

Get Func-y

PhubarBaz — Mon, 10 Sep 2012 19:49:59 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2012/09/10/get-func-y.aspx

I was working on a Windows form app and needed a way to call out to a service without blocking the UI. There are a lot of ways to do this but I came up with one that I thought was pretty simple. It utilizes the System.Func<> generic class, which is basically a way to create delegates using generics. It's a lot more compact and simpler than creating delegates for each method you want to call asynchronously. I wanted to get it down to one line of code, but it was a lot simpler to use three lines.

In this case I have a MyServiceCall method that takes an integer parameter and returns a ServiceCallResult object.

public ServiceCallResult MyServiceCall(int param1)...

You start by getting a Func<> object for the method you want to call, in this case MyServiceCall. Then you call BeginInvoke() on the Func passing in the parameter. The two nulls are parameters BeginInvoke expects but can be ignored here. BeginInvoke returns an IAsyncResult object that acts like a handle to the method call. Finally to get the value you call EndInvoke on the Func passing in the IAsyncResult object you got back from BeginInvoke.

Func<int, ServiceCallResult> f = MyServiceCall;

IAsyncResult async = f.BeginInvoke(23, null, null);

ServiceCallResult result = f.EndInvoke(async);

Doing it this way fires off a new thread that calls the MyServiceCall() method. This leaves the main application thread free to update the UI while the method call is running so it doesn't become unresponsive.

C# DispatchTimer

PhubarBaz — Fri, 13 Jan 2012 14:41:49 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2012/01/13/c-dispatchtimer.aspx

I was trying to port an old app from c# 2.0 to WPF in 4.0. In one place I was using a Timer to handle filtering of a list from a text box. This kept the list from constantly being updated while the user is typing because it was getting data from the database. I set a 250 millisecond interval so whenever they paused it would update the list.

The Timer class apparently got completely redefined in .Net 4.0. It used to have a Tick event, but this was changed to Ellapsed. Also I found out that it didn't work very well with the UI thread. When I tried to access the text field in the UI I would get a concurrency exception.

Finally I found a new class called DispatchTimer under the System.Windows.Threading namespace that does exactly what the old Timer class used to do. It allows you to do timer events that interact with the UI.

Getting Query Parameters in Javascript

PhubarBaz — Mon, 21 Nov 2011 19:14:19 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2011/11/21/getting-query-parameters-in-javascript.aspx

I find myself needing to get query parameters that are passed into a web app on the URL quite often. At first I wrote a function that creates an associative array (aka object) with all of the parameters as keys and returns it. But then I was looking at the revealing module pattern, a nice javascript design pattern designed to hide private functions, and came up with a way to do this without even calling a function.

What I came up with was this nice little object that automatically initializes itself into the same associative array that the function call did previously.

// Creates associative array (object) of query params var QueryParameters = (function() { var result = {};

if (window.location.search) { // split up the query string and store in an associative array var params = window.location.search.slice(1).split("&"); for (var i = 0; i < params.length; i++) { var tmp = params[i].split("="); result[tmp[0]] = unescape(tmp[1]); } }

return result; }());

Now all you have to do to get the query parameters is just reference them from the QueryParameters object. There is no need to create a new object or call any function to initialize it.

var debug = (QueryParameters.debug === "true");

if (QueryParameters["debug"]) doSomeDebugging();

or loop through all of the parameters.

for (var param in QueryParameters) var value = QueryParameters[param];

Hope you find this object useful.

HTML5 localStorage and JSON

PhubarBaz — Mon, 17 Oct 2011 16:05:45 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2011/10/17/html5-localstorage-and-json.aspx

I've been working on an HTML5 application called Virtual Hamronograph. Since JavaScript can't save to the local file system I use localStorage to allow users to save harmonographs. I find this to be a good alternative. If you don't know, localStorage is a new global object in HTML5 that allows you to save up to 5MB of data in the browser. You save values by calling localStorage.setItem(key, value). You get values by calling localStorage.getItem(key). You can remove items by calling localStorage.removeItem(key). To get a list of all keys you can iterate over the localStorage object, just like you would any other object. Unfortunately localStorage only stores strings (not objects).

That's where JSON comes in. JSON is also a new global object in HTML5. It is used to convert JavaScript objects to and from JSON strings. You convert an object to a string by calling JSON.stringify(object). You convert a json string to an object by calling JSON.parse(json). Now you have a way to get objects in and out of local storage.

One thing to note is that the same localStorage is shared by all apps in the same domain (scheme + host + port). So if you have multiple web apps on your web site you could have the chance of overwriting some other apps data if it has the same key. To guard against that I prepend all of my keys with the apps name. So for example in my harmonograph app I prepend all keys with "Harmonograph.".

You can look at what is in localStorage in your browser's development tools. For instance, in Chrome if look under the Resources page there is a Local Storage item in the tree. Expand that and you can see all of the items in local storage for your site.

Happy coding!

Path.Combine

PhubarBaz — Fri, 12 Aug 2011 14:16:00 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2011/08/12/path.combine.aspx

Here's a little used gem in .Net. In the Path class there is a Combine method. What this method does is to properly combine two parts of a file path. For example, you may have a path that you want to write a file to and a name of the file to write. I've seen a lot of code where in this case most programmers just string concat the path and file name. This doesn't always work right if you don't think about it.

That's where Path.Combine comes in. You don't have to think about the details of combining a file to a path. It does it properly for you. I ran into some code the other day where it was concatenating a path to a temporary directory with a file name to create a temporary file. The problem was that when called from one place it was tacking a backslash onto the end of the path. And from another place it wasn't. So in the second case the last part of the path was becoming part of the filename. This caused the temp file to be placed in the wrong directory.

path = "c:\somefolder\temp";

filename = "tempfile.txt";

filepath = path + filename;

Then filename ends up being: "c:\somefolder\temptempfile.txt".

If they would have used Path.Combine instead it would have created the proper path in either case: "c:\somefolder\temp\tempfile.txt". There's no need to worry about adding a slash at the end of the path or not.

Performant Conditional Statements

PhubarBaz — Wed, 20 Jul 2011 16:40:31 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2011/07/20/performant-conditional-statements.aspx

I was looking through some code today and came across something like this.

if (checkSomeValueInTheDatabase() && someValue == someOtherValue) // Do something...

Now this is a completely legitimate conditional statement. But it's not very performant. You should always use boolean short circuits to your advantage when writing conditional statements. Start with the conditions that are the easiest to evaluate then work your way down to the ones that use a lot of resources, like hitting the database.

The example above I would change around like this.

if (someValue == someOtherValue && checkSomeValueInTheDatabase()) // Do something...

It gives you the exact same result as the first one but it doesn't go out to the database unless the first condition that checks if 2 variables have the same value is true.

I see this a lot when looking through code. So it seems to be a pretty usual problem. That's why I'm writing about it. So the next time you write a conditional statement with many parts to it take a moment to make sure it is optimized to save resources and run faster.

JavaScript Inheritance

PhubarBaz — Thu, 08 Jul 2010 20:39:11 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2010/07/08/javascript-inheritance.aspx

I've spent the last few weeks trying to comprehend OOP and inheritance in JavaScript. After that amount of time I've come to the conclusion that harly anyone really understands it and everyone implements it a different way. Just look at this question someone posted about the best library to use for JS inheritance. I thought it was funny because although there were a lot of answers, I think everyone proved his point, that there are many of them and no one could agree on the best.

stackoverflow.com/questions/711209/which-javascript-library-has-the-most-comprehensive-class-inheritance-support

Being simple minded and wanting to find the simplest way to do some class inheritance I read a number of books and blogs. Every one I read made me more confused. It can't be that hard, I thought. But JS is a strange beast, and prototypal inheritance doesn't translate very well for someone used to classical class inheritance.

I think the main problem is there are too many different ways to define objects in JS. In other languages such as C# or Java there's pretty much one way to do it, and it's simple to understand. You create a class, then you create a child class that extends it and adds to or overrides the parent's behavior.

I could have just used the first way I found and forgot about it and kept programming. But not me. I kept thinking there has to be a better way to do it. There has to be an industry standard. Right? Not! So finally I just kind of combined the best parts of all the solutions I could find and came up with something that worked and looked good. Most of the ideas I got came from Gavin Kistner's site, which does a good job of explaining JS inheritance without creating a bunch of helper functions first.

phrogz.net/js/classes/OOPinJS2.html

The only difference from Gavin's example is that I define all of my child class functions inside of the object definition instead of using the prototype. I don't know if there is some reason not to do it that way but it worked for me.

Shape = {

   name: undefined,

   init: function(name) { this.name = name; }

   getName: function() { return name; }

}

function Circle(radius) {

    this.init("circle");

    this.radius = radius;



    this.getArea = function(){ return Math.PI * this.radius * this.radius; }

}

Circle.inheritsFrom(Shape);



var myCircle = new Circle(4);

myCircle.getArea(); // 50.265

myCircle.getName(); // circle

I define an init function in the base class so I don't have to worry about calling the base class's constructor. That solves problem #1. In my child class, Circle I call the init function and then do any other child initialization like setting the radius. Then I define all of my child class behaviors, in this case getArea(). Finally, outside of the child class definition I call the inheritsFrom function to link it to the parent. The inheritsFrom is defined at the page linked above. It simply sets the prototype to the parent object and sets the constructor.

Tha was the simplest thing I could come up with. I hope it saves someone else from days research.

ASP.NET Session Keep Alive

PhubarBaz — Wed, 07 Jul 2010 19:43:24 GMT

Originally posted on: http://geekswithblogs.net/PhubarBaz/archive/2010/07/07/asp.net-session-keep-alive.aspx

I was recently tasked with coming up with a way to keep the session alive in ASP.NET as long as the user had the web page open. That way if they started filling out a form, then went to lunch and came back, they wouldn't lose all of the information just because their session timed out.

The concept is actually pretty simple. You just need to make a call back to the server every once in a while before the session expires to update the session timeout. We figured as long as the user has the browser open on one of our pages they are still working on our site and want their session renewed. Once they leave our site the session can go ahead and expire normally. This would also allow us to reduce the session timeout so we could reclaim session resources on a more frequesnt basis for users that hit the site for a moment then leave.

The primary way I found to accomplish this by asking at the almighty Google was to have a blank image on the page and use javascript to update the image source so that the server is pinged and the session updated. But with ajax why bother? I figured I could do it a lot easier with a simple ajax call that didn't require any image on the page.

What I did was to create an empty aspx that didn't have anything in it, just the default html that Visual Studio generates. Then I created a javascript file that simply uses jquery to do an ajax get request to the empty page. The code is below.

SessionKeepAlive =

{

    delay: 10000,

    url: undefined,

    run: function()

    {

        if (this.url)

        {

            $.get(this.url + "?d=" + escape(new Date().getTime()));

            setTimeout("SessionKeepAlive.run()", this.delay);

        }

    },

    start: function(delay, url)

    {

        // Set ajax timeout to 2 seconds

        $.ajaxSetup({ timeout: 2000 });

        

        // Convert delay to millis

        this.delay = parseInt(delay) * 60000;

        this.url = url;

        setTimeout("SessionKeepAlive.run()", this.delay);

    }

};

You start the keep alive process by calling SessionKeepAlive.start() passing the number of minutes to wait and the url of the page to call. It uses setTimeout() to wait the specified amount of time before calling run(). In run() it does the get request and calls setTimeout() again so it keeps repeating until the user leaves the page. Note that I had to add a parameter to the url to get it to work right in IE. Without adding a unique parameter value to the url, IE was just using the cached results instead of going back to the server. I used the Date.getTime() function to get a unique parameter value.

Since all of my pages extend the same base class I was able to programatically add a link to the javascript file and also register a startup script to call the start() function in page_init.

ClientScript.RegisterClientScriptInclude("keepSessionAlive", "keepSessionAlive.js");

ClientScript.RegisterStartupScript(GetType(), "SessionKeepAlive", "SessionKeepAlive.start(10, 'ping.aspx');", true);

You could also do this in a master page, but I have a number of different master pages and only one page base class, so it was easier to put it in the base class.