Live data from Hacker News

Crafting a high-performance TV user interface using React

techblog.netflix.com

171–180 of 198 posts

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

#171
post #151
post #145

Earlier quoted context omitted.

That reminds me: I have a Siemens washing machine, and the interface have a latency of >500 ms. How they fucked it up is way beyond me. It consists of nothing more than a rotary switch, four buttons and three 7-segment LED displays. I've played with the thought of disassembling the firmware just to see how they fucked this up this bad. I could never make something this unresponsive even if I tried. It's utterly fasci…

Why you can't just toss the clothes in, close the door and walk away is beyond me. Wish I could empty the whole 150oz of Tide into the machine and have it dispense over 96 loads too.

In 20 years, I've owned 3 washing machines. I dealt with maybe 3 or 4 malfunctions over those 20 years, and each of them required only buying some spare part and installing it, or cleaning something inside.

Surely this kind of reliability is a good trade-off Vs having to pour some detergent for each wash?

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

#172
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.

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

#173
post #62
post #43

Earlier quoted context omitted.

Companies don't make money off of performance.

They can. I bought a Roku 3 after seeing how much more responsive it was compared to my Sony BDP-S790 for streaming apps.

I've got a Sony BDP-S1700 which has an equally sluggish interface, the "powered by Java" badge on the back makes me laugh.

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

#174
post #111

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

Amazon is a company that absolutely does not care about UI, as seen/proven by their website alone.

The commerce side of their site is acceptable, what is not is using the same cluttered interface for their music and video services.

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

#175
post #170

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

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.

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

#176
post #151

Earlier quoted context omitted.

Why you can't just toss the clothes in, close the door and walk away is beyond me. Wish I could empty the whole 150oz of Tide into the machine and have it dispense over 96 loads too.

I've thought this many times, and I suspect it's somewhat complicated, engineering-wise — but solvable. For one, detergent comes in at least three forms: Powder, liquid and those little plastic pouches. Powder would be pretty easy (but the dosage would be brand-specific) and liquid would be messy (flow rate would be a challenge). The easiest way would be if all machines could accept a "standard pellet" which gets loa…

GE has both under the name "SmartDispense". They use a peristaltic pump to dispense liquid detergent. I owned the dishwasher for a few years and enjoyed the convenience.

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

#177
post #46
post #15

Earlier quoted context omitted.

I found the whole update state and have the UI automatically render on state changes a very useful model. You only need to define the UI once, and have the real time rendering left to the state watcher.

It's a useful model, but I've found that it can break down a bit on really large, complex apps. If a piece of state is being passed to multiple places via props (either manually or using something like Redux), it can be difficult to see at a glance every place in an app that a single bit of state is being used. Going back quite a few years now, I once worked on a GWT app that kept its state in a central store, and up…

> It's a useful model, but I've found that it can break down a bit on really large, complex apps. If a piece of state is being passed to multiple places via props (either manually or using something like Redux), it can be difficult to see at a glance every place in an app that a single bit of state is being used.

This is why a UI app state query-based approaches (ex: om next) on a single app state tend to be a bit easier, but still can suffer from what you describe (especially if queries are dynamically built by a user or something). At a minimum, you can either re-use the same query or at least know through the query syntax where your code is touch some bit of state as it should be available for analysis by an IDE and easily searchable as plain text. Still, there's not really a perfect solution I've seen and eventually things can get messy if you aren't careful and as you increase the number of developers touching code.

In general, updating a UI only based on changes is a great approach. The challenge has always been identifying what changed and minimizing the tracking of those changes in scalable way. I saw many old approaches use things like dirty flags everywhere or doing field comparisons one by one. Things like react frameworks in Clojurescript make this so much easier today because you can do a very fast identity check that is cheaper using immutable structures like those in Clojure. If your check itself is expensive, the benefits of a delta-based approach are limited vs. giving up and doing full re-renders. I've hit this in game programming either way, but usually the change approach wins unless there's some very specialized case or design issue or simply just tons of raw power it's not an issue anyway.

Where events themselves suck is predictability. This is doubly so for systems that introduce event hierarchies i.e. inheritance-like constructs for events. I strongly prefer deterministic approaches to rendering when possible. That's not to say you re-render at a fixed interval, but rather attempt to re-render changes only if they exist. It makes debugging, optimizing, and understanding the system so much easier.

From a performance and debugging point of view, events or signals and slots tend to cause situations where you're jumping so much over the code you lose all kinds of CPU cache or GPU benefits (buffers, batching, pipelining, etc.) depending on what you are doing. Also some event systems use a lot of objects and in systems requiring allocations on the heap and/or garbage collection, this can become really ugly if the app is running for awhile. Events do make things easy for small projects, but tend to create spaghetti for larger ones, even with a single event bus. Approaches using loops, deltas and possibly queues/mailboxes tend to scale a lot better for games, and also for apps that have performance issues. A side benefit is your state tends to become a functional reduction, which has its own benefits such as making undo/redo, logging, and error handling easier.

Sometimes I'm rather confused by all the UI issues created in app dev. I understand them, but as someone who has many decades of experience doing both game and app development, I'm like wtf app programmers. React and things like it are or can be at least a bit closer to loop, pipelined, time approach that's used in modern game architectures precisely to achieve consistent performance and do sane things in the face of GPUs.

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

#178
post #14
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.

I've used both React and ExtJS. Overall React is much easier. ExtJS becomes a mess of event handlers, just take a look at all the possible events when working with their trees. In theory it looks great, in practice it's hard to follow the code and performance is terrible. The two way binding causes all sorts of headaches including the usual remove listener, update model, add listener type code. It's difficult to follow what code updates what part of the DOM. With React I only need to look at a component's render function. Same with the component's state.

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

#179

Earlier quoted context omitted.

I recently got a Mazda3, their newer MazdaConnect system is running an iMX6 (dual CortexA9 w/GPU and video accelerators) and uses Opera as the interface. All of the core UI is written in Javascript. It's also highly hackable. =)

That's interesting. I don't know too much about what Mazda uses. Is there any documentation in the web about it?

There's a PCB teardown here

http://www.2x4logic.com/mazdaconnect.html

It was designed by Johnson Controls (JCI) but the IVI group was recently sold to Visteon, which probably explains the sudden lack of momentum from Mazda on new features (like, cough, Carplay...which was announced 2 years ago and never showed up).

Most of the people hacking on the unit hang out at mazda3revolution.com. Here's a page indexing their work so far:

http://mazda3revolution.com/forums/2014-mazda-3-skyactiv-aud...

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

#180
post #149

Earlier quoted context omitted.

I recently got a Mazda3, their newer MazdaConnect system is running an iMX6 (dual CortexA9 w/GPU and video accelerators) and uses Opera as the interface. All of the core UI is written in Javascript. It's also highly hackable. =)

But how's the lag?

The UI is simple, there's nothing swipable by design and animations are minimal. It works quite well.

I don't have the navigation enabled, so I can't speak to how responsive the map display it.

Post reply on HN