javascript angularjs polymer

javascript - Elementos poliméricos vs directivas angulares



polymer material design (1)

Sé que esto se ha preguntado anteriormente, especialmente here .

Sin embargo, las respuestas me parecen bastante abstractas y me encuentro bastante confundido en la práctica.

La respuesta de .vs parece ser:

Polymer (y más correctamente, Shadow DOM) crea la capacidad no solo de componer bits de HTML, sino también de encapsularlos. Esta es una capacidad fundamentalmente nueva y que se puede utilizar con cualquier otro sistema o marco de plantillas para mejorar su poder.

Lo que realmente no me dice mucho, en la medida en que entiendo que las directivas angulares hacen prácticamente lo mismo en la práctica, aunque los elementos poliméricos pueden ser un poco más eficientes en cuanto a rendimiento. Estoy seguro de que "encapsular" tiene algún tipo de significado más profundo aquí en este contexto que no estoy comprendiendo.

Digamos que estoy desarrollando una aplicación web AngularJS. ¿Cuándo, cómo y por qué usaría elementos poliméricos sobre directivas angulares?

¿Se usarían elementos de polímero en lugar de directivas angulares? De ser así, ¿cuándo se usaría uno sobre el otro? ¿O serían implementadas las directivas angulares en términos de elementos poliméricos?


Realmente estás preguntando dos cosas diferentes: "¿Cuáles son las diferencias al implementar / construir componentes en lugar de usar uno?"

Componentes de consumo

En el futuro previsible, usen los dos juntos . No importa con qué tecnología / biblioteca se construya un componente web o qué proveedor lo haga. Simplemente bower install (o similar) y use los componentes que tengan sentido para su aplicación.

Lo que importa es que todo será DOM, lo que significa que los elementos funcionarán perfectamente juntos. La historia de interoperabilidad es genial. Aquí hay un POC de una directiva angular enlazada a un elemento de polímero: http://ebidel.github.io/polymer-experiments/polymer-and-angular/together/

Componentes de construcción

Construir elementos es una historia diferente en este momento. El enfoque del polímero es centrarse en todos los componentes web de las cosas. Angular se construyó antes del tiempo de los componentes web, por lo que las cosas son un poco diferentes.

  • Las directivas angulares son una forma de crear etiquetas / componentes personalizados. El polímero y la especificación de elementos personalizados es la forma basada en estándares para hacerlo.

  • Cómo construir un elemento de polímero es extremadamente declarativo. Las directivas angulares se definen principalmente en JS (con la capacidad de hacer referencia a un archivo de plantilla).

  • Debido a que los elementos de polímero utilizan elementos personalizados, la herencia es simple. No estoy seguro de la historia de herencia en directivas angulares /

  • Los elementos poliméricos utilizan Shadow DOM. Esto les da la encapsulación de DOM y CSS. Los estilos que define en su elemento no se desangran y los estilos de página no se desangran. Podría estar equivocado, pero las directivas angulares no tienen ninguna noción de encapsulación de estilo. Es un problema difícil que la especificación de Shadow DOM nos da gratis.

  • Los conceptos de enlace de datos son similares.

Se implementarían directivas angulares en términos de elementos poliméricos.

  • Eventualmente, Angular adoptará algunos de los estándares de componentes web en evolución. Esto será cierto para todos los marcos. Ember acaba de dar a conocer sus planes de 2014 , que incluyen componentes web. Por ejemplo, Angular.dart ya usa Shadow DOM para las directivas.

  • Los elementos de polímero (elementos personalizados) son interoperables con otros elementos personalizados de forma predeterminada. Esto es porque son solo DOM. Los elementos DOM funcionan bien juntos :)

¡Espero que esto ayude!