Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer Elements vs Angular Directives

I know that this has been asked previously, most notably here.

However, the answers seem to me quite abstract and I find my self quite confused in practice.

The .vs answer seem to be:

Polymer (and more correctly, Shadow DOM) create the ability to not only compose bits of HTML, but to encapsulate them as well. This is a fundamentally new capability and one that can be used with any other templating system or framework to enhance their power.

Which doesn't really tell me all that much, as far as I understand angular directives do pretty much the same thing in practice, although polymer elements might be a bit more efficient performance wise. I'm sure that "encapsulate" has some kind of deeper meaning here in this context that I am not comprehending.

Let's say I'm developing an AngularJS web application. When, how and why would I use polymer elements over angular directives?

Would polymer elements be used instead of angular directives, if so when would one use one over the other? Or would angular directives be implemented in terms of polymer elements?

like image 533
ronag Avatar asked Dec 18 '13 14:12

ronag


People also ask

What is the difference between angular and Polymer?

Angular is an application level framework and Polymer is the library to create web components. Angular development is mainly used to build CRUD apps, although Polymer Web component too could be arranged to develop the application.

What is angular Polymer?

Angular is a complete framework for building webapps, whereas Polymer is a library for creating Web Components. Those components, however, can then be used to build a webapp. Angular has high-level APIs for things like services, routing, server communication and the like.

Is Polymer is a JavaScript framework?

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

What are Web Components in angular?

Web components are a set of browser APIs that enable developers to create custom and reusable HTML tags that can be used in web apps just like standard HTML tags. Since Web components are built on top of standards, they can work across all modern web browsers.


1 Answers

You're really asking two different things, "What's the differences when implementing/building components vs. using one?"

Consuming components

In the foreseeable future, you use both together. It doesn't matter what technology/library a web component is built with or what vendor makes it. Simply bower install (or similar) and use the components that make sense for your app.

What matters is that everything will be DOM, meaning elements will work seamlessly together. The interop story is great. Here's a POC of an Angular directive data-bound to a Polymer element: http://ebidel.github.io/polymer-experiments/polymer-and-angular/together/


Building components

Building elements is a different story at the moment. Polymer's approach is to center itself around all things web components. Angular was built before the time of web components, so things are a bit different.

  • Angular directives are a way to build custom tags/components. Polymer and the Custom elements specification is the standards-based way to do that.

  • How you build a Polymer-element is extremely declarative. Angular directives are mostly defined in JS (with the ability to reference a template file).

  • Because Polymer elements using Custom elements, inheritance is simple. I'm not sure of the inheritance story in Angular directives/

  • Polymer elements use Shadow DOM. This gives them encapsulation of DOM and CSS. Styles you define in your element don't bleed out and page styles don't bleed in. I could be wrong, but Angular directives do not have any notion of style encapsulation. It's a hard problem that the Shadow DOM spec gives us for free.

  • The data binding concepts are similar

would angular directives be implemented in terms of polymer elements

  • Eventually, Angular will adopt some of the evolving Web Component standards. This will be true for all frameworks. Ember just made their 2014 plans known, which include web components. For example, Angular.dart already uses Shadow DOM for directives.

  • Polymer elements (custom elements) are interoperable with other custom elements by default. This is because they're just DOM. DOM elements work well together :)

Hope this helps!

like image 186
ebidel Avatar answered Sep 18 '22 23:09

ebidel