Чим відрізняються між полімерними елементами та директивами AngularJS?

524

На сторінці Полімер Початок роботи ми бачимо приклад дії Полімеру в дії:

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

Що ви помітите <x-foo></x-foo>, визначається platform.jsі x-foo.html.

Схоже, це еквівалент модулю директиви в 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) {
        }
    };
});

Яка різниця між ними?
Які проблеми вирішує Polymer, що AngularJS не має чи не буде?
Чи плануєте в майбутньому пов'язати «Полімер» з AngularJS?

javascript angularjs polymer

— Дан Канзе
джерело

Інформація про Usefule тут 2ал. - Ролі AngularJS та Polymer

— LCJ

520

Ви не перший, хто задає це питання :) Дозвольте мені уточнити пару речей, перш ніж перейти до ваших питань.

Polymer's webcomponents.js- це бібліотека, яка містить декілька поліфілів для різних API W3C, які підпадають під парасольку веб-компонентів. Це:
- Спеціальні елементи
- Імпорт HTML
- <template>
- Тінь DOM
- Вказівник події
- інші
У лівій частині документації ( polymer-project.org ) є сторінка для всіх цих «платформних технологій». Кожна з цих сторінок також має вказівник на окремий поліфайл.
<link rel="import" href="x-foo.html">це імпорт HTML. Імпорт є корисним інструментом для включення HTML в інший HTML. Ви можете включити <script>, <link>розмітку або інше в імпорт.
Нічого не "посилається" <x-foo>на x-foo.html. У вашому прикладі передбачається, що визначення користувальницького елемента <x-foo>(наприклад <element name="x-foo">) визначено в x-foo.html. Коли браузер бачить це визначення, він реєструється як новий елемент.

На питання!

У чому різниця між кутовими та полімерними?

Деякі з них ми висвітлювали у нашому відеозапиті на запитання . Загалом, Polymer - це бібліотека, яка має на меті використовувати (і показати, як користуватися) веб-компонентами. Його основою є користувацькі елементи (наприклад, все, що ви будуєте, це веб-компонент), і воно розвивається в міру розвитку мережі. З цією метою ми підтримуємо лише останню версію сучасних браузерів.

Я використаю це зображення, щоб описати весь стек архітектури Polymer:

введіть тут опис зображення

ЧЕРВНІЙ шар: Ми отримуємо завтра павутину через набір поліфілів. Майте на увазі, що ці бібліотеки з часом вимикаються, коли браузери приймають нові API.

ЖОВТИЙ шар: Посипте трохи цукру полімером.js. Цей шар - наша думка щодо того, як разом використовувати API spec'd. Він також додає такі речі, як прив'язка даних, синтатичний цукор, динаміки змін, опубліковані властивості ... Ми вважаємо, що ці речі корисні для створення програм на базі веб-компонентів.

ЗЕЛЕНИЙ: всеосяжний набір компонентів інтерфейсу (зелений шар) ще триває. Це веб-компоненти, які використовують усі червоні та жовті шари.

Кутові директиви проти користувацьких елементів?

Див Alex Рассела відповідь . В основному, Shadow DOM дозволяє складати біти HTML, але також є інструментом для інкапсуляції цього HTML. Це принципово нова концепція в Інтернеті, і дещо інші рамки будуть корисними.

Які проблеми вирішує Polymer, що AngularJS не має чи не буде?

Подібність: декларативні шаблони, прив'язка даних.

Відмінності: Angular має API високого рівня для сервісів, фільтрів, анімації тощо, підтримує IE8, і в цей момент є набагато більш надійною основою для створення виробничих додатків. Полімер тільки починається з альфа.

Чи плануєте в майбутньому пов'язати «Полімер» з AngularJS?

Це окремі проекти . При цьому як Angular, так і Ember команди оголосили, що врешті-решт перейдуть до використання базових API платформ у своїх власних рамках.

^ Це величезний виграш IMO. У світі, де веб-розробники мають потужні інструменти (Shadow DOM, Custom Elements), автори фреймворків також можуть використовувати ці примітиви для створення кращих рамок. Більшість із них зараз проходять великі обручі, щоб "виконати роботу".

ОНОВЛЕННЯ:

На цю тему дійсно чудова стаття: " Ось різниця між полімером та кутовим "

— ebidel
джерело

46

Важливим моментом тут є те, що Polymer має на меті використовувати Інтернет так, як ми його знаємо, зокрема, показуючи, як веб-компоненти можуть зробити Інтернет відкритим, доступним для обміну та розширюваному. AngularJS (і Ембер для цього питання) полягає у створенні рамки, яка використовує найкращі частини браузера для створення чуйних додатків. Після того, як веб-компоненти краще підтримуються веб-переглядачами, кутові та інші рамки можуть будувати на них, щоб зменшити рамковий код і додатки спростити. Ось чому це Win-Win для всіх.

— Шмулі

31

Я досі не розумію, у чому полягає практична різниця між Полімерними елементами та кутовими директивами? Чому я використовую полімерні користувацькі елементи замість кутових директив у кутовому проекті?

— ronag

3

Таким чином, існуючі проекти Angular та Ember отримають користь від використання API-програм базової платформи. Але коли веб-компоненти краще підтримуються браузерами, чи буде користь від використання Angular у нових проектах чи це фактично стає зайвим?

— млинець

8

Я думаю зробити це чорно-білим: дотримуйтесь AngularJS для виробничих матеріалів і пограйте з Полімером у вільний час, щоб ви ознайомилися з ним, коли настане час.

— thoan

31

Це приємний огляд polymer.js, але жодним чином не відповідає на питання грунтовно ...

— Крістоф

57

Для вашого питання:

Чи плануєте в майбутньому пов'язати «Полімер» з AngularJS?

З офіційного акаунта твіттера AngularJS: "angularjs використовуватиме полімер для своїх віджетів. Це безпрограшний"

джерело: https://twitter.com/angularjs/status/335417160438542337

— loïc m.
джерело

2

@NREZ Гаразд, я не відповідаю на заголовок публікації, але одне із запитань всередині публікації. Моя відповідь стосується лише третього запитання: Are there plans to tie Polymer in with AngularJS in the future? я думаю, це гарна ідея, щоб процитувати оригінальний пост від команди AngularJS, про який ви не думаєте ?

— loïc m.

Але впевнений, що ур-пункт дійсний ... Тільки, що опис міг бути кращим ... Як і я це зробив цього разу, і я впевнений, що наступного разу і будеш так

— NREZ

так, звичайно. THX для вашого оновлення :) (я просто починаю реально використовувати stackoverflow, тому я не бачу вашого оновлення, перш ніж відповісти вам ...)

— loïc m.

Так вони там змінили думки? Я не можу знайти, де вони використовують полімер.

— theblang

я не думаю, що це відповідь.

— astroanu

19

У цьому відео 2 хлопці з AngularJS розповіли про відмінності та схожість щодо цих двох каркасів (AngularJS 1.2 та далі).

Ці посилання приведуть вас до правильних запитань:

— Тобіас Оберрах
джерело

19

1 і 2) Полімерні компоненти розміщені внаслідок їх прихованого дерева в тіньовому домі. Це означає, що їхній стиль та поведінка не можуть знехтувати. Кутовий не підпадає під ту директиву, яку ви створюєте, як полімерний веб-компонент. Кутова директива, можливо, може суперечити чомусь у вашому глобальному масштабі. ІМО користь, яку ви отримаєте від полімеру, - це те, що я пояснив. Недоторканий DOM!

Кутові директиви можна створити так, що ви можете коментувати елемент з кількома функціональними можливостями. У веб-компонентах Polymer це не так. Якщо ви хочете поєднати функціональність компонентів, ви включите два компоненти в інший компонент (або оберніть їх в інший компонент) або можете розширити існуючий компонент. Пам’ятайте, головна відмінність все-таки полягає в тому, що кожен компонент охоплюється полімерними веб-компонентами. Ви можете поділитися файлами css & js у кількох компонентах або вбудувати їх.

3) Так, кутові плани щодо включення полімеру у версію 2+ за версією Роба Додсона та Еріка Бідельмана

Смішно, як тут ніхто не згадав про слово сфера. Я думаю, що це одна з основних відмінностей.

Існує багато відмінностей, але вони також мають багато спільного, коли справа стосується створення модульних лего, як частин функціональності для програми. Я думаю, що з упевненістю можна сказати, що Angular був би рамкою застосування, і полімер може одного дня жити в одному додатку разом із побічними директивами, головна різниця - сфера застосування, але полімер може бути заміною для багатьох ваших чинних директив. Але я не бачу причин, чому Angular не міг би працювати як є, а також включати полімерні компоненти.

Читаючи відповіді ще раз, коли я це пишу, я помітив, що Ерік Бідельман (ебіддель) справді висвітлював це у своїй відповіді :

"Shadow DOM дозволяє складати біти HTML, але також є інструментом для інкапсуляції цього HTML."

Щоб дати кредит там, де належить кредит, я отримав свої відповіді, слухаючи багато інтерв’ю з Робом Додсоном та Еріком Бідельманом . Але я відчуваю, що відповідь не була сформульована для того, щоб дати питання хлопця зрозуміти, що він хоче. Зважаючи на це, я думаю, що я торкнувся відповіді, яку він шукає, але я жодним чином не володію більшою інформацією про цю тему, ніж Роб Додсон та Ерік Бідельман

Ось мої основні джерела інформації, яку я зібрав.

JavaScript Jabber - полімер з Роб Додсоном та Еріком Бідельманом

Магазин ток-шоу - веб-компоненти з Робом Додсоном

— Ерік Бішард
джерело

1

Тож якщо я використовую normalize.css, це не нормалізується всередині тіньового дому? Тож мені потрібно окремо нормалізувати кожен такий компонент, без способу це зробити один раз? Це добре?

— Дмитро Зайцев

1

Не варто думати про тінь DOM як ІФРАМ. І я порівняно використовую це порівняння, оскільки це не ІФРАМ. Але в IFRAME у вас буде власний документ, на який не впливають сторінки CSS та JavaScript батьківського документа. Це дуже гарна річ. Це означає, що ви можете гарантувати, що певний компонент буде працювати за призначенням і не буде заважати батьківській сторінці. Однак якщо тіньовий DOM хотів використовувати DOM з батьківської сторінки, він може. Але це вже інша тема.

— Ерік Бішард

1

Я бачу, так, CSS є простою мовою, але в більшості випадків є просте (хоча і не ідеальне) рішення, використовуючи унікальні префікси класу всередині DOM, які ви хочете виділити. І, звичайно, уникаючи селекторів тегів та ідентифікаторів, що все одно не є хорошою практикою. З іншого боку, деякі з цих декларацій ви, можливо, захочете просочитись (наприклад, normalize.cssабо інші аркуші на основі тегів), що знову легко досягти без Shadow DOM. Погоджуватися, не ідеальна ізоляція, але проблема. працює в 95% випадків використання, принаймні тих, про які я можу придумати.

— Дмитро Зайцев

2

Сказавши це, я мушу сказати, що я бачу заслугу належної ізоляції, і знайшов вашу відповідь, що дає хороші пояснення.

— Дмитро Зайцев

6

Полімер - підкладка веб-компонентів

" Веб-компоненти " - це новий набір стандартів, який охоплює HTML 5, покликаний забезпечити багаторазові будівельні блоки для веб-додатків.
Веб-переглядачі знаходяться в різних станах впровадження специфікації "Веб-компоненти", і тому писати HTML за допомогою веб-компонентів ще рано.
Але на жаль! Полімер на допомогу! Полімер - це бібліотека, яка забезпечує рівень абстракції у вашому HTML-коді, що дозволяє йому використовувати API веб-компонентів так, ніби він повністю реалізований у всіх браузерах. Це називається poly- fill , і команда Polymer поширює цю бібліотеку як webcomponents.js . Це називалося platform.js btw.

Але Polymer - це більше, ніж бібліотека для заповнення веб-компонентів ...

Полімер також забезпечує відкриті та багаторазові будівельні блоки веб-компонентів через Elements

Всі елементи можна налаштувати та розширити. Вони використовуються як будівельні блоки для всього, від соціальних віджетів до анімації до клієнтів веб-API.

Полімер не є рамкою веб-додатків

Полімер - це більше бібліотека, ніж рамки.
Полімер не підтримує такі речі, як маршрути, область застосування, контролери тощо.
- Але він має двостороннє прив'язування, а використання компонентів "відчуває" так само, як і використання кутових директив.
Хоча між полімером та AngularJS є певні перекриття, вони не однакові. Насправді команда AngularJS згадала про використання бібліотек Polymer у майбутніх випусках.
Також зауважте, що Полімер все ще вважається «кровоточивим краєм» під час стабілізації AngularJS.
Буде цікаво спостерігати, як обидва ці проекти Google розвиваються!

— Роберт Крістіан
джерело

Полімер - це не шим або поліфіл. Ось що таке поліфакти webcomponents.js. Полімер - це бібліотека для створення веб-компонентів. Команда Polymer також створила колекції веб-компонентів (реалізованих за допомогою Polymer), але вони також не є "Polymer"

— ebidel

Оновлення: Полімер зараз має маршрути і стабільний! : D

— ЙордивD

5

Я думаю, що з практичної точки зору, зрештою, шаблонна функція кутових директив та методологія веб-компонентів, що використовуються полімером, виконують одне і те ж завдання. Як я бачу, основні відмінності полягають у тому, що полімер використовує веб-API для включення бітів HTML, більш синтаксично правильного та спрощеного способу досягнення того, що Angular робить програмно під час надання шаблонів. Однак, як було зазначено, полімер - це невелика основа для створення декларативних та інтерактивних шаблонів з використанням компонентів. Він доступний лише для дизайнерських цілей інтерфейсу та підтримується лише у найсучасніших браузерах. AngularJS - це повна структура MVC, розроблена для того, щоб зробити веб-додатки декларативними за допомогою прив'язки даних, залежностей та директив. Вони дві абсолютно різні тварини. До вашого питання, мені здається, на даний момент ви не отримаєте великої користі від використання полімеру над кутовим, окрім того, що будете мати десятки заздалегідь вбудованих компонентів, однак це все-таки вимагатиме від вас портів на кутові директиви. Однак у майбутньому, коли веб-API стануть більш досконалими, веб-компоненти повністю усунуть необхідність програмно визначати та створювати шаблони, оскільки браузер зможе просто включити їх аналогічно тому, як він обробляє файли JavaScript або css.

— richbai90
джерело

1

"Вони дві абсолютно різні тварини". Так, вони є, але це не має нічого спільного з питанням. Питання стосується ДІРЕКТИВІВ ПОЛІМЕРНИХ ЕЛЕМЕНТІВ ТА РЕГУЛЯТОРНИХ JS І вони багато в чому схожі. Ми не запитуємо про те, який найкращий фреймворк використовувати .. Полімер проти AngularJS. "мені здається, в цей момент ви не отримаєте великої користі від використання полімеру над кутовим". Ніхто не припускав цього, насправді ми всі говорили про те, щоб врешті-решт використовувати їх поруч у якійсь якості. "Що стосується вашого питання, ... ви не отримаєте користі від використання полімеру над кутовим" Знову ж, не питання.

— Ерік Бішард

0

MVVM (модель-вид, вид-модель), яку пропонує Angular, не є проблемою, яку полімер спрямований на вирішення. Компонентний та повторно використовуваний характер, який надають вам кутові директиви (спеціальний тег + пов'язана з ними логічна комбінація), є більш розумним порівнянням, коли ви розглядаєте порівняння кутових та полімерних. Кутова є і залишатиметься більш широкою рамкою, що служить цілі.

— сауршаз
джерело

0

Яка різниця між ними?

Користувачеві: Не дуже багато. Ви можете створити приголомшливі програми з обома.

Для розробника: Вони використовують синтаксис різного типу, тому будь-яке рішення має досить круту криву навчання. Кутовий вже довший і має ВЕЛИЧЕЗНУ спільноту, тому вам важко буде знайти проблеми, які не були вирішені.

До архітектора: Дуже різний. Angular - це програма, що відповідає за всі аспекти вашого життя. Він навіть має вертикально вбудовані директиви на випадок, якщо вам потрібні такі компоненти, як функції. Полімер, з іншого боку, більше схожий на оплату праці. Ви хочете модальний, впевнений, ви хочете, інтерактивний віджет, немає проблем, ви хочете керувати маршрутом, ми можемо це зробити. Полімер також більш портативний тим, що Angular вимагає програми Angular для повторного використання директив. Ідея з Polymer є більш модульною і працюватиме в інших додатках, навіть у програмах Angular.

Які проблеми вирішує Polymer, що AngularJS не має чи не буде?

Полімер - це підхід до того, щоб скористатися новими стандартами веб-компонентів. Якщо такі функції, як користувацькі елементи, імпорт Shadow DOM та імпорт HTML підтримуються локально, було б нерозумно не користуватися ними. В даний час більшість функцій веб-компонентів широко не підтримуються ( поточний стан ), тому полімер виступає як прошивка або міст. Якийсь тип поліфіл (насправді він використовує поліфіли).

Чи плануєте в майбутньому пов'язати «Полімер» з AngularJS?

Ми використовуємо Angular і Polymer разом більше року. Частина рішення зробити це ґрунтувалося на обіцянках, зроблених нами безпосередньо полімерною командою, що оперативна сумісність там буде. Ми від цієї ідеї відмовилися. Зараз ми рухаємось до використання лише полімеру.

Щоб зробити це заново, ми, мабуть, не хотіли б взагалі скористатися Полімером, натомість чекати його дозрівання. Якщо говорити, у полімеру є свої плюси (деякі досить непогані) і мінуси (деякі з яких досить засмучують), але я думаю, що це дискусія для іншої теми.

— Чому ні
джерело

0

Директива Angularjs- це підхід для створення спеціальних елементів. ви можете визначити нові власні теги зі спеціальними атрибутами. Полімер також може це робити, але це робитиме цікавим та простішим способом. Полімер насправді не є рамкою, це просто бібліотека. Але потужна та дивовижна бібліотека, в яку можна закохатись (як я). Полімер дозволяє вам вивчити вбудовану технологію веб-компонентів W3c, що веб-браузери врешті-решт впроваджують її. Веб-компонент - це майбутня технологія, але полімер дозволяє вам використовувати цю технологію прямо зараз. Google Polymer - це бібліотека, яка забезпечує синтаксичний цукор та поліфіли для будівництва елементи та програми з веб-компонентами. Пам’ятайте, що я сказав, що полімер - це не рамки, а бібліотека. Але коли ви використовуєте Polymer, насправді ваша основа є DOM. Цей пост був про кутовий js ver 1 та полімер, і я працював з обома своїми проектами, і я особисто віддаю перевагу полімеру над angularjs. Але кутова версія 2 зовсім інша в порівнянні з angularjs ver 1.directive у angular 2 має інше значення.

— бехзад бешарати
джерело

0

Кутові директиви концептуально схожі на користувацькі елементи, але вони реалізовані без використання API веб-компонентів. Кутові директиви - це спосіб побудувати користувацькі елементи, але полімер та специфікація веб-компонентів - це спосіб, який базується на стандартах.

полімер-елемент:

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

Кутова директива:

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}}" />'
  };
}]);

— чанду
джерело