Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Crafting a high-performance TV user interface using React

techblog.netflix.com

Post reply on HN
Print view View original

31–40 of 198 posts

Re: Crafting a high-performance TV user interface using React

#31

Post by mcescalante »

city41 wrote: post #28
mcescalante wrote: post #5

Netflix's A/B testing has really screwed me in the past in terms of performance, so much so that I reached out to support to ask if there was a way to manually remove me from the testing group at that time. I'd log in, and the "new" interface throttled my 13 inch retina Macbook's CPU immediately to 100% (or more). Last time it was so bad that I stopped using Netflix on my computer until the testing stopped. That said…

You can opt out of A/B testing. Head to netflix.com, go to your account settings > Test Participation > Include me in tests and previews, and switch it off.

This is great to know! I'm surprised support hasn't mentioned this to me. I'm assuming it's because I reached out while the test was happening, but being able to opt-out for the future is great. Thank you!

Re: Crafting a high-performance TV user interface using React

#32

Post by derekdahmer »

soared wrote: post #11

Mildly unrelated - does anyone else get frustrated with the ui/ux for HBO now/go? The menu switches from the right side of the screen to the left, the scrolling is wonky, etc. Man their content is good, but the app sucks.

Netflix is on another level with the care that goes into designing their streaming product. I didn't truly appreciate the Netflix app until also subscribing to HBO Now and using their Roku app.

HBO is missing the most basic UX features like discoverability, recommending the next episode of shows you've been watching, ratings, etc. Great content, but basically no effort in their apps that consume their content.

Netflix is a tech company that got into content, and HBO is a content company that got into tech.

Re: Crafting a high-performance TV user interface using React

#33

Post by seletz »

Akujin wrote: post #14
morley wrote: post #10

Earlier quoted context omitted.

I don't think I could write a comment that's a stronger explanation than what Guillermo Rauch wrote: https://rauchg.com/2015/pure-ui TL;DR: It's not about the HTML in Javascript; it's about being able to declare all the states of your UI in a stateless way. The result is that React components are like pure functions: you pass them inputs and you get predictable outputs.

If it's about state I feel like ExtJS is a better alternative especially with the way it handles Controllers, Events, and "Components" with state.

We use ExtJS a lot. But I think the exact opposite is the case. With ExtJS, you have the usual double-binding, e.g. if you set this property of that Model somewhere in your view hierarchy some little snippet of HTML are inserted/removed from the DOM. It's basically side effects only.

If I understood it correctly, one can think of react app/page as a pure function taking data and producing a DOM.

Reasoning and testing pure functions should be much easier than a set of components which partly rely on side effects.

Re: Crafting a high-performance TV user interface using React

#34

Post by usaphp »

makecheck wrote: post #26

Interface performance is one of the strangest problems to have in this age of crazy processing power but it is extremely common. Some of the delay is just plain silly and avoidable, like having long and synchronous opening animations in response to an action, which only serve to waste the user’s time. (Oh how I love being on a web site like AT&T and watching their JavaScript poorly zoom open a blank box from the cent…

Especially the lag that you see on some brand new cars, only BMW and Audi seem to have lag free interface, but anything else that involves touch interface is just horrid! I've recently sat in my friend's brand new Honda SUV and the interface lag is just plain silly, for a car that costs $30,000+. Why is that?

Re: Crafting a high-performance TV user interface using React

#35

Post by pfranz »

problems wrote: post #23
showerst wrote: post #20

Earlier quoted context omitted.

I disagree there, thinking back to the days of when Office 'customized' it's UI to how you used the product (constantly moving menu items, shudder!), I'd rather have a consistent UX that didn't exactly fit my patterns than an adaptive one. The problem with many interfaces, especially on consumer products, is that they're not discoverable, and oftentimes hide things behind inane levels of menu. Interface isn't a compe…

Yup, it's also important to be able to walk over to your friend's machine and help them do something.

I spend a good amount of time doing support. I still play around with plugins, tools, and interfaces, but I try really hard to stick with defaults. One thing I do often do is remap Caps Lock to CTRL and it surprised me how often this catches people (and drives me nuts when I'm using their computer).

I have a Logitech Harmony 700 (a very mainstream universal remote), I don't care for it but it's the best I could find, because I use a receiver and Apple TV. Whenever I have guests it's always a mystery for them how to use it.

Re: Crafting a high-performance TV user interface using React

#36

Post by ecnahc515 »

intrasight wrote: post #30
jeremiep wrote: post #13

Earlier quoted context omitted.

Its quite easy to do server-side rendering of react pages, then only mount the dynamic views once in the browser.

I often hear that approach mentioned. But it seems so counter to my experience - that computers are plenty fast to run even complex display logic and that I'd never notice the difference. Is there really a benefit for well-written code? Or is this just an easy workaround for poor code?

Most computers, sure, but Netflix runs on a variety of devices which includes pretty slow/dumb "smart" devices. An example is the Roku stick, where your resources might be quite limited.

Re: Crafting a high-performance TV user interface using React

#37

Post by maherbeg »

soared wrote: post #11

Mildly unrelated - does anyone else get frustrated with the ui/ux for HBO now/go? The menu switches from the right side of the screen to the left, the scrolling is wonky, etc. Man their content is good, but the app sucks.

Yeah their app and streaming quality are sub par in comparison to Netflix and Amazon. The app is quite slow on the Xbox One and confusing to use overall. Streaming is usually fine, but occasionally it stutters and hiccups severely despite my internet connection being fine. I'd rather pay for HBO and download copies of their shows from a torrent server for better quality.

Re: Crafting a high-performance TV user interface using React

#38

Post by maherbeg »

stuckagain wrote: post #3

I hope someone from amazon is reading this. Their new app on the roku is unbelievably slow, 5+ seconds for transitions.

Amazon's video streaming apps are pretty bad across most platforms, iOS excluded. It's extremely slow on the Xbox One and their search for some reason is absolutely awful.

Re: Crafting a high-performance TV user interface using React

#39

Post by elliottcarlson »

derekdahmer wrote: post #32
soared wrote: post #11

Mildly unrelated - does anyone else get frustrated with the ui/ux for HBO now/go? The menu switches from the right side of the screen to the left, the scrolling is wonky, etc. Man their content is good, but the app sucks.

Netflix is on another level with the care that goes into designing their streaming product. I didn't truly appreciate the Netflix app until also subscribing to HBO Now and using their Roku app. HBO is missing the most basic UX features like discoverability, recommending the next episode of shows you've been watching, ratings, etc. Great content, but basically no effort in their apps that consume their content. Netfli…

It's crazy how big of a difference the various Roku apps have in terms of quality. Amazon Video and Shudder (two I have used recently) were lacking in so many ways compared to the polish that Netflix has.

I was watching Goliath last weekend on Amazon Video via the Roku player, and 6 minutes prior to the ending of an episode, they dim the screen to start a countdown of playing the next episode. While Netflix has had some hiccups in cutting off some cold opens of some shows, it's vastly better and consistent in behaviour.

Re: Crafting a high-performance TV user interface using React

#40

Post by samstave »

usaphp wrote: post #34
makecheck wrote: post #26

Interface performance is one of the strangest problems to have in this age of crazy processing power but it is extremely common. Some of the delay is just plain silly and avoidable, like having long and synchronous opening animations in response to an action, which only serve to waste the user’s time. (Oh how I love being on a web site like AT&T and watching their JavaScript poorly zoom open a blank box from the cent…

Especially the lag that you see on some brand new cars, only BMW and Audi seem to have lag free interface, but anything else that involves touch interface is just horrid! I've recently sat in my friend's brand new Honda SUV and the interface lag is just plain silly, for a car that costs $30,000+. Why is that?

I'd love to see a cost breakdown of a modern car, especially Tesla.

Car is say 100k, how much of the componentry is the cost of the wiring harness, nervous system and screen?

Post reply on HN