Jaka jest różnica między elementami polimerowymi a dyrektywami AngularJS?

524

Na stronie Rozpoczęcie pracy z polimerem widzimy przykład polimeru w akcji:

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

To, co zauważysz, jest <x-foo></x-foo>definiowane przez platform.jsi x-foo.html.

Wygląda na to, że jest to odpowiednik modułu dyrektywy w 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) {
        }
    };
});

  • Jaka jest różnica między nimi?

  • Jakie problemy rozwiązuje Polymer, których AngularJS nie ma lub nie będzie?

  • Czy są plany związania Polymer z AngularJS w przyszłości?

javascript  angularjs  polymer 
— Dan Kanze
źródło
Wykorzystaj informacje tutaj 2ality - Role AngularJS i Polymer
— LCJ

Odpowiedzi:

520

Nie jesteś pierwszym, który zadaje to pytanie :) Pozwól, że wyjaśnię kilka rzeczy, zanim przejdę do twoich pytań.

  1. Polymer webcomponents.jsto biblioteka, która zawiera kilka wypełniaczy dla różnych interfejsów API W3C, które wchodzą w skład komponentu Web Components. To są:

    • Elementy niestandardowe
    • Import HTML
    • <template>
    • Shadow DOM
    • Wskaźniki zdarzeń
    • inni

    Lewy klawisz nawigacyjny w dokumentacji ( polimer-project.org ) zawiera stronę dla wszystkich tych „technologii platform”. Każda z tych stron ma również wskaźnik do pojedynczego wypełnienia.

  2. <link rel="import" href="x-foo.html">jest importem HTML. Importowanie jest przydatnym narzędziem do włączania HTML w innym HTML. Możesz dołączyć <script>, <link>, znaczników, czy cokolwiek innego w imporcie.

  3. Nic nie „linkuje” <x-foo>do x-foo.html. W twoim przykładzie przyjęto, że definicja elementu niestandardowego <x-foo>(np. <element name="x-foo">) Jest zdefiniowana w x-foo.html. Gdy przeglądarka zobaczy tę definicję, zostanie zarejestrowana jako nowy element.

Na pytania!

Jaka jest różnica między Angular a Polymer?

Część tego omówiliśmy w naszym filmie z pytaniami i odpowiedziami . Ogólnie rzecz biorąc, Polymer jest biblioteką, której celem jest wykorzystanie (i pokazanie, jak używać) składników sieci Web. Jego podstawą są elementy niestandardowe (np. Wszystko, co budujesz, jest komponentem sieciowym) i ewoluuje wraz z rozwojem sieci. W tym celu obsługujemy tylko najnowszą wersję nowoczesnych przeglądarek.

Użyję tego obrazu, aby opisać cały stos architektury Polymera:

wprowadź opis zdjęcia tutaj

Warstwa RED: jutrzejszą sieć otrzymujemy dzięki zestawowi wypełnień. Należy pamiętać, że biblioteki te z czasem znikają, gdy przeglądarki przyjmują nowe interfejsy API.

ŻÓŁTA warstwa: Posyp odrobiną cukru polimerem.js. Ta warstwa to nasza opinia na temat wspólnego korzystania z określonych interfejsów API. Dodaje także takie elementy, jak wiązanie danych, cukier syntaktyczny, obserwatory zmian, publikowane właściwości ... Uważamy, że te rzeczy są pomocne w tworzeniu aplikacji opartych na komponentach internetowych.

ZIELONY: Kompleksowy zestaw elementów interfejsu użytkownika (zielona warstwa) jest nadal w toku. Będą to komponenty sieciowe, które wykorzystują wszystkie czerwone + żółte warstwy.

Dyrektywy kątowe a elementy niestandardowe?

Zobacz Alex Russella odpowiedź . Zasadniczo Shadow DOM pozwala komponować fragmenty HTML, ale jest także narzędziem do enkapsulacji tego HTML. Jest to zasadniczo nowa koncepcja w Internecie i coś, co inne ramy wykorzystają.

Jakie problemy rozwiązuje Polymer, których AngularJS nie ma lub nie będzie?

Podobieństwa: szablony deklaratywne, powiązanie danych.

Różnice: Angular ma interfejsy API wysokiego poziomu dla usług, filtrów, animacji itp., Obsługuje IE8, i na tym etapie jest znacznie bardziej niezawodną strukturą do budowania aplikacji produkcyjnych. Polimer dopiero zaczyna się w fazie alfa.

Czy są plany związania Polymer z AngularJS w przyszłości?

To osobne projekty . To powiedziawszy, zarówno zespoły Angular, jak i Ember ogłosiły , że ostatecznie przestawią się na używanie bazowych interfejsów API platformy we własnych ramach.

^ To jest ogromna wygrana IMO. W świecie, w którym programiści mają potężne narzędzia (Shadow DOM, Custom Elements), autorzy frameworków mogą również wykorzystywać te prymitywne elementy do tworzenia lepszych frameworków. Większość z nich obecnie przechodzi przez świetne obręcze, aby „wykonać zadanie”.

AKTUALIZACJA:

Jest naprawdę świetny artykuł na ten temat: „ Oto różnica między polimerem a kątem ”

— ebidel
źródło
46
Ważną kwestią tutaj jest to, że Polymer ma na celu rozwój sieci, jaką znamy, w szczególności poprzez pokazanie, w jaki sposób Komponenty Web mogą sprawić, że Sieć będzie otwarta, udostępniana i rozszerzalna. AngularJS (i Ember w tym przypadku) polega na stworzeniu frameworka, który wykorzystuje najlepsze części przeglądarki do tworzenia responsywnych aplikacji. Gdy komponenty sieciowe będą lepiej obsługiwane przez przeglądarki, Angular i inne frameworki mogą się na nich opierać, aby zmniejszyć kod frameworka i uprościć aplikacje. Dlatego jest to Win-Win dla wszystkich.
— Schmuli,
31
Nadal nie rozumiem, jaka jest praktyczna różnica między niestandardowymi elementami polimerowymi a dyrektywami kątowymi? Dlaczego miałbym używać Polymer Custom Elements zamiast dyrektyw Angular w projekcie Angular?
— ronag
3
Tak więc istniejące projekty Angular i Ember ostatecznie skorzystają na wykorzystaniu interfejsów API platformy. Ale jeśli komponenty sieci Web są lepiej obsługiwane przez przeglądarki, czy korzystanie z Angulara przy nowych projektach przyniosłoby jakieś korzyści , czy też faktycznie staje się zbędne?
— naleśnik
8
Myślę, że chcę zrobić to czarno-białe: trzymaj się AngularJS do produkcji i baw się Polymer w wolnym czasie, abyś mógł się z nim zapoznać, kiedy nadejdzie czas.
— thdoan
31
Jest to ładny przegląd pliku polimer.js, ale w żaden sposób nie odpowiada dokładnie na pytanie ...
— Christoph
57

Na twoje pytanie:

Czy są plany związania Polymer z AngularJS w przyszłości?

Z oficjalnego konta AngularJS na Twitterze: „angularjs użyje polimeru do swoich widżetów. To wygrana-wygrana”

źródło: https://twitter.com/angularjs/status/335417160438542337

— loïc m.
źródło
2
@NREZ Ok, nie odpowiadam na tytuł wpisu, ale jedno z pytań wewnątrz postu Moja odpowiedź dotyczy tylko trzeciego pytania: Are there plans to tie Polymer in with AngularJS in the future? Myślę, że dobrym pomysłem jest zacytowanie oryginalnego postu z zespołu AngularJS, którego nie uważasz ?
— loïc m.
Tak, twój punkt jest poprawny ... Tylko że opis mógłby być lepszy ... Tak jak zrobiłem tym razem i jestem pewien, że następnym razem też ...
— NREZ
Tak, oczywiście. dzięki za aktualizację :) (Właśnie zaczynam używać Stackoverflow, więc nie widzę twojej aktualizacji przed odpowiedzią ...)
— Loïc m.
Więc zmienili zdanie? Nie mogę znaleźć, gdzie używają polimeru.
— theblang
nie sądzę, że to odpowiedź.
— astroanu,
19

1 i 2) Komponenty polimerowe mają zakres ze względu na ich ukryte drzewo w cieniu. Oznacza to, że ich styl i zachowanie nie mogą wykrwawić się. Angular nie jest objęty tą konkretną dyrektywą, którą tworzysz jak polimerowy komponent sieciowy. Dyrektywa kątowa może być w konflikcie z czymś w twoim globalnym zasięgu. IMO korzyść, jaką uzyskasz z polimeru, to to, co wyjaśniłem .. modułowe komponenty, które mają zakres css i JavaScript do tego konkretnego komponentu, którego nic nie może dotknąć. Nietykalny DOM!

Można tworzyć dyrektywy kątowe, aby można było dodawać adnotacje do elementu o kilku funkcjach. W przypadku elementów sieci polimerowych tak nie jest. Jeśli chcesz połączyć funkcjonalność komponentów, dołącz dwa komponenty do innego komponentu (lub zawiń je w innym komponencie) lub możesz rozszerzyć istniejący komponent. Pamiętaj, że główną różnicą nadal jest to, że każdy komponent jest objęty komponentami z sieci polimerowej. Możesz współdzielić pliki css i js z kilku komponentów lub możesz je wstawiać.

3) Tak, Angular planuje wprowadzić polimer w wersji 2+ według Roba Dodsona i Erica Bidelmana

To zabawne, że nikt tutaj nie wspomniał o zasięgu słowa. Myślę, że to jedna z głównych różnic.

Istnieje wiele różnic, ale mają one również wiele wspólnego, jeśli chodzi o tworzenie modułowej funkcjonalności Lego podobnej do aplikacji. Myślę, że można bezpiecznie powiedzieć, że Angular byłby ramą aplikacji, a polimer mógłby pewnego dnia żyć w tej samej aplikacji wraz z dyrektywami, przy czym główną różnicą jest zakres, ale polimer może zastępować wiele z twoich obecnych dyrektyw. Ale nie widzę powodu, dla którego Angular nie mógł działać w obecnej postaci i zawierać również składniki polimerowe.

Czytając ponownie odpowiedzi, pisząc to, zauważyłem, że Eric Bidelman (ebidel) ukrył to w swojej odpowiedzi :

„Shadow DOM pozwala komponować fragmenty HTML, ale jest także narzędziem do enkapsulacji tego HTML”.

Aby wyrazić uznanie tam, gdzie należny jest kredyt, otrzymałem odpowiedzi od wysłuchania wielu wywiadów z Robem Dodsonem i Ericiem Bidelmanem . Ale czuję, że odpowiedź nie została sformułowana, aby dać temu facetowi zrozumienie, którego chciał. Powiedziawszy to, myślę, że dotknąłem odpowiedzi, której szuka, ale w żaden sposób nie posiadam więcej informacji na ten temat niż Rob Dodson i Eric Bidelman

Oto moje główne źródła informacji, które zebrałem.

JavaScript Jabber - Polymer z Robem Dodsonem i Erikiem Bidelmanem

Shop Talk Show - Komponenty sieciowe z Robem Dodsonem

— Eric Bishard
źródło
1
Więc jeśli użyję normalize.css, to nie normalizuje się w cieniu? Więc muszę osobno znormalizować każdy taki element, bez możliwości zrobienia tego raz? Czy to dobrze?
— Dmitri Zaitsev,
1
Nie myśl o Shadow DOM jako IFRAME. I używam tego porównania luźno, ponieważ nie jest to IFRAME. Ale w ramce IFRAME miałbyś swój własny dokument, na który nie mają wpływu strony CSS i JavaScript dokumentu nadrzędnego. To bardzo dobra rzecz. Oznacza to, że możesz zagwarantować, że określony komponent będzie działał zgodnie z przeznaczeniem i nie zostanie zakłócony przez stronę nadrzędną. Jednak jeśli cień DOM chciał użyć DOM ze strony nadrzędnej, może to zrobić. Ale to inny temat.
— Eric Bishard,
1
Rozumiem, tak, CSS jest nieszczelnym językiem, ale w większości przypadków istnieje proste (choć nie idealne) rozwiązanie, wykorzystujące unikalne prefiksy klas wewnątrz DOM, które chcesz izolować. I oczywiście, unikając selektorów znaczników i identyfikatorów, co i tak nie jest dobrą praktyką. Z drugiej strony niektóre z tych deklaracji, które możesz chcieć wyciec (jak normalize.cssarkusze lub inne arkusze oparte na znacznikach), co ponownie jest łatwo osiągalne bez Shadow DOM. Z pewnością nie idealna izolacja, ale prob. działa w 95% przypadków użycia, przynajmniej tych, o których myślę.
— Dmitri Zaitsev,
2
Powiedziawszy to, muszę powiedzieć, że widzę wartość właściwej izolacji i znajduję odpowiedź, która daje dobre wyjaśnienie.
— Dmitri Zaitsev,
6

Polimer to podkładka do komponentów internetowych

  • „ Komponenty sieciowe ” to nowy zestaw standardów, który obejmuje HTML 5, zaprojektowany w celu zapewnienia elementów składowych wielokrotnego użytku do aplikacji internetowych.

  • Przeglądarki są w różnych stanach wdrażania specyfikacji „Komponentów internetowych”, dlatego jest zbyt wcześnie, aby pisać HTML przy użyciu Komponentów internetowych.

  • Ale niestety! Polimer na ratunek! Polymer to biblioteka, która zapewnia warstwę abstrakcji w kodzie HTML, umożliwiając korzystanie z interfejsu API Web Components API, tak jakby był w pełni zaimplementowany we wszystkich przeglądarkach. Nazywa się to napełnianiem poli , a zespół Polymer dystrybuuje tę bibliotekę jako webcomponents.js . Nazywało się to kiedyś platform.js btw.

Ale Polymer to coś więcej niż biblioteka wypełniania stron dla komponentów internetowych ...

Polymer zapewnia również otwarte i wielokrotnego użytku bloki konstrukcyjne Web Component za pośrednictwem Elements

wprowadź opis zdjęcia tutaj

Wszystkie elementy można dostosowywać i rozszerzać. Są one używane jako elementy składowe wszystkiego - od widżetów społecznościowych, animacji po klientów Web API.

Polymer nie jest strukturą aplikacji internetowych

  • Polimer jest raczej biblioteką niż szkieletem.

  • Polimer nie obsługuje takich elementów, jak trasy, zakres zastosowania, kontrolery itp.

    • Ale ma dwukierunkowe wiązanie, a używanie komponentów „przypomina” tak samo, jak stosowanie dyrektyw Angular.

  • Chociaż istnieją pewne nakładki między Polymer i AngularJS, nie są one takie same. W rzeczywistości zespół AngularJS wspomniał o wykorzystaniu bibliotek Polymer w nadchodzących wydaniach.

  • Zauważ również, że polimer jest nadal uważany za „krwawiący brzeg”, podczas gdy AngularJS stabilizuje się.

  • Ciekawie będzie obserwować ewolucję obu tych projektów Google!

— Robert Christian
źródło
Polimer nie jest podkładką ani wypełniaczami. Takie właśnie są polypełniacze webcomponents.js. Polymer to biblioteka do tworzenia komponentów internetowych. Zespół Polymer stworzył również kolekcje komponentów sieciowych (wdrożonych przy użyciu Polimeru), ale nie są to również „Polimery”
— ebidel,
Aktualizacja: Polimer ma teraz trasy i jest stabilny! : D
— JordyvD
5

Myślę, że z praktycznego punktu widzenia funkcja szablonu dyrektyw kątowych i metodologia komponentu sieciowego wykorzystywana przez polimer spełniają to samo zadanie. Główne różnice, jakie widzę, to to, że polimer wykorzystuje internetowe interfejsy API, aby zawierać fragmenty HTML, bardziej poprawny pod względem składniowym i uproszczony sposób osiągnięcia tego, co Angular robi programowo podczas renderowania szablonów. Polimer jest jednak, jak stwierdzono, małym szkieletem do budowania deklaratywnych i interaktywnych szablonów przy użyciu komponentów. Udostępniono go wyłącznie do celów projektowania interfejsu użytkownika i jest obsługiwany tylko w najnowocześniejszych przeglądarkach. AngularJS jest kompletnym środowiskiem MVC zaprojektowanym do deklaratywności aplikacji internetowych za pomocą powiązań danych, zależności i dyrektyw. To dwa zupełnie różne zwierzęta. Na twoje pytanie Wydaje mi się, że w tym momencie nie będziesz czerpać większych korzyści z używania polimeru nad kątownikiem, oprócz posiadania dziesiątek gotowych komponentów, jednak nadal wymagałoby to przeniesienia ich do dyrektyw kątowych. Jednak w przyszłości, gdy interfejsy API sieci staną się bardziej zaawansowane, składniki sieciowe całkowicie wyeliminują potrzebę programowego definiowania i budowania szablonów, ponieważ przeglądarka będzie mogła je po prostu włączyć w podobny sposób, jak obsługuje pliki javascript lub css.

— richbai90
źródło
1
„To dwa zupełnie różne zwierzęta”. Tak, ale nie ma to nic wspólnego z pytaniem. Pytanie dotyczy ELEMENTÓW polimerowych a DYREKTYW AngularJS. I są one bardzo podobne na wiele sposobów. Nie pytamy o to, jaki jest najlepszy Framework do użycia .. Polymer vs AngularJS. „Wydaje mi się, że w tym momencie nie będziesz czerpać większych korzyści z używania polimeru nad kątem” Nikt tego nie sugerował, w rzeczywistości wszyscy rozmawialiśmy o tym, że w końcu używamy ich obok siebie w pewnym stopniu. „Na twoje pytanie… nie odniesiesz żadnej korzyści z zastosowania polimeru nad kątem” Znowu, nie pytanie.
— Eric Bishard,
0

MVVM (widok modelu, widok modelu), który oferuje Angular, nie stanowi problemu, który Polymer zamierza rozwiązać. Komponowalny i wielokrotnego użytku, który dają ci dyrektywy Angular (niestandardowy tag + powiązana kombinacja logiczna), jest bardziej rozsądnym porównaniem, gdy rozważasz porównanie Angular i Polymer. Angular jest i pozostanie szerszą ramą służącą celom.

— Saurshaz
źródło
0

Jaka jest różnica między nimi?

Do użytkownika: niewiele. Za pomocą obu możesz tworzyć niesamowite aplikacje.

Do programisty: używają zupełnie innej składni, więc każde rozwiązanie ma dość stromą krzywą uczenia się. Angular istnieje już dłużej i ma OGROMNĄ społeczność, więc trudno będzie znaleźć problemy, które nie zostały rozwiązane.

Do architekta: bardzo inny. Angular to platforma aplikacji odpowiedzialna za wszystkie aspekty twojego życia. Ma nawet dyrektywy zintegrowane pionowo, na wypadek gdybyś chciał mieć funkcje podobne do komponentów. Z drugiej strony polimer jest bardziej podobny do tego, jak korzystasz. Chcesz modalnego, na pewno, chcesz interaktywnego widżetu, nie ma problemu, chcesz obsługi tras, możemy to zrobić. Polimer jest również bardziej przenośny, ponieważ Angular wymaga aplikacji Angular do ponownego wykorzystania dyrektyw. Pomysł z Polimerem jest bardziej modulujący i będzie działał w innych aplikacjach, nawet aplikacjach Angular.

Jakie problemy rozwiązuje Polymer, których AngularJS nie ma lub nie będzie?

Polimer to podejście zmierzające do wykorzystania nowych standardów komponentów sieciowych. Jeśli funkcje takie jak elementy niestandardowe, Shadow DOM i import HTML są obsługiwane lokalnie, głupotą byłoby nie korzystać z nich. Obecnie większość funkcji komponentu WWW nie jest powszechnie obsługiwana ( obecny stan ), więc Polymer działa jak podkładka lub mostek. Trochę jak polifill (w rzeczywistości używa polypełniaczy).

Czy są plany związania Polymer z AngularJS w przyszłości?

Używamy Angular i Polymer razem od ponad roku. Część decyzji w tej sprawie opierała się na obietnicach złożonych nam bezpośrednio przez zespół Polymer, że współpraca będzie możliwa. Zrezygnowaliśmy z tego pomysłu. Teraz przechodzimy na używanie wyłącznie Polimerów.

Aby to zrobić ponownie, prawdopodobnie nie zdecydowalibyśmy się na użycie Polimeru, zamiast tego czekaliśmy, aż dojrzeje. Biorąc to pod uwagę, Polymer ma swoje zalety (niektóre całkiem dobre) i wady (niektóre z nich są dość frustrujące), ale myślę, że jest to dyskusja na inny wątek.

— Dlaczego nie
źródło
0

Angularjs Dyrektywajest podejściem do tworzenia niestandardowych elementów. możesz zdefiniować nowe tagi niestandardowe za pomocą niestandardowych atrybutów. Polymer może to zrobić, ale zrobi to w ciekawy i prostszy sposób. Polimer w rzeczywistości nie jest szkieletem, to po prostu biblioteka. Ale potężna i niesamowita biblioteka, w której można się zakochać (tak jak ja). Polymer pozwala poznać natywną technologię komponentów sieciowych stworzoną przez w3c, którą przeglądarki internetowe ostatecznie implementują. Komponent web jest technologią przyszłości, ale polimer pozwala na korzystanie z tej technologii w tej chwili. Google Polymer to biblioteka, która zapewnia cukier syntaktyczny i wypełniacze do budowania elementy i aplikacje z komponentami sieciowymi. Pamiętaj, że powiedziałem, że polimer nie jest szkieletem i jest biblioteką, ale kiedy używasz polimeru, tak naprawdę twój szkielet to DOM. ten post dotyczył kątowego js ver 1 i polimeru. Pracowałem nad obiema z nich, to moje projekty i osobiście wolę polimer od angularjs. Ale wersja Angular 2 jest zupełnie inna w porównaniu z angularjs ver 1.Directive w Angular 2 ma inne znaczenie.

— behzad besharati
źródło
0

Dyrektywy kątowe są koncepcyjnie podobne do elementów niestandardowych, ale są implementowane bez użycia interfejsów API komponentów internetowych. Dyrektywy kątowe są sposobem na budowanie niestandardowych elementów, ale Polymer i specyfikacja Web Components są standardowym sposobem na to.

element polimerowy:

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

Dyrektywa kątowa:

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
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.