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
fuente
Respuestas:
No eres el primero en hacer esta pregunta :) Permíteme aclarar un par de cosas antes de responder a tus preguntas.
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:<template>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.
<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.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:
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 "
fuente
Para su pregunta:
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
fuente
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 ?En este video, 2 chicos de AngularJS hablaron sobre las diferencias y similitudes sobre estos dos marcos (AngularJS 1.2 y más allá).
Estos enlaces lo llevarán a las preguntas y respuestas correctas:
fuente
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
fuente
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?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." 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 ...
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 es más una biblioteca que un framework.
Polymer no tiene soporte para cosas como rutas, ámbito de aplicación, controladores, etc.
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!
fuente
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.
fuente
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.
fuente
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.
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).
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.
fuente
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.
fuente
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:
Directiva angular:
fuente