Pregunta ¿Cuál es la diferencia entre los elementos de polímero y las directivas AngularJS?


En el polímero Empezando página, vemos un ejemplo de Polímero 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á es <x-foo></x-foo> siendo definido por platform.js y x-foo.html.

Parece que esto es el equivalente a un módulo de directivas 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 unir Polymer con AngularJS en el futuro?


506
2017-08-06 19:42


origen


Respuestas:


No eres el primero en hacer esta pregunta :) Déjame aclarar un par de cosas antes de responder a tus preguntas.

  1. Polímero webcomponents.js es 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 izquierdo en la documentación (polymer-project.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 de HTML Las importaciones son una herramienta útil para incluir HTML en otro HTML. Puedes incluir <script>, <link>, marcado o cualquier otra cosa en una importación.

  3. Nada de "enlaces" <x-foo> a x-foo.html. En su ejemplo, se asume la definición de elemento personalizado <x-foo> (p.ej. <element name="x-foo">) 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 polímero?

Cubrimos algo de esto en nuestra Q & A video. En general, Polymer es una biblioteca que tiene como objetivo usar (y mostrar cómo usar) Web Components. Su base es Elementos personalizados (por ejemplo, todo lo que construyes es un componente web) y evoluciona a medida que la web evoluciona. Para ello, solo admitimos la última versión de los navegadores modernos.

Utilizaré esta imagen para describir toda la pila de arquitectura de Polymer:

enter image description here

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 polymer.js. Esta capa es nuestra opinión sobre cómo usar las API específicas, juntas. También agrega cosas como enlace de datos, azúcar sintético, vigilantes de cambio, 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) aún está en progreso. Estos serán componentes web que usan todas las capas rojas + amarillas.

Directivas angulares vs. Elementos personalizados?

Ver Alex Russell responder. Básicamente, Shadow DOM permite componer bits de HTML pero también es una herramienta para encapsular ese HTML. Esto 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., admite IE8, y en este punto, es un marco mucho más sólido para crear aplicaciones de producción. El polímero acaba de comenzar en alfa.

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

Ellos son proyectos separados. Dicho esto, tanto los equipos angular como ámbar Anunciado eventualmente pasará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 potentes (Shadow DOM, Custom Elements), los autores del framework también pueden utilizar estas primitivas para crear mejores frameworks. La mayoría de ellos actualmente pasan por buenos aros para "hacer el trabajo".

ACTUALIZAR:

Hay un excelente artículo sobre este tema: "Aquí está la diferencia entre Polímero y Angular"


510
2017-08-07 00:17



Para tu pregunta:

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

De la cuenta oficial de twitter de AngularJS: "angularjs usará polímero para sus widgets. Es beneficioso para todos".

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


56
2017-08-07 08:17



En este video 2 chicos de AngularJS hablaron sobre las diferencias y similitudes acerca de estos dos marcos (AngularJS 1.2 y posteriores).

Estos enlaces lo llevarán a las preguntas y respuestas correctas:


19
2017-10-17 19:27



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 en particular que usted crea como un componente web de polímero. Una directiva angular podría entrar en conflicto con algo en su alcance global. IMO, el beneficio que obtendrás del polímero es lo que expliqué ... componentes modulares que tienen css y JavaScript en el alcance de ese componente en particular que nada puede tocar. ¡DOM intocable!

Se pueden crear directivas angulares para que pueda anotar un elemento con varias funciones. En los componentes web de polímero que no es el caso. Si desea combinar la funcionalidad de los componentes, incluye dos componentes en otro componente (o envuélvalos en otro componente) o puede ampliar un componente existente. Recuerde que la diferencia principal sigue siendo que cada componente tiene un alcance en componentes web de polímero. Puede compartir archivos css y js en varios componentes o puede alinearlos.

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

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

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

Al leer las respuestas nuevamente mientras escribo esto, noté que Eric Bidelman (ebidel) cubría eso en su responder:

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

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

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

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

Comprar Talk Show - Componentes web con Rob Dodson


19
2017-08-10 02:41



Polymer es una cuña de componentes web

  • "Componentes web"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 están en varios estados implementando 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 utilizar la API de componentes web como si estuviera completamente implementada en todos los navegadores.  Se llama poli-relleno, y el equipo de Polymer distribuye esta biblioteca como webcomponents.js. Esto solía ser llamado platform.js por cierto.

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

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

enter image description here

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 API web.

Polymer no es un marco de aplicación web

  • El polímero es más una biblioteca que un marco.

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

    • Pero tiene uniones bidireccionales y el uso de componentes "se siente" igual que el uso de 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 polímeros en próximos lanzamientos.

  • También tenga en cuenta que el polímero todavía se considera "borde sangrante", mientras que AngularJS se está estabilizando.

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


6
2017-11-18 15:42



Creo que desde una perspectiva práctica, al final, la función de plantilla de las directivas angulares y la metodología de componente web potenciada por el polímero logran la misma tarea. Las principales diferencias que puedo ver son que el polímero aprovecha API web para incluir bits de HTML, una forma más sintácticamente correcta y simplista de lograr lo que Angular hace programaticamente a medida que procesa las plantillas. El polímero es, sin embargo, como se ha establecido, un pequeño marco para construir plantillas declarativas e interactivas que usan componentes. Está disponible solo para el diseño de la interfaz de usuario, y solo es compatible con los navegadores más modernos. AngularJS es un framework completo de MVC 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, me parece que en este punto no obtendrá ningún beneficio importante del uso de polímero sobre angular, excepto que tiene docenas de componentes preconstruidos, sin embargo, eso todavía requeriría que transfiera esos a las 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 de manera programática, ya que el navegador solo podrá incluirlas de forma similar a cómo maneja los archivos javascript o css.


5
2017-07-07 17:43



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


0
2017-09-21 05:47