Introduction to ConnectedTV, a javascript development framework for TV widget

It is a good time to be a front-end developer and explore alternative technologies linked to the web. I already did an introduction to the excellent mobile jqtouch framework. This framework alleviates the work to create nice mobile websites and applications with front-end technologies. This time I wanted to do a small introduction to ConnectedTV from Yahoo.

A javascript framework for TV?

It is strange to think that a web technology powers widget for tv. In fact this is a little bit more complicated than that. The ConnectedTV framework is a kind of MVC javascript framework. Basically you have an init file where you define every routes and javascripts files. A “page” or “view” in the widget is a js file where you have basic functions that are always executed, like createview and updateview. From there you can create buttons, grids of images, text and video.

This leads to some interesting widgets, you can actually browse the Amazon catalog and buy items directly from your TV. You can listen to the latest episode of your favorite show in a tv network widget, and etc.

The development kit works unfortunately only on Ubuntu

As a front-end developer, chances are you never touched Linux. Now start the problems, first you need an old version of Ubuntu, there is problem with video playback on Ubuntu 9.10 (it seems not everyone have this problem). If you want to test Ubuntu on Windows, Virtualbox is your friend. I personally installed Ubuntu in dual boot with wubi, but I had a lot of hardware not recognized by Ubuntu (and by that I mean a shit load of problems).

Also, the framework just got out of beta a month ago, you’re bound to find some small bugs, and a Google search will not help you in your quest. It is one of the disadvantage of working with a new toy.

Still, some fun stuff

I think most front-end developers will not have a good time the first couple of hours working with the framework. But I would say that after 10 hours in, I started to understand patterns and things become more easy.

The controls creation patterns, for example, kind of look like the code you would use to launch a jQuery plugin with a couple of settings.

this.controls.button = new KONtx.control.TextButton({
				label: "title",
				guid: guidText,
				events: {
					onSelect: function(event) {
						KONtx.application.loadView('view-Sub2', { text:"This is a text" });
					}
				},
				styles: {
					fontSize: KONtx.utility.scale(2),
					width: Theme.viewSpecs.SIDE_BAR.width,
					height: KONtx.utility.scale(35),
					vOffset:  KONtx.utility.scale(offsetMove),
				}
			}).appendTo(this);

Interested? Start now.

Being relatively active on the Connectedtv Yahoo forum, I would say that there is only a handful of developers actually working with the framework, it is a good time to start and be one of the few who actually know what they are doing in this framework. I think this could be a nice addition to your CV. It’s fun and it’s javascript for TV, do I need to say more?

PS: Small word of advice, do not use the online documentation, use the pdf included with the framework. There is a lot of things missing from the online documentation.