Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

YouTube is being rebuilt with Web Components & Polymer

YouTube is the undisputed video platform for the web. Back in 2005 when it launched it revolutionized online video with Flash (yes, that Flash) and was acquired by Google in October 2006.

Casual video viewers as well as amateur and professional content creators, everybody uses YouTube. From Flash to HTML5 video the technology has evolved. Now YouTube going for Web Components.

Youtube continues to set direction for online video and it's technical implementation carries weight. Now the team is rebuilding the Desktop and Mobile experiences for browser with Web Components. This may come as a surprise for some, given that Google has also invested heavily in their Angular 2 JavaScript framework.

The Web Component initiative is essentially a collection of four separate standards; Templates, HTML imports, Custom elements, Shadow DOM. Together aim to enable developers to natively extend browser behaviour with new tags. Polymer, a Google project, on the other hand is a polyfill that adds a compatibility layer on browsers that enable them to support Web Components where native implementation is not yet complete.

The Polymer project released a developer preview in 2014, production ready 1.0 release in 2015 and in late 2016/2017 plan to launch a major version 2.0. During this time native support for the underlying components for web components have matured. With Apple, Google, Microsoft and Mozilla all bringing support their browsers, the need for polyfilling is gradually reducing. Adoption is a given with ever green browsers we've got today.

Web Components play nice with JavaScript components 

So after years and years of fizzling, the Web Components standard finally seems to emerge as a feasible option for web developers to build web sites and applications on top of. In the meanwhile a lot of lessons have been learned by the wider web development community, but sadly we still don't have universal drop-in components to easily use across sites and applications. But this is why standards are for.

Recently at the Polymer Summit 2016 event it was announced that YouTube already uses Web Components and Polymer in some of it's properties like YouTube Gaming. The significant news, however, is that the main web properties are being rebuilt to adopt it as well. This is huge news, since the site has over a billion active users that well serves as dog-fooding:

I am extremely excited to be be able to announce for the first time ever that Polymer is used in YouTube. YouTube is one of Google's biggest products with over a billion users is now building their next generation of Mobile and Desktop sites all on Polymer.
- Taylor Savage

The complete keynote, including this announcement can be seen on YouTube ('duh!) here:

The intermediary JavaScript solutions we've built in place of standard browser native functionality won't go away overnight. Concepts and best practises from React, Vue and Angular 2 and other JavaScript-based UI component implementations can be applied to native web component development, especially regarding dataflow and state management. These won't be replaced by Web Components completely, as some of them no longer even target the DOM exclusively.

But rest assured, whether your application is built on Angular or React... You'll be likely to have web components in the mix soon enough as embedded YouTube video edges towards standards.

Learn more:

Written by Jorgé on Tuesday October 25, 2016

Permalink - Tags: angular, javascript, react, vue, webcomponents

« Choosing between Angular, React and Vue.js? You can't go wrong. - React helps use WordPress code in other Open Source projects, note GPL license »