What's powering the new web interface?

10 April 2014

We’ve had a lot of questions about what’s powering our new interface, so here’s a brief rundown:

React

Everything inside the <body> tag is rendered with React components.

We tried a lot of JS frameworks and libraries to help us make the UI more dynamic. The one that fit best was React. It provides a powerful way to make reusable components and the one-way data flow makes a lot of sense. With React, our code is understandable, small, and fast.

Backbone.Router

React doesn’t have anything for routing. We tried a bunch of these as well and settled on Backbone’s router. It’s simple, it works.

d3

We are using d3 to render our charts. d3 is pretty amazing. We’re using maybe 1% of its API, but were able to replicate our hand-coded server-drawn charts quite easily.

IcedCoffeeScript

We wrote some async JS code by hand a while back to get a bunch of datasets and split them up into a timeframe for a chart. Then we came back to it and had no idea how it worked. IcedCoffeeScript makes asynchronous JavaScript a breeze. We replaced our code with a few lines of IcedCoffeeScript and never looked back.

gulp

We use gulp to stitch all this JavaScript together, lint it, minify it, compress it. Then we have a Go app that uploads the bundle to s3/CloudFront, updates an assets file, and HUPs the web servers so they reload the assets file.

» Here’s the gulp plugin we wrote for IcedCoffeeScript

Go

Nothing has changed on the backend, we still use Go for everything. It does a marvelous job with JSON.

Web App Interface Changes: Stats

09 April 2014

We just deployed some significant changes to StatHat’s web interface. Here are some changes concerning viewing and analyzing stats:

We changed the stat details interface to let you select any timeframe you want. Our standard one hour to one year overview still exists, but you don’t need to switch to the analyze interface to view something like 7 hours at 2 minute intervals.

When you hover over the chart, you will now see the value at each data point.

We are also including more summary data:

  • most recent value
  • standard deviation
  • 95% and 99% confidence intervals

Pressing the Play button makes the chart automatically update every minute.

Like always, the analyze interface allows you to compare up to five stats on the same chart. Comparing stats of vastly different scales is easier now: the left and right axes are independent and can be set to any group of stats. Comparing the number of API calls (which ranges from 6M - 14M) with HTTP request times ranging from 100 - 1800ms is clearer.

The charts are fully responsive, from large screens:

to medium:

to small:

We made changes to make StatHat easier to use when you have lots of stats:

  • stats are automatically collapsed into groups by common prefix
  • intelligent filtering and improved search
  • groups and saved searches visible in the stat list side bar

There are many more minor tweaks and updates, all with the goal of making StatHat a more useful tool to analyze your stats. Please let us know what you think of the changes.

Upcoming posts will highlight changes to alerts and describe the technologies behind these interface changes.

Heartbleed

08 April 2014

StatHat uses Amazon’s Elastic Load Balancer service to load balance requests to www.stathat.com and api.stathat.com. All of Amazon’s ELB servers were affected by the Heartbleed bug. They patched them today.

As soon as our ELBs were patched, we uploaded new SSL certificates.

Please contact us if you have any other questions.

StatHat and Geckoboard

28 January 2014

You can now display your StatHat stats on Geckoboard. All you need to do is to create an access key at stathat.com/access and enter it into your Geckoboard account.

Thanks to Rob, Gareth, and Sofia at Geckoboard for creating the StatHat widget!

StatHat iPhone App Released

21 November 2013

StatHat iPhone App in Action

We released the StatHat iPhone App today. It lets you view all your stats and get push alerts. We think it is super handy and use it constantly!

Learn more about the StatHat iPhone App