# Netflix ditches Webkit/HTML5. Goes native in new UI



## CloudAtlas (Oct 29, 2013)

Netflix's new HTML5 based UI for TiVo might have a short lifespan! 

Netflix ditches Webkit to roll out slick new UI for smart TVs, Roku boxes and game consoles

*SUMMARY: Netflix is bringing a completely revamped UI to smart TVs and connected devices  and it moved away from Webkit and HTML5 to bring the same features to less powerful devices.*



> Netflix rolled out a big revamp of its user interface for smart TVs and connected devices [last] Tuesday night, moving away from a grid of box shot covers towards a much more visual interface that features large still images and more details on each show or movie.
> 
> The new UI will be available on Xbox 360, PlayStation 3, PlayStation 4 as well as Roku 3 devices and newer smart TVs and Blu-ray players (2013 and 2014 models) to Netflix members worldwide in the next two weeks. Other devices, including some older Roku players, will receive the update over the coming months. There are no plans to bring the new UI to Apple TV and Xbox One.











The new native UI showed up on my Roku 3 last night and not only looks amazing but is now feature-parity with my PS3 (profiles and autoplay).


> *This new UI is Netflixs biggest revamp of its TV interface thus far,* in part because of a lot of the underlying plumbing.* Previously, Netflix was building its TV app user interface in HTML5*, which allowed the company to quickly iterate on minor changes and A/B-test various features with a subset of its subscribers.
> 
> But in order to make HTML5 work, Netflix actually shipped a stripped-down version of the Webkit browser as part of its app, which in turn meant that it had fewer resources left to add features. The result was that it had to tweak its app for each platform, and leave out some features on cheaper and less powerful devices  which is why Roku boxes for example never had access to individual profiles.
> 
> With the new UI, all of this changes. Netflix decided to ditch Webkit as a rendering engine and instead build a native platform for the most common connected device chipsets out there, circumventing the various smart TV SDKs in the process. The company even decided to develop its own voice recognition technology to make voice input consistent across platforms, and not have the Xbox implementation differ from implementations on smart TVs that come with support for voice input.





> Netflix started working on this new platform 18 months ago, and secretly tested it in peoples living rooms for months: The company started migrating PS3 users away from Webkit and to the new architecture with an update in the spring  but its unlikely anyone noticed, because the Netflix team rebuilt the old UI on top of the new platform. In addition, it tested the new user interface with several hundred thousand new subscribers on the PS3.
> 
> Netflix has traditionally tested some of its more advanced features on the PS3 first. But with the new platform, it will now bring feature-parity to all devices, and for example allow Roku users to finally use profiles and autoplay to quickly fire up a new TV show episode after ending another.


http://gigaom.com/2013/11/12/netfli...i-for-smart-tvs-roku-boxes-and-game-consoles/


----------



## Philmatic (Sep 17, 2003)

That's irrelevant to the Roamio's, they use an embedded version of Opera to launch the Netflix HTML5 interface. That is still the case with the new Netflix interface.


----------



## CloudAtlas (Oct 29, 2013)

Philmatic said:


> That's irrelevant to the Roamio's, they use an embedded version of Opera to launch the Netflix HTML5 interface. That is still the case with the new Netflix interface.


But Netflix no longer develops their app in HTML5! They built their own native layer for every platform they support.

So the "new" Netflix HTML5 UI on Roamio is actually the old platform. The new platform, as the article points out, has been in development for over a year and a half.


----------



## ustavio (Oct 19, 2013)

CloudAtlas said:


> But Netflix no longer develops their app in HTML5! They built their own native layer for every platform they support.
> 
> So the "new" Netflix HTML5 UI on Roamio is actually the old platform. The new platform, as the article points out, has been in development for over a year and a half.


Well, maybe this explains some of the reboots, vanishing profiles, and other mayhem. Netflix is pumping out one thing and Tivo is catching it with another. Could it be that Tivo and Netflix are flowing in different directions and we're just flailing around in the cross current?


----------



## Dan203 (Apr 17, 2000)

This seems to contradict Netflix's own blog on the subject...

http://techblog.netflix.com

They specifically mention that the UI is Javascript based although at the end they also mention something about a new rendering engine that allows them to support more hardware constrained devices and well as provide more dynamic animation on consoles. So maybe they are ditching WebKit in favor of a rendering engine with some proprietary stuff that allows them to do other things? But it sounds like the base UI is still HTML5/Javascript, so as long as that part runs in TiVo's Opera browser it should continue to work just fine.

Honestly it's hard to tell exactly what's going on from that blog post, I think we might need to wait for them to post more details before drawing any conclusions.


----------



## moyekj (Jan 24, 2006)

From the tech blog fundamentally javascript is still being used by the sound of it, so while it may not necessarily be html5 based it must be at least html + javascript and hence can run on the TiVo 20.3.7 software internal opera browser, and probably quicker than Flash on the series 4 units.


----------



## rainwater (Sep 21, 2004)

There's a bit of confusion here. What Netflix did is write their own development kit that works across platforms. So they can now share code bases on platforms that don't allow HTML5. They are certainly not ditching HTML5 as that is the language still used by most of their clients.


----------



## CloudAtlas (Oct 29, 2013)

rainwater said:


> There's a bit of confusion here. What Netflix did is write their own development kit that works across platforms. So they can now share code bases on platforms that don't allow HTML5. They are certainly not ditching HTML5 as that is the language still used by most of their clients.


I think the article clearly explains that Netflix is going from HTML5 rendered UI using Webkit (embedded or standalone Opera) to a *native* platform that runs on *all* chipsets Netflix supports so it's under their control. So the UI is rendered using API calls. As is explained below going native allows them to be able to handle voice recognition on all platforms. How would Opera handle that?

Native is what makes Apple iOS apps snappy even on a slow iPad 2.

Basically they are creating a runtime native executable instead of a webapp using html/javascript files that need to be interpreted via Webkit or Blink based runtimes. It's actually a very impressive feat by Netflix.



> Netflix decided to ditch Webkit as a rendering engine and instead build a native platform for the most common connected device chipsets out there, circumventing the various smart TV SDKs in the process. *The company even decided to develop its own voice recognition technology to make voice input consistent across platforms*


----------



## shoeboo (Nov 28, 2006)

I think I am missing the point of this thread. I already have the new updated interface that is shown in the first post on my Roamio, is this what you are worried about not getting?


----------



## Dan203 (Apr 17, 2000)

CloudAtlas said:


> I think the article clearly explains that Netflix is going from HTML5 rendered UI using Webkit (embedded or standalone Opera) to a *native* platform that runs on *all* chipsets Netflix supports so it's under their control. So the UI is rendered using API calls. As is explained below going native allows them to be able to handle voice recognition on all platforms. How would Opera handle that?
> 
> Native is what makes Apple iOS apps snappy even on a slow iPad 2.
> 
> Basically they are creating a runtime native executable instead of a webapp using html/javascript files that need to be interpreted via Webkit or Blink based runtimes. It's actually a very impressive feat by Netflix.


Like I said it's a bit confusing. They specifically mention using Javascript for the new UI, but they're a bit unclear when they mention HTML/CSS. Maybe they are drawing the UI directly, and just using the HTML5 canvas element on platforms that don't allow native code?


----------



## Philmatic (Sep 17, 2003)

CloudAtlas said:


> I think the article clearly explains that Netflix is going from HTML5 rendered UI using Webkit (embedded or standalone Opera) to a *native* platform that runs on *all* chipsets Netflix supports so it's under their control. So the UI is rendered using API calls. As is explained below going native allows them to be able to handle voice recognition on all platforms. How would Opera handle that?
> 
> Native is what makes Apple iOS apps snappy even on a slow iPad 2.
> 
> Basically they are creating a runtime native executable instead of a webapp using html/javascript files that need to be interpreted via Webkit or Blink based runtimes. It's actually a very impressive feat by Netflix.


There are two "pieces" to every deployment of Netflix. The Client application (SDK), and the Webservices/HTML5 (UI).

To support their new HTML5 interface on older platforms without a web browser, Netflix had to include a stripped-down version of the Webkit browser as part of their SDK, then have *it* open the HTML 5 interface. On newer platforms, this isn't an issue as there is plenty of resources on higher end platforms like the PS3. On older platforms however, launching WebKit would take away from the very finite resources on the device, which would cause the experience to be sluggish.

To get around having to ship WebKit, they are simply switching to a custom rendering engine that doesn't require the overhead of having WebKit instantiated. Since they don't need support for flowable layouts and other browser specific requirements, they wrote their own engine that is efficient on low powered devices.

On the Roamio, they don't need to include a copy of WebKit since Opera is already available. So Netflix uses the embedded Opera engine to load the HTML5 interface. Done and done.


----------



## SlappyMcgee (Aug 27, 2013)

I hope the update this app or do something so it doesn't cut off the end of shows. Example when watching American Dad, most of the eps have extra content while the credits are rolling. With the new netflix app it cuts off part of the ending to start the next ep.


----------



## AdamNJ (Aug 22, 2013)

SlappyMcgee said:


> I hope the update this app or do something so it doesn't cut off the end of shows. Example when watching American Dad, most of the eps have extra content while the credits are rolling. With the new netflix app it cuts off part of the ending to start the next ep.


i believe it u press a button it stops the automatic jump to the next episode...i remember there is a countdown of like 20 seconds


----------



## anthonymoody (Apr 29, 2008)

I've gone back to my PS3 for now as it still offers the profile choice whereas I'm not seeing that on the Roamio, despite the fact that it otherwise has the new UI. Weird.


----------



## MikeAndrews (Jan 17, 2002)

WTF do they require Silverlight on Mac OS X?

"Please go to /library/internet and put Silverlight in the trash. Then reinstall one the 3 versions you reloaded."

I'm tempted to cancel NetFlix. I can do fine with Amazon Prime Instant.


----------



## Dan203 (Apr 17, 2000)

They're in the process of moving away from Silverlight right now. Last I heard they were waiting for browsers to support the WebCrypto standard of HTML5 before they can make the transition. (they need encryption to appease their content partners)


----------



## CloudAtlas (Oct 29, 2013)

Netflix posted the tech follow-up on their new Netflix TV app and while it utilizes JavaScript they are not using HTML5 nor does it look like they are using HTML tags at all.



> *Our technology stack innovation
> *
> We strive to provide customers with rich, innovative content discovery and playback experiences. *All devices running the new Netflix TV app are now running our own custom JS+native graphics framework. *This framework enables us to reach our customer experience goals on the broadest set of TVs and TV-connected devices. We own the feature roadmap and tooling and can innovate with minimal constraints.
> 
> Our framework is optimized for fast 2D rendering of images, text and color fills. We render from a tree of graphics objects. The approach offers ease of use over immediate mode rendering contexts such as HTML canvas. Display property changes in these objects are aggregated then applied en masse post user interaction.


Monday, December 16, 2013
http://techblog.netflix.com/2013/12/pioneering-application-design-on-tvs-tv.html

Pioneering application design on TVs & TV-connected devices
Netflix recently launched the latest evolution of our core app for an increasing number of TVs and TV-connected devices. The app represents a unique mixture of platform and user interface design innovations. One of these innovations is that this app leverages both web standard technologies we love (like JavaScript) and a lightweight native graphics framework.

Understanding the motivations for our most recent platform advancement requires some context. In the past we've explored many different approaches. In 2009 we implemented a Flash Lite based app. Soon after, in 2010, we shifted to a WebKit based app using predominantly the QtWebKit port. Each app eventually reached a critical point where our innovation goals required us to adapt our technology stack.

*Evolution of an application platform*

We've seen WebKit mature into a full-fledged platform for application development. Advances in HTML5 and CSS3 introduced much needed semantics and styling improvements. JavaScript can utilize WebGL backed canvases, drag and drop, geolocation, and more. Increasingly WebKit will have hooks into device services allowing integration with hardware and data outside the browser sandbox. Improvements in mobile device capabilities have made many of these and future advances desirable.

We released our first QtWebKit app in 2010. Over the next 3 years our engineers shared our innovations and approaches with the WebKit community. Our platform engineers contributed our accelerated compositing implementation. Meanwhile our user interface engineers shared best practices and identified rendering optimizations deep in WebCore internals. In addition, we continue to drive standardization efforts for HTML5 Premium Video Extensions and have adopted them for desktop.

Devices running our core app on TVs and TV-connected devices subject WebKit to unique use cases. We deliver a long-lived, single-page, image and video heavy user interface on hardware with a range of CPU speed and addressable RAM, and varied rendering and network pipelines. The gamut of devices is considerable with significant variations in functionality and performance.

*Our technology stack innovation*

We strive to provide customers with rich, innovative content discovery and playback experiences. All devices running the new Netflix TV app are now running our own custom JS+native graphics framework. This framework enables us to reach our customer experience goals on the broadest set of TVs and TV-connected devices. We own the feature roadmap and tooling and can innovate with minimal constraints.

Our framework is optimized for fast 2D rendering of images, text and color fills. We render from a tree of graphics objects. The approach offers ease of use over immediate mode rendering contexts such as HTML canvas. Display property changes in these objects are aggregated then applied en masse post user interaction.

A bespoke rendering pipeline enables granular control over surfaces, the bitmap data representation of one or more graphics objects. Our surfaces are similar to accelerated compositing surfaces used by modern browsers. Intelligent surface allocation reduces surface (re)creation costs and the resulting memory fragmentation over time. Additionally we have fine-grained control of image decode activity leading up to surface creation.

As the platform matured it gained a pluggable cinematic effect pipeline with blur, desaturation, masking and tinting. These effects can be implemented very close to the metal, keeping them fast on more devices.

*While we're not running full WebKit, we are heavily leveraging JavaScriptCore.* We experimented with V8 and SpiderMonkey (with JIT), yet both were impractical without stable ports for the various chipset architectures in use by device manufacturers.

We also rely on WebKit's Web Inspector for debugging. Our framework integrates directly with a standalone Node server (and ultimately the Web Inspector) using the public remote debugging protocol. The Elements tab displays a tree of graphics objects. The Sources, Network and Timeline tabs work mostly like you'd expect. Familiar tools help while we debug the app running on a reference framework implementation or development devices.

An A/B test of our app written in this new framework performed better than our existing app. Our future is ours to define and we're not done having fun.


----------



## Dan203 (Apr 17, 2000)

So they've transitioned to a framework which requires native graphics hooks? That seems like a step backwards in compatibility. While it may give them better performance they're now going to have to maintain that graphics framework for multiple devices. HTML5 may not be as fast but at least you can create one app that will run on any device with an HTML5 rendering engine.

This could explain why people are having reboot problems with Netflix. If they are tapping directly into the GPU then it's probably pulling them outside the sandbox and allowing a crash in their code to bring down the whole machine.

I'm actually surprised the device people, including TiVo, are OK with this. They run sandboxes for a reason. Specifically so a single app crash wont bring down the whole machine.


----------



## Philmatic (Sep 17, 2003)

Wow, I stand corrected. Seems like they made one step forward by going to HTML5 and half a step back by maintaining all these private hooks.

Something seems to be working though, they were able to roll out the new interface to most devices they support, all within a few weeks, that's impressive.


----------



## Davelnlr_ (Jan 13, 2011)

Philmatic said:


> Something seems to be working though, they were able to roll out the new interface to most devices they support, all within a few weeks, that's impressive.


It wont be impressive if everyones box starts rebooting after an hour of watching Netflix... Sounds like there was a lack of beta testing if they got it out the door this quick.


----------



## moyekj (Jan 24, 2006)

Davelnlr_ said:


> It wont be impressive if everyones box starts rebooting after an hour of watching Netflix... Sounds like there was a lack of beta testing if they got it out the door this quick.


 I use Netflix almost every day on my Roamio Pro and no reboots for me thus far. Could just be luck or solid, glitch free network connection. We use Netflix so much in this household we get close to or over our Cox 250GB monthly data cap every month. Luckily Cox doesn't seem to strictly enforce the limit, at least if you are not grossly over it.


----------



## CloudAtlas (Oct 29, 2013)

Philmatic said:


> Wow, I stand corrected. Seems like they made one step forward by going to HTML5 and half a step back by maintaining all these private hooks.


Netflix does not use HTML5 with this engine. Using JavaScript they build the UI with a custom JavaScript API that utilizes the native graphics framework. Netflix is an early adopter of technology including HTML5. Unfortunately for their HTML5 based application to run properly on certain platforms, including platforms that have limited cpu, graphics and memory, they had to leave out features such as Profiles, etc.

So every platform had different features and each platform had to be maintained individually. That's why my PS3 Netflix didn't look like my Roku which was different than the Tivo. And updates to certain platforms like PS3 were often while Roku and Tivo lagged by a year.



Philmatic said:


> Something seems to be working though, they were able to roll out the new interface to most devices they support, all within a few weeks, that's impressive.


Very impressive. Better performance, same UI and features on all platforms rolled out around the same time is a win win. I mean they got it to work on a Premiere! Funny thing is they still haven't pushed out to my Roku 2.


----------



## Dan203 (Apr 17, 2000)

moyekj said:


> I use Netflix almost every day on my Roamio Pro and no reboots for me thus far. Could just be luck or solid, glitch free network connection. We use Netflix so much in this household we get close to or over our Cox 250GB monthly data cap every month. Luckily Cox doesn't seem to strictly enforce the limit, at least if you are not grossly over it.


I use it quite a bit too, and have only ever had a reboot once. And it was completely random while I was watching something and not even touching the remote, so it might have been the TiVo itself that caused the reboot.


----------



## Dan203 (Apr 17, 2000)

I swear I jinxed myself. Right after I posted this I watched the movie Flight. During the movie there was one point where my internet was acting up and it kept dropping to SD. But eventually it recovered and I finished the movie in HD. When it was over I exited the movie, rated it, and a couple other things on my recent list, then hit the TiVo button. The screen was black for a good 20 seconds and then the lights blinked and I saw "Welcome powering up".


----------



## nooneuknow (Feb 5, 2011)

Dan203 said:


> I swear I jinxed myself. Right after I posted this I watched the movie Flight. During the movie there was one point where my internet was acting up and it kept dropping to SD. But eventually it recovered and I finished the movie in HD. When it was over I exited the movie, rated it, and a couple other things on my recent list, then hit the TiVo button. The screen was black for a good 20 seconds and then the lights blinked and I saw "Welcome powering up".


The TiVo HD did this.

The TiVo Premiere did this.

Not surprisingly, the TiVo Roamio STILL does this.

It usually started off with Netflix "locking up the TiVo", but the core DVR functions kept running (just not the menus/UI), and we complained.

The fix always ends up with the TiVo rebooting, instead of locking up.

I'd prefer it just locked-up, but continued recording, and to record, until a convenient time to pull the power cord (when you know nothing will be recording). Of course I'd prefer it just worked right. But, we all should know better by now. TiVo can't handle network issues, of any sort, without something going wrong, or not working right.

Sad, that we pay for these "newer, better, improved" TiVos over and over again, and we have to use something else with every generation, like a Roku or WD TV Live product, just to watch Netflix, or risk a reboot and risk our recordings.

Why should we have to care what is scheduled to record, in deciding if we want to watch Netflix? We shouldn't have to. But, even I bought the next gen, hoping TiVo could finally deliver the "one box", that they advertised the last generation (Premiere) as.

Thank god, you can't buy anything that connects to a TV that doesn't do Netflix. If so many other products can do it, WTH is wrong with TiVo's programmers and engineers, that they can't do it.

My 2011 Sony TV has Netflix integrated in it. It always has worked, and still does. I don't care for the Sony unified interface, but it WORKS! I mean never, once, has it locked-up, or rebooted, nor has any other product I already mentioned.


----------



## JohnnyO (Nov 3, 2002)

moyekj said:


> I use Netflix almost every day on my Roamio Pro and no reboots for me thus far. Could just be luck or solid, glitch free network connection.


Similar results here with a Roamio Basic. Mine is also on a solid wired network connection. Our Comcast cable service is also very solid. I really love the new Netflix App/UI on the TiVO. Having 5.1 surround is huge. I don't have to use my Apple TV for Netflix anymore.


----------



## lessd (Jan 23, 2005)

nooneuknow said:


> The TiVo HD did this.
> 
> The TiVo Premiere did this.
> 
> ...


I seams that the TiVo/Netflix interface is very sensitive to little internet interruptions of only a few milliseconds that most people would normally never notice, this does not effect Netflix on most smart TV or other Netflix receivers.


----------



## Dan203 (Apr 17, 2000)

With the help of kmttg and moyekj I was able to confirm yesterday that the Netflix app does NOT use the Opera browser. The YouTube app does, but the Netflix app seems to use it's own thing. This probably explains why the Netflix app is capable of crashing the whole system and YouTube is not.


----------



## nooneuknow (Feb 5, 2011)

lessd said:


> I seams that the TiVo/Netflix interface is very sensitive to little internet interruptions of only a few milliseconds that most people would normally never notice, this does not effect Netflix on most smart TV or other Netflix receivers.


+1 :up: 100% agree.


----------

