Polymer vs Angular 2

What is Polymer?

  • Effectively not a framework but a sugary and tasty syntax on top of web components.
  • Leverages polyfills for non-evergreen browsers: webcomponents.js, polyfills.
  • Heavily thinks of the DOM as the framework and aims to leverage as much as possible from the DOM.
    • Should be fairly familiar to write if HTML is your forte.


What is Angular 2?

  • "One framework" for mobile and desktop applications.
    • Mobile first.
  • Aims to fulfill the following promise: Fast, Mobile and Flexible.
  • Built of top of TypeScript and internally fully works with TS.
  • Not directly, even though both are written by engineers at Google.
  • There are rumors about web component support for A2.
    • Extremely finicky "hax" currently available through full shadow DOM and polyfills.
  • Comparing the two from learning perspective.



<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="foo-bar">
        <h1>[[ title ]]</h1>
        <h2>[[ hero.name ]] details!</h2>
        <div><label>id: </label>[[ hero.id ]]</div>
            <label>name: </label>
            <!-- Notice different binding syntax to native elements -->
            <div><input type="text" value="{{hero.name::change}}"></div>

            is: "foo-bar",
            properties: {
                title: {
                    type: String,  
                    value: 'Tour of Heroes'
                hero: {
                    type: Object
                    value: {
                        id: 1,
                        name: 'Windstorm'

Angular 2

import { Component, View, bootstrap, NgFor, NgIf } from 'angular2/angular2';

interface Hero {
  id: number;
  name: string;

    selector: 'foo-bar',
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
            <label>name: </label>
            <div><input type="text" [(ngModel)]="hero.name"></div>
    directives: []
export class FooBar {
    public title = 'Tour of Heroes';
    public hero: Hero = {
        id: 1,
        name: 'Windstorm'

Which one should I choose?

  • Best bet is to get familiar with both. Little bit of that and little bit of this.
  • A2 is still in Beta and no proven traction by developers.
  • Polymer is in its first production ready version (1.x) and is heavily used internally by Google. Especially involved in the material design side of things.
  • I personally find working with Polymer easy and extremely satisfying. This feels like the right way of composing and doing things.


  • Note: look up "classless object-oriented programming in JavaScript".

Angular 2

  • A2 is fairly verbose as it uses class decorators and other TypeScript features heavily.
    • Added benefit of being typed by nature. This is amazing!
  • Uses sensible module loading internally to resolve dependencies.
  • No more controllers. Controllers are gone! Follows similar route with ReactJS in that sense.
    • Components and Directives are the "core" now.
  • No more satanic $digest issues! No circular dependencies and heavily wants to have unidirectional data flow.
    • Flux? "Yeah, baby, yeah".
  • No more $scope!
  • A2 is closer to a library than a framework in my honest opinion but it still is a framework.. ugh.. what?


  • Sites / applications are commonly built starting from the smallest components and building towards bigger and more complex components.
  • Complex components are mainly a declarative collection of smaller components.
  • The higher you work in the hierarchy of the application, the more declarative your work should be.
  • Write underlying base components once and reuse! Do not write the same thing twice.
  • Typing available. Not as heavily endorsed as A2's but nothings stopping you.

In conclusion..

  • Both Polymer and A2 are extremely interesting and I'm guessing they both will be widely used in 2016.
  • They are both definitely something you should aim to get under your belt.

The takeaway from all this?

  • Please, go full TypeScript and drop JavaScript completely.
  • Don't focus on the frameworks but make sure you understand the underlying concepts and moving from a framework to a framework should be fairly trivial.

Thank you!

Questions, comments?