Qual é a diferença entre elementos Polymer e diretivas AngularJS?

524

Na página Introdução ao polímero , vemos um exemplo de polímero em ação:

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

O que você notará está <x-foo></x-foo>sendo definido por platform.jse x-foo.html.

Parece que isso é equivalente a um módulo de diretiva no 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) {
        }
    };
});

  • Qual é a diferença entre os dois?

  • Quais problemas o Polymer resolve que o AngularJS não tem ou não vai?

  • Existem planos de vincular o Polymer ao AngularJS no futuro?

javascript  angularjs  polymer 
— Dan Kanze
fonte
Informações Usefule aqui 2ality - Os papéis de AngularJS e Polymer
— LCJ

Respostas:

520

Você não é o primeiro a fazer esta pergunta :) Deixe-me esclarecer algumas coisas antes de responder às suas perguntas.

  1. A Polymer's webcomponents.jsé uma biblioteca que contém vários polyfills para várias APIs do W3C que se enquadram no guarda-chuva Web Components. Esses são:

    • Elementos personalizados
    • Importações HTML
    • <template>
    • DOM da sombra
    • Eventos de ponteiro
    • outras

    A navegação esquerda na documentação ( polymer-project.org ) possui uma página para todas essas "tecnologias de plataforma". Cada uma dessas páginas também possui um ponteiro para o polyfill individual.

  2. <link rel="import" href="x-foo.html">é uma importação de HTML. As importações são uma ferramenta útil para incluir HTML em outro HTML. Você pode incluir <script>, <link>marcação ou qualquer outra coisa em uma importação.

  3. Nada "liga" <x-foo>ao x-foo.html. No seu exemplo, supõe-se que a definição de elemento personalizado de <x-foo>(por exemplo <element name="x-foo">) seja definida em x-foo.html. Quando o navegador vê essa definição, ela é registrada como um novo elemento.

Para as perguntas!

Qual é a diferença entre Angular e Polímero?

Cobrimos parte disso em nosso vídeo de perguntas e respostas . Em geral, o Polymer é uma biblioteca que visa usar (e mostrar como usar) Web Components. Sua base são os elementos personalizados (por exemplo, tudo o que você constrói é um componente da web) e evolui à medida que a web evolui. Para esse fim, suportamos apenas a versão mais recente dos navegadores modernos.

Usarei esta imagem para descrever toda a pilha de arquitetura do Polymer:

insira a descrição da imagem aqui

Camada VERMELHA: obtemos a web de amanhã através de um conjunto de polyfills. Lembre-se de que essas bibliotecas desaparecem com o tempo, à medida que os navegadores adotam as novas APIs.

Camada AMARELA: Polvilhe um pouco de açúcar com polymer.js. Essa camada é nossa opinião sobre como usar as APIs especificadas juntas. Ele também adiciona itens como ligação de dados, açúcar sintático, observadores de alterações, propriedades publicadas ... Acreditamos que essas coisas são úteis para a criação de aplicativos baseados em componentes da Web.

VERDE: O conjunto abrangente de componentes da interface do usuário (camada verde) ainda está em andamento. Esses serão componentes da web que usam todas as camadas vermelho + amarelo.

Diretivas angulares vs. elementos personalizados?

Veja a resposta de Alex Russell . Basicamente, o Shadow DOM permite compor bits de HTML, mas também é uma ferramenta para encapsular esse HTML. Este é fundamentalmente um novo conceito na Web e algo que outras estruturas alavancarão.

Quais problemas o Polymer resolve que o AngularJS não tem ou não vai?

Semelhanças: modelos declarativos, ligação de dados.

Diferenças: Angular possui APIs de alto nível para serviços, filtros, animações etc., suporta o IE8 e, neste momento, é uma estrutura muito mais robusta para a criação de aplicativos de produção. O polímero está apenas começando em alfa.

Existem planos de vincular o Polymer ao AngularJS no futuro?

São projetos separados . Dito isto, as equipes da Angular e da Ember anunciaram que eventualmente passarão a usar as APIs da plataforma subjacente em suas próprias estruturas.

^ Esta é uma grande vitória da IMO. Em um mundo em que os desenvolvedores da Web possuem ferramentas poderosas (Shadow DOM, Custom Elements), os autores de estruturas também podem utilizar essas primitivas para criar estruturas melhores. Atualmente, muitos deles passam por grandes dificuldades para "fazer o trabalho".

ATUALIZAR:

Há realmente um ótimo artigo sobre este tópico: " Aqui está a diferença entre polímero e angular "

— ebidel
fonte
46
O ponto importante aqui é que a Polymer trata de levar a Web como a conhecemos adiante, especificamente mostrando como os Web Components podem tornar a Web aberta, compartilhada e extensível. O AngularJS (e a Ember, por sinal) é sobre a criação de uma estrutura que aproveita as melhores partes do navegador para criar aplicativos responsivos. Uma vez que os Web Components são mais bem suportados pelos navegadores, as estruturas Angular e outras podem ser criadas com base neles, para diminuir o código da estrutura e os aplicativos mais simples. É por isso que é Win-Win para todos.
— Schmuli
31
Ainda não entendo qual é a diferença prática entre os elementos personalizados de polímero e as diretivas angulares? Por que eu usaria elementos personalizados de polímero em vez de diretivas angulares em um projeto angular?
— Rogerer ''
3
Portanto, os projetos Angular e Ember existentes serão beneficiados com o uso das APIs da plataforma subjacente. Mas quando os Web Components são mais suportados pelos navegadores, haveria algum benefício em continuar usando o Angular em novos projetos ou ele se torna redundante?
— pancake
8
Penso em torná-lo preto e branco: fique com o AngularJS para produção e brinque com o Polymer no seu tempo livre, para que você se familiarize com ele quando chegar a hora.
— Thdan
31
É uma visão agradável de polymer.js mas de modo algum faz responder à pergunta bem ...
— Christoph
57

Para sua pergunta:

Existem planos de vincular o Polymer ao AngularJS no futuro?

Da conta oficial do Twitter do AngularJS: "angularjs usará polímero para seus widgets. É ganha-ganha"

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

— loïc m.
fonte
2
@NREZ Ok, eu não respondo ao título do post, mas uma das perguntas dentro do post Minha resposta é apenas para a 3ª pergunta: Are there plans to tie Polymer in with AngularJS in the future? acho que é uma boa ideia citar o post original da equipe do AngularJS que você não acha ?
— loïc m.
Yup certeza ur ponto é válido ... Só que a descrição poderia ter sido melhor ... Como se eu tivesse feito esse tempo e tenho certeza que na próxima vez u vai bem ...
— NREZ
sim claro. thx para a sua atualização :) (Acabei de começar a usar o stackoverflow, então não vejo a sua atualização antes de responder a você ...)
— loïc m.
Então eles mudaram de idéia? Não consigo encontrar onde eles estão usando polímero.
— theblang
Eu não acho que isso seja uma resposta.
— Astroanu
19

1 e 2) Os componentes de polímero têm um escopo definido devido à sua árvore oculta no dom da sombra. Isso significa que seu estilo e comportamento não podem sangrar. Angular não tem o escopo definido para essa diretiva específica criada como um componente da Web de polímero. Uma diretiva angular pode entrar em conflito com algo em seu escopo global. Na IMO, o benefício que você obterá com o polímero é o que expliquei. Componentes modulares com escopo de CSS e JavaScript para esse componente em particular que nada pode tocar. DOM intocável!

Diretivas angulares podem ser criadas para que você possa anotar um elemento com várias partes da funcionalidade. Nos componentes da Web do polímero, esse não é o caso. Se você deseja combinar a funcionalidade dos componentes, inclua dois componentes em outro componente (ou envolva-os em outro componente) ou poderá estender um componente existente. Lembre-se de que a principal diferença ainda é que cada componente tem um escopo definido nos componentes da tela de polímero. Você pode compartilhar arquivos css & js entre vários componentes ou incorporá-los.

3) Sim, planos angulares de incorporação de polímero na versão 2+, de acordo com Rob Dodson e Eric Bidelman

É engraçado como ninguém aqui mencionou a palavra escopo. Eu acho que essa é uma das principais diferenças.

Existem muitas diferenças, mas elas também têm muito em comum quando se trata de criar lego modular como peças de funcionalidade para um aplicativo. Eu acho que é seguro dizer que Angular seria a estrutura do aplicativo e o polímero poderia um dia viver no mesmo aplicativo ao longo de diretivas laterais, com a principal diferença sendo o escopo, mas o polímero pode ser um substituto para muitas de suas diretivas atuais. Mas não vejo razão para que o Angular não funcione como está e inclua componentes de polímero.

Lendo as respostas novamente enquanto escrevo isso, notei que Eric Bidelman (ebidel) cobriu isso em sua resposta :

"O Shadow DOM permite compor bits de HTML, mas também é uma ferramenta para encapsular esse HTML."

Para dar crédito onde o crédito é devido, recebi minhas respostas ouvindo muitas entrevistas com Rob Dodson e Eric Bidelman . Mas acho que a resposta não foi formulada para dar à pergunta desse cara o entendimento que ele queria. Com isso dito, acho que toquei na resposta que ele estava procurando, mas de nenhuma maneira possuo mais informações sobre o assunto do que Rob Dodson e Eric Bidelman

Aqui estão minhas principais fontes de informações que eu coletei.

JavaScript Jabber - Polímero com Rob Dodson e Eric Bidelman

Shop Talk Show - Componentes da Web com Rob Dodson

— Eric Bishard
fonte
1
Então, se eu usar normalize.css, ele não normaliza dentro da sombra dom? Então, eu preciso normalizar separadamente cada um desses componentes, sem uma maneira de fazê-lo uma vez? isso é uma coisa boa?
— Dmitri Zaitsev
1
Não pense no Shadow DOM como um IFRAME. E eu uso essa comparação livremente porque não é um IFRAME. Mas em um IFRAME, você teria seu próprio documento que não é afetado pelas páginas CSS e JavaScript do documento pai. Isso é uma coisa muito boa. Isso significa que você pode garantir que um componente específico seja executado conforme o planejado e não seja interferido pela página pai. No entanto, se o DOM sombra quis usar o DOM na página pai, ele pode. Mas esse é outro tópico.
— precisa saber é o seguinte
1
Entendo que sim, CSS é uma linguagem com vazamento, mas na maioria dos casos existe uma solução simples (embora não perfeita) usando prefixos de classe exclusivos dentro do DOM que você deseja isolar. E, é claro, evitando os seletores de tags e IDs, o que não é uma boa prática. Por outro lado, algumas dessas declarações que você pode realmente querer vazar (como normalize.cssou outras folhas baseadas em tags), que são facilmente alcançáveis ​​sem o Shadow DOM. Concordantemente não é um isolamento perfeito, mas prob. funciona em 95% dos casos de uso, pelo menos naqueles em que consigo pensar.
— Dmitri Zaitsev
2
Dito isto, tenho de dizer que vejo o mérito de um isolamento adequado e que a sua resposta fornece uma boa explicação.
— Dmitri Zaitsev
6

O polímero é um calço de componentes da Web

  • " Componentes da Web " é um novo conjunto de padrões envolvidos pelo HTML 5, projetado para fornecer blocos de construção reutilizáveis ​​para aplicativos da Web.

  • Os navegadores estão em vários estados de implementação da especificação "Web Components" e, portanto, é muito cedo para escrever HTML usando o Web Components.

  • Mas ai! Polímero para o resgate! O Polymer é uma biblioteca que fornece uma camada de abstração ao seu código HTML, permitindo que ele faça uso da API de componentes da Web como se estivesse totalmente implementada em todos os navegadores. Isso é chamado de preenchimento de polímero e a equipe do Polymer distribui essa biblioteca como webcomponents.js . Isso costumava ser chamado de platform.js btw.

Mas o Polymer é mais do que uma biblioteca de polyfill para componentes da Web ...

O Polymer também fornece blocos de construção de Componentes da Web abertos e reutilizáveis ​​via Elements

insira a descrição da imagem aqui

Todos os elementos podem ser personalizados e ampliados. Eles são usados ​​como blocos de construção para qualquer coisa, desde widgets sociais a animação e clientes de API da web.

O polímero não é uma estrutura de aplicativos da web

  • O polímero é mais uma biblioteca do que uma estrutura.

  • O Polymer não tem suporte para coisas como rotas, escopo de aplicativo, controladores etc.

    • Mas ele tem ligação bidirecional e o uso de componentes "parece" exatamente como usar diretivas angulares.

  • Embora existam sobreposições entre o Polymer e o AngularJS, elas não são as mesmas. De fato, a equipe do AngularJS mencionou a utilização de bibliotecas Polymer nos próximos lançamentos.

  • Observe também que o polímero ainda é considerado "borda de sangramento" enquanto o AngularJS está se estabilizando.

  • Será interessante assistir à evolução de ambos os projetos do Google!

— Robert Christian
fonte
O polímero não é um calço ou polyfills. É isso que os polyfills do webcomponents.js são. O Polymer é uma biblioteca para criação de componentes da web. A equipe Polymer também também criou coleções de componentes web (implementadas usando Polymer), mas aqueles também não são "Polymer"
— ebidel
Atualização: o Polymer agora tem rotas e é estável! : D
— JordyvD
5

Penso que, de uma perspectiva prática, no final, o recurso de modelo de diretivas angulares e a metodologia de componentes da Web alavancada pelo polímero realizam a mesma tarefa. As principais diferenças que vejo são que o polímero utiliza APIs da web para incluir bits de HTML, uma maneira mais sintaticamente correta e simplista de alcançar o que o Angular faz programaticamente ao renderizar modelos. O polímero é, no entanto, como foi afirmado, uma pequena estrutura para a construção de modelos declarativos e interativos usando componentes. Ele é disponibilizado apenas para fins de design da interface do usuário e é suportado apenas nos navegadores mais modernos. O AngularJS é uma estrutura completa do MVC projetada para tornar os aplicativos da Web declarativos pelo uso de ligações de dados, dependências e diretivas. Eles são dois animais completamente diferentes. Para sua pergunta, Parece-me que, neste ponto, você não terá nenhum benefício importante ao usar polímero sobre angular, exceto com dezenas de componentes pré-construídos, no entanto, isso ainda exigiria que você os portasse para diretivas angulares. No futuro, no entanto, à medida que as APIs da Web se tornarem mais avançadas, os componentes da Web removerão completamente a necessidade de definir e criar modelos de forma programática, pois o navegador poderá simplesmente incluí-los de maneira semelhante à maneira como lida com arquivos javascript ou css.

— richbai90
fonte
1
"Eles são dois animais completamente diferentes." Sim, são, mas isso não tem nada a ver com a questão. A pergunta é sobre Polymer ELEMENTS vs AngularJS DIRECTIVES. E esses são muito semelhantes em muitos aspectos. Não estamos perguntando qual é a melhor estrutura a ser usada. Polymer vs AngularJS. "Parece-me que, neste ponto, você não terá nenhum benefício importante ao usar polímeros sobre angulares". Ninguém sugeriu isso; na verdade, todos falamos sobre eventualmente usá-los lado a lado em alguma capacidade. "Para sua pergunta, ... você não terá nenhum benefício em usar polímeros sobre ângulos" Novamente, não é a pergunta.
— Eric Bishard
0

A MVVM (visão de modelo, visão de modelo) oferecida pela Angular não é uma preocupação que o Polymer visa solucionar. A natureza composível e reutilizável que as diretivas Angular fornecem a você (uma tag personalizada + combinação lógica associada) é uma comparação mais sensata quando você considera comparar Angular e Polímero. Angular é e continuará sendo uma estrutura mais ampla para servir a propósitos.

— saurshaz
fonte
0

Qual é a diferença entre os dois?

Para um usuário: não muito. Você pode criar aplicativos incríveis com os dois.

Para um desenvolvedor: eles usam uma sintaxe diferente de maneira que qualquer solução tenha uma curva de aprendizado bastante íngreme. O Angular existe há mais tempo e tem uma comunidade ENORME, por isso é difícil encontrar problemas que não foram resolvidos.

Para um arquiteto: muito diferente. Angular é uma estrutura de aplicativos responsável por todos os aspectos da sua vida. Até possui diretivas verticalmente integradas, caso você queira recursos semelhantes a componentes. O polímero, por outro lado, é mais como o pagamento conforme o uso. Você quer um modal, com certeza, deseja um widget interativo, não há problema, deseja manipulação de rotas, nós podemos fazer isso. O polímero também é mais portátil, pois o Angular requer um aplicativo Angular para reutilizar diretivas. A idéia com o Polymer é ser mais moduladora e funcionará em outros aplicativos, mesmo aplicativos angulares.

Quais problemas o Polymer resolve que o AngularJS não tem ou não vai?

O polímero é uma abordagem a seguir para aproveitar os novos padrões de componentes da web. Se recursos como elementos personalizados, Shadow DOM e importações de HTML forem suportados localmente, seria tolice não tirar proveito deles. Atualmente, a maioria dos recursos de componentes da Web não é amplamente suportada ( status atual ); portanto, o Polymer atua como calço ou ponte. Como um polyfill (na verdade, ele usa polyfills).

Existem planos de vincular o Polymer ao AngularJS no futuro?

Estamos usando Angular e Polymer juntos há mais de um ano. Parte da decisão de fazer isso foi baseada em promessas feitas diretamente pela equipe da Polymer para nós de que a interoperabilidade esteja lá. Nós desistimos dessa ideia. Agora estamos caminhando para o uso apenas de polímero.

Para fazer isso novamente, provavelmente não teríamos adotado o Polymer, em vez disso, esperamos que ele amadureça. Dito isto, o Polymer tem seus prós (alguns muito bons) e contras (alguns dos quais são bastante frustrantes), mas acho que essa é uma discussão para outro tópico.

— Porque nao
fonte
0

Diretiva Angularjsé uma abordagem para criar elementos personalizados. você pode definir novas tags personalizadas com atributos personalizados. O Polymer também pode fazer isso, mas de uma maneira interessante e mais simples. O Polymer na verdade não é uma estrutura, é apenas uma biblioteca. Mas uma biblioteca poderosa e surpreendente que você pode se apaixonar por ela (como eu). O Polymer permite que você aprenda a tecnologia de componentes da Web nativa criada pelo w3c, que os navegadores da Web acabam implementando. O componente da Web é a tecnologia futura, mas o polímero permite que você use essa tecnologia agora mesmo. elementos e aplicativos com componentes da Web. Lembre-se de que eu disse que o polímero não é uma estrutura e é uma biblioteca. Mas, quando você está usando o Polymer, na verdade sua estrutura é DOM. esse post foi sobre angular js ver 1 e polímero e eu tenho trabalhado com os dois é o meu projeto e eu pessoalmente prefiro polímero sobre angularjs. Mas a versão Angular 2 é completamente diferente na comparação de angularjs. A versão 1.diretiva no angular 2 tem um significado diferente.

— behzad besharati
fonte
0

As diretivas angulares são conceitualmente semelhantes aos elementos personalizados, mas são implementadas sem o uso das APIs de componentes da Web. As diretivas angulares são uma maneira de criar elementos personalizados, mas o Polymer e a especificação Web Components são a maneira baseada em padrões para fazê-lo.

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>

Diretiva 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
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.