Why we Built LeaderTV with Visualforce and HTML5

Since we launched the beta of LeaderTV, I’ve been asked a lot of questions around how we built it and how we came to choose Visualforce and HTML5 as our platform. Our goal with this module was to create a beautiful interface, loaded with automation, all while sticking to the core principal that all of our apps should be “dead simple” to use. What surprises a lot of people is the fact that this is 100% built on Salesforce.com technology and open web standards. Here are some answers to the common questions we are getting. Hopefully the answers to these questions will give you a better idea why we built LeaderTV the way we did, and why it totally rocks.

Wait, what is LeaderTV?

LeaderTV is an add-on product to our flagship Compete application for salesforce.com. It’s is a fully-automated, “set it and forget it”, contest leaderboard that is targeted for public display on any type of monitor, device, or TV. It’s fully automated to display up-to-the-minute contest data while cycling through the contest participants and showing their results. In addition, a scrolling ticker at the bottom highlights recent scores, Chatter activity, and contest prizes.


LeaderTV is built using Responsive Design. This means that the interface is aware of the screen resolution and dimensions of the browser window in which it is running and adjusts itself to fit accordingly. This allows LeaderTV to work on any monitor, TV, or device that you have and look good in the process.

It’s also built using 100% Visualforce and web standards like HTML5. To see more plus a video preview, click here.

So LeaderTV is REALLY 100% Visualforce?

Yes (plus HTML5, CSS3 and Javascript of course). That’s it. We made the decision to leverage Visualforce for several reasons:

  1. Visualforce requires no integration: Since Compete is a 100% native Salesforce app, we saw no reason why LeaderTV shouldn’t be as well. Therefore, we built the entire interface using Visualforce. The big benefits here are that there is nothing that needs to be integrated to Salesforce. There are no API calls, no required plugins, and all of your data remains within the walls of your Salesforce org.
  2. Visualforce provides everything we need: We needed to serve an HTML5 web app. Check. We needed easy connectivity into the Compete API’s without hitting the Salesforce API’s. Check. We also needed this module to be secure. Check.
  3. Visualforce makes for a better end-user experience: What we didn’t want to do was build a bolt-on product that required a lot of bolts. The fact that LeaderTV is just a module built in Visualforce means that we can easily include it as part of the Compete package. To launch LeaderTV for the first time, all you have to do is click a button.

HTML5? Wouldn’t this be easier to build in some other technology like Flash?

Probably, but we wanted to do it right. Flash is a slowly decaying technology and isn’t supported everywhere (like Apple’s iOS). We wanted to be compatible on just about any device. We also didn’t want to require our users to have to download a plugin or runtime just to launch our app. The only thing you need to access LeaderTV is your web browser.

Any regrets on the design decisions?

Nope. 🙂

Related Posts

Leave a Reply