Javascript – the difference between Polymer elements and AngularJS directives

angularjsjavascriptpolymer

On the Polymer Getting Started page, we see an example of Polymer in action:

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare the component by its tag. -->
    <x-foo></x-foo>
  </body>
</html>

What you will notice is <x-foo></x-foo> being defined by platform.js and x-foo.html.

It seems like this is the equivalent to a directive module in AngularJS:

angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
    $scope.text = 'hey hey!';
})
.directive('x-foo', function() {
    return {
        restrict: 'EA',
        replace: true,
        controller: 'X-Foo',
        templateUrl: '/views/x-foo.html',
        link: function(scope, controller) {
        }
    };
});

What is the difference between the two?
What problems does Polymer solve that AngularJS has not or will not?
Are there plans to tie Polymer in with AngularJS in the future?

Best Answer

You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions.

Polymer's webcomponents.js is a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella. These are:
- Custom Elements
- HTML Imports
- <template>
- Shadow DOM
- Pointer Events
- others
The left-nav in the documentation (polymer-project.org) has a page for all of these "Platform technologies". Each of those pages also has a pointer to the individual polyfill.
<link rel="import" href="x-foo.html"> is an HTML Import. Imports are a useful tool for including HTML in other HTML. You can include <script>, <link>, markup, or whatever else in an import.
Nothing "links" <x-foo> to x-foo.html. In your example, it's assumed the Custom Element definition of <x-foo> (e.g. <element name="x-foo">) is defined in x-foo.html. When the browser sees that definition, it's registered as a new element.

On to questions!

What is the difference between Angular and Polymer?

We covered some of this in our Q&A video. In general, Polymer is a library that aims to use (and show how to use) Web Components. Its foundation is Custom Elements (e.g. everything you build is a web component) and it evolves as the web evolves. To that end, we only support the latest version of the modern browsers.

I'll use this image to describe Polymer's entire architecture stack:

enter image description here

RED layer: We get tomorrow's web through a set of polyfills. Keep in mind, those libraries go away over time as browsers adopt the new APIs.

YELLOW layer: Sprinkle in some sugar with polymer.js. This layer is our opinion on how to use the spec'd APIs, together. It also adds things like data-binding, syntatic sugar, change watchers, published properties...We think these things are helpful for building web component-based apps.

GREEN: The comprehensive set of UI components (green layer) is still in progress. These will be web components that use all of the red + yellow layers.

Angular directives vs. Custom Elements?

See Alex Russell's answer. Basically, Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML. This is fundamentally a new concept on the web and something other frameworks will leverage.

What problems does Polymer solve that AngularJS has not or will not?

Similarities: declarative templates, data binding.

Differences: Angular has high level APIs for services, filters, animations, etc., supports IE8, and at this point, is a much more robust framework for building production apps. Polymer is just starting out in alpha.

Are there plans to tie Polymer in with AngularJS in the future?

They're separate projects. That said, both the Angular and Ember teams announced they'll eventually move to using the underlying platform APIs in their own frameworks.

^ This is a huge win IMO. In a world where web developers have powerful tools (Shadow DOM, Custom Elements), framework authors also can utilize these primitives to create better frameworks. Most of them currently go through great hoops to "get the job done".

UPDATE:

There's a really great article on this topic: "Here’s the difference between Polymer and Angular"

Native deep cloning

It's called "structured cloning", works experimentally in Node 11 and later, and hopefully will land in browsers. See this answer for more details.

Fast cloning with data loss - JSON.parse/stringify

If you do not use Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types within your object, a very simple one liner to deep clone an object is:

JSON.parse(JSON.stringify(object))

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  re: /.*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

See Corban's answer for benchmarks.

Reliable cloning using a library

Since cloning objects is not trivial (complex types, circular references, function etc.), most major libraries provide function to clone objects. Don't reinvent the wheel - if you're already using a library, check if it has an object cloning function. For example,

lodash - cloneDeep; can be imported separately via the lodash.clonedeep module and is probably your best choice if you're not already using a library that provides a deep cloning function
AngularJS - angular.copy
jQuery - jQuery.extend(true, { }, oldObject); .clone() only clones DOM elements
just library - just-clone; Part of a library of zero-dependency npm modules that do just do one thing. Guilt-free utilities for every occasion.

ES6 (shallow copy)

For completeness, note that ES6 offers two shallow copy mechanisms: Object.assign() and the spread syntax. which copies values of all enumerable own properties from one object to another. For example:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax

Javascript – What’s the difference between using “let” and “var”

Scoping rules

The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

The reason why let keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

Take a look at this example from another stackoverflow question:

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

My value: 3 was output to console each time funcs[j](); was invoked since anonymous functions were bound to the same variable.

People had to create immediately invoked functions to capture correct values from the loops but that was also hairy.

Hoisting

While variables declared with var keyword are hoisted (initialized with undefined before the code is run) which means they are accessible in their enclosing scope even before they are declared:

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a ReferenceError. The variable is said to be in "temporal dead zone" from the start of the block until the initialization is processed.

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

Creating global object property

At the top level, let, unlike var, does not create a property on the global object:

var foo = "Foo";  // globally scoped
let bar = "Bar"; // not allowed to be globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

Redeclaration

In strict mode, var will let you re-declare the same variable in the same scope while let raises a SyntaxError.

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.

let bar = "bar1"; 
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared