The Official Klout Blog

Tweet

In May, we unveiled the current version of Klout.com. Not only did we put the site through a major visual/UX/UI redesign, we rewrote the entire front-end web application from the ground up. Here’s an overview of the tech that drives the user experience of Klout.com.

The Old Stack
Klout.com is a data-driven company, and our first product was the Klout API. We repurposed a lot of the early API code (PHP) to power the first iterations of Klout.com on the LAMP (Linux/Apache/MySQL/PHP) stack to allow users to access their own scores. As Klout’s user base began to grow, scaling the performance of the website was getting in the way of creating interesting new features. We knew we would have to refactor the site to keep up with traffic and to create a flexible foundation for feature development. With carte blanche, we wanted to do something innovative and new while having fun with high-performance web technologies. Inspired by #NewTwitter and the work of JavaScript luminaries like Ryan Dahl and Yehuda Katz, we chose to go where few had boldly before: a fully JavaScript-based web application.

Enter Node.js
We were intrigued by the nascent server-side applications of JavaScript. Google’s V8 engine was incredibly fast, and Ryan Dahl’s node.js was the missing evented I/O layer that finally made running JavaScript on the server a reality. Packages like Express made handling routing and content negotiation seamless. In our tests, a single node.js process was able to handle thousands of concurrent connections in a very CPU-efficient manner. Plus, using JavaScript on both the server and the client made writing multi-purpose code very straightforward. We knew of other companies using node.js at the time, but most were using it to serve APIs. It seemed nobody was brave (or crazy) enough to serve an entire website with it… yet.
Betting everything on such a young technology was a risk, but in the spirit of trailblazing and entrepreneurship, Klout wanted to help prove out this very promising architecture. Ryan Dahl and Joyent helped us over hurdles in our early development and listened to our feedback. As a result, Klout is running on node.js in 16 instances across two servers in our own data center, serving tens of thousands of concurrent users.

The Client-Side Application
Most of Klout.com actually runs in your own browser — we use Backbone.js to provide a MVC (model-view-controller) structure on the client side. After your first page load, your browser begins talking to our node.js application servers to get bits of information in JSON (JavaScript Object Notation), such as scores, topics, and chart data. As you navigate around the site, only the relevant, changed portions of the page refresh and redraw. We use Yehuda Katz’s Handlebars.js for minimal, semantic templating and LESS CSS for dynamic stylesheet programming. All of this adds up to a very snappy user experience on Klout.com.

Open Source
We depend on many open-source technologies, including Node.js, connect/Express, Backbone.js, Handlebars, Underscore, jQuery, and Redis. Klout is grateful to the open-source community and is committed to contributing back to projects that have helped us build such a rich and modern web application.
Klout continues to evolve as this new stack evolves, and we’re excited to be at the forefront of what we believe to be the future of web application development. Each stable release of each component of our stack brings new performance and stability enhancements. Staying on the bleeding edge of web technology is a huge effort, but the end result is a constantly improving experience for our users.

If you want to set the standard for the future of web application engineering while helping the everyone in the world unlock their Klout, join us!