HN Theater @HNTheaterMonth

This reminds me of that Netflix talk on React [1].

In it, the guy first praises React to the heavens, then spends the rest of the session explaining all the ways they had to disable and work around React to get what they wanted with decent performance.

It seemed to me like their use case could have been done with jQuery in a few hundred lines. Maybe I missed something.

[1] https://www.youtube.com/watch?v=g01dGsKbXOk

⬐ SonicSoul

just curious how you arrived at jQuery comparison. isn't that just a library for DOM utilities while react is a view engine optimized for minimum dom manipulation using observable pattern?

⬐ et1337

I made the comparison because at the beginning of the video, he talks about how they split into two teams; one used jQuery and the other React. Apparently the jQuery team moved significantly slower. I found that hard to believe given all the hacks they had to with React later on.

⬐ tiglionabbit

The React team was probably quicker at responding to the designers' ideas. The stuff that took a longer time was getting all the transition animations to work, which can be difficult in any higher-level framework.

⬐ qudat

jQuery and React are DOM manipulation libraries. jQuery packaged a bunch of other stuff in it but at its core it is all about DOM manipulation.

⬐ qudat

jQuery and React are DOM manipulation libraries. jQuery packaged a bunch of other stuff in it but at its core it is all about DOM manipulation.

⬐ igorgue

Nah you got the point, all these JavaScript frameworks are just over-engineering.

⬐ None

None

⬐ tiglionabbit

He praises React because it makes it easy to change the UI design at any time in response to new requests from the designers. The hard parts he talks about are animations, pre-loading, and virtual rendering, which require some higher level orchestration to get right in any framework. You have to have some component keeping track of this stuff. They mentioned that they had to extend the standard transition component to make it more reliable.

He also talks about writing code in a way that will work on both the server and client side, which is something you have to think about no matter what library you're using.

⬐ et1337

> He praises React because it makes it easy to change the UI design at any time in response to new requests from the designers.

Does it though? I suspect their system is fairly brittle after all that "higher level orchestration".

I keep seeing this pattern repeat in different software disciplines. Unity is the same way: fantastic for prototyping, but often more painful in the long run.

It reminds me of a wise saying (can't remember the source) to the effect of this:

Javascript library user, day 1: "So expressive! So elegant! So easy!" Day 300: "Kill me now."

C++ library user, day 1: "How can anyone live this way?" Day 300: "Whoever wrote this was actually pretty smart."

⬐ tiglionabbit

This conversation could be had about any abstraction. They help with some things and hinder other things.

In this case, a purely functional transformation from application state to HTML means you don't have to think about every possible transition between states like you would in a normal jQuery application. However, since you are not thinking about transitions, implementing transition animations will be harder.

⬐ CSDude

I know Javascript/HTML/CSS makes it very easy to develop something, however it is really sad to see people are struggling to get 60fps to show 20 boxes with images scrolling, where games can show thousands of polygons smoothly.

⬐ scott_karana

I'm with you. This is a regression.

A unified-ish platform might be a benefit to their developers, but this has also been a net loss for Netflix's end-users. :/

⬐ None

None

⬐ andrepd

Absolutely. It strikes me as odd that these days it is not only acceptable, but encouraged as a virtue, for developers to focus on making their own jobs easier as opposed to delivering a good (fast and efficient, among other things) product.

⬐ zevyoura

Usually making a developer's job easier entails making them more productive, which means fewer bugs and more features. Those things also correlate with a good product just as much or more than performance in most cases.

⬐ hayksaakian

the biggest trade off is maintainability

Are you getting code which any john developer can pick up and develop on, or is it something which requires knowing a special purpose programming language and corresponding frameworks?

From my point of view, I want to see a big company build a Canvas or WebGL UI that goes to thousands of people. We can speculate, but someone actually trying what you mention is the only way to find out if it works in the industry.

⬐ sosborn

Here is one example: http://engineering.flipboard.com/2015/02/mobile-web/

⬐ nacs

And an example of doing it wrong: http://famous.org/

⬐ cpeterso

Wrong how?

⬐ kibibu

I'm curious how one would handle accessibility with a WebGL UI. Is generating a parallel vanilla-HTML version the only option?

I suppose you could progressively enhance your HTML version to override certain DOM elements with WebGL UI, but I have no idea how modern screenreaders would handle it.

⬐ guiomie

Woudlnt there be a way to use a game engine to parse HTML+CSS and gain those performance improvements?

⬐ wmf

In general, probably not. Any optimization the game engine uses could also be used by browser engines (they already use DirectX/OpenGL, for example). CSS is just plain complex.

⬐ Timmons

Weirdly, UI interfaces are also a problem in the game world. Where we want to have a designer or artist design and implement something in a game in a fast way we often resort to using Scaleform[1]. It is flash based tool for games, within the industry it is notorious for how slow and inefficient it is. A simple UI element can often be more costly than a major in-game 3D object.

We are willing to pay this extra cost for these elements because they are often required to be quickly put together and then iterated on over a long period of time in a very dynamic and changing system. Some elements may be moved from Scaleform into a more native implementation but for the most part it is left to be slowly parsed and inefficiently rendered.

Basically, where we need fast changing interfaces that arent necessarily implemented by high skill programmers then we are going to take a performance hit to get the same level of visuals we could get if we had the time and manpower to approach it better.

[1]http://gameware.autodesk.com/scaleform

⬐ Timmons

Weirdly, UI interfaces are also a problem in the game world. Where we want to have a designer or artist design and implement something in a game in a fast way we often resort to using Scaleform[1]. It is flash based tool for games, within the industry it is notorious for how slow and inefficient it is. A simple UI element can often be more costly than a major in-game 3D object.

We are willing to pay this extra cost for these elements because they are often required to be quickly put together and then iterated on over a long period of time in a very dynamic and changing system. Some elements may be moved from Scaleform into a more native implementation but for the most part it is left to be slowly parsed and inefficiently rendered.

Basically, where we need fast changing interfaces that arent necessarily implemented by high skill programmers then we are going to take a performance hit to get the same level of visuals we could get if we had the time and manpower to approach it better.

[1]http://gameware.autodesk.com/scaleform

⬐ jeremiep

Game engines don't even go nearly that high-level. I see GUIs implemented in C++ more often than in scripting languages, and when they go that route its usually LUA without any declarative markup whatsoever.

Everything is a tradeoff, if you want the ease of HTML+CSS then be prepared to pay the performance hit, and if you want lighting fast GUIs, be prepared to pay the productivity hit.

⬐ MichaelGG

What's so complicated with the Netflix UI? I've been using the web for quite a while but I'm hard pressed to find any benefit, as a user, in the new Netflix UI. It's not like the old one rocked. But come on, it's a few cover images and text.

⬐ BuckRogers

What about those of us who prefer to stick with tried and true text, like HackerNews? Fairly simple and effective. No need for a GUI when you can just have a line of text convey the idea much faster.

⬐ h1fra

Ironically, some game devellopers are using webkit on top of their game to do the UI.

Like simcity (https://news.ycombinator.com/item?id=5359143)

⬐ thejosh

Sure, if you're on "powerful" hardware, if you're talking about FPS in current games, current consoles don't really go past 30 for most games.

⬐ yoklov

This is largely a tradeoff between framerate and visual effects. Current generation consoles can make 60fps, but not with the level of visual effects that are expected from them. Whether or not this tradeoff is worthwhile is at least partially personal opinion (my opinion on the subject is... mixed, although I think the option should be available both ways).

Either way, it is undeniably harder to sell new consoles, or games for those consoles, when screenshots of them looks the same as it did in the previous generation, even if those screenshots were taken at 60fps.

⬐ kozukumi

In all honesty this is what Java was designed to tackle.

⬐ comex

These days, more like millions of (textured) polygons :)

⬐ jeremiep

Depends of your platform, shader complexity, the number of GPU context switches and the number of sync points.

Mobile devices for example still have a hard time going over the quarter-million mark and thats assuming the GPU is near 100% usage, which in reality is probably closer to 60%.

⬐ jeremiep

Game engines and browsers have radically different architectures and performance/productivity requirements. Computing polygons is basically applying one function to an array of values and is delegated to the GPU, so its no wonder they easily reach 60 FPS with hundred of thousands of polygons per frame.

A better comparison would be against the performance of game logic, which in a game engine can easily become the bottleneck from all the conditionals, random memory accesses and sequential dependencies. And even there they don't sit on nearly as many layers of abstractions as a web page does.

This comes at the cost of productivity; building a web site is a few orders of magnitude more productive than using the latest game engines. Of course, sitting on the DOM and its many quirks as well as its reflow/redraw cycles can make it harder to reach 60FPS in the browser.

But at least you're saving yourself from a world of low-level pain.

⬐ Retric

AAA games are a long way from that. GPU's shaders v3.0 are Turing complete.

PS: Top graphics cars AMD Radeon R9 295X2 is 11+ TFlops, 1920 x 1080 x 60 = 124 million. So, these cards have ~100,000 Flops per pixel per frame @1080p.

⬐ jeremiep

I know, I spent a few months this year simplifying shader code designed for the PS4 in order to run on mobile devices. We basically had to scale down from SM5 to SM3, not an easy task :)

Its not because shaders are now turing complete that its a free pass to use these features all over the place, they often come with a noticeable performance cost, which I admit is lesser and lesser every year, but still.

Also, having recently completed the port of a next-gen AAA title, I can definitely say most shaders stay far from turing completeness, even on current consoles. We shipped the game with at least 75k generated shaders and I'm fairly certain less than 20% of them made use of those features.

Finally, the numbers you mention are from an ideal benchmark case and assuming GPU usage is maximized. Real world conditions will definitely lower these numbers.

Modern consoles GPUs have dozens of metrics in their profilers and every single one of them can be a major bottleneck. Its near impossible to achieve 100% GPU usage in a game. We're happy above 80%.

⬐ ksk

>building a web site is a few orders of magnitude more productive than using the latest game engines.

How have you come to this conclusion?

⬐ jeremiep

I've done both for a living.

⬐ ksk

So your argument is, for YOU :- game programming is less productive than building a website. That's fine then. I wouldn't disagree with someones personal experience. I thought you were making a general argument that applies to everyone.

⬐ jeremiep

I was merely saying I learned its less productive by actually developing both video games and web applications instead of simply reading about it.

It may be personal experience but it doesn't change the fact that you're working on a much lower level in a game engine with long iteration times while a browser reloads almost instantly and builds on layers after layers of abstractions.

That argument still applies to everyone.

⬐ nacs

If you've ever tried to do even the most basic of UI's in game engines, you'll quickly see the truth in that statement.

Even "easy" things on the web like text input boxes, scaling for different resolutions while keeping text crisp, and scrollable content areas are much harder in a game engine.

⬐ andrepd

So essentially you are sacrificing your end result for an easier time for yourself, the developer.

⬐ jeremiep

You're sacrificing performance, not the end result. However, a lot of the performance tricks do carry over (such as object pooling for example.)

But for 99% of the web this doesn't matter at all. I'll take declarative over imperative any day if it means I can spend the saved time polishing the product instead of debugging or optimizing.

You have no idea the amount of debugging and optimizing which goes into developing a video game. Having worked on both I can say time spent debugging/optimizing is at least an order of magnitude more than for web applications. Its much worse when you're using an in-house engine as well.

⬐ None

None

⬐ egeozcan

You are sacrificing your end result every time you don't spend a lifetime designing a custom processor for your application with an instruction set specific to your use case and instead have an easier time living like a normal human being.

⬐ kitsunesoba

I think there’s a balance to be struck between developer convenience and product quality+performance. If every developer leaned to the extreme convenience we’d quickly end up with a lot of unusable software.

⬐ jeremiep

True, but that balance is going to be different for every application domains.

At the end of the day, one of the few metrics which really matters is the return on investment.

A lot of software can afford iterative improvements as well, so its a great idea to start off with extreme convenience and optimize as you scale.

⬐ andrepd

You can go to extremes, as your preposterous mine-the-silicon-and-smelt-the-chip approach, or you can go to the sort of extremes that makes opening a news article grind my high-end phone to a halt for 20 seconds.

⬐ egeozcan

That news source is then bloated and unoptimized. There are also a lot of bloated and slow native apps. I don't see your point.

⬐ kitsunesoba

It’s also worth noting that the web technologies were initially (and still mostly, actually) designed to layout documents, not to craft highly graphical, interactive, animated application UIs.

If this is the direction the web is going, I think it’s worth considering a shift to technologies better suited for the task (QML, for instance, looks like a great preexisting application-centric alternative to HTML). Old browsers that don’t support this tech would be taken care of by HTML polyfills until adoption of new browser versions is high enough.

⬐ CarVac

I'd certainly be all for web pages with QML performance.

QML is a tremendously easy way to leverage OpenGL acceleration.

⬐ keithy

Well if you think about it, the netflix UI is pretty much a bunch of documents. It's a gallery of images, and each image has its own document.

The DOM is a dinosaur unfortunately, it just gets the job done for most basic websites. CSS is also a language made for the DOM. The thing is, the DOM isn't required for a web page. Netflix could have coded up their entire UI on a Javascript 2D game engine and could have ended up with a faster app for sure. But CSS and the DOM make it much easier to work with text + links, that imo it's worth it for the performance drop of animations.

⬐ cmaggard

Not to mention the nightmare that accessibility would be if you were just rendering polygons on a canvas.

⬐ tracker1

Funny how much things change in a couple years.. about 4-5 years ago, I built a gallery view, that had scrolling areas, that worked the same as the video mentions (only loading the next block)... what's funny is the css transitions were working poorly on some devices at that time, so it was disabled completely. :-(

⬐ ericfrederich

I wish they would fix Netflix on the Nexus Player and PS3. I only have 2 set to boxes and both of them have broken Netflix on them.

The PS3 doesn't output audio properly to my receiver. I need to use stereo to get any sound at all.

The Nexus Player logs you out if your program ends and tries to play the next episode. This happens all the time when my 2 year old watches Curious George.

These aren't obscure platforms and it seems I'm not the only one with these problems. No known solution either.

----------

edit

----------

I forgot... also when watching 4:3 content on my Nexus player it uses some stupid gray background which is distracting. What is so wrong with black?

On the other hand, the Nexus player can run Kodi which you can install a plugin called "Genesis" on and stream anything you can imagine without any of those issues.

⬐ ac29

I wish they would fix Netflix on (desktop) Linux. Most content is limited to ~2Mbps 720x480 resolution (approx DVD quality), for no apparent technical reason. A Roku streaming box gets the same content on the same internet connection at ~6Mbit 1080P. This is easily verified with the Netflix secret menus (Ctrl-Alt-Shift-S and Ctrl-Alt-Shift-D) -- quality above 1750kbps 480P just generally isn't available to Linux web browsers, except on Netflix originals and a small handful of other stuff.

Sadly, another area where paranoid content owners have made legally available, paid for content inferior to illegal pirate copies.

⬐ relix42

This has more to do with licensing restrictions than with technology.

⬐ ac29

That was my point -- there is zero technical reason HD cant be delivered to desktop linux. Netflix shows do it, and so do a small number of other TV shows and movies. The vast majority of content, however, is limited to 480P. Presumably for licensing reasons only.

The most irritating thing is that "HD" now costs extra, and there is zero indication linux clients cant get the paid for HD content. I watch Netflix via Roku maybe 5% of the time, so mostly Im getting less than I pay for.

⬐ revmoo

Funny too, because the Roku runs on Linux.

⬐ darkmighty

Just fake your user agent?

⬐ ac29

Nope, faking Win/IE prompts for ActiveX, and faking Windows/Firefox prompts for Silverlight. Mac Safari, Windows Chrome, Android, etc all have similar problems.

⬐ None

None

⬐ ac29

Too late to edit, but I contacted support: Netflix on linux is "unsupported" with no time frame for moving it to a fully supported platform. They claimed linux does not support some technology that other platforms do (presumably special DRM), so they cant offer HD quality, even to customers who pay extra for it.

⬐ tracker1

Anyone else chuckle a little about seeing a Netflix technology video on youtube?

⬐ None

None

⬐ NeutronBoy

Right tool for the right job.

⬐ tracker1

Agreed, I just thought it was a little funny. :-) I get the same chuckle when I see a "Mercedes SLK Black" that's painted white.

⬐ rubiquity

I don't chuckle when I see that. I just enjoy the exhaust notes.

⬐ spearo77

Hmm, I heard him mention that SLA is "software license agreement".. is that right?

I've always interpreted it as Service Level Agreement, which typically has a minimum response time, etc.

https://en.wikipedia.org/wiki/Service-level_agreement

⬐ krizan

This made me try reactjs. Too bad i had to watch bottom right corner to see smooth animations :(

⬐ keithy

React is insanely fun. It's so stress free to code up the frontend of your web app with React because everything is viewed as a component. My friend and I have adopted React and we are still glossing over how great it is.

⬐ michaelmcmillan

It's a little ironic that all the demos are lagging like hell on a talk titled "Chasing 60fps".

⬐ None

None

⬐ BuckRogers

I hate to spoil the celebration, but I've wanted a basic text interface to Netflix for years. Can I just get a list of movies and shows available? Click a link, see a page with a description, use the back button and I'm back exactly where I was?

The technical implementation really doesn't need to be this complex. Also, the interface itself has gotten worse and worse too. As a customer, just offering HTML links, a search box and then using HTML5 to stream the video would be great.

⬐ stock_toaster

Agreed. I am not a fan of carousels in general. Combined with the awful jawbone shrink+expand+flyin thing, I find the new interface to be quite awful. I really dislike using it.

I would vastly prefer a simple paginated grid of videos with a "click to show info in a little overlay box", and then a close link to simply dismiss the overlay and go back to the grid.

⬐ mbesto

I second this. The new UI lacks a massive amount of whitespace. Everything is so clumped together making the affordance for reach individual movie (or series) much higher than a user would expect. I can imagine a lot of users will get frustrated with this and leave the app.

⬐ BuckRogers

That design should be the default graphical interface. Just click anywhere but on the overlay box and it takes you right back. Then offering my basic HTML text interface for those who want it as well. I really like just using the native browser controls in the vast majority of use cases. No one is going to reinvent those wheels and do better. Rather than building all of this garbage on top of it.

⬐ None

None

⬐ molloy

I completely agree. In the meantime if you aren't using it already then I recommend checking out instantwatcher.com for a better Netflix interface. I'm not affiliated with it in any way, but I do use it anytime I want to search Netflix content.

⬐ intopieces

Are you familiar with instantwatcher.com? It appears to meet your requirements, unless I'm missing something in your description.

⬐ ewzimm

They used to have exactly that. You could list everything available as basic text and sort by whatever criteria you wanted, click the link for a description, and use the back button to return to the text list.

Their star system isn't always perfect, but it was great to be able to sort by what they thought I would like most and scan through the list for something good. Worked nearly perfectly, and I found a lot of great material that way. Then they removed the option to use the rating system they spent so much time and money they spent developing in favor of a visual carousel. It is a lot more visually appealing and a lot less efficient.

⬐ mzs

Is there even a way to link to just one film anymore?

⬐ mamerhst

My wife can't even find movies on netflix!

⬐ Ollinson

I was honestly shocked to find out that there are almost 8000 movies available right now on netflix streaming.

Their "custom tailored" selection screen gives the impression that they have 300 films available at most.

⬐ girvo

This is one of the reasons I'm a massive fan of JustWatch[0]. The other reason is that it searches across everything that's available on other services in Australia; most of these tools ignore us Down Under!

[0] https://www.justwatch.com

⬐ IshKebab

That's really nice. It would be amazing if you could add IMDb ratings though, and the ability to sort/filter by them (e.g. only show me films with a rating >7).

You can download the IMDb rating database, although I think it has a very restrictive licence. Alternatively there is this: http://www.omdbapi.com/ - but I wouldn't count on it being around forever. It seems like they would be on shaky legal grounds (but at least it would be them getting sued rather than you).

⬐ Ollinson

I should have included this in my original post but InstantWatcher sounds like what you're looking for.

That website is how I discovered netflix has thousands of movies in the first place.

⬐ Crito

A great deal of their selection would be considered worthless trash by a great deal of their customers. Lots of direct-to-dvd stuff, sequels to sequels of childrens' movies, etc.

I suspect this is the reason they obscure the full contents of their library. They only want to show customers things that they think the customer will like, because that set is dwarfed by the set of junk.

⬐ Ollinson

Well let me put it this way. I was stuck in a hotel for a few days with nothing but netflix to keep me entertained. I browsed through all the documentaries and found nothing worth watching that I hadn't already watched. Frustrated, I found a website called instantwatcher that gave me the ability to view ALL the netflix documentaries. I ended up watching almost 9 GREAT documentaries that were otherwise hidden from me.

⬐ None

None

⬐ gravity13

This really is a flaw in netflix's design, I believe. I was surprised to find a movie I wanted to see on Netflix the other day and only found it via a roku search across multiple catalogues. Here I thought I knew their catalogue after searching for movies to watch several times.

It's like going to a movie store and only browsing one section. Over and over.