viernes, 6 de marzo de 2015

amdclean not documented feature

In this anarchic language that is JavaScript, one can define something as basic as a module in infinite kind of ways.

In the case I will explain in this article, we use AMD, and as all the other methods for defining a module in JavaScript, it requires some kind of artificial syntax and processing to perform the basic task of defining and resolving module dependencies.

This article decribe my case using amdclean for optimizing our situation.

We have these big html applications (3-4 mb of uncompressed js) which all is defined using AMD, even libraries and compiled html templates are AMD. Our application contain a lot of modules, aprox 300-400.

We need to load these scripts to render the application and we want the initial page rendering to be as fast as possible.

Also, is relevant to know, that we don't use requirejs optimization tool but amd-optimizer (TODO link).

Our first approach was replacing requirejs with almond(TODO link) and it worked fine, and then we hear the promise of amdclean:


AMDclean uses multiple different optimization algorithms to create the smallest file possible, while still making your code readable.

Well, we tested our code and in general it worked fine, but the file-size gain promise wasn't really true for us. Comparing minified+gzipped total code size - there wasn't really much gain in file size :(

Then, before throwing the whole idea to the garbage, someone had the idea to measure how the browser CPU behaved while loading our application.

We had noticed that in small devices, our application can take 0.5 - 1 seconds of full CPU usage only on resolving AMD dependencies. This happened both using requirejs or almond.

Our big surprise with amdclean was here! when loading amdclean generated code, this AMD resolving time waste disappeared. This is a big gain for mobile page rendering time (0.-1 second of 100% blocking CPU). Also remember mobile CPU uses battery.This is gold for our performance objective.

My surprise is that amdclean README is not mentioning this kind of gain. The README 'Why' section should contain a paragraph like this:

Also, in AMD, dependency resolution can be expensive on big projects, and using amdclean can eliminate the dependency resolution CPU blocking time on page rendering. 

amdclean people, this is real marketing!

The following are CPU profiling of a big application running in a slow device. The first one is using amdclean while the second one is the same code but without using amdclean but almondjs. Notice that without amdclean, almondjs/requirejs will take 1.3 seconds of 100% bussy CPU time only in resolving dependencies, while using amdclean this time seemsto be reduced to 0.5 seconds.
without amdclean

with amdclean




Second blog entry

OK almost two years have passed from my previous and first glob entry, and I've been writing big/complex rich internet applications in JavaScript all that time.

I tried to became an expert on the subject. A lot of mysteries were assimilated and some of them answered.

Most of the post in my personal blog http://cancerberonia.blogspot.com/ were about JavaScript languages, frameworks, platforms, and project building tools.

 My 5-10 last projects were html application s written in JavaScript. I also get interested on dominating the JavaScript language itself heavily using parsers and platforms like node and esprima .See for example my projects short-jsdoc and js-indentator .

So because in this blog, that is virtually empty now, all the following content, if any, comes from a person of this kind of profile:

JavaScript language is no more a big mystery, but still there are things worth to mention.

lunes, 5 de agosto de 2013

About this blog

Today I start this blog about javascript and "its mysteries" from the point of view of a programmer too much accustomed to program in typed languages like Java.

I love to program applications that run inside browsers and I feel like most of the time I always tried to avoid programming in JavaScript, for example using frameworks that translate my Java code to JavaScript like GWT or Java2Script.

My previous job that focused on server pages and JavaScript wasn't the primary language at all, only a toy for a nice presentation layer.I even had to insist to my boss to put some javascript (or GWT) on its application's client side. But now it is not my choice, I must program with JavaScript everyday to make my day in my new job (in which even the server side is written in javascript !)

It is not that I have a personal problem with JavaScript, on the contrary I love it but I never think I have to do some serious designing and big code in JavaScript.

So this blog will try to describe my current efforts for being able to express my self in JavaScript as I can do it in Java, like having a classic Object Oriented language tools, and more administrative concepts like packages, modules, etc.

Also, JavaScript is a little language compared to typed languages like Java: it is an scripting language. And a little language means less keywords, and that that means more freedom: if you have less keywords you have less rules and so this means being able to perform the same task like using different ways. For example, in JavaScript, defining a class or a method can be accomplished in different ways while in a more-rigid-language like Java you can accomplish task like those in only a single / unique way.

And of course it is the topic of the main JavaScript language concept: the function, a concept that do not exists in Java and it is first class citizen in JavaScript.

Well, all this and more are the "JavaScript" mysteries that this blog will try to describe. Of course I admit that in reality JavaScript is a closed language and have no secrets, but from my subjective mind, these are the mysteries of JavaScript.....