
Crafting a high-performance TV user interface using React - dustinmoris
http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html
======
makecheck
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?

~~~
usaphp
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?

~~~
rojoca
I found this advertisement from Mercedes interesting:
[https://i.redd.it/wwxk8nqh88ex.gif](https://i.redd.it/wwxk8nqh88ex.gif)

I can't speak for the quality of Mercedes interface (and this is obviously
marketing for non-programmers) but LOC seems like an odd thing to be
emphasising.

~~~
jordwest
Everyone needs to hit 100,000 LOC this week to hit our target from marketing

~~~
kluck
Here is one line of code to solve all of their software problems:

rm -rf /

------
aresant
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 & personal
interface design.

A challenge that any single interface has is that it's difficult to set-up and
qualify a test on a small cohort group level (men over 70 years old that wear
glasses are homeowners, drink wine, and live in California is an actual target
class we can easily devise from current ad tech for instance).

It's challenging because - NOT ENOUGH DATA - eg very hard to run experiments
and achieve statistical significance, let alone biforcate your alreadly
limited resources to drive to that level of granularity.

But imagine an adaptive UX or set of UX preferences.

EG - Take the same inputs -> eye tracking / natural language feedback
(speech!) / interface observation / time to goal / etc <\- and then let a
flush ML / AI come up with a set of experiments and pathway.

Key to not completely confuse and blow users off path will be some kind of
throttling mechanism - adaptations that settle you into the UX like your
body's settling into the couch cushions.

~~~
showerst
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 competitive advantage (although it should be!) so
manufacturers don't invest in it.

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

~~~
pfranz
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.

~~~
gech
This alone is why I wouldn't consider DVORAK. If we have to live in a top-down
driven world, I'd at least be open to standards being driven that waay

------
mcescalante
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, the "normal" Netflix player is great and I've always been impressed
with its performance and responsiveness for such a large application handling
video streaming.

~~~
city41
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.

~~~
frakr
I had to do that after I got put in a group where there was no way to view the
description or episode list without also starting to play the selection (in
browser). On a console app the other day it would start playing an audio
preview of anything selected making scrolling through my options extremely
annoying. I quit the app almost immediately. I don't mind being in the testing
group but I would definitely like the option to quit a test group. Wouldn't
that feedback be valuable to them?

~~~
jedberg
> Wouldn't that feedback be valuable to them?

The feedback is generally implicit in that if it causes problems for a lot of
people then the test fails because you stop watching Netflix with that device.

That being said, if you call in to customer service they can remove you from
the test if it turns out that's actually the problem (sometimes the problem is
that you are in two conflicting tests for example) and they do mark that down
as feedback. But they want you to call in so they can better understand and
record the failure mode.

You don't even have to call, you can do it via chat, if you're not the kind of
person who like to talk on a phone. :)

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

~~~
felixgallo
I don't work in that group, but I'll forward this link over. Thanks for the
note and sorry for the bad experience.

~~~
justabystander
Any chance you could recommend someone to finally get us different logins for
the different profiles? It's kind of ridiculous to have parental controls when
they can just change the profile to watch whatever they want. I also don't
really like sharing a main account password with kids.

------
Sanddancer
Why is it so hard to just say, "precompile your code?" Just in time means
having to take the same code, and do the same transformations to it, parse and
reparse the code, every time you start the app. Yes, React may be a nice
templating engine, but why make everyone go through the same process over and
over again when you can copy once and not have to worry about it anymore?

~~~
spiffytech
This is the idea behind Svelte:
[https://svelte.technology/](https://svelte.technology/).

------
erkose
Link is down for me, so I'm reacting to the title. I don't have an issue with
the performance of the Netflix UI on my PS4. I have a huge problem with the
design of the UI. First, there is no reason we can't have more configuration
flexibility. I don't ever want a program to auto play and I have no use for
the video loops that auto play when I hover over a program. Let me disable
these features. I don't want "my programs" to move. Stop moving it so I have
to scroll over promotional content to locate it. In general, the UI should
just be my "my programs", "continue watching", and access to searching.
Netflix is trying to hard to make the UI something we don't need. KISS.

~~~
lenn0x
Agreed! I was just looking over their web interface, under Playback settings,
they at least now have a way to disable Auto Play

~~~
erkose
That's not the same thing. That setting enables/disables the playing of the
next episode after you complete watching an episode. Even with that setting
disabled, when you click on a series Netflix starts playing the next episode,
or if it's not a series, the video.

------
soared
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.

~~~
derekdahmer
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.

~~~
funkymike
I actually find the Netflix UX frustrating. First they removed the
straightforward ability to simply say that I never want to watch a show, and
then hide it from me. Beyond that I can rate a show 2 stars and yet it
continues to come up in recommendations. This gives me the feeling that it
doesn't really matter how I rate shows because they are going to shove
whatever they want at me regardless.

The only competitor I can compare it to is Amazon. In that regard I agree that
Netflix obviously puts more into the interface. Amazon's splitting shows into
seasons and not even grouping them together is maddening.

------
rtsao
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.

~~~
jeremiep
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](https://github.com/Day8/re-frame)

~~~
grayrest
I've maintained a ~20k LoC re-frame app for a year and a half. The performance
of Clojure's persistent datastructures with pervasive sCU gives you generally
good performance but it's not panacea. I've debugged a hundreds-of-
milliseconds freeze on laptops from a poorly written hierarchical menu and I
get pauses of 70-100ms if enough data comes in on our main view.

Using it with cljs-time and storing times in the app state is a really easy
way to shoot yourself in the foot perf-wise since that's based on closure's
date object and two equal date objects are not identical. This fails the fast
identity check but will pass the structural equality check so no vdom gets
generated but the check is not that much cheaper than a diff.

This is also a B2B app where we have no demand for mobile use so I haven't had
to do load time or mobile perf optimization. If I did, the first thing I'd be
concerned about is the bundle size since the cljs runtime plus React
represents a fairly sizeable amount of overhead.

Not to say that reagent+re-frame is bad, it's just not so amazing you don't
have to care about perf. I think Reagent would run particularly well on top of
Inferno since the library provides lifecycle events to function components and
I did experiments back in April and June on Inferno with persistent
datastructures to good results. I just don't want to maintain it.

~~~
jeremiep
I tend to abuse the fact that subscriptions can compose in re-frame to lower
the work needed in order to react to app-db changes. The fact that you can
namespace keywords make it easy to scale as well.

Its also easy to optimize if you integrate day8/re-frame-tracer. I've lowered
the number of views touched by updates quite a bit using it. I barely put any
pressure on React anymore.

The bundle size usually isn't that bad with full optimizations enabled. An
empty cljs project strips the entire cljs runtime for one, minus one defonce.
You can also pass a compilation constant to react to strip its debugging
features; that's saving you a few dozen kilobytes as well.

I'm currently building a small app to display Twitch chat as a personal side
project and it handles GamesDoneQuick's chat effortlessly. Performance has
been great so far.

------
cekvenich3
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.

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

~~~
intrasight
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?

~~~
diggan
Well, sometimes is not much that it's poor code but a lot of data to render.
For example, imagine rendering a form with 100 elements. If it takes 0.1
second to render that on a average computer, you can make that 0.01 by
rendering it on the server instead.

~~~
intrasight
But your server has to render it for the thousands of visitors to you site. I
still don't get the rationale.

~~~
Sanddancer
Smart rendering would involve using a mostly static template that's updated
with the relatively few dynamic elements as the page is being readied to be
sent over the wire. If 90% of your dynamic content is the same, why put that
through your app processes at all?

~~~
intrasight
Static stuff is static at either end, and doesn't add to rendering time.

------
swrobel
Disheartening that A/B testing and user feedback led to video previews. One of
those "features" that's so annoying you wonder how it ever made it past the
brainstorming stage.

~~~
PretzelFisch
Still worse is auto starting the program when your trying to figure out what
to watch. They have my money already why do they need to inflate their view
numbers?

~~~
swrobel
That's what they call "video previews." Sounds so innocuous huh?

------
CamperBob2
Semi-OT, but does anyone know how to make the new Netflix high-performance
React-based TV UI stop playing selections automatically while scrolling
through them, when you pause on one for more than 3 seconds?

What possible reason(s) would they have for doing this? Doesn't initiating
playback of a title cost them money for bandwidth and/or license fees? It's
just plain infuriating, in a first-world-problem kind of way.

------
peterclary
Different kind of TV interface, but still: I have a Sony 46HX853 and it really
bugs me that after turning it on _from standby_ it still takes many seconds
before it will respond to the input select button on the remote. UI
responsiveness from startup will definitely be on my list of things to test
the next time I buy a TV.

~~~
simooooo
My TV controls the standby LED from software, thus it takes a 5-6 second wait
to determine if you actually turned it on

------
godelski
I'm still waiting for them to support Firefox and Linux. Their support says
they are working on it, but I am positive that is a lie. At least I can work
around it by masking my user-agent string as Chrome (DRM needs to be enabled).

~~~
yeukhon
Netflix works on Firefox. I don't remember about Linux. ~3 years ago yes
Netflix wouldn't work on Linux without plugins, but I thought they fixed it or
provided a workaround.

[http://www.omgubuntu.co.uk/2016/08/firefox-49-linux-
netflix-...](http://www.omgubuntu.co.uk/2016/08/firefox-49-linux-netflix-
google-widevine-cdm)

~~~
godelski
Nope, you have to do a user agent string to get around it. From what I can
tell Netflix is filtering it. But I may be wrong, I'm not sure how this stuff
works. But I can do it on Firefox and Linux as long as I have DRM enabled (the
change in FF49+) and change my user agent string to Linux Chrome (see image
[http://i.imgur.com/twjpXgv.png](http://i.imgur.com/twjpXgv.png)). It WILL NOT
work without changing the user agent string.

Talking to their support Netflix says it is FF's problem. From what I can tell
it isn't actually FF's problem anymore (because this wouldn't work, right?).

------
Fr0styMatt88
Anyone know if this TV interface can be set up on a HTPC?

The Netflix experience on a Windows HTPC is quite frankly, abysmal (whether
it's the Windows Store app or through the web browser).

------
TeeWEE
On which TV's does this interface run? Or how can i check it? I didnt know it
was HTML on TV interfaces.

~~~
_puk
As far as I am aware, most modern ones.

Panasonic, LG etc..

Whilst the Netflix UI is great compared to a huge number of apps, I do find it
has actually deteriorated over the past couple of years, in terms of interface
speed.

Nowadays, when I launch the app on my 2013 Panasonic TV, it stalls at the
profile selection screen for about 5 seconds, and once again once a profile is
loading.

It never used to do this, and I presume it has a lot to do with precaching
data; it is highly annoying as it consumes keypresses during this stall,
meaning you can quite accidentally start watching something you never intended
to.

------
philipp-spiess
I'd really love to see more high quality posts like this on React. Thank you
for sharing the knowledge!

------
throwaway_45
If you want to have performance why use a 90k Javascript library?

------
z3t4
What do you use to measure Key Input Responsiveness !?

------
ywecur
How many people still use TVs these days? Everyone I know don't even own one
anymore, though my friends circle might not be that representative of society
as a whole.

~~~
pbhjpbhj
Practically every UK household.

I know some people without a TV but that's because they choose not to consume
mass media, we've done it in the past.

Where do you live? Presumably your circle still consume mainstream media but
do so via laptop/desktop/handhelds?

------
Akujin
What's with everyone's obsession with React recently? All I see is a template
engine and not a particularly good one. You're still left with the same
problem mixing your HTML into JavaScript.

~~~
morley
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](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.

~~~
Akujin
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.

~~~
seletz
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.

