personalizadas directivas crear javascript angularjs polymer

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



directivas angular 6 (10)

¿Cuál es la diferencia entre los dos?

Para un usuario: No mucho. Puedes crear aplicaciones impresionantes con ambos.

Para un desarrollador: utilizan una sintaxis 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.

A 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 parecido a un pago por uso. Desea un modo modal, seguro, desea un widget interactivo, no hay problema, desea el manejo de rutas, podemos hacerlo para. El polímero también es más portátil, ya que Angular requiere una aplicación Angular para reutilizar las directivas. La idea con Polymer es más moduladora y funcionará en otras aplicaciones, incluso en aplicaciones Angular.

¿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 funciones como elementos personalizados, Shadow DOM y las importaciones de HTML son compatibles localmente, sería una tontería no aprovecharlas. Actualmente, la mayoría de las funciones de los componentes web no son ampliamente compatibles ( estado actual ), por lo que Polymer actúa como cuña o puente. Algo así como un polyfill (de hecho, utiliza polyfills).

¿Hay planes para vincular a 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é allí. Hemos renunciado a esa idea. Ahora nos estamos moviendo hacia el uso de solo polímero.

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

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á es que <x-foo></x-foo> está definido por platform.js y x-foo.html .

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

El polímero es un shim de componentes web

  • " Componentes web " es un nuevo conjunto de estándares que está incluido en 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 poly-filling , y el equipo de Polymer distribuye esta biblioteca como webcomponents.js . Esto solía llamarse platform.js 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

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 framework de aplicaciones web.

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

  • Polymer no tiene soporte para cosas como rutas, alcance de aplicaciones, controladores, etc.

    • Pero tiene un enlace bidireccional, y el uso de componentes "se siente" como si se usaran directivas angulares.

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

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

  • ¡Será interesante ver cómo evolucionan estos dos proyectos de Google!

Creo que desde una perspectiva práctica, al final, la característica de la plantilla de las directivas angulares y la metodología de los componentes web apalancados por el polímero cumplen la misma tarea. Las principales diferencias que puedo ver son 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 mediante programación a medida que rinde plantillas. Sin embargo, como se ha dicho, Polymer es un pequeño marco para construir plantillas declarativas e interactivas utilizando componentes. Está disponible solo para fines de diseño de UI, 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, me parece que en este punto no obtendrá mayores beneficios del uso del polímero en lugar del ángulo, excepto que tiene docenas de componentes precompilados, sin embargo, eso aún requiere que los transfiera a las directivas angulares. Sin embargo, en el futuro, a medida que las API web sean más avanzadas, los componentes web eliminarán completamente la necesidad de definir y crear plantillas de manera programada, ya que el navegador podrá incluirlas de manera similar a como maneja los archivos javascript o css.

El MVVM (model-view, view-model) que ofrece Angular no es una preocupación que Polymer pretende resolver. La naturaleza componible y reutilizable que le brindan las directivas Angular (una etiqueta personalizada + combinación lógica asociada) es una comparación más sensata cuando considera la posibilidad de comparar Angular y Polímero. Angular es y seguirá siendo un marco de propósito más amplio.

La directiva Angularjs es 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. El polímero en realidad no es un marco, es solo una biblioteca. Pero una biblioteca poderosa y sorprendente de la que puedes enamorarte (como yo). Polymer le permitió aprender la tecnología de componentes web nativa hecha por w3c, y los navegadores web lo implementarán. El componente web es la tecnología del futuro, pero Polymer le permite usar esa tecnología ahora mismo. Elementos y aplicaciones con componentes web. Recuerda que dije que el polímero no es un marco y es una biblioteca. Pero cuando estás usando Polímero, en realidad tu marco es DOM. Esta publicación fue sobre js ver 1 angular y polímero y he trabajado. con ambos es mis proyectos y personalmente prefiero el polímero sobre los angulares. Pero la versión Angular 2 es completamente diferente en comparación con angularjs ver 1.directive en angular 2 tiene un significado diferente.

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 componentes web son la forma basada en estándares de 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}}" />'' }; }]);

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

  1. Polymer''s webcomponents.js es una biblioteca que contiene varios polyfills para varias API de W3C que se encuentran bajo el paraguas de componentes web. Estos son:

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

    La barra de navegación izquierda de 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 relleno 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 "vincula" <x-foo> a x-foo.html. En su ejemplo, se supone que la definición del elemento personalizado de <x-foo> (por ejemplo, <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 nuestro video de preguntas y respuestas . En general, Polymer es una biblioteca que pretende utilizar (y mostrar cómo usar) los componentes web. Su base son los elementos personalizados (por ejemplo, todo lo que construyes es un componente web) y evoluciona a medida que la web evoluciona. Para 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: Conseguimos la web de mañana a través de un conjunto de poli (rellenos). Tenga en cuenta que esas bibliotecas desaparecen con el tiempo a medida que los navegadores adoptan las nuevas API.

Capa AMARILLA: Espolvoree en un poco de azúcar con polymer.js. Esta capa es nuestra opinión sobre cómo usar las API especificadas, juntas. También agrega elementos como enlace de datos, azúcar sintética, 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) aún está en curso. Estos serán componentes web que usan todas las capas rojas + amarillas.

¿Directivas angulares vs. elementos personalizados?

Ver la answer Alex Russell. 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 robusto para crear aplicaciones de producción. El polímero está empezando en alfa.

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

Son proyectos separados . Dicho esto, tanto el equipo de Angular como el de Ember announced que eventualmente pasarán a utilizar 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 estos primitivos para crear marcos mejores. La mayoría de ellos actualmente pasan por grandes aros para "hacer el trabajo".

ACTUALIZAR:

Hay un artículo realmente genial sobre este tema: " Aquí está la diferencia entre polímero y angular "

1 y 2) Los componentes de polímero tienen un alcance debido a su árbol oculto en el dom de la sombra. Eso significa que su estilo y comportamiento no pueden desangrarse. Angular no está sujeto a esa directiva particular que usted crea como un componente web de polímero. Una directiva angular posiblemente podría entrar en conflicto con algo en su ámbito global. OMI, el beneficio que obtendrá del polímero es lo que expliqué ... los componentes modulares que tienen un alcance de css y JavaScript a ese componente en particular que nada puede tocar. DOM intocable!

Las directivas angulares se pueden crear para que pueda anotar un elemento con varias funcionalidades. En los componentes web de polímero no es el caso. Si desea combinar la funcionalidad de los componentes, incluya dos componentes en otro componente (o los envuelva en otro componente) o puede extender un componente existente. Recuerde que la principal diferencia es que cada componente tiene un alcance en los componentes de la banda de polímero. Puede compartir archivos css y js a través de varios componentes o puede integrarlos.

3) Sí, Angular planea incorporar polímero en la versión 2+ según 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 piezas de funcionalidad tipo lego modulares para una aplicación. Creo que es seguro decir que Angular sería el marco de aplicación y que un polímero podría algún día vivir en la misma aplicación junto con las directivas laterales, siendo la diferencia principal 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ímeros también.

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

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

Para dar crédito donde se debe el crédito, 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 tipo el entendimiento que quería. Dicho esto, creo que me he referido a 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 - Polymer con Rob Dodson y Eric Bidelman

Shop Talk Show - Componentes web con Rob Dodson