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
fonte
Respostas:
Você não é o primeiro a fazer esta pergunta :) Deixe-me esclarecer algumas coisas antes de responder às suas perguntas.
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:<template>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.
<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.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:
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 "
fonte
Para sua pergunta:
Da conta oficial do Twitter do AngularJS: "angularjs usará polímero para seus widgets. É ganha-ganha"
Fonte: https://twitter.com/angularjs/status/335417160438542337
fonte
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 ?Neste vídeo, dois caras do AngularJS conversaram sobre diferenças e semelhanças sobre esses dois frameworks (AngularJS 1.2 e além).
Esses links levarão você às perguntas e respostas corretas:
fonte
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
fonte
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?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." 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 ...
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 é mais uma biblioteca do que uma estrutura.
O Polymer não tem suporte para coisas como rotas, escopo de aplicativo, controladores etc.
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!
fonte
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.
fonte
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.
fonte
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.
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).
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.
fonte
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.
fonte
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:
Diretiva angular:
fonte