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

494

На странице Polymer Getting Started мы видим пример действия Полимера:

<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) {
        }
    };
});
  • В чем разница между двумя?

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

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

Теги:
polymer

10 ответов

478

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

  • Polymer webcomponents.js - это библиотека, которая содержит несколько полиполков для различных API W3C, которые подпадают под зонтик Web Components. Это:

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

    В левом навигаторе в документации (polymer-project.org) есть страница для всех этих "технологий платформы". Каждая из этих страниц также имеет указатель на отдельный polyfill.

  • <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. Когда браузер видит это определение, он регистрируется как новый элемент.

На вопросы!

В чем разница между Angular и Polymer?

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

Я использую это изображение, чтобы описать весь стек архитектуры Polymer:

Изображение 3646

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

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

GREEN: Полный набор компонентов пользовательского интерфейса (зеленый слой) все еще продолжается. Это будут веб-компоненты, которые используют все слои красного + желтого цвета.

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

См. ответ Alex Russell . В принципе, Shadow DOM позволяет составлять биты HTML, а также является инструментом для инкапсуляции этого HTML. Это принципиально новая концепция в Интернете и что-то другое, что будет использовать каркас.

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

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

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

Планируется ли связать Polymer с AngularJS в будущем?

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

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

UPDATE:

Там действительно замечательная статья на эту тему: "Имеет значение между Полимером и Angular"

  • 46
    Важным моментом здесь является то, что Polymer о продвижении Интернета в том виде, в каком мы его знаем, в частности, показывая, как веб-компоненты могут сделать Интернет открытым, совместно используемым и расширяемым. AngularJS (и Ember в этом отношении) о создании инфраструктуры, которая использует лучшие части браузера для создания адаптивных приложений. Как только веб-компоненты лучше поддерживаются браузерами, на них могут опираться Angular и другие фреймворки, чтобы уменьшить размер фреймворка и упростить приложения. Вот почему это Win-Win для всех.
  • 0
    Я понимаю основы Polymer, а также использую Angular ... Мне тоже наплевать на IE8 или ниже. Совместимы ли эти две платформы в настоящее время? Или есть какие-то скрытые ошибки с включением их вместе?
Показать ещё 10 комментариев
55

По вашему вопросу:

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

Из официальной учетной записи twitter для AngularJS: "angularjs будет использовать полимер для своих виджетов. Это беспроигрышный"

источник: https://twitter.com/angularjs/status/335417160438542337

  • 1
    Попробуйте предоставить больше информации, кроме ссылок ...
  • 2
    @NREZ Хорошо, я не отвечаю на заголовок поста, но один из вопросов внутри поста Мой ответ только на третий вопрос: Are there plans to tie Polymer in with AngularJS in the future? Я думаю, что это хорошая идея процитировать оригинальный пост от команды AngularJS, вы не думаете?
Показать ещё 5 комментариев
19

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

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

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

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

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

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

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

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

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

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

Магазин Talk Show - веб-компоненты с Роб Додсоном

  • 1
    Так что, если я использую normalize.css , он не нормализуется внутри теневого домена? Так что мне нужно отдельно нормализовать каждый такой компонент, без возможности сделать это один раз? Это хорошая вещь?
  • 1
    Не думайте, что Shadow DOM - это IFRAME. И я использую это сравнение свободно, потому что это не IFRAME. Но в IFRAME у вас будет собственный документ, на который не влияют страницы CSS и JavaScript родительского документа. Это очень хорошая вещь. Это означает, что вы можете гарантировать, что определенный компонент будет работать так, как задумано, и не будет мешать родительской странице. Однако, если теневой DOM хочет использовать DOM с родительской страницы, он может. Но это другая тема.
Показать ещё 2 комментария
19

В этом видео 2 ребята из AngularJS говорили о различиях и сходствах этих двух фреймворков (AngularJS 1.2 и Beyond).

Эти ссылки приведут вас к правильным Q & A's:

6

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

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

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

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

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

Полимер также предоставляет открытые и многоразовые элементы веб-компонентов с помощью элементов

Изображение 3647

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

Полимер не является основой веб-приложений

  • Полимер является скорее библиотекой, чем каркасом.

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

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

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

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

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

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

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

Angular концептуально похожи на пользовательские элементы, но они реализованы без использования API-интерфейсов Web Components. Директивы Angular - это способ создания пользовательских элементов, но спецификация Polymer и Web Components - это способ, основанный на стандартах.

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

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

Angular:

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

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

0

В чем разница между этими двумя?

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

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

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

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

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

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

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

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

0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню