Live data from Hacker News

Crafting a high-performance TV user interface using React

techblog.netflix.com

21–30 of 198 posts

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

#21
post #17

I built my early career entirely around CRO / testing and moved over time into product / ux / app optimization. Huge, crazy, insane amounts of time are WASTED by humans dickering around with interfaces that they don't understand and that are not personally optimized. One of the things I don't hear many people talk about, but I am particularly interested in, is the coming and continued improvement of adaptive & person…

> But imagine an adaptive UX or set of UX preferences.

I can only imagine how difficult support from friends and family would become.

"Click on the widget" "I don't see the widget" "I'm on the same page and I see the widget" "Oh, I have to click 'Show all" to see the widget"

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

#22

I assume that HTML Dom would be fastest. Statically generated. And that working w/ DOM/CSS would make it easier for team's designers to be more engaged.

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

It's possible but 'quite easy' does it a disservice as it is often not the case at any reasonable scale. Pinterest wrote a great article [1] on how they've handled it recently.

[1] https://engineering.pinterest.com/blog/how-we-switched-our-t...

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

#23
post #17

I built my early career entirely around CRO / testing and moved over time into product / ux / app optimization. Huge, crazy, insane amounts of time are WASTED by humans dickering around with interfaces that they don't understand and that are not personally optimized. One of the things I don't hear many people talk about, but I am particularly interested in, is the coming and continued improvement of adaptive & person…

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.

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

#25
post #2

For folks who really care about performance, the easiest win is just switching to Inferno or Preact. You can pretty much leave your React code unmodified and get massive performance gains.

Easiest win for me was trying out re-frame[1]. Not only do you get the best performance out of react, to the point where the actual virtual-dom implementation doesn't matter, but you also gain productivity and since it forces you to build apps made out of 95% pure functions and immutable data, reasoning even at scale is still incredibly easier than anything else I've ever tried to build GUIs with.

[1]: https://github.com/Day8/re-frame

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

#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 center of the page for 2 whole seconds, when I KNOW they could just show me the damned page already.)

In other cases, the source of the slowdown is less clear. Is a physical device just not delivering its signals any sooner?

I’ve played games where you have to walk to a very precise spot, hit a button, and wait literally one whole second before ANY response is visible onscreen or in audio. (And if it turns out you didn’t really take the action you thought you did, you have to walk in circles to try a slightly different spot, and wait again). Why should that ever be the case? How can a super-fast console not immediately display something or play some sound to show that you took the action?

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

#27
post #17

I built my early career entirely around CRO / testing and moved over time into product / ux / app optimization. Huge, crazy, insane amounts of time are WASTED by humans dickering around with interfaces that they don't understand and that are not personally optimized. One of the things I don't hear many people talk about, but I am particularly interested in, is the coming and continued improvement of adaptive & person…

We could also just raise taxes on the top 1% of people in the country and do neat things like provide universal healthcare and provide public university programs for free to those who can get accepted.

It's a bit skewed at the moment if you weren't aware: https://youtu.be/QPKKQnijnsM?t=2m49s

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

#28

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.

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

#29

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

Similar problem with their not so new ps4 app. I think it is less the rendering, but the fact that it doesn't prefetch anything ever? Either way it is painful to drill into a particular show from the top level.

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

#30

I assume that HTML Dom would be fastest. Statically generated. And that working w/ DOM/CSS would make it easier for team's designers to be more engaged.

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?
Post reply on HN