New project: gearbox.js

GearboxOver the past few weeks, I have been experimenting with high-performance web applications using JavaScript, and one of the problems I’ve experienced is throttling my app based on client-side performance in real-time. My development machine has decent hardware, but what about phones? Or older computers?

To solve this issue, I considered the way a gearbox or transmission in a car works: given some threshold (RPMs in the case of cars), change gears to maintain performance. Instead of RPMs, I have a timing loop that runs at some interval. I then compare how long it actually took before the loop ran. Given that information, we can approximate how clogged JavaScript’s queue is, and adjust our app accordingly.

To do this, once the “delay” reaches a certain threshold, we simply change gears. What does this mean for the application? The simple answer: provide less intensive implementations based on the current gear. For instance, if your site has a lot of animations and the client’s browser can’t handle it, turn off more animations the higher the gear number is. That way, your app will tune itself to the client machine’s performance capabilities automatically. Here’s a link to the project:

[Gearbox.js on Github]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s