React, etc. Tech Stack

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

Mixing Angular 2 and Polymer Web Components

Single page application frameworks written in JavaScript will need to work well will emerging web standards like Web Components. The Finnish company Vaadin has created a package that enables this with Angular 2 and the Polymer library, both from Google.

For a number of years front end JavaScript developers had a de-facto universal API in the form of jQuery. Thousands of jQuery plugins are available and using multiple of them leads to little waste as they all share jQuery as the foundation. The jQuery API was (and still is) so simple that intuitive, but the world has moved forward.

With Angular 2, React, Vue as well as native Web Components being a common sight on the web, there is a real danger of being essentially rounded in a single framework or pay a significant overhead for downloading multiple frameworks. Perhaps mixing React and Angular2 on the same site is not feasible, but with YouTube adopting Web Components you're bound to be mixing React or Angular with those.

To enable interoperability the the angular2-polymer package is a directive factory that aims to bridge the gap between using Angular 2 and Web Components using the Polymer Library. The implementation essentially scrapes the Polymer 2 element API to define the outputs and inputs (data inlets and outlets in Angular2 slang) as well as observes the DOM structure.

As usual the package is available for download on NPM and a comprehensive tutorial based on the Tour of Heroes tutorial:

For this purpose, we show how to create a staff management application similar to the Tour of Heroes example. But unlike in the Angular 2 Tour of Heroes, instead of implementing the UI elements in place, we will use the ready-made UI elements that are built on top of the Web Components technology stack. The resulting application will have a nice-looking mobile-first Material designed UI.
Angular 2 with Polymer Elements Tutorial

If you're into Angular2 or Polymer (or both!), then this is definitely worth checking out. As usual, the package is available for download on NPM and the source code is available on GitHub.

Written by Jorgé on Wednesday November 30, 2016

Permalink -

« React vs. Svelte, the JavaScript build-time framework - Angular 4 coming in 2017, to be backwards compatible with Angular 2 »