В чем разница между элементами Polymer и директивами AngularJS?

524

На странице Начало работы с Polymer мы видим пример работы Polymer:

<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 не имеет или не будет?

  • Есть ли планы связать Polymer с AngularJS в будущем?

javascript angularjs polymer Дэн Канзе
источник
Полезная информация здесь 2ality - Роли AngularJS и Polymer
LCJ

Ответы:

520

Вы не первый, кто задает этот вопрос :) Позвольте мне прояснить пару вещей, прежде чем перейти к вашим вопросам.

  1. Polymer's webcomponents.js- это библиотека, которая содержит несколько полизаполнений для различных API-интерфейсов W3C, попадающих под зонтик веб-компонентов. Эти:

    • Пользовательские Элементы
    • HTML импорт
    • <template>
    • Shadow DOM
    • События указателя
    • другие

    Левая навигация в документации ( Polymer-Project.org ) содержит страницу для всех этих «технологий платформы». На каждой из этих страниц также есть указатель на отдельный полифилл.

  2. <link rel="import" href="x-foo.html">такое импорт HTML. Импорт - это полезный инструмент для включения HTML в другой HTML. Вы можете включить <script>, <link>разметку или что-либо еще в импорт.

  3. Ничто не "ссылается" <x-foo>на x-foo.html. В вашем примере предполагается, что определение пользовательского элемента <x-foo>(например <element name="x-foo">) определено в x-foo.html. Когда браузер видит это определение, оно регистрируется как новый элемент.

На вопросы!

В чем разница между угловым и полимерным?

Мы рассказали об этом в нашем видео . В целом, Polymer - это библиотека, цель которой - использовать (и показать, как использовать) веб-компоненты. Его основой являются пользовательские элементы (например, все, что вы создаете, является веб-компонентом), и оно развивается по мере развития сети. Для этого мы поддерживаем только последнюю версию современных браузеров.

Я буду использовать это изображение для описания всего стека архитектуры Polymer:

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

КРАСНЫЙ слой: мы получаем завтрашнюю сеть через набор полифилов. Имейте в виду, что эти библиотеки со временем исчезают, так как браузеры принимают новые API.

ЖЕЛТЫЙ слой: посыпать сахар сахаром poly.js. Этот уровень является нашим мнением о том, как использовать спецификации API, вместе. Он также добавляет такие вещи, как привязка данных, синтетический сахар, средства отслеживания изменений, опубликованные свойства ... Мы считаем, что эти вещи полезны для создания приложений на основе веб-компонентов.

ЗЕЛЕНЫЙ: комплексный набор компонентов пользовательского интерфейса (зеленый слой) все еще находится в процессе разработки. Это будут веб-компоненты, которые используют все красные + желтые слои.

Угловые директивы против пользовательских элементов?

Смотрите ответ Алекса Рассела . По сути, Shadow DOM позволяет создавать фрагменты HTML, но также является инструментом для инкапсуляции этого HTML. Это принципиально новая концепция в Интернете, которую могут использовать другие платформы.

Какие проблемы решает Polymer, что AngularJS не имеет или не будет?

Сходства: декларативные шаблоны, привязка данных.

Различия: Angular имеет высокоуровневые API для сервисов, фильтров, анимации и т. Д., Поддерживает IE8 и на данный момент является гораздо более надежной средой для создания производственных приложений. Полимер только начинается в альфа.

Есть ли планы связать Polymer с AngularJS в будущем?

Это отдельные проекты . Тем не менее, команды Angular и Ember объявили, что в конечном итоге перейдут на использование API-интерфейсов базовой платформы в своих собственных средах.

^ Это огромная победа ИМО. В мире, где веб-разработчики имеют мощные инструменты (Shadow DOM, Custom Elements), авторы фреймворков также могут использовать эти примитивы для создания более качественных фреймворков. Большинство из них в настоящее время проходят через большие обручи, чтобы "сделать работу".

ОБНОВИТЬ:

На эту тему есть отличная статья: « Вот разница между Полимером и Углом »

ebidel
источник
46
Важным моментом здесь является то, что Polymer о продвижении Интернета в том виде, в каком мы его знаем, в частности, показывая, как веб-компоненты могут сделать Интернет открытым, совместно используемым и расширяемым. AngularJS (и Ember в этом отношении) о создании инфраструктуры, которая использует лучшие части браузера для создания адаптивных приложений. Как только веб-компоненты лучше поддерживаются браузерами, на них могут опираться Angular и другие фреймворки, чтобы уменьшить размер фреймворка и упростить приложения. Вот почему это Win-Win для всех.
Шмули
31
Я до сих пор не понимаю, в чем практическая разница между пользовательскими элементами Polymer и угловыми директивами? Почему я должен использовать Polymer Custom Elements вместо Angular Directives в угловом проекте?
Ронаг
3
Таким образом, существующие проекты Angular и Ember в конечном итоге выиграют от использования API-интерфейсов базовой платформы. Но когда веб-компоненты лучше поддерживаются браузерами, будет ли полезно продолжать использовать Angular в новых проектах или он фактически станет избыточным?
блин
8
Я думаю сделать это черно-белым: используйте AngularJS для производства и играйте с Polymer в свое свободное время, чтобы вы были знакомы с ним, когда придет время.
thdoan
31
Это хороший обзор Polymer.js, но ни в коем случае не дает полного ответа на вопрос ...
Кристоф
57

На ваш вопрос:

Есть ли планы связать Polymer с 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
Да, конечно. спасибо за ваше обновление :) (я только начинаю действительно использовать stackoverflow, поэтому я не вижу ваше обновление, прежде чем ответить вам ...)
loïc m.
Так они там передумали? Я не могу найти, где они используют полимер.
theblang
Я не думаю, что это ответ.
Astroanu
19

1 и 2) Полимерные компоненты ограничены из-за их скрытого дерева в тени. Это означает, что их стиль и поведение не могут истекать кровью. Angular не относится к той конкретной директиве, которую вы создаете как полимерный веб-компонент. Угловая директива может конфликтовать с чем-то в вашей глобальной области видимости. ИМО, выгода, которую вы получите от полимера, - это то, что я объяснил ... модульные компоненты, которые имеют CSS и JavaScript для этого конкретного компонента, к которому ничто не может прикоснуться. Неприкасаемый ДОМ!

Можно создать угловые директивы, чтобы вы могли аннотировать элемент несколькими функциональными частями. В веб-компонентах Polymer это не так. Если вы хотите объединить функциональность компонентов, вы включаете два компонента в другой компонент (или заключаете их в другой компонент) или можете расширить существующий компонент. Помните, что главное отличие состоит в том, что каждый компонент ограничен полимерными веб-компонентами. Вы можете обмениваться css & js файлами между несколькими компонентами или можете встроить их.

3) Да, Angular планирует включить полимер в версию 2+ по словам Роба Додсона и Эрика Бидельмана

Забавно, что никто здесь не упомянул слово «сфера». Я думаю, что это одно из основных отличий.

Существует много отличий, но они также имеют много общего, когда речь идет о создании модульных элементов, похожих на лего, для приложения. Я думаю, можно с уверенностью сказать, что Angular будет основой приложения, и полимер может однажды жить в одном приложении вместе с дополнительными директивами, с основным отличием в том, что область применения, но полимер может заменить многие ваши текущие директивы. Но я не вижу причин, по которым Angular не может работать как есть, а также включать полимерные компоненты.

Читая ответы еще раз, пока я пишу это, я заметил, что Эрик Бидельман (Эбидель) сделал своего рода прикрытие в своем ответе :

«Shadow DOM позволяет создавать фрагменты HTML, но также является инструментом для инкапсуляции этого HTML».

Чтобы отдать должное, когда это необходимо, я получил ответы, послушав много интервью с Робом Додсоном и Эриком Бидельманом . Но я чувствую, что ответ не был сформулирован так, чтобы дать этому парню понимание, которого он хотел. С учетом сказанного, я думаю, что я затронул ответ, который он ищет, но никоим образом не обладаю большей информацией по этому вопросу, чем Роб Додсон и Эрик Бидельман.

Вот мои основные источники информации, которую я собрал.

JavaScript Jabber - Полимер с Робом Додсоном и Эриком Бидельманом

Shop Talk Show - Веб-компоненты с Робом Додсоном

Эрик Бишард
источник
1
Так что, если я использую normalize.css, это не нормализуется внутри теневого дома? Так что мне нужно отдельно нормализовать каждый такой компонент, без возможности сделать это один раз? Это хорошая вещь?
Дмитрий Зайцев
1
Не думайте, что Shadow DOM - это IFRAME. И я использую это сравнение свободно, потому что это не IFRAME. Но в IFRAME у вас будет собственный документ, на который не влияют страницы CSS и JavaScript родительского документа. Это очень хорошая вещь. Это означает, что вы можете гарантировать, что определенный компонент будет работать так, как задумано, и не будет мешать родительской странице. Однако, если теневой DOM хочет использовать DOM с родительской страницы, он может. Но это другая тема.
Эрик Бишард
1
Я вижу, да, CSS - язык с утечками, но в большинстве случаев есть простое (хотя и не идеальное) решение с использованием уникальных префиксов классов внутри DOM, который вы хотите изолировать. И, конечно же, избегая выбора тегов и идентификаторов, что в любом случае не является хорошей практикой. С другой стороны, некоторые из этих объявлений, которые вы, возможно, захотите просочиться (например, normalize.cssили другие листы на основе тегов), что опять же легко достижимо без Shadow DOM. Согласитесь, не идеальная изоляция, но проблема. работает в 95% случаев, по крайней мере, тех, о которых я могу думать.
Дмитрий Зайцев
2
Сказав это, я должен сказать, что вижу достоинство надлежащей изоляции и нахожу ваш ответ, дающий хорошее объяснение.
Дмитрий Зайцев
6

Полимер - это прокладка для веб-компонентов

  • « Веб-компоненты » - это новый набор стандартов, созданный на основе HTML 5, предназначенный для обеспечения многократно используемых строительных блоков для веб-приложений.

  • Браузеры находятся в различных состояниях реализации спецификации «Веб-компоненты», и поэтому слишком рано писать HTML с использованием веб-компонентов.

  • Но увы! Полимер на помощь! Polymer - это библиотека, которая обеспечивает уровень абстракции для вашего HTML-кода, позволяя ему использовать API веб-компонентов, как если бы он был полностью реализован во всех браузерах. Это называется poly- fill , и команда Polymer распространяет эту библиотеку как webcomponents.js . Это раньше называлось platform.js кстати.

Но Polymer - это больше, чем библиотека polyfill для веб-компонентов ...

Polymer также предоставляет открытые и повторно используемые строительные блоки веб-компонентов через элементы

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

Все элементы могут быть настроены и расширены. Они используются в качестве строительных блоков для чего угодно, от социальных виджетов до анимации и клиентов веб-API.

Polymer не является фреймворком для веб-приложений

  • Полимер - это больше библиотека, чем каркас.

  • Polymer не поддерживает такие вещи, как маршруты, область применения, контроллеры и т. Д.

    • Но у него есть двусторонняя привязка, и использование компонентов «чувствует» так же, как использование угловых директив.

  • Хотя есть некоторые совпадения между Polymer и AngularJS, они не одинаковы. Фактически, команда AngularJS упоминала об использовании библиотек Polymer в будущих выпусках.

  • Также обратите внимание, что Polymer по-прежнему считается «передовым краем», пока AngularJS стабилизируется.

  • Будет интересно наблюдать за развитием обоих этих проектов Google!

Роберт Кристиан
источник
Полимер не является прокладкой или полифилом. Вот что такое поликомпоненты webcomponents.js. Polymer - это библиотека для создания веб-компонентов. Команда Polymer также создала коллекции веб-компонентов (реализованных с использованием Polymer), но они также не являются "Polymer"
ebidel
Обновление: у Полимера теперь есть маршруты, и он стабилен! : D
JordyvD
5

Я думаю, с практической точки зрения, в конце концов, шаблонная особенность угловых директив и методология веб-компонента, используемая полимером, решают одну и ту же задачу. Как я вижу, основные отличия заключаются в том, что полимер использует веб-API для включения фрагментов HTML, что является более синтаксически правильным и упрощенным способом достижения того, что Angular делает программно при визуализации шаблонов. Однако, как уже было сказано, Polymer - это небольшая структура для создания декларативных и интерактивных шаблонов с использованием компонентов. Он доступен только для разработки пользовательского интерфейса и поддерживается только в самых современных браузерах. AngularJS - это полная среда MVC, разработанная для декларирования веб-приложений с помощью привязок данных, зависимостей и директив. Это два совершенно разных животных. На ваш вопрос мне кажется, что в этот момент вы не получите существенного преимущества от использования полимера по сравнению с угловым, за исключением наличия десятков предварительно собранных компонентов, однако для этого все равно потребуется перенести их в угловые директивы. Однако в будущем, когда веб-API станут более продвинутыми, веб-компоненты полностью избавят от необходимости программно определять и создавать шаблоны, поскольку браузер сможет просто включать их аналогично тому, как он обрабатывает файлы javascript или css.

richbai90
источник
1
«Это два совершенно разных животных». Да, но это не имеет ничего общего с вопросом. Вопрос о полимерных элементах против AngularJS DIRECTIVES. И они очень похожи во многих отношениях. Мы не спрашиваем о том, что является лучшим Framework для использования .. Polymer против AngularJS. «Мне кажется, что в данный момент вы не получите существенной выгоды от использования полимера по сравнению с угловым». Никто не предположил этого, на самом деле, мы все говорили о том, чтобы в конечном итоге использовать их бок о бок в некотором качестве. «На ваш вопрос ... вы не получите никакой пользы от использования полимера по сравнению с угловым» Опять же, не вопрос.
Эрик Бишард
0

MVVM (модель-представление, модель-представление), которую предлагает Angular, не является проблемой, которую Polymer стремится решить. Композиционная и повторно используемая природа, которую дают вам директивы Angular (пользовательская комбинация тег + связанная логика), является более разумным сравнением, если вы рассматриваете сравнение Angular и Polymer. Angular является и останется более широкой целевой системой.

saurshaz
источник
0

Какая разница между двумя?

Для пользователя: не очень. Вы можете создавать потрясающие приложения с обоими.

Разработчику: они используют другой синтаксис, поэтому у любого решения есть довольно крутая кривая обучения. Angular существует дольше и имеет ОГРОМНОЕ сообщество, поэтому вам будет трудно найти проблемы, которые не были решены.

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

Какие проблемы решает Polymer, что AngularJS не имеет или не будет?

Polymer - это подход к использованию новых стандартов веб-компонентов. Если локально поддерживаются такие функции, как пользовательские элементы, Shadow DOM и импорт HTML, было бы глупо не использовать их в своих интересах. В настоящее время большинство функций веб-компонентов не поддерживаются широко ( текущий статус ), поэтому Polymer действует как прокладка или мост. Вроде как полифилл (на самом деле он использует полифилы).

Есть ли планы связать Polymer с AngularJS в будущем?

Мы использовали Angular и Polymer вместе более года. Частично решение сделать это было основано на обещаниях, данных непосредственно командой Polymer нам о том, что совместимость будет существовать. Мы отказались от этой идеи. Сейчас мы движемся к использованию только полимера.

Чтобы сделать это снова, мы, вероятно, вообще не стали бы использовать Polymer, вместо этого подождав, пока он созреет. При этом у Polymer есть свои плюсы (некоторые довольно хорошие) и минусы (некоторые довольно разочаровывающие), но я думаю, что это обсуждение для другой темы.

У не
источник
0

Angularjs директиваэто подход для создания пользовательских элементов. Вы можете определить новые пользовательские теги с пользовательскими атрибутами. Polymer также может сделать это, но это будет интересно и более просто. Polymer на самом деле не каркас, а просто библиотека. Но мощная и удивительная библиотека, в которую вы можете влюбиться (как и я). Polymer позволит вам изучить нативную технологию веб-компонентов, созданную w3c, которую веб-браузеры в конечном итоге реализуют. Компонент it.web - это будущая технология, но полимер позволяет вам использовать эту технологию прямо сейчас. элементы и приложения с веб-компонентами. Помните, что я сказал, что Polymer - это не фреймворк, а библиотека. Но когда вы используете Polymer, ваш фреймворк - это DOM. этот пост был про angular js ver 1 и polymer, и я работал с обоими из них - мои проекты, и я лично предпочитаю polymer, а не angularjs. Но версия Angular 2 совершенно другая по сравнению с angularjs ver 1. Директива angular 2 имеет другое значение.

бехзад бешарати
источник
0

Угловые директивы концептуально похожи на пользовательские элементы, но они реализованы без использования API веб-компонентов. Угловые директивы - это способ создания пользовательских элементов, но Polymer и спецификация веб-компонентов являются стандартным способом сделать это.

полимер-элемент:

<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}}" />'
  };
}]);
Chandu
источник