Last week I wanted to make an mobile application (Android). Initially I wanted to use Titanium, a platform that I’ve played with in the past and I was nicely impressed.

But after I downloaded the compiler and made the first application I had a surprise, the “Hello world” app had about 5M. How did it get so big? Simple, Titanium compiles the application into native code but there is no clear method by which to determine what APIs are used, so the minimum necessary APIs are compiled in order for all features to work. The perspective of an app bigger then 5M didn’t impress me, so I’ve started searching for alternatives.

I’ve installed Phonegap, I wanted to make a game on this platform for a long time, but because the installation is not as elegant as it is for Titanium I wasn’t very delighted. I’ve made a “Hello world” app and it had only… ~200k! A reasonable size in my opinion.

Of course there is a reason for that size, PhoneGap is giving access to a lot of features like: accelerometer, camera or contacts, but nothing on the presentation layer. The presentation is made exclusively with HTML, CSS and JavaScript.

The entire PhoneGap project is based on the fact that most platforms have a “web view” that can parse a web page.

But because the project is not as “packed” as Titanium new features can be added relatively easy. For instance, for Android there are a decent number of projects that add new features to the platform. Loading them is not very difficult, but is not plug & play. Basically there are Java modules for Android that expose an API that can be called from “web view”. This can be an advantage, because there is a community that is developing features that don’t necessarily need to be in the “core”.

For simple apps that only list or display information, the platform is a interesting alternative, especially because there are a lot of JavaScript and CSS frameworks for formatting mobile pages like: jQTouch, jQuery Mobile or XUI. The platform is great for packing applications of this nature. For instance if you have an HTML app for mobile and you want to add some native phone features and to distribute the compiled version, PhoneGap does a great job.

On the other hand, even if you can access for instance the menu button, you can’t create a native menu.

As a conclusion, this is a platform that has a completely different approach to Titanium. If Titanium is based on the fact that an application will compile to native code with native APIs, all the code base is written in JavaScript and web view is only one of the options available, PhoneGap’s approach is that the presentation is made exclusively in a web view using HTML(5) + CSS and only some device specific APIs can’t be accessed from the browser and are not presentation related to be exposed, like: vibration, buttons, etc. Taking that into consideration I don’t think that the two platforms can be really compared, only the developer can decide what approach is best.

Is about the phone’s calculator. I have a HTC Desire with Android 2.2. My default calculator app that’s called simply “Calc” amazes me. Very rarely happens to need to use it, end even less I’m using it with fractional numbers, but when I’m actually using it I tend to forget that it has an issue.

Let’s say:

12 – 11

In Calc = 1, in JavaScript = 1. Nothing out of the ordinary so far, right?

Let’s take:

1.2 – 1.1

Any elementary school student knows that the result is 0.1.

In Calc it is 0.099999999, weird? In JavaScript is even more interesting, the result is 0.09999999999999987.

It’s about float, and I assume that the difference comes from the digit number displayed on the screen. In both cases IEEE 754 standard is used.

Now… in JavaScript this is a known issue, but who made the Android app, made it transform to a scientific calculator if you rotate the phone and did not see this issue?

JavaScript and PHP support both lambda functions and closures. But the terms are poorly understood in both programming languages ​​and are often confused with each other.

Lambda functions

Also called anonymous functions. They refer to functions that can be called without being bound to an identifier. One of their purposes is to be passed as arguments. The Lambda name was introduced by Alonzo Church, inventor of lambda calculus in 1936. In lambda calculus all functions are anonymous.

JavaScript

In JavaScript lambdas are part of the standard set and there are the preferred method of defining functions.

For instance:

1var add = function (a, b) {
2     return a + b;
3}
4alert(add(1, 2)); // 3

Lambda functions are used almost in any context when it comes to JavaScript, like:

1window.onload = function (e) {
2     alert('The page has loaded!');
3}

PHP

In PHP, lambda functions were introduced in version 4.0.1 using create_function. In version 5.3+ a similar syntax to JavaScript was added, a much more readable and elegant way of defining a function.

This means that in PHP there are two ways of creating a lambda function:

 1// PHP 4.0.1+
 2$add = create_function('$a, $b', 'return $a + $b;');
 3
 4// vs.
 5
 6// PHP 5.3+
 7$add = function ($a, $b) {
 8     return $a + $b;
 9};
10
11echo $a(1,2); // 3

Lambda functions can be used as parameter for other functions, such as usort:

1$array = array(4, 3, 5, 1, 2);
2usort($array, function ($a, $b) {
3     if ($a == $b) {
4          return 0;
5     }
6     return ($a < $b) ? -1 : 1;
7});

Even more, PHP 5.3+ allows calling an object as a anonymous function:

1class test {
2     function __invoke($a) {
3          echo $a;
4     }
5}
6$a = new test();
7$a('test'); // 'test'

Closures

The closure is really the misunderstood concept of the two. In general confusion appears because closures may involve lambda functions. A closure refers to the ability of a function/object to access the scope in which it was created even if the parent function has ended it’s execution and returned. In other words, the function/object returned by a closure is running in the scope in which it was defined.

In JavaScript the notion of closure is part of the standard arsenal, because the language is not based on the traditional object model, but rather on prototypes and functions. But JavaScript has some traditional object model parts, like the fact that you can use “new” to construct an object based on a function that plays the role of a class. In PHP closures are more of an new way to approach problems, because PHP is part of the traditional object model family.

JavaScript

In JavaScript the notion of closure is widely used, it’s so popular because JavaScript is not a traditional object orientated language, but rather a functional one, based on prototype inheritance.

JavaScript doesn’t have Public, Private and Protected, but rather only Public and Private and objects an inherit from each other, without using classes.

Another issue is the scope, because the global scope is used by default. This issues can be fixed in an elegant fashion using closures:

 1var closure = function () {
 2     var sum = 0;
 3     return {
 4          add: function (nr) {
 5               sum += nr;
 6          },
 7          getSum: function () {
 8               return sum;
 9          }
10     }
11}();
12
13closure.add(1);
14closure.add(2);
15console.log(closure.getSum());

In the example above, sum is a private property and in theory can only be accessed and modified by the closure function. The interesting part is that the parentheses from the end of the function definition, signify that this function will be immediately  executed and therefore will return the result which is an object. At this point the original function will only exist for serving the return object, encapsulating therefor the private variable.

Although the function has finished execution, through this closure the returned object can still access the variables defined in the function scope, because that was the environment in which it was created.

This becomes even more interesting when a function returns another function:

 1var counter = function () {
 2    var counter = 0;
 3    console.log('in closure');
 4    return function () {
 5        console.log('in the anonymous function');
 6        return ++counter;
 7    };
 8};
 9var counter1 = counter();
10
11console.log(counter1()); // 1
12
13var counter2 = counter();
14console.log(counter2()); // 1
15console.log(counter1()); // 2

The output will be:

1in closure
2in the anonymous function
31
4in closure
5in the anonymous function
61
7in the anonymous function
82

What actually happens is that the first function is executed and returns an anonymous function that can still access the environment in which it was created. In my opinion this is where the confusion between closures and lambda functions comes from, because a function returns another function.

The difference between examples is that in the first one the closure function executes immediately, and in the second example when counter is executed it’s returning a result that is actually a function definition, which in turn can be executed. Of course the second example can be modified to act just like in the first example using parenthesis.

PHP

As I said above, the notion of closure in PHP is not as important as in JavaScript.

Considering that lambda functions are available in the language since version 4, closures only appeared with PHP 5.3+.

Because of the block scope nature of PHP, there is a better encapsulation but there is a lot less flexibility compared to JavaScript. Basically in PHP you must specify using the use instruction what will the anonymous function be able to access from the closure scope.

 1function closure () {
 2     $c = 0;
 3     return function ($a) use (&$c) {
 4          $c += $a;
 5          echo $a . ', ' . $c . PHP_EOL;
 6     };
 7}
 8
 9$closure = closure();
10
11$closure(1);
12$closure(2);

Unlike JavaScript, in PHP closures can not return objects, or rather the object can not be bound to the scope in which it was created, unless you send the variables as a reference to the constructor, in which case is not very elegant and I can’t imagine a scenario that would absolutely need closure for this.

Like in the JavaScript examples, instead of parentheses “()” at the end of the function, in PHP to run a function immediately after defining it call_user_func() or call_user_func_array() can be used:

 1$closure = call_user_func(function () {
 2    $c = 0;
 3    return function ($a) use (&$c) {
 4        $c += $a;
 5        echo $a . ', ' . $c . PHP_EOL;
 6
 7    };
 8});
 9
10$closure(1);
11$closure(2);

As I am a big fan of Douglas Crockford, the inventor of JSON, several weeks back I’ve found a new series of presentations. The presentations took place in 2010 and can be found on the YUI blog dedicated page: http://yuiblog.com/crockford/.

Why am I a Crockford fan? There were 3 thinks that surprised me on his first presentation I’ve seen:

• he argued fiercely that JavaScript has good parts, but they are not understood,
• said that JavaScript is a functional language, and as such should be taken in order to discover its beauty,
• he was one of the few to write a true programming book for JavaScript and not just a collection of special effects like the majority did at the time.

The series “Crockford on JavaScript” at Yahoo!, is not exactly new but very topical.

What is different about this presentations is that there not completely focused on syntax, language and “good parts”, but rather on the overview picture, all the story of the language, including the storys of the languages that influenced it.

The presentations are quite long, over an hour each, but very interesting in my opinion, especially if you’re a fan of computer history.

Part Three can be a bit more difficult because there are some notions that may seem quite bizarre. But once you get familiar with them, many other things become more clear.

Last week-end I was surfing the Web wandering why there isn’t any 3d done in JavaScript. A ridiculous question in a hot afternoon.

My question was born from the idea that the first stage in 3d evolution was done in 2d, basically representing 3d objects using the existing 2d ways.

Of course I came across my first answer: a 3d shooter game directly in the browser, done by Ben Joffe!

It is at least impressive!

Beside this find I immediately came across some other 3d games in JavaScript that are not using tags like canvas, but this results are not very impressive because of a simple reason: speed!

Before HTML5 the speed of displaying elements in the browser was a very big issue. Is well know that one of the slowest components of the browser is the DOM, especially in Internet Explorer. When it comes to the canvas a huge difference is visible in the good way, the multitude of the objects on the stage are not coordinated using the DOM but rather just displayed in a true graphical element.

While I was opening my computer today I was thinking why doesn’t anyone make a game at least like Duke Nukem 3D? Of course the browser will not become just yet a platform that can compete with XBOX for games ant that’s normal… I don’t even know how did I come across this, but it was just like something in my universe drown me to something truly impressive:

Quake 2 directly in the browser, using JavaScript!

At the beginning I thought that they cheated, they’ve used WebGL, not just the 2d popular canvas. But the result is truly impressive, and this standard will probably be available as an HTML5 specification, which means it will be available on at least a part of the browsers.

Even though they’ve used GWT, the resulting code is still JavaScript, so this can be made just using JavaScript!

Where did the hole idea of 3d in browsers came from? I’ve read about 2 years ago about some efforts in this direction, and they ware based on VRML. But VRML exists as a standard since 1994 and I haven’t seen anything  impressive yet. I even have a VRML book that is full of dust in a shelf. The biggest issue was that there was no native support for it.

The new perspective is absolutely innovative, because is a bridge between the browser and the 3d hardware. So if one day we will have 3d in our browsers it will be done this way!