Qual è la differenza tra gli elementi polimerici e le direttive AngularJS?

524

Nella pagina Introduzione a Polymer , vediamo un esempio di Polymer in azione:

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

Quello che noterai è <x-foo></x-foo>stato definito da platform.jse x-foo.html.

Sembra che questo sia l'equivalente di un modulo direttiva in 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 è la differenza tra i due?

  • Quali problemi risolve Polymer che AngularJS non ha o non vuole?

  • Ci sono piani per legare Polymer con AngularJS in futuro?

javascript  angularjs  polymer 
— Dan Kanze
fonte
— LCJ

Risposte:

520

Non sei il primo a porre questa domanda :) Vorrei chiarire un paio di cose prima di arrivare alle tue domande.

  1. Polymer's webcomponents.jsè una libreria che contiene diversi polyfill per varie API W3C che rientrano nell'ambito del Web Components. Questi sono:

    • Elementi personalizzati
    • Importazioni HTML
    • <template>
    • Shadow DOM
    • Eventi puntatore
    • altri

    Il nav di sinistra nella documentazione ( polymer-project.org ) ha una pagina per tutte queste "Tecnologie della piattaforma". Ognuna di quelle pagine ha anche un puntatore al singolo polyfill.

  2. <link rel="import" href="x-foo.html">è un'importazione HTML. Le importazioni sono uno strumento utile per includere HTML in altri HTML. Puoi includere <script>, <link>markup o qualsiasi altra cosa in un'importazione.

  3. Niente "collega" <x-foo>a x-foo.html. Nel tuo esempio, si presume che la definizione di elemento personalizzato di <x-foo>(ad esempio <element name="x-foo">) sia definita in x-foo.html. Quando il browser vede tale definizione, viene registrato come nuovo elemento.

Alle domande!

Qual'è la differenza tra Angular e Polymer?

Ne abbiamo parlato in parte nel nostro video di domande e risposte . In generale, Polymer è una libreria che mira a utilizzare (e mostrare come utilizzare) i componenti Web. Il suo fondamento è Custom Elements (ad es. Tutto ciò che costruisci è un componente web) e si evolve man mano che il web si evolve. A tal fine, supportiamo solo l'ultima versione dei browser moderni.

Userò questa immagine per descrivere l'intero stack di architettura di Polymer:

inserisci qui la descrizione dell'immagine

Livello ROSSO: otteniamo la rete di domani attraverso una serie di polifilloli. Tieni presente che quelle librerie scompaiono nel tempo man mano che i browser adottano le nuove API.

Strato GIALLO: cospargere di zucchero con polymer.js. Questo livello è la nostra opinione su come utilizzare le API specifiche, insieme. Aggiunge anche cose come associazione di dati, zucchero sintetico, osservatori di cambiamenti, proprietà pubblicate ... Pensiamo che queste cose siano utili per la creazione di app basate su componenti Web.

VERDE: il set completo di componenti dell'interfaccia utente (livello verde) è ancora in corso. Saranno componenti web che utilizzano tutti i livelli rosso + giallo.

Direttive angolari vs. elementi personalizzati?

Vedi la risposta di Alex Russell . Fondamentalmente, Shadow DOM consente di comporre bit di HTML ma è anche uno strumento per incapsulare tale HTML. Questo è fondamentalmente un nuovo concetto sul web e qualcosa che altri framework trarranno vantaggio.

Quali problemi risolve Polymer che AngularJS non ha o non vuole?

Somiglianze: modelli dichiarativi, associazione dati.

Differenze: Angular ha API di alto livello per servizi, filtri, animazioni, ecc., Supporta IE8 e, a questo punto, è un framework molto più robusto per la creazione di app di produzione. Polymer è appena agli inizi in alpha.

Ci sono piani per legare Polymer con AngularJS in futuro?

Sono progetti separati . Detto questo, entrambi i team di Angular ed Ember hanno annunciato che alla fine passeranno all'utilizzo delle API della piattaforma sottostante nei propri framework.

^ Questa è una grande vittoria dell'IMO. In un mondo in cui gli sviluppatori web dispongono di potenti strumenti (Shadow DOM, Custom Elements), anche gli autori di framework possono utilizzare queste primitive per creare framework migliori. La maggior parte di loro attualmente passa attraverso grandi cerchi per "portare a termine il lavoro".

AGGIORNARE:

C'è un articolo davvero eccezionale su questo argomento: " Ecco la differenza tra polimero e angolare "

— ebidel
fonte
46
Il punto importante qui è che Polymer consiste nel portare il Web così come lo conosciamo, in particolare mostrando come i componenti Web possono rendere il Web aperto, condivisibile ed estensibile. AngularJS (e Ember per quella materia) riguarda la creazione di un framework che sfrutta le parti migliori del browser per la creazione di applicazioni reattive. Una volta che i componenti Web sono meglio supportati dai browser, Angular e altri framework possono basarsi su di essi, per ridurre il codice del framework e semplificare le applicazioni. Ecco perché è Win-Win per tutti.
— Schmuli,
31
Non capisco ancora qual è la differenza pratica tra Polymer Custom Elements e Direttive angolari? Perché dovrei usare Polymer Custom Elements invece delle Direttive angolari in un progetto angolare?
— ronag
3
Pertanto, i progetti Angular ed Ember esistenti trarranno infine vantaggio dall'utilizzo delle API della piattaforma sottostante. Ma quando i componenti Web saranno meglio supportati dai browser, ci sarebbe qualche vantaggio nell'utilizzare ancora Angular su nuovi progetti o diventerebbe effettivamente ridondante?
— Pancake
8
Penso di renderlo in bianco e nero: resta con AngularJS per le cose di produzione e gioca con Polymer nel tuo tempo libero in modo che tu possa conoscerlo quando sarà il momento.
— thdoan
31
È una bella panoramica di polymer.js ma non risponde in alcun modo alla domanda a fondo ...
— Christoph
57

Per la tua domanda:

Ci sono piani per legare Polymer con AngularJS in futuro?

Dall'account Twitter ufficiale di AngularJS: "angularjs utilizzerà il polimero per i suoi widget. È vantaggioso per tutti"

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

— loïc m.
fonte
2
@NREZ Ok, non rispondo al titolo del post, ma una delle domande all'interno del post La mia risposta è solo per la terza domanda: Are there plans to tie Polymer in with AngularJS in the future? credo sia una buona idea citare il post originale del team di AngularJS che non pensi ?
— loïc m.
Sicuramente il tuo punto è valido ... Solo che la descrizione avrebbe potuto essere migliore ... Come ho fatto questa volta e sono sicuro che anche la prossima volta lo farai ...
— NREZ
si certo. grazie per il tuo aggiornamento :) (ho appena iniziato a utilizzare StackOverflow, quindi non vedo il tuo aggiornamento prima di risponderti ...)
— loïc m.
Quindi hanno cambiato idea? Non riesco a trovare dove stiano usando il polimero.
— theblang,
non penso che questa sia una risposta.
— astroanu,
19

1 e 2) componenti polimerici sono mirati a causa del loro albero nascosto nel dom dell'ombra. Ciò significa che il loro stile e comportamento non possono essere eliminati. Angular non rientra in quella particolare direttiva creata come un componente web polimerico. Una direttiva angolare potrebbe essere in conflitto con qualcosa nel tuo ambito globale. IMO il vantaggio che otterrai dal polimero è quello che ho spiegato .. componenti modulari che hanno css e JavaScript mirati a quel particolare componente che nulla può toccare. DOM intoccabile!

È possibile creare direttive angolari in modo da poter annotare un elemento con diverse funzionalità. Nei componenti del nastro polimerico non è così. Se si desidera combinare la funzionalità dei componenti, includere due componenti in un altro componente (o avvolgerli in un altro componente) oppure è possibile estendere un componente esistente. Ricorda che la differenza principale è che ogni componente è inserito nei componenti del nastro polimerico. È possibile condividere i file CSS e JS tra più componenti o incorporarli.

3) Sì, Angular prevede di incorporare il polimero nella versione 2+ secondo Rob Dodson ed Eric Bidelman

È divertente come nessuno qui abbia menzionato la parola scope. Penso che sia una delle maggiori differenze.

Ci sono molte differenze, ma hanno anche molto in comune quando si tratta di creare lego modulari come pezzi di funzionalità per un'app. Penso che sia sicuro affermare che Angular sarebbe il framework di applicazione e un giorno il polimero potrebbe vivere nella stessa app insieme alle direttive laterali con la differenza principale che è l'ambito, ma il polimero potrebbe essere un sostituto per molte delle vostre attuali direttive. Ma non vedo alcun motivo per cui Angular non possa funzionare così com'è e includa anche i componenti polimerici.

Leggendo di nuovo le risposte mentre scrivo, ho notato che Eric Bidelman (ebidel) ha fatto una specie di copertina che nella sua risposta :

"Shadow DOM consente di comporre bit di HTML ma è anche uno strumento per incapsulare tale HTML."

Per dare credito quando il credito è dovuto, ho ricevuto le mie risposte ascoltando molte interviste con Rob Dodson ed Eric Bidelman . Ma sento che la risposta non è stata formulata per dare alla domanda di questo ragazzo la comprensione che voleva. Detto questo, penso di aver toccato la risposta che sta cercando, ma in nessun modo possiedo più informazioni sull'argomento di Rob Dodson ed Eric Bidelman

Ecco le mie principali fonti per le informazioni che ho raccolto.

JavaScript Jabber - Polimero con Rob Dodson ed Eric Bidelman

Talk Talk Show - Componenti Web con Rob Dodson

— Eric Bishard
fonte
1
Quindi, se uso normalize.css, non si normalizza all'interno dell'ombra dom? Quindi devo normalizzare separatamente ciascuno di questi componenti, senza un modo per farlo una volta? è una cosa buona?
— Dmitri Zaitsev,
1
Non pensare al Shadow DOM come a un IFRAME. E uso questo confronto liberamente perché non è un IFRAME. Ma in un IFRAME, avresti il ​​tuo documento che non è influenzato dalle pagine CSS e JavaScript del documento principale. Questa è un'ottima cosa Significa che puoi garantire che un componente specifico funzionerà come previsto e non venga interferito dalla pagina padre. Tuttavia, se il DOM ombra voleva usare DOM dalla pagina padre, può farlo. Ma questo è un altro argomento.
— Eric Bishard,
1
Vedo, sì, CSS è un linguaggio che perde, ma nella maggior parte dei casi esiste una soluzione semplice (anche se non perfetta) utilizzando prefissi di classe univoci all'interno del DOM che si desidera isolare. E, ovviamente, evitando i selettori di tag e ID, il che non è comunque una buona pratica. D'altra parte, alcune di quelle dichiarazioni che potresti effettivamente voler perdere (come normalize.csso altri fogli basati su tag), che sono di nuovo facilmente ottenibili senza Shadow DOM. Piacevolmente non un isolamento perfetto ma prob. funziona nel 95% dei casi d'uso, almeno quelli a cui riesco a pensare.
— Dmitri Zaitsev,
2
Detto questo, devo dire che vedo il merito di un adeguato isolamento e trovo che la tua risposta fornisca una buona spiegazione.
— Dmitri Zaitsev,
6

Polymer è uno spessore di Web Components

  • " Web Components " è un nuovo set di standard integrato da HTML 5 progettato per fornire blocchi riutilizzabili per le applicazioni Web.

  • I browser sono in vari stati per l'implementazione della specifica "Web Components", quindi è troppo presto per scrivere HTML utilizzando Web Components.

  • Ma ahimè! Polimero in soccorso! Polymer è una libreria che fornisce un livello di astrazione al codice HTML, consentendogli di utilizzare l'API dei componenti Web come se fosse completamente implementata in tutti i browser. Questo si chiama poli-riempimento e il team Polymer distribuisce questa libreria come webcomponents.js . Questo era chiamato platform.js btw.

Ma Polymer è più di una libreria polyfill per componenti web ...

Polymer fornisce anche blocchi di componenti Web aperti e riutilizzabili tramite Elements

inserisci qui la descrizione dell'immagine

Tutti gli elementi possono essere personalizzati ed estesi. Questi vengono utilizzati come elementi costitutivi di qualsiasi cosa, dai widget sociali all'animazione ai client API Web.

Polymer non è un framework per applicazioni web

  • Polymer è più una libreria che una struttura.

  • Polymer non ha supporto per cose come route, ambito di applicazione, controller, ecc.

    • Ma ha una rilegatura a due vie e l'uso dei componenti "sembra" proprio come usare le direttive angolari.

  • Sebbene ci siano alcune sovrapposizioni tra Polymer e AngularJS, non sono le stesse. In effetti, il team di AngularJS ha menzionato l'utilizzo delle librerie Polymer nelle prossime versioni.

  • Si noti inoltre che il polimero è ancora considerato "margine di spurgo" mentre AngularJS si sta stabilizzando.

  • Sarà interessante vedere evolvere entrambi questi progetti Google!

— Robert Christian
fonte
Il polimero non è uno spessore o polifilloli. Ecco cosa sono i polyfill webcomponents.js. Polymer è una libreria per la creazione di componenti Web. Il team Polymer ha anche creato raccolte di componenti web (implementati usando Polymer), ma questi non sono anche "Polymer"
— ebidel
Aggiornamento: il polimero ora ha percorsi ed è stabile! : D
— JordyvD,
5

Penso da una prospettiva pratica, alla fine la caratteristica del modello delle direttive angolari e la metodologia del componente web sfruttata dal polimero svolgono entrambe lo stesso compito. Le principali differenze che posso vedere sono che il polimero sfrutta le API Web per includere frammenti di HTML, un modo più sintatticamente corretto e semplicistico per ottenere ciò che Angular fa programmaticamente mentre esegue il rendering dei modelli. Il polimero è tuttavia, come è stato affermato, un piccolo framework per la creazione di modelli dichiarativi e interattivi utilizzando componenti. È disponibile solo a scopo di progettazione dell'interfaccia utente ed è supportato solo nei browser più moderni. AngularJS è un framework MVC completo progettato per rendere dichiarative le applicazioni Web mediante l'uso di associazioni, dipendenze e direttive di dati. Sono due animali completamente diversi. Alla tua domanda, mi sembra che a questo punto non trarrai alcun grande vantaggio dall'uso del polimero su angolare, se non per dozzine di componenti pre-costruiti, tuttavia ciò richiederebbe comunque che tu li porti su direttive angolari. In futuro, tuttavia, man mano che le API Web diventeranno più avanzate, i componenti Web rimuoveranno completamente la necessità di definire e creare programmi in modo programmatico poiché il browser sarà in grado di includerli in modo simile a come gestisce i file JavaScript o CSS.

— richbai90
fonte
1
"Sono due animali completamente diversi." Sì, lo sono, ma questo non ha nulla a che fare con la domanda. La domanda riguarda Polimeri ELEMENTI vs AngularJS DIRECTIVES. E quelli sono molto simili in molti modi. Non stiamo chiedendo quale sia il miglior framework da utilizzare .. Polymer vs AngularJS. "A questo punto mi sembra che non trarrai grandi benefici dall'uso del polimero rispetto all'angolo" Nessuno lo ha suggerito, infatti ne abbiamo tutti parlato alla fine utilizzandoli fianco a fianco in qualche modo. "Alla tua domanda, ... non trarrai alcun vantaggio dall'uso del polimero rispetto all'angolo" Ancora una volta, non la domanda.
— Eric Bishard,
0

La MVVM (vista-modello, vista-modello) che Angular offre non è una preoccupazione che Polymer mira a risolvere. La natura compostabile e riutilizzabile che le direttive angolari ti danno (un tag personalizzato + una combinazione logica associata) è un confronto più sano se si considera il confronto tra angolare e polimero. Angular è e rimarrà un quadro più ampio per lo scopo.

— saurshaz
fonte
0

Qual è la differenza tra i due?

Per un utente: non molto. Puoi creare fantastiche app con entrambi.

Per uno sviluppatore: usano una diversa sintassi, quindi entrambe le soluzioni hanno una curva di apprendimento piuttosto ripida. Angular è in circolazione da più tempo e ha una community ENORME, quindi sarebbe difficile trovare problemi che non sono stati risolti.

Per un architetto: molto diverso. Angular è un framework applicativo responsabile di tutti gli aspetti della tua vita. Ha anche direttive integrate verticalmente nel caso in cui desideri funzionalità come componenti. Il polimero, d'altra parte, è più simile a pay-as-you-go. Vuoi una cosa modale e sicura, vuoi un widget interattivo, nessun problema, vuoi la gestione del percorso, possiamo farlo. Polymer è anche più portatile in quanto Angular richiede un'app Angular per riutilizzare le direttive. L'idea con Polymer è più modulante e funzionerà in altre app, anche nelle app Angular.

Quali problemi risolve Polymer che AngularJS non ha o non vuole?

Polymer è un approccio per sfruttare i nuovi standard dei componenti web. Se funzioni come elementi personalizzati, Shadow DOM e importazioni HTML sono supportate localmente, sarebbe sciocco non trarne vantaggio. Attualmente la maggior parte delle funzionalità dei componenti Web non sono ampiamente supportate ( stato corrente ), quindi Polymer agisce come spessore o ponte. Un po 'come un polyfill (in realtà usa i polyfill).

Ci sono piani per legare Polymer con AngularJS in futuro?

Usiamo Angular e Polymer insieme da oltre un anno. Parte della decisione di fare ciò si basava sulle promesse fatte direttamente dal team Polymer a noi sull'interoperabilità. Abbiamo rinunciato a quell'idea. Ci stiamo muovendo verso l'utilizzo del solo polimero.

Per rifarlo probabilmente non avremmo fatto la mossa per usare Polymer, ma aspettiamo che maturi. Detto questo, Polymer ha i suoi pro (alcuni abbastanza buoni) e contro (alcuni dei quali sono abbastanza frustranti) ma penso che sia una discussione per un altro thread.

— Perché no
fonte
0

Angularjs Direttivaè un approccio per creare elementi personalizzati. puoi definire nuovi tag personalizzati con attributi personalizzati. Anche Polymer può farlo, ma lo farà in un modo interessante e più semplice: in realtà Polymer non è un framework, è solo una libreria, ma una libreria potente e sorprendente di cui puoi innamorarti (come me). Polymer ti consente di apprendere la tecnologia dei componenti Web nativi creata da w3c, che i browser web alla fine implementano. Il componente Web è la tecnologia futura, ma polimero ti consente di utilizzare quella tecnologia in questo momento. Google Polymer è una libreria che fornisce zucchero sintetico e polifilloli per l'edilizia elementi e applicazioni con componenti Web. Ricorda che ho detto che il polimero non è un framework ed è una libreria, ma quando usi Polymer, in realtà il tuo framework è DOM. questo post parlava di angular js ver 1 e polimero e ho lavorato con entrambi i miei progetti e personalmente preferisco il polimero agli angularjs. Ma Angular versione 2 è completamente diversa rispetto a angularjs ver 1.directive in angular 2 ha un significato diverso.

— Behzad Besharati
fonte
0

Le direttive angolari sono concettualmente simili agli elementi personalizzati ma sono implementate senza l'uso delle API di Web Components. Le direttive angolari sono un modo per costruire elementi personalizzati, ma Polymer e le specifiche dei componenti Web sono il modo basato su standard per farlo.

polimero-Elemento:

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

Direttiva angolare:

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
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.