13 ms·

Making Netflix.com Faster

158 points by joubert 11y ago

tylermauthe 11y ago
Beautiful use of modern JS development techniques: client-side rendering, isomorphic JavaScript and smaller more-efficient libraries. Even better to see these techniques applied appropriately, instead of slathered on to the point of being detrimental. Also, +1 for using jQuery and being proud of it! :)
- dikaiosune 11y ago
  It reads like jQuery was part of the server-rendered Java stack, and there's no mention of it in their Node/React stack. I use jQuery and am proud of it, but it looks like that may no longer be the case at Netflix?
- code_sterling 11y ago
  > Also, +1 for using jQuery and being proud of it! :) That wasn't the takeaway some of us read here, and honestly, that's just foolish. Take pride in your craftsmanship, never take pride in your tools. I love my hammer, but when I need a screwdriver, it's a stupid choice.
  - ProCynic 11y ago
    On the other hand, don't be ashamed of using a tool that works for the job, even if it isn't the latest or coolest thing. jQuery is no longer the best choice for a lot or circumstances, but if it is for yours, go for it.
dikaiosune 11y ago
I'd be interested in seeing some actual numbers for their "time to interactive" metric. As far as I can tell, this article just says that they're monitoring it, not what x% improvement they've seen. EDIT: Forgot about this at the top: "The impact of this effort netted a 70% reduction in startup time" -- So is this the same metric?
- travjones 11y ago
  Eh... I think they're different. The startup time is probably the most-improved metric that's why they dropped the 70% figure. Maybe they hint at the "time to interactive" measure as a concern for the future for practical reasons. For example, startup time is probably way before the page is ready for user interaction (video playing, buttons clickable, etc.), yet the "time to interactive" is probably the most important metric to the everyday user.
  - kristoferbaxter 11y ago
    Hi, author here. Apologies for not making this more clear in the post. The 70% reduction is for time to interactive (tti).
    - travjones 11y ago
      Got it. Thanks for following up.
omarforgotpwd 11y ago
Great example for why you might actually want to use node.js: being able to ensure your rendering code runs identically on the client and the server. That's something no other language can offer as cleanly or natively for the next few years.
- brianwawok 11y ago
  scala + scalaJS IMHO does it better right now (with a lot more type safety and a lot more performance on the server)
  - ken47 11y ago
    You can't actually run a JS framework faster from within the JVM than you can in V8. And if you're writing all your code in Scala, then you're losing the productivity benefits of having a real UI framework written in JS.
    - justthistime_ 11y ago
      Not sure you understood that. I've been doing this for a while, after being sick of all those poor quality JavaScript frameworks and it works perfectly fine. Usually the "main" JavaScript framework code is bloated, but kind of working, but as soon as you need some add-on or extension you are entering bug hell. I'll just write the code in Scala, and have the assurance that it works without having to deal with unmaintained, bug-filled JavaScript libraries.
    - brianwawok 11y ago
      I think you are missing the point. My server code is running Scala on the JVM on the server, which is JITted down with all the magic of the JVM into native, and running full steam. My client code is cross compiled javascript that the browser does it's thing client side. The magic is: 1) Both parts are the same codebase, I can share data objects and logic between platforms 2) I get actual static typing on everything. Not some kind of fake static typing like coffeescript. So just the fact that my code compiles makes my code roughly equal to a mess of Javascript with a bunch of tests hitting the happy path. 3) I get to write in an actual decent language, not Javasript, the worse language to ever write in. Javascript is the new assembly. It's great, but I never want to touch it! If I can touch a higher level language, why wouldn't I?
brianstorms 11y ago
The code may be faster but the user experience continues to get slower, i.e., it takes more time than ever to find something worth watching. The recent UI changes simply disguise the fact that there are less titles available. Especially movies. Lots of filler, straight-to-video content that never got theatrical exhibition because the content sucked. No way to filter it out. No way to tell Netflix I really do NOT want to see this, I will never watch it, I really am not interested. Netflix will continue showing these unwanted titles to you. This is not speeding up a user experience. This is not making Netflix faster. And the user experience is really the only thing that matters.
- onewaystreet 11y ago
  The lack of titles is the fault of the studios. Not much netflix can do about it. Which is why they are increasing production of their own content. From a UI/business perspective many people have argued that it's always better to show a user something than nothing. "We don't have the movie you are looking for but here are some you might like" is better than "We don't have the movie you are looking for."
  - zatkin 11y ago
    For anyone curious as to why "the studios" are not giving their titles to Netflix is because they are developing their own, independent Netflix's (i.e. Comcast is has internet TV at tvgo.xfinity.com).
    - ken47 11y ago
      I genuinely wonder who has a better brand image among the general population, between Comcast and Netflix.
      - KingMob 11y ago
        Most definitely Netflix. But Comcast and other cable companies have long-standing ties to studios, and are betting that if they can secure the content rights, they can win regardless.
darkmarmot 11y ago
And yet they still fail to address the most irritating aspect of their video UI -- all too often the video timeline controls remain visible while movies are playing and don't go away. This has been going on for _years_. They seem incapable of combining the mousemove event and a timer to automatically hide the controls...
- mattkrea 11y ago
  Across various browsers and operating systems I have never encountered this... As long as my mouse isn't hovering over the controls they work perfectly for me.
- eclipxe 11y ago
  Never had this happen
- davnicwil 11y ago
  I've noticed a similar bug in Chrome on a Mac where the cursor doesn't disappear when you're watching a series, have finished one episode and continue to the next episode(s). On the first episode in the 'chain' the cursor disappears after a few seconds of inactivity, but for all subsequent episodes it does not- very odd. You have to refresh the page to reload everything to make it start disappearing again!
ericfrederich 11y ago
They need to make Netflix work first otherwise it'll just fail faster. Netflix has been broken on the Nexus Player for a long time. Let any show run to the end and it logs you out.
- andrewguenther 11y ago
  Another Google platform with little to no support only a year after its release? I am shocked, shocked. This has never happened before! /s In all seriousness though, have you contacted Netflix support? They have seemed really responsive in the past.
- jebblue 11y ago
  I don't know what that is but when Netflix got movies working in the browser on Ubuntu I was amazed and very pleased.
- odiroot 11y ago
  Just try out the Wii U version, it can be worse.
- owyn 11y ago
  Yes, that's a seriously annoying bug. Turn off auto-play in your settings and it will fix it. Not in the player, but on the actual netflix web site, log in and check out the "Playback settings", and you can turn off auto-play. Voila!
deleted 11y ago
[deleted]
wereHamster 11y ago
Kudos for not using the word 'isomorphic'. Most people use it (in the context of JavaScript) without understanding what it really means: https://en.wikipedia.org/wiki/Isomorphism https://en.wikipedia.org/wiki/Isomorphism.
- timdorr 11y ago
  "Universal" is the new "isomorphic": https://medium.com/@mjackson/universal-javascript-4761051b7ae9 https://medium.com/@mjackson/universal-javascript-4761051b7a...
  - wereHamster 11y ago
    > a word that describes the same code but running in a different environment Uhm, that's a wrong way to think about it. The same code can't run in a two different environments. If it does then it means that the environment is the same! The question then becomes what is an 'environment'. Once you start explicitly tracking what the dependencies of your code are, in terms of language/runtime support, external libraries etc, it becomes very clear what the 'environment' is (though JavaScript as a language is exceptionally bad at expressing these dependencies). If your code runs in Node.js and latest Chrome, then the 'environment' is ES5 or even ES6. If it also runs in IE7, then the environment likely is ES3. If your code also needs access to the DOM and WebWorker APIs, as well as underscore, then the environment is ES3+DOM+WebWorker+underscore. If only we had support in the language and/or tooling around it to express these dependencies and warn us if we try to use some code in an environment that is unsuitable for it...
- arianvanp 11y ago
  It really grind my gears because it's not even grammatically correct to say that "Isomorphic architecture". Isomorphic to what?. An isomorphism is a binary relationship... "A is isomorphic to B". It's like saying "We run an equals to architecture".
- glenjamin 11y ago
  I see this argument a lot and I really don't get it. In the context of JavaScript, Isomorphic means "runs on the client and server". Here's an article from 2011 that uses the word in this way, and includes a definition: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/ http://blog.nodejitsu.com/scaling-isomorphic-javascript-code... The fact that isomorphic means something else in a different context seems irrelevant to me. I did 5 mins of googling and found the following mathematical terms also have different meanings when used in a software engineering or computing context: * integration * kernel * product * scalar * module * function
jebblue 11y ago
So node.js can replace Java/Tomcat? I guess I'll have to pinch my nose and somehow start liking JavaScript. Typescript looks good, that might make it palatable.
- eklavya 11y ago
  I read the article and don't think they meant this. They wanted server side (selective) rendering and didn't want the hassle of two languages so they went with node.js. quote"Without shared rendering logic we couldn't have realized the potential of rendering only what was necessary on startup and everything else as data became available."
- Wintamute 11y ago
  I imagine a common architecture for universal apps will be to just use some sort of thin Node.js app to perform the actual app rendering, and have it communicate with a separate API app written in whatever language is most appropriate. Static files could either be served by the Node.js app, or even a different source. And these days ES6/ES7 makes Javascript very palatable indeed. Check it out :-)
  - madeofpalk 11y ago
    That's exactly how you do it :) You have one 'Universal Application', and then you have two small entry points: - server.js is a small (express) server to send a HTTP response to the client (server bootstrapping) - client.js renders a page and the mounts it onto a DOM node. To get around the issues of database access, it makes it a lot easier to put all of that into an API that can be accessed by the server and the client. Here's a very small project I build (and am continuing to build) to learn about this architecture https://github.com/joshhunt/reactapus https://github.com/joshhunt/reactapus
    - Wintamute 11y ago
      Aha yes, I like the look of your project ... nice work! I've got something fairly similar going on. https://github.com/madebycomrades/autokitty-react https://github.com/madebycomrades/autokitty-react
Snesker 11y ago
Get rid of all the privacy-invading, likely non-free javascript and use only HTML. They could then brag about having the fastest website of any media company.
JupiterMoon 11y ago
I love Netflix but hate using their website. It's a constant experience in annoyance. It's slow, buggy and gets in the way of discovering new content. (Chrome on Linux on an older Atom processor -- yes I know that this is a rubbish spec but other non-webapp media consuming methods work just fine.) What about a cross platform libnetflix and let us build our own native apps? (Like spotify do.) Or even allow integration into e.g. Kodi media centre.
- swah 11y ago
  Even with a gaming PC, anything graphical on Linux doesn't feel as snappy as a Windows PC, with a fresh install. (OTOH on Linux, every filesystem operation feels 10x as fast..)
  - JupiterMoon 11y ago
    I think my problem is more netflix.com or possibly web app specific. Desktop apps work just nicely.
ohitsdom 11y ago
Probably not the place to bring this up, but I am having so many issues with Netflix app on xbox 360 lately. I'll hit play on a title, it'll load to about 15%, then stop and take me to the "choose profile" screen. Anyone else seeing this?
- justwannasing 11y ago
  You're right. This is not the place to bring this up. EDIT: OK. I guess this is the right place so, my son's XBox hangs when switching between game playing and watching Netflix. Does anyone know how to fix that?
erichmond 11y ago
For all the people complaining about the UI on netflix, there is a great alternative interface @ www.instantwatcher.com . Site is written in Haskell, and is quite snappy.

158 points by joubert 11y ago

Beautiful use of modern JS development techniques: client-side rendering, isomorphic JavaScript and smaller more-efficient libraries. Even better to see these techniques applied appropriately, instead of slathered on to the point of being detrimental. Also, +1 for using jQuery and being proud of it! :)

dikaiosune 11y ago
It reads like jQuery was part of the server-rendered Java stack, and there's no mention of it in their Node/React stack. I use jQuery and am proud of it, but it looks like that may no longer be the case at Netflix?
code_sterling 11y ago
> Also, +1 for using jQuery and being proud of it! :) That wasn't the takeaway some of us read here, and honestly, that's just foolish. Take pride in your craftsmanship, never take pride in your tools. I love my hammer, but when I need a screwdriver, it's a stupid choice.
- ProCynic 11y ago
  On the other hand, don't be ashamed of using a tool that works for the job, even if it isn't the latest or coolest thing. jQuery is no longer the best choice for a lot or circumstances, but if it is for yours, go for it.

dikaiosune 11y ago

I'd be interested in seeing some actual numbers for their "time to interactive" metric. As far as I can tell, this article just says that they're monitoring it, not what x% improvement they've seen. EDIT: Forgot about this at the top: "The impact of this effort netted a 70% reduction in startup time" -- So is this the same metric?

travjones 11y ago
Eh... I think they're different. The startup time is probably the most-improved metric that's why they dropped the 70% figure. Maybe they hint at the "time to interactive" measure as a concern for the future for practical reasons. For example, startup time is probably way before the page is ready for user interaction (video playing, buttons clickable, etc.), yet the "time to interactive" is probably the most important metric to the everyday user.
- kristoferbaxter 11y ago
  Hi, author here. Apologies for not making this more clear in the post. The 70% reduction is for time to interactive (tti).
  - travjones 11y ago
    Got it. Thanks for following up.

omarforgotpwd 11y ago

Great example for why you might actually want to use node.js: being able to ensure your rendering code runs identically on the client and the server. That's something no other language can offer as cleanly or natively for the next few years.

brianwawok 11y ago
scala + scalaJS IMHO does it better right now (with a lot more type safety and a lot more performance on the server)
- ken47 11y ago
  You can't actually run a JS framework faster from within the JVM than you can in V8. And if you're writing all your code in Scala, then you're losing the productivity benefits of having a real UI framework written in JS.
  - justthistime_ 11y ago
    Not sure you understood that. I've been doing this for a while, after being sick of all those poor quality JavaScript frameworks and it works perfectly fine. Usually the "main" JavaScript framework code is bloated, but kind of working, but as soon as you need some add-on or extension you are entering bug hell. I'll just write the code in Scala, and have the assurance that it works without having to deal with unmaintained, bug-filled JavaScript libraries.
  - brianwawok 11y ago
    I think you are missing the point. My server code is running Scala on the JVM on the server, which is JITted down with all the magic of the JVM into native, and running full steam. My client code is cross compiled javascript that the browser does it's thing client side. The magic is: 1) Both parts are the same codebase, I can share data objects and logic between platforms 2) I get actual static typing on everything. Not some kind of fake static typing like coffeescript. So just the fact that my code compiles makes my code roughly equal to a mess of Javascript with a bunch of tests hitting the happy path. 3) I get to write in an actual decent language, not Javasript, the worse language to ever write in. Javascript is the new assembly. It's great, but I never want to touch it! If I can touch a higher level language, why wouldn't I?

brianstorms 11y ago

The code may be faster but the user experience continues to get slower, i.e., it takes more time than ever to find something worth watching. The recent UI changes simply disguise the fact that there are less titles available. Especially movies. Lots of filler, straight-to-video content that never got theatrical exhibition because the content sucked. No way to filter it out. No way to tell Netflix I really do NOT want to see this, I will never watch it, I really am not interested. Netflix will continue showing these unwanted titles to you. This is not speeding up a user experience. This is not making Netflix faster. And the user experience is really the only thing that matters.

onewaystreet 11y ago
The lack of titles is the fault of the studios. Not much netflix can do about it. Which is why they are increasing production of their own content. From a UI/business perspective many people have argued that it's always better to show a user something than nothing. "We don't have the movie you are looking for but here are some you might like" is better than "We don't have the movie you are looking for."
- zatkin 11y ago
  For anyone curious as to why "the studios" are not giving their titles to Netflix is because they are developing their own, independent Netflix's (i.e. Comcast is has internet TV at tvgo.xfinity.com).
  - ken47 11y ago
    I genuinely wonder who has a better brand image among the general population, between Comcast and Netflix.
    - KingMob 11y ago
      Most definitely Netflix. But Comcast and other cable companies have long-standing ties to studios, and are betting that if they can secure the content rights, they can win regardless.

darkmarmot 11y ago

And yet they still fail to address the most irritating aspect of their video UI -- all too often the video timeline controls remain visible while movies are playing and don't go away. This has been going on for _years_. They seem incapable of combining the mousemove event and a timer to automatically hide the controls...

mattkrea 11y ago
Across various browsers and operating systems I have never encountered this... As long as my mouse isn't hovering over the controls they work perfectly for me.
eclipxe 11y ago
Never had this happen
davnicwil 11y ago
I've noticed a similar bug in Chrome on a Mac where the cursor doesn't disappear when you're watching a series, have finished one episode and continue to the next episode(s). On the first episode in the 'chain' the cursor disappears after a few seconds of inactivity, but for all subsequent episodes it does not- very odd. You have to refresh the page to reload everything to make it start disappearing again!

ericfrederich 11y ago

They need to make Netflix work first otherwise it'll just fail faster. Netflix has been broken on the Nexus Player for a long time. Let any show run to the end and it logs you out.

andrewguenther 11y ago
Another Google platform with little to no support only a year after its release? I am shocked, shocked. This has never happened before! /s In all seriousness though, have you contacted Netflix support? They have seemed really responsive in the past.
jebblue 11y ago
I don't know what that is but when Netflix got movies working in the browser on Ubuntu I was amazed and very pleased.
odiroot 11y ago
Just try out the Wii U version, it can be worse.
owyn 11y ago
Yes, that's a seriously annoying bug. Turn off auto-play in your settings and it will fix it. Not in the player, but on the actual netflix web site, log in and check out the "Playback settings", and you can turn off auto-play. Voila!

deleted 11y ago

[deleted]

wereHamster 11y ago

Kudos for not using the word 'isomorphic'. Most people use it (in the context of JavaScript) without understanding what it really means: https://en.wikipedia.org/wiki/Isomorphism https://en.wikipedia.org/wiki/Isomorphism.

timdorr 11y ago
"Universal" is the new "isomorphic": https://medium.com/@mjackson/universal-javascript-4761051b7ae9 https://medium.com/@mjackson/universal-javascript-4761051b7a...
- wereHamster 11y ago
  > a word that describes the same code but running in a different environment Uhm, that's a wrong way to think about it. The same code can't run in a two different environments. If it does then it means that the environment is the same! The question then becomes what is an 'environment'. Once you start explicitly tracking what the dependencies of your code are, in terms of language/runtime support, external libraries etc, it becomes very clear what the 'environment' is (though JavaScript as a language is exceptionally bad at expressing these dependencies). If your code runs in Node.js and latest Chrome, then the 'environment' is ES5 or even ES6. If it also runs in IE7, then the environment likely is ES3. If your code also needs access to the DOM and WebWorker APIs, as well as underscore, then the environment is ES3+DOM+WebWorker+underscore. If only we had support in the language and/or tooling around it to express these dependencies and warn us if we try to use some code in an environment that is unsuitable for it...
arianvanp 11y ago
It really grind my gears because it's not even grammatically correct to say that "Isomorphic architecture". Isomorphic to what?. An isomorphism is a binary relationship... "A is isomorphic to B". It's like saying "We run an equals to architecture".
glenjamin 11y ago
I see this argument a lot and I really don't get it. In the context of JavaScript, Isomorphic means "runs on the client and server". Here's an article from 2011 that uses the word in this way, and includes a definition: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/ http://blog.nodejitsu.com/scaling-isomorphic-javascript-code... The fact that isomorphic means something else in a different context seems irrelevant to me. I did 5 mins of googling and found the following mathematical terms also have different meanings when used in a software engineering or computing context: * integration * kernel * product * scalar * module * function

jebblue 11y ago

So node.js can replace Java/Tomcat? I guess I'll have to pinch my nose and somehow start liking JavaScript. Typescript looks good, that might make it palatable.

eklavya 11y ago
I read the article and don't think they meant this. They wanted server side (selective) rendering and didn't want the hassle of two languages so they went with node.js. quote"Without shared rendering logic we couldn't have realized the potential of rendering only what was necessary on startup and everything else as data became available."
Wintamute 11y ago
I imagine a common architecture for universal apps will be to just use some sort of thin Node.js app to perform the actual app rendering, and have it communicate with a separate API app written in whatever language is most appropriate. Static files could either be served by the Node.js app, or even a different source. And these days ES6/ES7 makes Javascript very palatable indeed. Check it out :-)
- madeofpalk 11y ago
  That's exactly how you do it :) You have one 'Universal Application', and then you have two small entry points: - server.js is a small (express) server to send a HTTP response to the client (server bootstrapping) - client.js renders a page and the mounts it onto a DOM node. To get around the issues of database access, it makes it a lot easier to put all of that into an API that can be accessed by the server and the client. Here's a very small project I build (and am continuing to build) to learn about this architecture https://github.com/joshhunt/reactapus https://github.com/joshhunt/reactapus
  - Wintamute 11y ago
    Aha yes, I like the look of your project ... nice work! I've got something fairly similar going on. https://github.com/madebycomrades/autokitty-react https://github.com/madebycomrades/autokitty-react

Snesker 11y ago

Get rid of all the privacy-invading, likely non-free javascript and use only HTML. They could then brag about having the fastest website of any media company.

JupiterMoon 11y ago

I love Netflix but hate using their website. It's a constant experience in annoyance. It's slow, buggy and gets in the way of discovering new content. (Chrome on Linux on an older Atom processor -- yes I know that this is a rubbish spec but other non-webapp media consuming methods work just fine.) What about a cross platform libnetflix and let us build our own native apps? (Like spotify do.) Or even allow integration into e.g. Kodi media centre.

swah 11y ago
Even with a gaming PC, anything graphical on Linux doesn't feel as snappy as a Windows PC, with a fresh install. (OTOH on Linux, every filesystem operation feels 10x as fast..)
- JupiterMoon 11y ago
  I think my problem is more netflix.com or possibly web app specific. Desktop apps work just nicely.

ohitsdom 11y ago

Probably not the place to bring this up, but I am having so many issues with Netflix app on xbox 360 lately. I'll hit play on a title, it'll load to about 15%, then stop and take me to the "choose profile" screen. Anyone else seeing this?

justwannasing 11y ago
You're right. This is not the place to bring this up. EDIT: OK. I guess this is the right place so, my son's XBox hangs when switching between game playing and watching Netflix. Does anyone know how to fix that?

erichmond 11y ago

For all the people complaining about the UI on netflix, there is a great alternative interface @ www.instantwatcher.com . Site is written in Haskell, and is quite snappy.