Polimer elemanları ile AngularJS direktifleri arasındaki fark nedir?

524

Polimer Başlarken sayfasında, çalışırken bir Polimer örneği görüyoruz:

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

Ne fark edecek olan <x-foo></x-foo>tarafından tanımlanır platform.jsve x-foo.html.

AngularJS'deki bir yönerge modülüne eşdeğer gibi görünüyor:

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) {
        }
    };
});

  • İkisi arasındaki fark nedir?

  • Polimer, AngularJS'nin sahip olmadığı veya etmeyeceği sorunları çözer mi?

  • Gelecekte Polimeri AngularJS ile bağlamayı planlıyor musunuz?

javascript  angularjs  polymer 
— Dan Kanze
kaynak
Yararlı bilgiler burada 2ality - AngularJS ve Polimerin rolleri
— LCJ

Yanıtlar:

520

Bu soruyu ilk soran siz değilsiniz :) Sorularınızı almadan önce birkaç şeyi açıklığa kavuşturayım.

  1. Polymer's webcomponents.js, Web Bileşenleri şemsiyesi altına giren çeşitli W3C API'leri için çeşitli çoklu dolgular içeren bir kütüphanedir. Bunlar:

    • Özel Öğeler
    • HTML İçe Aktarma
    • <template>
    • Gölge DOM
    • İşaretçi Etkinlikleri
    • diğerleri

    Belgelerdeki sol tarafın ( polimer-project.org ) tüm bu "Platform teknolojileri" için bir sayfası vardır. Bu sayfaların her birinde ayrıca çoklu dolguyu gösteren bir işaretçi vardır.

  2. <link rel="import" href="x-foo.html">bir HTML İçe Aktarmadır. İçe aktarmalar, HTML'yi diğer HTML'ye dahil etmek için kullanışlı bir araçtır. Sen içerebilir <script>, <link>, işaretlemeyi veya ithalat başka ne.

  3. <x-foo>X-foo.html dosyasına hiçbir bağlantı yok. Örneğinizde , <x-foo>(örneğin <element name="x-foo">) Özel Öğe tanımının x-foo.html dosyasında tanımlandığı varsayılmaktadır. Tarayıcı bu tanımı gördüğünde, yeni bir öğe olarak kaydedilir.

Sorulara devam!

Angular ve Polymer arasındaki fark nedir?

Bunların bir kısmını Soru-Cevap videomuzda ele aldık . Genel olarak Polymer, Web Bileşenlerini kullanmayı (ve nasıl kullanacağını göstermeyi) amaçlayan bir kütüphanedir. Temeli Özel Öğelerdir (örneğin oluşturduğunuz her şey bir web bileşenidir) ve web geliştikçe gelişir. Bu amaçla, yalnızca modern tarayıcıların en son sürümünü destekliyoruz.

Bu görüntüyü Polymer'ın tüm mimari yığınını tanımlamak için kullanacağım:

resim açıklamasını buraya girin

KIRMIZI katman: Yarının ağını bir dizi çoklu dolgu ile elde ederiz. Tarayıcıların yeni API'ları benimsemesi nedeniyle bu kitaplıkların zaman içinde kaybolacağını unutmayın.

SARI katman: Polimer.js ile biraz şeker serpin. Bu katman, spesifikasyon API'lerini birlikte nasıl kullanacağımız hakkındaki görüşümüzdür. Ayrıca veri bağlama, sözdizimi şekeri, gözlemcileri değiştirme, yayınlanmış özellikler gibi şeyler de ekler ... Bunların web bileşeni tabanlı uygulamalar oluşturmak için yararlı olduğunu düşünüyoruz.

YEŞİL: Kapsamlı UI bileşenleri kümesi (yeşil katman) hala devam ediyor. Bunlar tüm kırmızı + sarı katmanları kullanan web bileşenleri olacaktır.

Açısal yönergeler ve Özel Öğeler mi?

Alex Russell'ın cevabına bakın . Temel olarak, Shadow DOM HTML bitleri oluşturmaya izin verir, ancak aynı zamanda HTML'yi kapsüllemek için bir araçtır. Bu temelde web'de yeni bir kavramdır ve diğer çerçevelerin kaldıracağı bir şeydir.

Polimer, AngularJS'nin sahip olmadığı veya etmeyeceği sorunları çözer mi?

Benzerlikler: bildirim şablonları, veri bağlama.

Farklar: Angular, hizmetler, filtreler, animasyonlar vb.İçin üst düzey API'lere sahiptir, IE8'i destekler ve bu noktada üretim uygulamaları oluşturmak için çok daha sağlam bir çerçevedir. Polimer alfa ile başlıyor.

Gelecekte Polimeri AngularJS ile bağlamayı planlıyor musunuz?

Bunlar ayrı projeler . Bununla birlikte, hem Açısal hem de Ember ekipleri , temelde platform API'lerini kendi çerçevelerinde kullanmaya başlayacaklarını açıkladı .

^ Bu büyük bir kazanmak IMO. Web geliştiricilerinin güçlü araçlara (Shadow DOM, Özel Öğeler) sahip olduğu bir dünyada, çerçeve yazarları da daha iyi çerçeveler oluşturmak için bu ilkelleri kullanabilirler. Birçoğu şu anda "işi bitirmek" için büyük çemberlerden geçiyor.

GÜNCELLEME:

Bu konuda gerçekten harika bir makale var: " İşte Polimer ve Açısal arasındaki fark "

— ebidel
kaynak
46
Burada önemli olan nokta, Polymer'in bildiğimiz gibi Web'i ele almasıdır, özellikle de Web Bileşenlerinin Web'i nasıl açık, paylaşılabilir ve genişletilebilir hale getirebileceğini göstererek. AngularJS (ve bu konu için Ember), duyarlı uygulamalar oluşturmak için tarayıcının en iyi kısımlarından yararlanan bir çerçeve oluşturmakla ilgilidir. Web Bileşenleri tarayıcılar tarafından daha iyi desteklendikten sonra, çerçeve kodunu daha küçük hale getirmek ve uygulamaları daha basit hale getirmek için Açısal ve diğer çerçeveler üzerine inşa edilebilir. Bu yüzden herkes için Kazan-Kazan.
— Schmuli
31
Polimer Özel Elemanları ve Açısal Direktifler arasındaki pratik farkın hala ne olduğunu anlamıyorum? Bir Açısal projede Açısal Direktifler yerine Polimer Özel Elemanları neden kullanmalıyım?
— ronag
3
Dolayısıyla, mevcut Açısal ve Ember projeleri sonuçta temel platform API'lerini kullanmaktan faydalanacak. Ancak Web Bileşenleri tarayıcılar tarafından daha iyi desteklendiğinde, Angular'ı yeni projelerde kullanmaya devam etmenin herhangi bir yararı olur mu veya etkin bir şekilde gereksiz hale gelir mi?
— gözleme
8
Siyah ve beyaz yapmayı düşünüyorum: üretim işleri için AngularJS ile sopa ve boş zamanlarında Polymer ile oynayın, böylece zaman geldiğinde size aşina olacaksınız.
— thdoan
31
Polimer.js'ye güzel bir genel bakış ama hiçbir şekilde soruyu iyice cevaplamıyor ...
— Christoph
57

Sorunuz için:

Gelecekte Polimeri AngularJS ile bağlamayı planlıyor musunuz?

AngularJS'in resmi twitter hesabından: "angularjs widget'ları için polimer kullanacak. Kazan-kazan"

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

— loïc m.
kaynak
2
@NREZ Tamam, yazının başlığına cevap vermiyorum, ancak yazının içindeki sorulardan biri Cevabım sadece 3. soru için: Are there plans to tie Polymer in with AngularJS in the future? Sanırım AngularJS ekibinden orijinal yayını alıntılamak için iyi bir fikir değil ?
— loïc m.
Yup emin ur noktası geçerlidir ... Sadece açıklama daha iyi olabilirdi ... Bu sefer yaptım ve eminim bir dahaki sefere u olacak gibi ...
— NREZ
Evet elbette. Güncellemeniz için teşekkürler :) (gerçekten stackoverflow'u kullanmaya başlıyorum, bu yüzden size cevap vermeden önce güncellemenizi görmüyorum ...)
— loïc m.
Peki orada değişti mi? Polimer kullandıkları yeri bulamıyorum.
— theblang
Bunun bir cevap olduğunu sanmıyorum.
— astroanu
19

1 & 2) Polimer bileşenleri, gölge dom içindeki gizli ağaçları nedeniyle kapsamlıdır. Bu, tarzlarının ve davranışlarının kanamayacağı anlamına gelir. Açısal, bir polimer ağ bileşeni gibi oluşturduğunuz belirli direktifin kapsamına girmez. Açısal bir yönerge, küresel kapsamınızdaki bir şeyle çatışabilir. IMO polimerden elde edeceğiniz fayda, açıkladığım şeydir ... hiçbir şeye dokunamayacağınız belirli bir bileşene css ve JavaScript'i içeren modüler bileşenler. Dokunulmaz DOM!

Açısal yönergeler oluşturulabilir, böylece bir öğeye birkaç işlevsellik ek açıklama ekleyebilirsiniz. Polimer web bileşenlerinde durum böyle değildir. Bileşenlerin işlevselliğini birleştirmek istiyorsanız, iki bileşeni başka bir bileşene eklersiniz (veya bunları başka bir bileşene sararsınız) veya varolan bir bileşeni genişletebilirsiniz. Ana farkın hala her bir bileşenin polimer ağ bileşenlerinde yer alması olduğunu unutmayın. Css & js dosyalarını çeşitli bileşenler arasında paylaşabilir veya bunları satır içinde yapabilirsiniz.

3) Evet, Rob Dodson ve Eric Bidelman'a göre polimer 2 + 'ya dahil edilmeye yönelik açısal planlar

Buradaki kimsenin kapsamdan nasıl bahsetmediği çok komik. Bunun en büyük farklardan biri olduğunu düşünüyorum.

Birçok fark var, ancak bir uygulama için modüler lego gibi işlevsellik parçaları yaratma konusunda da ortak noktaları var. Angular'ın uygulama çerçevesi olacağını ve polimerin bir gün aynı uygulamada yan direktiflerle birlikte yaşayabileceğini söylemenin güvenli olduğunu düşünüyorum, ancak büyük fark kapsam olmakla birlikte, polimer mevcut direktiflerinizin çoğunun yerini alabilir. Ancak Angular'ın olduğu gibi çalışamamasının ve polimer bileşenlerini de içermemesinin bir nedeni göremiyorum.

Bu yaz ise yine cevapları okumak, ben Eric Bidelman (ebidel) tür kapağın yaptığını fark onun içinde cevap :

"Gölge DOM HTML bitleri oluşturmaya izin verir ama aynı zamanda bu HTML kapsüllemek için bir araçtır."

Kredinin vadesi geldiği yerde kredi vermek için Rob Dodson ve Eric Bidelman ile birçok röportajı dinleyerek cevaplarımı aldım . Ama cevabın, bu adamın sorusuna istediği anlayışı vermek için uygun olmadığını düşünüyorum. Bununla birlikte, aradığı cevaba dokunduğumu düşünüyorum, ancak hiçbir şekilde konu hakkında Rob Dodson ve Eric Bidelman'dan daha fazla bilgiye sahip değilim

İşte topladığım bilgiler için ana kaynaklarım.

JavaScript Jabber - Rob Dodson ve Eric Bidelman ile polimer

Shop Talk Show - Rob Dodson ile Web Bileşenleri

— Eric Bishard
kaynak
1
Yani eğer kullanırsam normalize.css, gölge domun içinde normalleşmez mi? Bu yüzden, bir kez yapmanın bir yolu olmadan, her bir bileşeni ayrı ayrı normalleştirmem gerekiyor mu? Bu iyi bir şey midir?
— Dmitri Zaitsev
1
Shadow DOM'yi IFRAME olarak düşünmeyin. Bu karşılaştırmayı gevşek bir şekilde kullanıyorum çünkü bir IFRAME değil. Ancak bir IFRAME içinde, üst belgenin CSS ve JavaScript sayfalarından etkilenmeyen kendi belgeniz olur. Bu çok iyi bir şey. Bu, belirli bir bileşenin istendiği gibi çalışacağını ve üst sayfa tarafından etkilenmeyeceğini garanti edebileceğiniz anlamına gelir. Ancak, gölge DOM üst sayfadan DOM kullanmak isterse yapabilir. Ama bu başka bir konu.
— Eric Bishard
1
Evet, evet, CSS sızdıran bir dildir, ancak çoğu durumda, izole etmek istediğiniz DOM içinde benzersiz sınıf önekleri kullanarak basit (mükemmel olmasa da) bir çözüm vardır. Ve elbette, etiket ve kimlik seçicilerinden kaçınarak, bu zaten iyi bir uygulama değildir. Öte yandan, aslında sızmak isteyebileceğiniz bu beyanlardan bazıları (benzeri normalize.cssveya diğer etiket tabanlı sayfalar), bu da Gölge DOM olmadan kolayca elde edilebilir. Kesinlikle mükemmel bir izolasyon değil prob. en azından düşünebildiğim vakaların% 95'inde çalışıyor.
— Dmitri Zaitsev
2
Bunu söyledikten sonra, doğru bir izolasyonun değerini gördüğümü ve cevabınızı iyi bir açıklama sağlayarak bulduğumu söylemeliyim.
— Dmitri Zaitsev
6

Polimer bir Web Bileşenidir

  • " Web Bileşenleri ", web uygulamaları için yeniden kullanılabilir yapı taşları sağlamak üzere tasarlanmış HTML 5 tarafından kuşatılmış yeni bir standartlar kümesidir.

  • Tarayıcılar, "Web Bileşenleri" belirtimini uygulamanın çeşitli durumlarındadır ve bu nedenle Web Bileşenlerini kullanarak HTML yazmak için henüz çok erkendir.

  • Ama ne yazık ki! Polimer kurtarmaya! Polimer, HTML kodunuza bir soyutlama katmanı sağlayan, Web Bileşenleri API'sini tüm tarayıcılarda tam olarak uygulanmış gibi kullanmasına izin veren bir kitaplıktır. Buna poli doldurma denir ve Polymer ekibi bu kütüphaneyi webcomponents.js olarak dağıtır . Buna platform.js btw deniyordu .

Ancak Polimer, web bileşenleri için bir çoklu dolgu kütüphanesinden daha fazlasıdır ...

Polimer ayrıca Elements aracılığıyla açık ve yeniden kullanılabilir Web Bileşeni yapı taşları sağlar

resim açıklamasını buraya girin

Tüm elemanlar özelleştirilebilir ve genişletilebilir. Bunlar, sosyal widget'lardan animasyona ve web API istemcilerine kadar her şey için yapı taşları olarak kullanılır.

Polimer bir web uygulaması çerçevesi değildir

  • Polimer bir çerçeveden çok bir kütüphanedir.

  • Polimerin yollar, uygulama kapsamı, kontrolörler vb.

    • Ancak iki yönlü bağlaması vardır ve bileşenleri kullanmak, tıpkı Açısal yönergeleri kullanmak gibi "hissettirir".

  • Polimer ve AngularJS arasında bazı çakışmalar olmasına rağmen, bunlar aynı değildir. Aslında, AngularJS ekibi önümüzdeki sürümlerde Polimer kitaplıklarının kullanılmasından bahsetti.

  • Ayrıca AngularJS stabilize ederken Polimerin hala "kanama kenarı" olarak kabul edildiğini unutmayın.

  • Bu Google projelerinin her ikisinin de gelişmesini izlemek ilginç olacak!

— Robert Christian
kaynak
Polimer bir dolgu veya çoklu dolgu değildir. Webcomponents.js çoklu dolguları budur. Polimer, web bileşenlerini yazmak için bir kütüphanedir. Polimer ekibi ayrıca (Polimer kullanılarak uygulanan) web bileşenleri koleksiyonları da oluşturdu, ancak bunlar "Polimer" de değil
— ebidel
Güncelleme: Polimer artık rotalara sahip ve kararlı! : D
— JordyvD
5

Pratik bir bakış açısıyla, sonunda açısal direktiflerin şablon özelliğini ve polimer tarafından kullanılan web bileşeni metodolojisinin aynı görevi yerine getirdiğini düşünüyorum. Görebildiğim en büyük fark, polimerin, HTML'nin bitlerini içerecek şekilde web API'lerini kullanması, Angular'ın şablonları oluştururken programlı olarak yaptığı şeyi elde etmenin daha sözdizimsel olarak doğru ve basit bir yoludur. Bununla birlikte, polimer belirtildiği gibi, bileşenleri kullanarak açıklayıcı ve etkileşimli şablonlar oluşturmak için küçük bir çerçeve. Yalnızca UI tasarım amaçları için kullanılabilir ve yalnızca en modern tarayıcılarda desteklenir. AngularJS, veri uygulamalarını, bağımlılıkları ve direktifleri kullanarak web uygulamalarını bildirici yapmak için tasarlanmış eksiksiz bir MVC çerçevesidir. Onlar tamamen farklı iki hayvan. Sorunuz için, Bana öyle geliyor ki, düzinelerce önceden oluşturulmuş bileşene sahip olmak dışında, polimerleri açısal olarak kullanmaktan büyük bir fayda elde edemezsiniz, ancak yine de bunları açısal direktiflere taşımanızı gerektirir. Bununla birlikte, gelecekte, web API'leri daha gelişmiş hale geldikçe, web bileşenleri, tarayıcıları basitçe javascript veya css dosyalarını işleme biçimine benzer bir şekilde ekleyebileceğinden, şablonlar programlama yoluyla tanımlama ve oluşturma ihtiyacını tamamen ortadan kaldıracaktır.

— richbai90
kaynak
1
"Onlar tamamen farklı iki hayvan." Evet öyle, ama bunun soru ile ilgisi yok. Soru Polimer ELEMENTS ve AngularJS DIRECTIVES hakkındadır. Ve bunlar birçok açıdan çok benzer. Kullanılacak en iyi Çerçeve'nin ne olduğunu sormuyoruz .. Polimer vs AngularJS. "Bana öyle geliyor ki, bu noktada polimer açısal üzerinde kullanmaktan büyük bir fayda elde edemezsiniz" Kimse bunu önermedi, aslında hepimiz sonunda bir kapasitede yan yana kullanmaktan bahsettik. "Sorunuza, ... polimerin açısal kullanımından faydalanamayacaksınız" Yine, soru değil.
— Eric Bishard
0

Angular'ın sunduğu MVVM (model-görünüm, görünüm-model) Polimerin çözmeyi amaçladığı bir endişe değildir. Açısal yönergelerin size verdiği özelleştirilebilir ve yeniden kullanılabilir nitelik (özel etiket + ilişkili mantık birleşimi), Açısal ve Polimeri karşılaştırmayı düşündüğünüzde daha aklı başında bir karşılaştırmadır. Açısal, daha geniş bir amaca hizmet eden çerçevedir ve öyle kalacaktır.

— saurshaz
kaynak
0

İkisi arasındaki fark nedir?

Bir kullanıcıya: Fazla değil. Her ikisiyle de harika uygulamalar oluşturabilirsiniz.

Bir geliştiriciye: Farklı bir sözdizimi kullanırlar, böylece her iki çözüm de oldukça dik bir öğrenme eğrisine sahiptir. Angular daha uzun süredir var ve BÜYÜK bir topluluğa sahip, bu yüzden çözülmemiş sorunları bulmakta zorlanıyorsunuz.

Bir mimara: Çok farklı. Açısal, hayatınızın tüm yönlerinden sorumlu bir uygulama çerçevesidir. Hatta bileşen benzeri özellikler istemeniz durumunda dikey olarak entegre edilmiş direktiflere sahiptir. Polimer ise daha çok kullandıkça öde gibidir. Kipli, emin bir şey istiyorsun, interaktif bir widget istiyorsun, sorun değil, rota idaresini istiyorsun, bunu yapabiliriz. Polimer ayrıca Angular'ın direktifleri yeniden kullanmak için bir Açısal uygulama gerektirmesi nedeniyle daha taşınabilir. Polimer ile ilgili fikir daha modülerdir ve diğer uygulamalarda, hatta Açısal uygulamalarda bile çalışacaktır.

Polimer, AngularJS'nin sahip olmadığı veya etmeyeceği sorunları çözer mi?

Polimer, yeni web bileşenleri standartlarından yararlanmaya yönelik bir yaklaşımdır. Özel öğeler, Gölge DOM ve HTML içe aktarmaları gibi özellikler yerel olarak destekleniyorsa, bunlardan yararlanmamak aptalca olur. Şu anda çoğu web bileşeni özelliği yaygın olarak desteklenmemektedir ( mevcut durum ), bu nedenle Polimer şim veya köprü görevi görür. Bir poli dolgu gibi (aslında çoklu dolgu kullanır).

Gelecekte Polimeri AngularJS ile bağlamayı planlıyor musunuz?

Angular ve Polymer'i bir yılı aşkın süredir birlikte kullanıyoruz. Bunu yapma kararının bir kısmı, doğrudan Polimer ekibi tarafından bize birlikte çalışabilirliğin orada olduğu vaatlerine dayanıyordu. Bu fikirden vazgeçtik. Şimdi sadece Polimer kullanmaya doğru ilerliyoruz.

Tekrar yapmak için muhtemelen Polimer kullanmak için harekete geçmeyecektik, olgunlaşmasını bekleyin. Polimer söyleniyor artıları (bazıları oldukça iyi) ve eksileri (bazıları oldukça sinir bozucu) ama bu başka bir iş parçacığı için bir tartışma olduğunu düşünüyorum.

— Neden olmasın
kaynak
0

Angularjs direktifiözel elemanlar yapmak için bir yaklaşımdır. özel özelliklere sahip yeni özel etiketler tanımlayabilirsiniz. Polimer de bunu yapabilir, ancak ilginç ve daha basit bir şekilde yapacaktır.Polimer aslında sadece bir kütüphane değildir. Ama ona aşık olabileceğiniz güçlü ve şaşırtıcı bir kütüphane (benim gibi). Polimer, w3c tarafından yapılan yerel web bileşenleri teknolojisini öğrenmenize izin verir, web tarayıcıları sonunda uygular. Web bileşeni gelecekteki teknolojidir, ancak polimer şu anda bu teknolojiyi kullanmanıza izin verir.Google Polimer, bina için sözdizimsel şeker ve çoklu dolgular sağlayan bir kütüphanedir. elemanları ve uygulamaları web bileşenleri ile. polimer dediğim bir çerçeve ve bir kütüphane olduğunu unutmayın.Ama Polimer kullanırken aslında çerçeve DOM olduğunu. Bu yazı açısal js ver 1 ve polimer ile ilgiliydi ve her ikisi ile de çalıştım ve projelerim ve ben şahsen angularjs yerine polimeri tercih ediyorum. Ancak Açısal sürüm 2, açısal 2'deki direktiflerin karşılaştırması tamamen farklıdır. Açısal 2'deki direktif farklı bir anlama sahiptir.

— behzad besharati
kaynak
0

Açısal yönergeler kavramsal olarak Özel Öğelere benzer, ancak Web Bileşenleri API'leri kullanılmadan uygulanır. Açısal yönergeler, özel öğeler oluşturmanın bir yoludur, ancak Polimer ve Web Bileşenleri belirtimi, bunu yapmanın standartlara dayalı yoludur.

Polimer eleman:

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

Açısal yönerge:

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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.