Non blocking UI in CPU intensive JavaScript apps



Here's a situation presented to me in one of the interviews I had to face recently.

Suppose that you have a function CalculateSomethingAwesome that is CPU intensive (runs for a considerable amount of time lets say 4 mins). Then when that function is called the browser will block for that 4 minutes that the function will take to compete. Which mean that our user will not be able to do anything for 4 minutes in the browser, essentially hanging the browser for those 4 minutes.

If you are confused to why I would run such a intensive task - Imagine that you have a mapping application. The user can click on the map, pan around, zoom in etc. Now consider that the user needed the route between a couple of points on the map and that route had to be optimized in all sorts of ways. Surely that would take time to execute. So the user selects the points and clicks calculate route. If we were then trying to calculate this route in the routine way by calling a our CalculateSomethingAwesome function, we would see that the user now would not be able to pan the map around when the calculation was taking place. 

So the question is how can we avoid blocking the UI when such a function needs to be called?

Some of the approaches that I suggested were using AJAX and shifting the intensive operation to server side or if you could use HTML5 web workers but the fellow did not want to do ajax nor did he want HTML5 support he said what if I had to do this using only IE5 :/

and I was stumped ..

But there should be a way right. So if you think about the problem, then the problem that we have is that any UI events raised are not getting a chance to execute and do stuff when our long running process is executing. That is the reason we say that the UI is blocked. What if there was some way of giving those UI events a chance to run? If somehow we could first break down the long running process into smaller chunks of work. Then dispatch the process of those chucks in a sequential manner in such a way that any UI events that happen during the processing of a particular chunk gets a chance to execute before the next chunk of work is dispatched for processing.

The way this can be accomplished is by using the JavaScript timing methods like setTimeout() and converting / dispatching the work chunks as timer events which now will get queued in the event chain and will be serviced as and when they are received. Which means that while one chunk is being processed if there is a click event it will be put into the event queue. When the chunk finishes it calls the next chunk using a set time out. now this call will initiate a timer event which will be put into the event queue. the even queue is poped and the next event is the mouse event which has already been queued earlier. The mouse event executes and then pops the event queue again which will execute the timer event which is our next chunk of work.

This was pretty mind blowing for me to understand. A pretty eloquent solution to mimicking concurrency in a single threaded environment. :) sort of reminded me of TDM :D

here's an interesting article that explains it a bit more and even gives some code examples of how this can be made into a generic pattern.


Sorry about the long winded blog post but I was just too excited about what I had learned :) .. imagine that these guys did this about 10 years ago in JavaScript .. its pretty darn impressive !!

A Mobile post

So this is what a mobile post looks like ;)

The last iCon




The man who got the common man to associate 'cool' and 'awesome' with tech, who could drive the world to believe that anything the company touched could turn to the gold standard by which all other products would hence forth be compared to, the last true showman of the silicon valley steps down as CEO of the largest company on the planet - The 'i'Conic Steve Jobs.

I have never owned a mac my self. The only apple device I have ever owned is a ipod touch first generation (still can feel the excitement I felt when I first got it ). His vision and imagination and drive no doubt helped apple reach the heights apple has reached today. But I think more than that it was his showmanship on stage that inspired people. His 'reality distortion field' as some call it was amazing. Its the passion with which he spoke about his new products that made people stand up and be in awe. He could make a great product become 'insanely awesome'! and make you believe that owning that product he is showcasing will change your life. Which other person have you known to show the products back as passionately as he talks about the front. That's how much attention to detail went into each apple product I have never missed a apple key note that Mr Jobs gave post 2005 (thats when I had a fast enough internet connection to stream the keynotes) . Is really sad that I might not get to see any more of those exciting presentations anymore. I wish I could borrow some of that energy and passion.



And here is another amazing asset he had - clarity of thought ..


“Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life. Because almost everything — all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.”



Steve Jobs, Stanford commencement speech, June 2005

I wish his the best of health. and I hope he still gets to do things he is so passionate about in his new role. God bless him. Thank you Mr Jobs for making geeks cool.

Demystify those mystical Asterisks

You know how you start out to do something and end up learning something completely different. One of those rare moments happened yesterday. I had finally gotten fed up of the stupid login screen that my reliance broadband connection throws at me after every 20 minutes of inactivity. So based on something that my friend Mihir (taurius1) gave me I headed out into the brave new world of scripts. A lill fiddling around and asking the mighty Google yielded some neat lill scripts and that too in python :) I was a happy camper.


Then comes the time to test it all out and I hit my first road block. I have conveniently forgotten my login credentials for the broadband service. DAYMN ! But wait I have it stored in my browser. Which is why I could log in and surf all this while. So I did indeed have my password but it was hiding from me in plain sight behind those pesky lill asteriks. There had to be some way I could have a peek behind em to get to my real password. Asked almighty Google a solution to this and it threw this nifty lill jewel my way:

document.getElementById('password').type='text';


And Volaaa! I Has Password! woot! What I had essentially done is change the password field into a text field. Since the text field does not mask its contents with asterisks I could now see my password. Which now lead me to think I could write a generic script which if I pasted in the browsers address bar would seek out all those pesky lill asterisks. ~Evil Grin~


So after a lill bit of tweaking and a quick run though the closure compiler me has this to off to the world.



Enjoy stealing unsuspecting stored password that innocently were left unattended on a pc .. MUHUHAHAHAHA ! oh wait I have a couple of those on my pc .. ~Quickly wipes em out using CCleaner~

Which reminds me that I still haven't written that script I initailly started to write. Gets back to learning Python.

PS: image taken from here




Posted via email from Joel's......

Tis the season of smiles

Posts ahoy!

I have about 10 unfinished blog posts in my blogger account. I good friend of mine just commented on my previous post if they should expect more posts (kinda stoked that people do read my blog even though I might just be the laziest blogger ever :-P). I think they can expect more.
You see it wasn't just the laziness part it was more coz most of these thoughts that I think I should blog about happen during my daily commute to work. That's probably the time I am most wasted and have time to think of things. Some of these thoughts occasinally might be amusing enough to be bloged about ;-) so here I have these thoughts and think ill get home and soo write a post. But the drudgery of public transport in Mumbai just sucks not just ur phone /mp3 players battery but ur very life energy too! So by the time I get home all I really wanna do is get some food and hit the sack. And if I ever do conjure up the power to write something in asleep half way through which kinda explains the unfinished posts.
I may have found a way to take me out of thy cycle. Thanks to a decent mobile phone (a lg optimus one) with full Internet and a nifty lill blogging platform called posterous, I don't have to wait till I get home. I can type out my thoughts right then and there. It feels nice to be sitting in vashi station and typing this out as I wait for a train which is taking forever to arrive. Although I must point out that virtual keyboards on full touch screen phones kinda suck at prolonged text entry. My fingers feel tired.
Till my next post.
Cheerios...

Posted via email from Joel's......

Copyright © 2008 - Life 360 - is proudly powered by Blogger
Smashing Magazine - Design Disease - Blog and Web - Dilectio Blogger Template