Slashdot Mirror
Inside Netflix's WebKit-Based UI For TV Devices
DeviceGuru writes with this interesting snippet on a modern approach to GUI design: "Netflix uses WebKit, JavaScript, HTML5, and CSS3 to build user interfaces that are delivered to millions of game consoles, Blu-ray players, Internet-connected TVs, and devices such as the Roku player and D-Link Boxee Box. Matt McCarthy and Kim Trott, device UI engineering managers at Netflix, have just published 50 presentation slides from their recent talk at OSCON 2011 in which they explained how Netflix develops its WebKit-based user interfaces."
I read the presentation and I found it interesting because of the challenges of developing the interface for a wide variety of platforms with vastly differing capabilities. I am in a constant battle with my own software guys to get them to develop for a lower performance hardware, instead of always giving me code that needs the next generation hardware to have an acceptable user experience. Sometime I miss the old days when software developers HAD to think about the hardware they were running on and optimize their software appropriately. I can remember when some software would actually run TOO fast when it was run on newer faster computers....Those days are long gone, many of the software guys I know have little understanding of what goes on under the hood and really don't care unfortunately - I am going to make sure some of them read this presentation
Some performance tips make sense. CSS transforms basically paint an image into GPU memory, so this makes a lot of sense:
Keep layers small
– Don’t inadvertently create gigantic layers
– Memory consumption = width x height x 4 (bit depth)
However, other tips don't make as much sense:
Use closures sparingly & only where necessary
Closures are in the heart of JavaScript. You can't avoid them even if you want to. Instead, learn to write destruction lifecycles for your objects in which you expressively remove references that may cause leaks.
All I know is that the UI on the WD live tv recently changed to more closely match the travesty that they turned their webpage into, and whoever is designing their UIs needs a kick in the head.
Is this the same stack they use on their website? The same one that renders their website unusable on iPads?
Different platforms have different needs and capabilities. Why is the UI in my very limited Roku interface (with its very limted controller) the same as the one on my very capable Windows laptop (i.e., on their website)?
Maybe it seems cost-effective (if you don't count user frustration), but the horizontal-scrolling UI works when it's controlled by hardware arrow keys (Roku), but it's much less than optimal on a webpage (Windows). And my Windows laptop can handle much more functionality than a Roku; too bad they removed all/most non-Roku functionality from the website.
In the slideshow, they acknowledge there are differences between platform UI needs, but they seem to try a one-size-fits all approach. Doesn't Netflix have the resources to develop multiple interfaces?