I hope someone from amazon is reading this. Their new app on the roku is unbelievably slow, 5+ seconds for transitions.
I don't work in that group, but I'll forward this link over. Thanks for the note and sorry for the bad experience.
Crafting a high-performance TV user interface using React
41–50 of 198 posts
Re: Crafting a high-performance TV user interface using React
#42Interface 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…
At the hardware level, the author of BSNES recently wrote up an excellent rant on sources of latency in modern machines https://byuu.org/articles/latency/
But, most of what you are talking about is software latency. At 1/30th of a second each, software pipelining systems seem cheap individually but pile up very quickly. Hit a button, read the button, react in AI, react in animation, react in physics, react in graphics, process in the GPU, process in the display device. These can easily add up to 5/30ths of a second with poorly planned software. In the middle of all that, the animation and audio has aesthetic requirements for smooth transitions that can insert a 1/2 second lag in the middle of that process. Now we're up to 20/30ths.
Regarding animations: I've been in convos with managers requesting character animations to be "Smoother, but more poppy!" because of the conflicting needs of aesthetics and control latency. The best compromise I've found is to design a smooth transition, but have the underlying representation pop and the visuals skip immediately to mid-way through the animation.
Re: Crafting a high-performance TV user interface using React
#43Interface 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…
Companies don't make money off of performance.
Re: Crafting a high-performance TV user interface using React
#44Earlier 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?
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.
Re: Crafting a high-performance TV user interface using React
#45Earlier 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?
I really don't like that argument because it assumes your program is important enough to be the only one running on your user's machines; it rarely ever is.
Everything easily wastes 90% of the CPU resources it touches and the task manager is completely oblivious to it, happily reporting high usage. When you have 20+ tabs open and 10+ apps all those "its fast enough" apps combine to create their own variant of hell.
And that isn't even a big workload. Its no wonders computers have increased many orders of magnitude in performance over the last decade, yet user experiences are still generally mediocre.
Re: Crafting a high-performance TV user interface using React
#46What'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.
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 updated it via firing events on an event bus. In practice, it worked somewhat like Redux, but instead of mapping state to props, in each component you'd subscribe to the update event and then update the relevant bits of the component in the event handler. Being Java, it was easy to find all references to the update event to get a quick understanding of exactly what it was being used.
Come to think of it, it would be easy enough to use React that way too, especially if using TypeScript and maybe something like RxJS.
Re: Crafting a high-performance TV user interface using React
#47I 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…
> EG - Take the same inputs -> eye tracking / natural language feedback (speech!) / interface observation / time to goal / etc I like that... but that's going to take a lot of work to keep it from becoming the contemporary equivalent of "microsoft clippy" but from Hell.
Has anyone pursued or published about such an approach yet?
Re: Crafting a high-performance TV user interface using React
#48Earlier quoted context omitted.
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?
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.
And then you can cache it. Whats the point of downloading megabytes of javascript, calling 80 different endpoints and then generating what could've been statically saved from the beginning and sent in a single request?
Re: Crafting a high-performance TV user interface using React
#49Interface 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?
Because Honda at its core is not a software company?
Re: Crafting a high-performance TV user interface using React
#50Earlier quoted context omitted.
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...
It really depends on your tech stacks. Running python on the backend and JS on the frontend will create enough impedance mismatch to indeed make server-side rendering of react rather difficult.
Clojure's reagent and re-frame remove most of the complexity and tools from the equation. You run the same (mostly) code on the backend and frontend. This is what I meant by quite easy :)
http://davidtanzer.net/server_side_rendering_with_re_frame http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html