18 ms·

Crafting a high-performance TV user interface using React

389 points by dustinmoris 10y ago

throwaway_45 10y ago
If you want to have performance why use a 90k Javascript library?
erkose 10y ago
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 10y ago
  Agreed! I was just looking over their web interface, under Playback settings, they at least now have a way to disable Auto Play
  - erkose 10y ago
    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.
Sanddancer 10y ago
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?
- ricardobeat 10y ago
  The templates are indeed compiled. All the optimisations they describe happens at runtime, when applying changes to the UI. Browser layout engines are complex beasts and writes can be very expensive.
- spiffytech 10y ago
  This is the idea behind Svelte: https://svelte.technology/ https://svelte.technology/.
deleted 10y ago
[deleted]
Fr0styMatt88 10y ago
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).
philipp-spiess 10y ago
I'd really love to see more high quality posts like this on React. Thank you for sharing the knowledge!
CamperBob2 10y ago
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.
swrobel 10y ago
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 10y ago
  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 10y ago
    That's what they call "video previews." Sounds so innocuous huh?
ywecur 10y ago
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 10y ago
  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?
godelski 10y ago
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 10y ago
  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-google-widevine-cdm http://www.omgubuntu.co.uk/2016/08/firefox-49-linux-netflix-...
  - godelski 10y ago
    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?).
z3t4 10y ago
What do you use to measure Key Input Responsiveness !?
TeeWEE 10y ago
On which TV's does this interface run? Or how can i check it? I didnt know it was HTML on TV interfaces.
- _puk 10y ago
  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.
peterclary 10y ago
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 10y ago
  My TV controls the standby LED from software, thus it takes a 5-6 second wait to determine if you actually turned it on
andrewalan 10y ago
I am Andrew Alan a hacker who has built a very good reputation and undeniably one of the best hackers you can come across.i have got access to hack into any account and also get to generate passwords for accounts like Facebook,Instagram,Twitter,gmail,yahoo mail,whats-app,we-chat,etc..I also have logins for bank like BOA,welsfargo,chase,credit union,capital one, and many other different banks for transfers and credit card top ups,Retrieving hacked social media accounts,clearing criminal records,increase credit scores,CC hack,hacking computer systems,Website hack,Catch hacker scammers,Phishing emails, that's to mention a few ... You can contact me on.......... andrewalanhacks@gmail.com
rtsao 10y ago
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.
- sergiotapia 10y ago
  Inferno sounds interesting, I wish I could use it for projects. But React has grown to the point where there are components for it you can npm install and import in whatever components you want. Should the Inferno community start porting over stuff to their ecosystem it'll be easier to sell to clients.
  - bsimpson 10y ago
    You can point 'react' at Inferno at build time. I believe there's a Webpack plugin that does this.
- Zalastax 10y ago
  A simple warning: switching to Inferno using inferno-compat can currently give worse performance than react. I tested this recently when Inferno 1 was released and think it's related to https://github.com/infernojs/inferno/issues/548 https://github.com/infernojs/inferno/issues/548 The techniques outlined by Netflix should apply to users of Preact and Inferno too, so it's still an interesting article.
  - trueadm 10y ago
    It would be awesome if you could give the Inferno team your feedback so we can help improve Inferno. :)
- deleted 10y ago
  [deleted]
- jeremiep 10y ago
  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
stuckagain 10y ago
I hope someone from amazon is reading this. Their new app on the roku is unbelievably slow, 5+ seconds for transitions.
- ProAm 10y ago
  Amazon is a company that absolutely does not care about UI, as seen/proven by their website alone.
  - amiga-workbench 10y ago
    The commerce side of their site is acceptable, what is not is using the same cluttered interface for their music and video services.
- dlbucci 10y ago
  I don't think Roku apps are written in JavaScript/HTML. I believe they use BrightScript (at least on the older models), so I don't think React would help.
  - untog 10y ago
    It is possible to work directly with C++ though, which I think Netflix must be doing with their Gibbon framework because their interface is very different from those obviously using the Roku tools (and looks exactly like their interface everywhere else). As the article states, Netflix aren't necessarily working with HTML when they make these React views - it sounds very much like how React Native works.
    - yaur 10y ago
      Do you have a cite for that? If there is a c++ sdk it isn't easy to find, though I can easily believe that companies on the scale of Netflix have access to better tools.
- robohamburger 10y ago
  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.
mcescalante 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      > 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. :)
cekvenich3 10y ago
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.
- bsimpson 10y ago
  Gibbon is Netflix's proprietary form of the DOM. They found that the standard DOM was too hard to optimize for embedded hardware, but that it was much easier if they removed the parts they didn't need. I believe Jafar gave a talk at one of the React Confs about it.
  - deleted 10y ago
    [deleted]
- jeremiep 10y ago
  Its quite easy to do server-side rendering of react pages, then only mount the dynamic views once in the browser.
  - djm_ 10y ago
    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-template-rendering-engine-react https://engineering.pinterest.com/blog/how-we-switched-our-t...
    - jeremiep 10y ago
      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://davidtanzer.net/server_side_rendering_with_re_frame http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html
Akujin 10y ago
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.
- sergiotapia 10y ago
  You don't have to use JSX if you're a purist - but why? JSX is just an easier way to write React components.
  - allover 10y ago
    Yep I wish Elm people would wake up to this too https://github.com/elm-guides/elm-for-js/issues/5 https://github.com/elm-guides/elm-for-js/issues/5 https://news.ycombinator.com/item?id=9860693 https://news.ycombinator.com/item?id=9860693 (EDIT: Help - how do you post 2 links on adjacent lines without HN breaking the formatting and sticking them on the same line?)
- Robin_Message 10y ago
  React is not about templating. It is about swapping an O(n^2) problem of transitioning between all N possible states of your app for an O(1) problem of describing what the UI looks like in any state and letting a machine do the transitions. JSX is convenient but all React really requires is putting all of the logic to render a component under one method. You could carefully construct a piece of XML or something like that in render and then pass it to a templating engine of your choice°, instead of any JSX. But JSX is as nice a language as any for templates, and side effects in render are clearly wrong in React so the old issues of turing compete templating are ameliorated. ° You'd have to do a tiny bit of wiring to make sub-components go back into the react pipeline.
- cdelsolar 10y ago
  React is not a template engine.
- 123jay7 10y ago
  More like mixing JSX into your Javascript.
soared 10y ago
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 10y ago
  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 10y ago
    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.
  - elliottcarlson 10y ago
    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.
- 10y ago
aresant 10y ago
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 10y ago
  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 10y ago
    Yup, it's also important to be able to walk over to your friend's machine and help them do something.
    - pfranz 10y ago
makecheck 10y ago
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?
- andrewstuart2 10y ago
  As far as the less-clear cases, this is basically CAP theorem, with some physics thrown in for good measure. In some sense there is always a partition of some length between two points, thanks to the speed of light: the theoretical limit of information propagation through space. So in the presence of this delay "partition," you have three choices, really, and the choice you make depends on the application. A) You can choose to be available and responsive. Show the user feedback immediately and never concern yourself with global state. Technically, I'd call this an illegal choice because you must have some sort of state to even be executing code. Unless you simply don't write the code, in which case your job is easy! B) You can choose to be immediately available and eventually consistent. You calculate the response quickly with the assumptions you have most available (local memory, disk), all while transmitting events and waiting for the further-away less-available state to become available. This is the way many online games that need quick feedback to be fun are done. [1] Unfortunately, this is also the source of the lag jumps that you see. You're always running with [partition-size in ms] outdated global state, so the assumptions you made when calculating outcomes are going to be incorrect. This is why your headshot might turn into a total miss when the player jumps five feet to his right and, oh yeah, you also died. 3) Don't react to events until the global state has been updated. This means a full round-trip plus processing remotely and locally before that click event performs the action it is supposed to. This can be anything from a crappy experience (I shot into the ground, why should I wait), all the way to the only sensible choice (if integrity is highly important, say in transactions and avoiding double-spend). Really, it's so much more than this too. On top of availability vs consistency you have to account for some trust model (the game client says it was a headshot, but how do I know I can trust the client) and information security (confidentiality, availability, integrity). So TL;DR there are lots of very hard problems in distributed systems and sometimes people just default to one stance or the other to balance their cognitive load or for any number of reasons (ranging from legit to ridiculous). Sometimes they default to consistency. That's probably the case for your button-click example. [1] https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking https://developer.valvesoftware.com/wiki/Source_Multiplayer_...

389 points by dustinmoris 10y ago

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

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 10y ago
Agreed! I was just looking over their web interface, under Playback settings, they at least now have a way to disable Auto Play
- erkose 10y ago
  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.

Sanddancer 10y ago

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?

ricardobeat 10y ago
The templates are indeed compiled. All the optimisations they describe happens at runtime, when applying changes to the UI. Browser layout engines are complex beasts and writes can be very expensive.
spiffytech 10y ago
This is the idea behind Svelte: https://svelte.technology/ https://svelte.technology/.

deleted 10y ago

[deleted]

Fr0styMatt88 10y ago

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

philipp-spiess 10y ago

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

CamperBob2 10y ago

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.

swrobel 10y ago

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 10y ago
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 10y ago
  That's what they call "video previews." Sounds so innocuous huh?

ywecur 10y ago

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 10y ago
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?

godelski 10y ago

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 10y ago
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-google-widevine-cdm http://www.omgubuntu.co.uk/2016/08/firefox-49-linux-netflix-...
- godelski 10y ago
  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?).

z3t4 10y ago

What do you use to measure Key Input Responsiveness !?

TeeWEE 10y ago

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

_puk 10y ago
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.

peterclary 10y ago

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 10y ago
My TV controls the standby LED from software, thus it takes a 5-6 second wait to determine if you actually turned it on

andrewalan 10y ago

I am Andrew Alan a hacker who has built a very good reputation and undeniably one of the best hackers you can come across.i have got access to hack into any account and also get to generate passwords for accounts like Facebook,Instagram,Twitter,gmail,yahoo mail,whats-app,we-chat,etc..I also have logins for bank like BOA,welsfargo,chase,credit union,capital one, and many other different banks for transfers and credit card top ups,Retrieving hacked social media accounts,clearing criminal records,increase credit scores,CC hack,hacking computer systems,Website hack,Catch hacker scammers,Phishing emails, that's to mention a few ... You can contact me on.......... andrewalanhacks@gmail.com

rtsao 10y ago

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.

sergiotapia 10y ago
Inferno sounds interesting, I wish I could use it for projects. But React has grown to the point where there are components for it you can npm install and import in whatever components you want. Should the Inferno community start porting over stuff to their ecosystem it'll be easier to sell to clients.
- bsimpson 10y ago
  You can point 'react' at Inferno at build time. I believe there's a Webpack plugin that does this.
Zalastax 10y ago
A simple warning: switching to Inferno using inferno-compat can currently give worse performance than react. I tested this recently when Inferno 1 was released and think it's related to https://github.com/infernojs/inferno/issues/548 https://github.com/infernojs/inferno/issues/548 The techniques outlined by Netflix should apply to users of Preact and Inferno too, so it's still an interesting article.
- trueadm 10y ago
  It would be awesome if you could give the Inferno team your feedback so we can help improve Inferno. :)
deleted 10y ago
[deleted]
jeremiep 10y ago
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

stuckagain 10y ago

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

ProAm 10y ago
Amazon is a company that absolutely does not care about UI, as seen/proven by their website alone.
- amiga-workbench 10y ago
  The commerce side of their site is acceptable, what is not is using the same cluttered interface for their music and video services.
dlbucci 10y ago
I don't think Roku apps are written in JavaScript/HTML. I believe they use BrightScript (at least on the older models), so I don't think React would help.
- untog 10y ago
  It is possible to work directly with C++ though, which I think Netflix must be doing with their Gibbon framework because their interface is very different from those obviously using the Roku tools (and looks exactly like their interface everywhere else). As the article states, Netflix aren't necessarily working with HTML when they make these React views - it sounds very much like how React Native works.
  - yaur 10y ago
    Do you have a cite for that? If there is a c++ sdk it isn't easy to find, though I can easily believe that companies on the scale of Netflix have access to better tools.
robohamburger 10y ago
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.

mcescalante 10y ago

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 10y ago
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 10y ago
  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 10y ago
    > 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. :)

cekvenich3 10y ago

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.

bsimpson 10y ago
Gibbon is Netflix's proprietary form of the DOM. They found that the standard DOM was too hard to optimize for embedded hardware, but that it was much easier if they removed the parts they didn't need. I believe Jafar gave a talk at one of the React Confs about it.
- deleted 10y ago
  [deleted]
jeremiep 10y ago
Its quite easy to do server-side rendering of react pages, then only mount the dynamic views once in the browser.
- djm_ 10y ago
  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-template-rendering-engine-react https://engineering.pinterest.com/blog/how-we-switched-our-t...
  - jeremiep 10y ago
    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://davidtanzer.net/server_side_rendering_with_re_frame http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html

Akujin 10y ago

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.

sergiotapia 10y ago
You don't have to use JSX if you're a purist - but why? JSX is just an easier way to write React components.
- allover 10y ago
  Yep I wish Elm people would wake up to this too https://github.com/elm-guides/elm-for-js/issues/5 https://github.com/elm-guides/elm-for-js/issues/5 https://news.ycombinator.com/item?id=9860693 https://news.ycombinator.com/item?id=9860693 (EDIT: Help - how do you post 2 links on adjacent lines without HN breaking the formatting and sticking them on the same line?)
Robin_Message 10y ago
React is not about templating. It is about swapping an O(n^2) problem of transitioning between all N possible states of your app for an O(1) problem of describing what the UI looks like in any state and letting a machine do the transitions. JSX is convenient but all React really requires is putting all of the logic to render a component under one method. You could carefully construct a piece of XML or something like that in render and then pass it to a templating engine of your choice°, instead of any JSX. But JSX is as nice a language as any for templates, and side effects in render are clearly wrong in React so the old issues of turing compete templating are ameliorated. ° You'd have to do a tiny bit of wiring to make sub-components go back into the react pipeline.
cdelsolar 10y ago
React is not a template engine.
123jay7 10y ago
More like mixing JSX into your Javascript.

soared 10y ago

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 10y ago
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 10y ago
  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.
- elliottcarlson 10y ago
  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.
10y ago

aresant 10y ago

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 10y ago
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 10y ago
  Yup, it's also important to be able to walk over to your friend's machine and help them do something.
  - pfranz 10y ago

makecheck 10y ago

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?

andrewstuart2 10y ago
As far as the less-clear cases, this is basically CAP theorem, with some physics thrown in for good measure. In some sense there is always a partition of some length between two points, thanks to the speed of light: the theoretical limit of information propagation through space. So in the presence of this delay "partition," you have three choices, really, and the choice you make depends on the application. A) You can choose to be available and responsive. Show the user feedback immediately and never concern yourself with global state. Technically, I'd call this an illegal choice because you must have some sort of state to even be executing code. Unless you simply don't write the code, in which case your job is easy! B) You can choose to be immediately available and eventually consistent. You calculate the response quickly with the assumptions you have most available (local memory, disk), all while transmitting events and waiting for the further-away less-available state to become available. This is the way many online games that need quick feedback to be fun are done. [1] Unfortunately, this is also the source of the lag jumps that you see. You're always running with [partition-size in ms] outdated global state, so the assumptions you made when calculating outcomes are going to be incorrect. This is why your headshot might turn into a total miss when the player jumps five feet to his right and, oh yeah, you also died. 3) Don't react to events until the global state has been updated. This means a full round-trip plus processing remotely and locally before that click event performs the action it is supposed to. This can be anything from a crappy experience (I shot into the ground, why should I wait), all the way to the only sensible choice (if integrity is highly important, say in transactions and avoiding double-spend). Really, it's so much more than this too. On top of availability vs consistency you have to account for some trust model (the game client says it was a headshot, but how do I know I can trust the client) and information security (confidentiality, availability, integrity). So TL;DR there are lots of very hard problems in distributed systems and sometimes people just default to one stance or the other to balance their cognitive load or for any number of reasons (ranging from legit to ridiculous). Sometimes they default to consistency. That's probably the case for your button-click example. [1] https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking https://developer.valvesoftware.com/wiki/Source_Multiplayer_...