GUI web dev

Miscellaneous Topics
#1

My work involves GUI programming for IPTV set-top-boxes. We’re operating old boxes currently, with a fairly simple browser (imagine Netscape 2.0), so what we have been able to do with GUI is quite limited.

Now we have a new set-top-box we will be start giving to customers later this year, and the “portal” (the web site containing the gui that the set-top-boxes load) is quite “backwards” in comparison to the capabilities of the new set-top-box (it has Opera 10 and will be dual core).

So, here I sit with these boxes that seem to have all capabilities except of anti-gravity hovering.

I’m looking into all the new idioms for developing “web apps”, because that’s really what the box will run, an app written with Javascript and web stuff like html, svg, canvas, or even opengl. The “app” is really an device run application, which simply uses the web and the browser as a medium, so it’s nothing like a ordinary hyperlink-based webpage, but a very specifically designed UI app.

Already looking at some libraries like Backbone, JQuery, Less, and imagining how I can use all these “new” web features available in Opera 10, widgets, and such.

Anyway, my question is really the following: What should I take a look at?

Really looking for a “heads up, look at this library” or “this is a common way to do things”. I may be missing something obviously beneficial. There are many ways to accomplish what I’m doing, and I can already accomplish what I need to do with pre-existing technology, but I’m looking to evolve this “pre-existing technology” further.

Thanks.

#2

Take a look at GWT; that would be my number 1 recommendation. It’s very good at developing webapps, especially for sites which are one giant application. It’s supposed to be used to build client-server applications, but you can use it to just build the client. I’ve not used it, but you should also take a look at Dojo. It’s meant to be an excellent for building GUIs. Finally don’t bother looking at Prototype and Scriptaculous, they are terrible compared to JQuery (and much slower)!

#3

+1 for GWT.

Its just awesome.

#4

I’ve taken a look at GWT, and I have my doubts.

The kind of application I’m making is totally different from what you typically would use GWT for, e.g. web based, keyboard-mouse interaction. User interaction on a TV is totally different, there is no mouse or keyboard, only a remote control, and almost no data input, only pressing buttons and seeing a reaction. Like in a VOD catalog, where you would simply press the cover with your mouse cursor in a PC browser, you would have to move the highlight to it with your remote control’s arrow buttons.

I’m not sure such a tight Java coupling is a good idea as well. GWT seems to me like a solution only suited to Java developers that can’t do web development.

#5

JQuery is fantastic. Extremely lightweight, hundreds of plugins (which work x-browser normally) and doesn’t clutter up your code like other Javascript frameworks. Takes a while to get used to the syntax (selectors etc.) but after which I have never looked back!

#6

Yes, I’m beginning to think that Backbone+JQuery, HTML+CSS, and REST in the backend is the right way to go.

#7

I use jQuery extensively daily, and I can only agree: It rocks. I used to hate javascript. Not anymore.

#8

-1 GWT

JQuery is ok.

Backbone looks like a really big hammer. You’re building a web app, not a space shuttle…

My advice:

  1. Keep it simple. Don’t write more JavaScript than is needed to do what you need. Don’t bother with a JavaScript lib unless it is really necessary. If you do use one, I prefer to stick to standard JavaScript for standard JavaScript tasks. No need to unnecessarily tie yourself to a lib to use functional style loop iteration when the old way works just fine. Since you are only targeting a specific browser, the cross platform nonsense applies. You can do AJAX for one browser in ~3 lines of code without any fancy libraries. You can do easily do OOP without any libs. I wouldn’t bother with ANY lib to start, just wait to see if/when you run into problems where a lib could actually be a significant help.

  2. Don’t try to pretend you aren’t building a web app. Web apps are a hodgepodge of technologies, but trying to hide that only makes it worse.

  3. Keep it simple. Seriously.

#9

It is a web app, but not a web app like most understand it. An TV GUI is primarily a interface, a TV channel environment, electronic program guide (EPG), main menu, Video On Demand catalog, etc. You do not load a new web page if you changed a channel.

You have to consider A LOT of factors, connectivity problems, server uptime, delay issues, etc. Responsiveness matter A LOT. Waiting for a web page to load is NOT satisfactory. You do not go from main menu page to EPG page, and then go from EPG page back to TV page. It doesn’t work like that.

It’s a UI application that is loaded as needed and uses http for data interaction. I’m not saying you load everything at boot-time, but you do load parts of the UI as needed to keep responsiveness and user convenience at maximum.

The server backend is not the issue here, the GUI is.

#10

Good points from Nate and 9 times out of 10 I would agree with them but in the case of Javascript vs jQuery there is just 1 winner for me. jQuery.
For simple tasks (animation effects, dynamically altering CSS/HTML, Ajax, parsing XML) jQuery is sooo much cleaner than JS. True you can do Ajax calls in a few lines of code in Javascript (for one browser) but the issue is how do you handle the response to dynamically update your content? Having said all this, have no set-top box experience so won’t commit myself any further, just in case :wink:

#11

I’m confused, or you are, jQuery IS a Javascript library!?

#12

http://jquery.com/

#13

Exactly my understanding.

#14

steveyO obviously meant with ‘javascript vs jQuery’ that you can modify the DOM through DOM calls in extremely fragile and verbose javascript code, or through jQuery (which does it for you, much better) in javascript, too.

#15

[quote]I’m confused, or you are, jQuery IS a Javascript library!?
[/quote]
Yes jQuery is a javascript library, just re-read my post and I don’t think I implied otherwise did I? Just to clarify when I say Javascript vs jQuery, I mean writing standard Javascript vs writing Javascript using the jQuery syntax.

#16 
steveyO obviously meant with 'javascript vs jQuery' that you can modify the DOM through DOM calls in extremely fragile and verbose javascript code, or through jQuery (which does it for you, much better) in javascript, too.

Exactly what I meant, thanks for clarifying.

#17

Ok :slight_smile: I’m just putting a meaning into something that wasn’t implied.

#18

FWIW: I advise you to use jQuery. It will without a doubt reduce the development time with ~90%

#19 
Ok I'm just putting a meaning into something that wasn't implied.

No problem, I can see how my post was mis-understood. I would have probably expressed myself clearer if I wasn’t distracted by the music blasting into my headphones :smiley:

#20

In any case, Javascript is clearly the language of choice (including jQuery lib).

But how things are visually rendered is another matter. There are a few options:

  1. HTML
  2. Canvas (2D, possibly 3D) (would invalidate usage of jQuery I believe).
  3. SVG

As I said, a TV interface isn’t entirely a “web site” or a “web page”, in that you don’t browse using hyperlinks and such, nor does it display a lot of text or data.

Currently I achieve everything using very plain Javascript (1.1) + HTML + Images.

But with all those new rendering technologies I wonder if I should … use them. Apple TV is of course a good interface for the TV, you can see: http://www.google.com/images?q=apple+tv+ui&biw=1104&bih=981

There may be things I need to do that I don’t know about still. Can I make a fire-flame button? Can I make all those cool transitions, fade in/out, shrinking/enlarging of dialogs, as Apple has done for it’s Apple TV, using HTML? (Apple TV video effects in this video: http://www.youtube.com/watch?v=4WCqDZxZ8MA )