What is the difference between Polymer elements and AngularJS directives?
JavascriptAngularjsPolymerJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions.
-
Polymer's
webcomponents.jsis 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:
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"
Solution 2 - Javascript
For your question:
> Are there plans to tie Polymer in with AngularJS in the future?
From the official twitter account of AngularJS : "angularjs will use polymer for its widgets. It's win-win"
source : https://twitter.com/angularjs/status/335417160438542337
Solution 3 - Javascript
In this video 2 guys from AngularJS talked about differences and similarities about this two frameworks (AngularJS 1.2 and Beyond).
These links will bring you to the correct Q&A's:
Solution 4 - Javascript
1 & 2) Polymer components are scoped because of their hidden tree in the shadow dom. That means that their style and behaviour cannot bleed out. Angular is not scoped to that particular directive you create like a polymer web component. An angular directive could possibly conflict with something in your global scope. IMO the benefit you will get from polymer is what I explained.. modular components that have scoped css & JavaScript to that particular component that nothing can touch. Untouchable DOM!
Angular directives can be created so that you can annotate an element with several pieces of functionality. In Polymer web components that is not the case. If you want to combine functionality of components you include two components into another component (or wrap them in another component) or you can extend an existing component. Remember the main difference still is that each component is scoped in polymer web components. You can share css & js files across several components or you can inline them.
3) Yes, Angular plans on incorporating polymer in version 2+ according to Rob Dodson and Eric Bidelman
It's funny how nobody here has mentioned the word scope. I think that is one of the major differences.
There are many differences, but they also have a heck of a lot in common when it comes to creating modular lego like pieces of functionality for an app. I think it's safe to say that Angular would be the application framework and polymer could one day live in the same app along side directives with the major difference being scope but polymer may be a replacement for a lot of your current directives. But I see no reason why Angular could not work as-is and include polymer components as well.
Reading through the answers again while I write this, I noticed that Eric Bidelman(ebidel) did kind of cover that in his answer:
"Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML."
To give credit where credit is due, I got my answers from listening to many interviews with Rob Dodson and Eric Bidelman. But I feel the answer wasn't worded to give this guy's question the understanding that he wanted. With that said, I think I have touched on the answer he is looking for, but in no way do I possess more information about the subject than Rob Dodson and Eric Bidelman
Here are my main sources for the information I have gathered.
JavaScript Jabber - Polymer with Rob Dodson and Eric Bidelman
Solution 5 - Javascript
> Polymer is a Web Components shim
-
"Web Components" is a new set of standards that is enveloped by HTML 5 designed to provide reusable building blocks for web applications.
-
Browsers are at various states of implementing the "Web Components" specification, and therefore it's too early to write HTML using Web Components.
-
But alas! Polymer to the rescue! Polymer is a library that provides an abstraction layer to your HTML code, allowing it to make use of the Web Components API as if it were fully implemented in all browsers. This is called poly-filling, and the Polymer team distributes this library as webcomponents.js. This used to be called platform.js btw.
But Polymer is more than a polyfill library for web components...
> Polymer also provides open and reusable Web Component building blocks via Elements
All elements can be customized and extended. These are used as building blocks for anything from social widgets to animation to web API clients.
> Polymer is not a web application framework
-
Polymer is more of a library than a framework.
-
Polymer does not have support for things like routes, application scope, controllers, etc.
-
But it does have two-way binding, and using components "feels" just like using Angular directives.
-
Although there are some overlaps between Polymer and AngularJS, they are not the same. In fact, the AngularJS team has mentioned utilizing Polymer libraries in upcoming releases.
-
Also note that Polymer is still considered "bleeding edge" while AngularJS is stabilizing.
-
It will be interesting to watch both of these Google projects evolve!
Solution 6 - Javascript
I think from a practical perspective, in the end the template feature of angular directives, and the web component methodology leveraged by polymer both accomplish the same task. The major differences as I can see it are that polymer leverages web APIs to include bits of HTML, a more syntactically correct, and simplistic way of achieving what Angular does programatically as it renders templates. Polymer is however as has been stated, a small framework for building declarative and interactive templates using components. It is made available for UI design purposes only, and is only supported in the most modern browsers. AngularJS is a complete MVC framework designed to make web applications declarative by use of data bindings, dependencies, and directives. They're two completely different animals. To your question, it seems to me at this point you'll get no major benefit from using polymer over angular, except having dozens of pre built components, however that would still require you to port those over to angular directives. In the future however, as the web APIs become more advanced, web components will completely remove the need to programatically define and build templates as the browser will be able to simply include them in a similar way to how it handles javascript or css files.
Solution 7 - Javascript
The MVVM (model-view, view-model) that Angular offers is not a concern that Polymer aims at solving. The composable & re-usable nature that Angular directives give to you with (a custom tag + associated logic combination) is a more sane comparison when you consider comparing Angular and Polymer. Angular is and will remain a broader purpose-serving framework.
Solution 8 - Javascript
> What is the difference between the two?
To a user: Not much. You can build awesome apps with both.
To a developer: They use way different syntax so either solution has a fairly steep learning curve. Angular has been around longer and has a HUGE community so you'd be hard pressed to find problems that haven't been solved.
To an architect: Very different. Angular is an application framework responsible for all aspects of your life. It even has directives vertically integrated in case you want component like features. Polymer on the other hand is more like pay-as-you-go. You want a modal, sure thing, you want an interactive widget, no problem, you want route handling, we can do that to. Polymer is also more portable in that Angular requires an Angular app to reuse directives. The idea with Polymer is be more moduler and will work in other apps, even Angular apps.
> What problems does Polymer solve that AngularJS has not or will not?
Polymer is an approach to head towards taking advantage of the new web components standards. If features like custom elements, Shadow DOM, and HTML imports are supported locally, it would be foolish not to take advantage of them. Currently most web component features are not widely supported (current status) so Polymer acts as shim or a bridge. Kinda like a polyfill (in fact it does use polyfills).
> Are there plans to tie Polymer in with AngularJS in the future?
We have been using Angular and Polymer together for over a year. Part of the decision to do this was based on promises made directly by the Polymer team to us that interoperability be there. We have given up on that idea. We are now moving towards using only Polymer.
To do it over again we probably would not have made the move to use Polymer at all, instead wait for it to mature. That being said Polymer has it's pros (some quite good) and cons (some of which are quite frustrating) but I think that is a discussion for another thread.
Solution 9 - Javascript
Angularjs directive is an approach for making custom elements. you can define new custom tags with custom attributes. Polymer can also do this but it'll do in an interesting and more simple way.Polymer actually is not a framework it's just a library.but a powerful and amazing library that you can fall in love with it (like me). Polymer let you learn the native web components technology made by w3c, that web browsers eventually implementing it.web component is the future technology, but polymer let you use that technology right now.Google Polymer is a library that provides syntactic sugar and polyfills for building elements and applications with web components.Remember that I said polymer is not a framework and it's a library.But when you're using Polymer, actually your framework is DOM.this post was about angular js ver 1 and polymer and I has been worked with both of them is my projects and I personally prefer polymer over angularjs. But Angular version 2 is completely different in compare of angularjs ver 1.directive in angular 2 has a different meaning.
Solution 10 - Javascript
Angular directives are conceptually similar to Custom Elements but they are implemented without the use of the Web Components APIs. Angular directives are a way to build custom elements, but Polymer and the Web Components specification are the standards-based way to do it.
polymer-element:
<polymer-element name="user-preferences" attributes="email">
<template>
<img src="https://secure.user-preferences.com/path/{{userID}}" />
</template>
<script>
Polymer('user-preferences', {
ready: function() {
this.userID= md5(this.email);
}
});
</script>
</polymer>
Angular directive:
app.directive('user-preferences', ['md5', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.userID= md5(attrs.email);
},
template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
};
}]);