HN Theater @HNTheaterMonth

Gibbon:

- https://medium.com/netflix-techblog/crafting-a-high-performa...

- https://medium.com/netflix-techblog/building-the-new-netflix...

- https://www.youtube.com/watch?v=eNC0mRYGWgc

Cobalt: https://www.cobalt.dev/

⬐ iaml

I find it funny that youtube made a cool new tech specifically to render UI on tv's and yet it works like shit on any tv I encountered.

⬐ Aissen

Most probably you're not using a cobalt-based YouTube app yet.

⬐ iaml

Is there a list of platforms that use it?

⬐ Aissen

Not AFAIK, but maybe someone more knowledgeable can chime-in.

Its also important to consider the environment as well since JSX is potentially much bigger than the web.

JSX is much like other generic user interface markup languages[0] and like many other is simply a dialect of XML. Any interface that can be represented with XML/HTML or any other markup language can use JSX and optionally react. We are already seeing this boom with in native mobile environments with React Native, NativeScript, Titanium...

Here are several examples where JSX is used that is not a browser:

- Native desktop apps for Linux, Mac, and Windows (Not including Electron/NW.js)[1][2][3][4]

- TVs with AppleTV apps or Netflix's Gibbon[5][6]

- Command line apps as stdin/stdout with react-blessed[7]/mylittledom[8]

- Direct to Canvas[9]/pixi.js[10]

- Latex documents[11]

- Web Audio[12]

- Conole.logs[13]

- Truly custom direct to hardware[14] as some C code like: `digitalWrite(led, HIGH)`

I definitely believe JSX could use standardization separate from any implementation, JavaScript or otherwise.

[0]: https://en.wikipedia.org/wiki/User_interface_markup_language

[1]: https://github.com/sidorares/react-x11

[2]: https://github.com/grassator/react-qml

[3]: https://github.com/ptmt/react-native-macos

[4]: https://github.com/Microsoft/react-native-windows

[5]: https://github.com/ramitos/react-tvml

[6]: https://www.youtube.com/watch?v=eNC0mRYGWgc

[7]: https://github.com/Yomguithereal/react-blessed

[8]: https://github.com/manaflair/mylittledom

[9]: https://github.com/Flipboard/react-canvas

[10]: https://github.com/Izzimach/react-pixi

[11]: https://github.com/vzaccaria/jsx-latex

[12]: https://github.com/FormidableLabs/react-music

[13]: https://github.com/mohebifar/konsul

[14]: https://github.com/iamdustan/react-hardware

Sorry. I was under the impression after watching this video Netflix was using React across all devices. [0]

[0] https://youtu.be/eNC0mRYGWgc?t=23m50s

⬐ error54

No worries! Tracker1 is correct that all browser based UI is built using React. Other platforms may be doing their own explorations into React but I can't speak to that since those are outside of my domain of expertise. I can say that my team loves React so we're definitely looking into React Native.

⬐ tracker1

React is not the same as React Native... there's enough similarities to share a name. React is the base (afaik) for all web-based client interactions, which also includes a lot of TV/Webtop interfaces, but not necessarily Android and iOS.

Given the shift towards Flux and Falcore, React Native may make sense for the iOS/Android, and potentially in Windows/Ubuntu as well (speculating).

Disclaimer, I don't work there, but did go through the interview process last year, I wasn't enthusiastic about moving to California at the time.

Sorry, I didn't mean to attack other frameworks.

I was referencing stuff like this: http://www.youtube.com/watch?v=eNC0mRYGWgc&t=8m18s

Picking a nit, they don't use React in the browser across all devices. They actually use an internal rendering engine called Gibbon on some devices with client code written JavaScript with React but not rendering to HTML or a browser instead using their internal engine. Interestingly this has become easier with React breaking out React and ReactDOM.

Interesting to note that Netflix must see Gibbon as a competitive advantage, I've been told its not likely to see an open source release.

https://www.youtube.com/watch?v=eNC0mRYGWgc

There's an interesting video by Netflix where they discuss using React in their stack. To increase performance on many of Netflix's TV or Console based UI's they have their own rendering engine they're using instead of the manufacturer's browser engine. This means any of React's "speed" improvements are a moot point so instead they use it because of its simplicity for UI layouts.

https://www.youtube.com/watch?v=eNC0mRYGWgc

⬐ untog

Along that line of thinking, Flipboard created React Canvas, which renders directly into a <canvas> tag, bypassing a lot of the DOM:

https://github.com/Flipboard/react-canvas

It's worth mentioning that much of the code that integrates with React internals is based on the work in react-art: https://github.com/reactjs/react-art

This is the same technique used by Netflix for their React-based television UI.

https://www.youtube.com/watch?v=eNC0mRYGWgc

⬐ 2bit

Is this faster than the react-art canvas renderer? Why use one vs the other?

If you're interested in doing it with React, here's a video explaining how to do a custom backend: https://www.youtube.com/watch?v=eNC0mRYGWgc

You basically need to change BackendIDOperations and ReactEventListener to send/receive messages vs talking to the real APIs. It's already set up in the codebase to do this (because it actually worked at one time).

Webpack, per usual, already thought of this and has an answer for you :) https://github.com/webpack/worker-loader