¿Cuál es la diferencia entre los elementos Polymer y las directivas AngularJS?

524

En la página de inicio de Polymer , vemos un ejemplo de Polymer en acción:

<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>

Lo que notará está <x-foo></x-foo>siendo definido por platform.jsy x-foo.html.

Parece que este es el equivalente a un módulo directivo en 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) {
        }
    };
});

  • ¿Cuál es la diferencia entre los dos?

  • ¿Qué problemas resuelve Polymer que AngularJS no tiene o no quiere?

  • ¿Hay planes para vincular Polymer con AngularJS en el futuro?

javascript  angularjs  polymer 
— Dan Kanze
fuente
Usefule información aquí 2ality - Los roles de AngularJS y Polymer
— LCJ

Respuestas:

520

No eres el primero en hacer esta pregunta :) Permíteme aclarar un par de cosas antes de responder a tus preguntas.

  1. Polymer's webcomponents.jses una biblioteca que contiene varios polyfills para varias API de W3C que se encuentran bajo el paraguas de Web Components. Estos son:

    • Elementos personalizados
    • Importaciones HTML
    • <template>
    • Shadow DOM
    • Eventos de puntero
    • otros

    El navegador de la izquierda en la documentación ( polímero-proyecto.org ) tiene una página para todas estas "Tecnologías de plataforma". Cada una de esas páginas también tiene un puntero al polyfill individual.

  2. <link rel="import" href="x-foo.html">es una importación HTML. Las importaciones son una herramienta útil para incluir HTML en otro HTML. Puede incluir <script>, <link>marcado o cualquier otra cosa en una importación.

  3. Nada "enlaza" <x-foo>a x-foo.html. En su ejemplo, se supone que la definición de elemento personalizado de <x-foo>(p <element name="x-foo">. Ej. ) Se define en x-foo.html. Cuando el navegador ve esa definición, se registra como un nuevo elemento.

¡A las preguntas!

¿Cuál es la diferencia entre Angular y Polymer?

Cubrimos algo de esto en nuestro video de preguntas y respuestas . En general, Polymer es una biblioteca que tiene como objetivo usar (y mostrar cómo usar) componentes web. Su base es Elementos personalizados (por ejemplo, todo lo que construye es un componente web) y evoluciona a medida que evoluciona la web. Con ese fin, solo admitimos la última versión de los navegadores modernos.

Usaré esta imagen para describir la pila de arquitectura completa de Polymer:

ingrese la descripción de la imagen aquí

Capa ROJA: Obtenemos la web del mañana a través de un conjunto de polyfills. Tenga en cuenta que esas bibliotecas desaparecen con el tiempo a medida que los navegadores adoptan las nuevas API.

Capa AMARILLA: espolvoree un poco de azúcar con polímero.js. Esta capa es nuestra opinión sobre cómo usar las API especificadas, juntas. También agrega cosas como enlace de datos, azúcar sintáctica, observadores de cambios, propiedades publicadas ... Creemos que estas cosas son útiles para crear aplicaciones basadas en componentes web.

VERDE: El conjunto completo de componentes de la interfaz de usuario (capa verde) todavía está en progreso. Estos serán componentes web que usan todas las capas rojas + amarillas.

¿Directivas angulares frente a elementos personalizados?

Ver la respuesta de Alex Russell . Básicamente, Shadow DOM permite componer bits de HTML, pero también es una herramienta para encapsular ese HTML. Este es fundamentalmente un nuevo concepto en la web y algo que otros marcos aprovecharán.

¿Qué problemas resuelve Polymer que AngularJS no tiene o no quiere?

Similitudes: plantillas declarativas, enlace de datos.

Diferencias: Angular tiene API de alto nivel para servicios, filtros, animaciones, etc., es compatible con IE8 y, en este punto, es un marco mucho más robusto para crear aplicaciones de producción. El polímero recién comienza en alfa.

¿Hay planes para vincular Polymer con AngularJS en el futuro?

Son proyectos separados . Dicho esto, los equipos de Angular y Ember anunciaron que eventualmente cambiarán a usar las API de la plataforma subyacente en sus propios marcos.

^ Esta es una gran victoria de la OMI. En un mundo donde los desarrolladores web tienen herramientas poderosas (Shadow DOM, Elementos personalizados), los autores de marcos también pueden utilizar estas primitivas para crear mejores marcos. La mayoría de ellos actualmente pasan por grandes aros para "hacer el trabajo".

ACTUALIZAR:

Hay un gran artículo sobre este tema: " Aquí está la diferencia entre Polymer y Angular "

— ebidel
fuente
46
El punto importante aquí, es que Polymer se trata de llevar la Web tal como la conocemos, específicamente al mostrar cómo los Componentes Web pueden hacer que la Web sea abierta, compartible y extensible. AngularJS (y Ember para el caso) se trata de crear un marco que aproveche las mejores partes del navegador para crear aplicaciones receptivas. Una vez que los navegadores soportan mejor los componentes web, Angular y otros marcos pueden construir sobre ellos, para hacer que el código del marco sea más pequeño y las aplicaciones más simples. Por eso es Win-Win para todos.
— Schmuli
31
¿Todavía no entiendo cuál es la diferencia práctica entre Polymer Custom Elements y Angular Directives? ¿Por qué usaría elementos personalizados de polímero en lugar de directivas angulares en un proyecto angular?
— Ronag
3
Por lo tanto, los proyectos existentes de Angular y Ember se beneficiarán en última instancia del uso de las API de la plataforma subyacente. Pero cuando los navegadores soportan mejor los componentes web, ¿habría algún beneficio en seguir usando Angular en nuevos proyectos, o se vuelve efectivamente redundante?
— panqueque
8
Creo que es blanco y negro: quédate con AngularJS para producción y juega con Polymer en tu tiempo libre para que te familiarices con él cuando llegue el momento.
— Thdoan
31
Es una buena descripción de Polymer.js, pero de ninguna manera responde la pregunta a fondo ...
— Christoph
57

Para su pregunta:

¿Hay planes para vincular Polymer con AngularJS en el futuro?

Desde la cuenta oficial de Twitter de AngularJS: "angularjs usará polímero para sus widgets. Es ganar-ganar"

fuente: https://twitter.com/angularjs/status/335417160438542337

— loïc m.
fuente
2
@NREZ Ok, no respondo al título de la publicación, pero una de las preguntas dentro de la publicación Mi respuesta es solo para la tercera pregunta: Are there plans to tie Polymer in with AngularJS in the future? supongo que es una buena idea citar la publicación original del equipo de AngularJS que no crees ?
— loïc m.
Sí, seguro que su punto es válido ... Solo que la descripción podría haber sido mejor ... Como lo hice esta vez y estoy seguro de que la próxima vez también lo hará ...
— NREZ
si seguro. gracias por tu actualización :) (acabo de empezar a usar stackoverflow, así que no veo tu actualización antes de responderte ...)
— loïc m.
Entonces, ¿cambiaron sus mentes? Parece que no puedo encontrar dónde están usando el polímero.
— theblang
No creo que esta sea una respuesta.
— astroanu
19

1 y 2) Los componentes de polímero tienen un alcance debido a su árbol oculto en la sombra dom. Eso significa que su estilo y comportamiento no pueden desangrarse. Angular no tiene el alcance de esa directiva particular que crea como un componente de banda de polímero. Una directiva angular posiblemente podría entrar en conflicto con algo en su alcance global. En mi opinión, el beneficio que obtendrá del polímero es lo que le expliqué ... componentes modulares que tienen un alcance CSS y JavaScript para ese componente en particular que nada puede tocar. Intocable DOM!

Se pueden crear directivas angulares para que pueda anotar un elemento con varias piezas de funcionalidad. En componentes web Polymer ese no es el caso. Si desea combinar la funcionalidad de los componentes, incluya dos componentes en otro componente (o envuélvalos en otro componente) o puede extender un componente existente. Recuerde que la principal diferencia aún es que cada componente tiene un alcance en componentes de banda de polímero. Puede compartir archivos css & js en varios componentes o puede incorporarlos.

3) Sí, Angular planea incorporar el polímero en la versión 2+ de acuerdo con Rob Dodson y Eric Bidelman

Es curioso cómo nadie aquí ha mencionado la palabra alcance. Creo que esa es una de las principales diferencias.

Hay muchas diferencias, pero también tienen mucho en común cuando se trata de crear lego modular como piezas de funcionalidad para una aplicación. Creo que es seguro decir que Angular sería el marco de la aplicación y el polímero podría algún día vivir en la misma aplicación junto con las directivas, con la mayor diferencia siendo el alcance, pero el polímero puede ser un reemplazo para muchas de sus directivas actuales. Pero no veo ninguna razón por la que Angular no pueda funcionar como está e incluir componentes de polímero también.

Mientras leía las respuestas nuevamente mientras escribía esto, noté que Eric Bidelman (ebidel) cubría eso en su respuesta :

"Shadow DOM permite componer bits de HTML, pero también es una herramienta para encapsular ese HTML".

Para dar crédito donde se debe, obtuve mis respuestas al escuchar muchas entrevistas con Rob Dodson y Eric Bidelman . Pero siento que la respuesta no fue redactada para darle a la pregunta de este chico la comprensión que quería. Dicho esto, creo que he tocado la respuesta que está buscando, pero de ninguna manera poseo más información sobre el tema que Rob Dodson y Eric Bidelman.

Aquí están mis principales fuentes de información que he reunido.

JavaScript Jabber - Polímero con Rob Dodson y Eric Bidelman

Comprar Talk Show - Componentes web con Rob Dodson

— Eric Bishard
fuente
1
Entonces, si lo uso normalize.css, ¿no se normaliza dentro de la sombra dom? ¿Entonces necesito normalizar por separado cada uno de esos componentes, sin una forma de hacerlo una vez? ¿Es una cosa buena?
— Dmitri Zaitsev
1
No piense en Shadow DOM como un IFRAME. Y uso esta comparación libremente porque no es un IFRAME. Pero en un IFRAME, tendría su propio documento que no se ve afectado por las páginas CSS y JavaScript del documento principal. Esta es una cosa muy buena. Significa que puede garantizar que un componente específico se ejecutará según lo previsto y que la página principal no lo interferirá. Sin embargo, si el DOM sombra quería usar DOM desde la página principal, puede hacerlo. Pero ese es otro tema.
— Eric Bishard
1
Ya veo, sí, CSS es un lenguaje con fugas, pero en la mayoría de los casos hay una solución simple (aunque no perfecta) mediante el uso de prefijos de clase únicos dentro del DOM que desea aislar. Y, por supuesto, evitando los selectores de etiquetas e id, lo cual no es una buena práctica de todos modos. Por otro lado, algunas de esas declaraciones es posible que desee filtrar (como normalize.cssu otras hojas basadas en etiquetas), que de nuevo se puede lograr fácilmente sin Shadow DOM. Agradablemente no es un aislamiento perfecto, sino un problema. funciona en el 95% de los casos de uso, al menos en los que puedo pensar.
— Dmitri Zaitsev
2
Dicho esto, debo decir que veo el mérito de un aislamiento adecuado, y encuentro que su respuesta proporciona una buena explicación.
— Dmitri Zaitsev
6

Polymer es una cuña de componentes web

  • " Web Components " es un nuevo conjunto de estándares que está envuelto por HTML 5 diseñado para proporcionar bloques de construcción reutilizables para aplicaciones web.

  • Los navegadores se encuentran en varios estados de implementación de la especificación de "Componentes web" y, por lo tanto, es demasiado pronto para escribir HTML utilizando Componentes web.

  • ¡Pero Ay! Polímero al rescate! Polymer es una biblioteca que proporciona una capa de abstracción a su código HTML, lo que le permite hacer uso de la API de componentes web como si estuviera completamente implementada en todos los navegadores. Esto se llama relleno de polietileno , y el equipo de Polymer distribuye esta biblioteca como webcomponents.js . Esto solía llamarse platform.js por cierto.

Pero Polymer es más que una biblioteca de polyfill para componentes web ...

Polymer también proporciona bloques de construcción de componentes web abiertos y reutilizables a través de Elements

ingrese la descripción de la imagen aquí

Todos los elementos se pueden personalizar y ampliar. Estos se utilizan como bloques de construcción para cualquier cosa, desde widgets sociales hasta animación y clientes de API web.

Polymer no es un marco de aplicación web

  • Polymer es más una biblioteca que un framework.

  • Polymer no tiene soporte para cosas como rutas, ámbito de aplicación, controladores, etc.

    • Pero tiene un enlace bidireccional, y el uso de componentes "se siente" al igual que las directivas angulares.

  • Aunque hay algunas superposiciones entre Polymer y AngularJS, no son lo mismo. De hecho, el equipo de AngularJS ha mencionado la utilización de bibliotecas de Polymer en las próximas versiones.

  • También tenga en cuenta que Polymer todavía se considera "borde de sangrado" mientras AngularJS se estabiliza.

  • ¡Será interesante ver evolucionar estos dos proyectos de Google!

— Robert Christian
fuente
El polímero no es una cuña o polyfills. Eso es lo que son los polyfills de webcomponents.js. Polymer es una biblioteca para crear componentes web. El equipo de Polymer también creó colecciones de componentes web (implementados usando Polymer), pero esos tampoco son "Polymer"
— ebidel
Actualización: ¡Polymer ahora tiene rutas y es estable! : D
— JordyvD
5

Creo que desde una perspectiva práctica, al final, la característica de plantilla de las directivas angulares y la metodología de componente web apalancada por el polímero cumplen la misma tarea. Las principales diferencias, como puedo ver, es que el polímero aprovecha las API web para incluir bits de HTML, una forma más sintácticamente correcta y simplista de lograr lo que Angular hace programáticamente a medida que genera plantillas. Sin embargo, Polymer es, como se ha dicho, un pequeño marco para construir plantillas declarativas e interactivas que usan componentes. Está disponible solo para fines de diseño de la interfaz de usuario y solo es compatible con los navegadores más modernos. AngularJS es un marco MVC completo diseñado para hacer que las aplicaciones web sean declarativas mediante el uso de enlaces de datos, dependencias y directivas. Son dos animales completamente diferentes. A su pregunta, En este punto, me parece que no obtendrá grandes beneficios al usar polímero sobre angular, excepto tener docenas de componentes preconstruidos, sin embargo, eso aún requeriría que los transfiera a directivas angulares. Sin embargo, en el futuro, a medida que las API web se vuelvan más avanzadas, los componentes web eliminarán por completo la necesidad de definir y crear plantillas mediante programación, ya que el navegador podrá simplemente incluirlas de manera similar a cómo maneja los archivos javascript o css.

— richbai90
fuente
1
"Son dos animales completamente diferentes". Sí lo son, pero eso no tiene nada que ver con la pregunta. La pregunta es sobre ELEMENTOS de polímeros vs DIRECTIVAS AngularJS. Y esos son muy similares en muchos aspectos. No estamos preguntando cuál es el mejor Framework para usar. Polymer vs AngularJS. "Me parece que en este punto no obtendrá grandes beneficios al usar el polímero sobre el angular". Nadie ha sugerido esto, de hecho, todos hemos hablado acerca de eventualmente usarlos lado a lado de alguna manera. "A su pregunta, ... no obtendrá ningún beneficio al usar el polímero sobre angular" Una vez más, no es la pregunta.
— Eric Bishard el
0

El MVVM (vista de modelo, vista de modelo) que ofrece Angular no es una preocupación que Polymer pretende resolver. La naturaleza composable y reutilizable que las directivas angulares le brindan (una etiqueta personalizada + combinación lógica asociada) es una comparación más sensata cuando considera comparar Angular y Polymer. Angular es y seguirá siendo un marco de trabajo más amplio.

— saurshaz
fuente
0

¿Cuál es la diferencia entre los dos?

Para un usuario: no mucho. Puedes crear aplicaciones increíbles con ambos.

Para un desarrollador: usan una sintaxis muy diferente, por lo que cualquiera de las soluciones tiene una curva de aprendizaje bastante pronunciada. Angular ha existido por más tiempo y tiene una comunidad ENORME, por lo que sería difícil encontrar problemas que no se hayan resuelto.

Para un arquitecto: muy diferente. Angular es un marco de aplicación responsable de todos los aspectos de su vida. Incluso tiene directivas integradas verticalmente en caso de que desee componentes como características. El polímero, por otro lado, es más como el pago por uso. Desea un modal, seguro, desea un widget interactivo, no hay problema, desea el manejo de la ruta, podemos hacerlo. Polymer también es más portátil porque Angular requiere una aplicación Angular para reutilizar las directivas. La idea con Polymer es ser más modulador y funcionará en otras aplicaciones, incluso en aplicaciones angulares.

¿Qué problemas resuelve Polymer que AngularJS no tiene o no quiere?

Polymer es un enfoque para aprovechar las nuevas normas de componentes web. Si las características como elementos personalizados, Shadow DOM e importaciones HTML son compatibles localmente, sería una tontería no aprovecharlas. Actualmente, la mayoría de las características de los componentes web no son ampliamente compatibles ( estado actual ), por lo que Polymer actúa como una cuña o un puente. Como un polyfill (de hecho, usa polyfills).

¿Hay planes para vincular Polymer con AngularJS en el futuro?

Hemos estado usando Angular y Polymer juntos por más de un año. Parte de la decisión de hacer esto se basó en las promesas hechas directamente por el equipo de Polymer para que la interoperabilidad esté ahí. Hemos renunciado a esa idea. Ahora estamos avanzando hacia el uso de solo polímero.

Para hacerlo de nuevo, probablemente no hubiéramos hecho el movimiento de usar Polymer en absoluto, sino que esperaríamos a que madure. Dicho esto, Polymer tiene sus ventajas (algunas bastante buenas) y sus contras (algunas de las cuales son bastante frustrantes), pero creo que es una discusión para otro hilo.

— Y no
fuente
0

Directiva Angularjses un enfoque para hacer elementos personalizados. Puede definir nuevas etiquetas personalizadas con atributos personalizados. Polymer también puede hacer esto, pero lo hará de una manera interesante y más simple. Polymer en realidad no es un marco, es solo una biblioteca, sino una biblioteca poderosa y sorprendente de la que te puedes enamorar (como yo). Polymer le permite aprender la tecnología nativa de componentes web creada por w3c, que los navegadores web eventualmente implementan. El componente web es la tecnología futura, pero el polímero le permite usar esa tecnología en este momento. Google Polymer es una biblioteca que proporciona azúcar sintáctico y polyfills para construir elementos y aplicaciones con componentes web. Recuerde que dije que el polímero no es un marco y es una biblioteca. Pero cuando usa Polymer, en realidad su marco es DOM. esta publicación fue sobre angular js ver 1 y polímero y he trabajado con ambos son mis proyectos y personalmente prefiero el polímero sobre angularjs. Pero la versión angular 2 es completamente diferente en comparación con angularjs ver 1. La directiva en angular 2 tiene un significado diferente.

— behzad besharati
fuente
0

Las directivas angulares son conceptualmente similares a los elementos personalizados, pero se implementan sin el uso de las API de componentes web. Las directivas angulares son una forma de crear elementos personalizados, pero Polymer y la especificación de Web Components son la forma basada en estándares para hacerlo.

elemento polimérico:

<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>

Directiva angular:

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}}" />'
  };
}]);
— chandu
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.