Apa perbedaan antara elemen Polimer dan arahan AngularJS?

524

Pada halaman Memulai Polymer , kita melihat contoh Polymer dalam aksi:

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

Apa yang akan Anda perhatikan <x-foo></x-foo>sedang ditentukan oleh platform.jsdan x-foo.html.

Sepertinya ini setara dengan modul direktif di 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) {
        }
    };
});

  • Apa perbedaan keduanya?

  • Masalah apa yang dipecahkan Polymer yang AngularJS belum atau tidak mau?

  • Apakah ada rencana untuk mengikat Polymer dengan AngularJS di masa mendatang?

javascript angularjs polymer Dan Kanze
sumber
Informasi berguna di sini 2ality - Peran AngularJS dan Polymer
LCJ

Jawaban:

520

Anda bukan orang pertama yang mengajukan pertanyaan ini :) Izinkan saya mengklarifikasi beberapa hal sebelum membahas pertanyaan Anda.

  1. Polimer webcomponents.jsadalah pustaka yang berisi beberapa polyfill untuk berbagai W3C API yang termasuk dalam payung Komponen Web. Ini adalah:

    • Elemen Khusus
    • Impor HTML
    • <template>
    • Bayangan DOM
    • Acara Pointer
    • lainnya

    Nav kiri dalam dokumentasi ( polymer-project.org ) memiliki halaman untuk semua "teknologi Platform" ini. Masing-masing halaman juga memiliki pointer ke polyfill individu.

  2. <link rel="import" href="x-foo.html">adalah Impor HTML. Impor adalah alat yang berguna untuk memasukkan HTML ke HTML lain. Anda dapat memasukkan <script>,, <link>markup, atau apa pun dalam impor.

  3. Tidak ada "tautan" <x-foo>ke x-foo.html. Dalam contoh Anda, diasumsikan definisi Elemen Kustom <x-foo>(misalnya <element name="x-foo">) didefinisikan dalam x-foo.html. Ketika browser melihat definisi itu, itu terdaftar sebagai elemen baru.

Ke pertanyaan!

Apa perbedaan antara Sudut dan Polimer?

Kami membahas beberapa hal ini di video T&J kami . Secara umum, Polymer adalah pustaka yang bertujuan untuk menggunakan (dan menunjukkan cara menggunakan) Komponen Web. Fondasinya adalah Elemen Khusus (mis. Segala sesuatu yang Anda buat adalah komponen web) dan itu berkembang seiring web berkembang. Untuk itu, kami hanya mendukung versi terbaru dari browser modern.

Saya akan menggunakan gambar ini untuk menggambarkan seluruh tumpukan arsitektur Polimer:

masukkan deskripsi gambar di sini

Lapisan RED: Kami mendapatkan web besok melalui serangkaian polyfill. Perlu diingat, pustaka tersebut hilang seiring waktu karena browser mengadopsi API baru.

Lapisan KUNING: Taburkan gula dengan polimer.js. Lapisan ini adalah pendapat kami tentang bagaimana menggunakan API yang ditentukan bersama-sama. Itu juga menambahkan hal-hal seperti pengikatan data, gula sintaksis, pengamat perubahan, properti yang dipublikasikan ... Kami pikir hal-hal ini berguna untuk membangun aplikasi berbasis komponen web.

GREEN: Perangkat komponen UI (lapisan hijau) yang komprehensif masih dalam proses. Ini akan menjadi komponen web yang menggunakan semua lapisan merah + kuning.

Arahan sudut vs Elemen Khusus?

Lihat jawaban Alex Russell . Pada dasarnya, Shadow DOM memungkinkan membuat bit HTML tetapi juga merupakan alat untuk merangkum HTML itu. Ini pada dasarnya adalah konsep baru di web dan sesuatu kerangka kerja lain akan memanfaatkan.

Masalah apa yang dipecahkan Polymer yang AngularJS belum atau tidak mau?

Kesamaan: templat deklaratif, pengikatan data.

Perbedaan: Angular memiliki API tingkat tinggi untuk layanan, filter, animasi, dll., Mendukung IE8, dan pada titik ini, merupakan kerangka kerja yang jauh lebih kuat untuk membangun aplikasi produksi. Polimer baru saja dimulai di alfa.

Apakah ada rencana untuk mengikat Polymer dengan AngularJS di masa mendatang?

Mereka proyek yang terpisah . Yang mengatakan, baik tim Angular dan Ember mengumumkan mereka akhirnya akan pindah menggunakan API platform yang mendasarinya dalam kerangka kerja mereka sendiri.

^ Ini adalah IMO kemenangan besar. Di dunia di mana pengembang web memiliki alat yang kuat (Shadow DOM, Custom Elements), pembuat kerangka juga dapat memanfaatkan primitif ini untuk membuat kerangka kerja yang lebih baik. Sebagian besar dari mereka saat ini melalui rintangan besar untuk "menyelesaikan pekerjaan".

MEMPERBARUI:

Ada artikel yang sangat bagus tentang topik ini: " Inilah perbedaan antara Polymer dan Angular "

ebidel
sumber
46
Poin penting di sini, adalah bahwa Polymer adalah tentang mengambil Web seperti yang kita ketahui, khususnya dengan menunjukkan bagaimana Komponen Web dapat membuat Web terbuka, dapat dibagikan, dan dapat diperluas. AngularJS (dan Ember dalam hal ini) adalah tentang membuat kerangka kerja yang memanfaatkan bagian terbaik browser untuk membuat aplikasi responsif. Setelah Komponen Web lebih baik didukung oleh browser, Angular dan kerangka kerja lainnya dapat membangun di atasnya, untuk membuat kode kerangka kerja lebih kecil, dan aplikasi lebih sederhana. Itulah mengapa ini adalah Win-Win untuk semua.
Schmuli
31
Saya masih tidak mengerti apa perbedaan praktis antara Elemen Kustom Polimer dan Arahan Angular? Mengapa saya menggunakan Elemen Kustom Polimer dan bukan Arahan Arahan dalam proyek Angular?
ronag
3
Jadi proyek Angular dan Ember yang ada pada akhirnya akan mendapat manfaat dari menggunakan platform API yang mendasarinya. Tetapi ketika Komponen Web lebih baik didukung oleh browser, apakah akan ada manfaatnya dengan tetap menggunakan Angular pada proyek - proyek baru , atau apakah itu secara efektif menjadi mubazir?
panekuk
8
Saya pikir untuk membuatnya hitam dan putih: tetap dengan AngularJS untuk hal-hal produksi dan bermain dengan Polymer di waktu luang Anda sehingga Anda akan terbiasa dengannya ketika saatnya tiba.
thdoan
31
Ini adalah gambaran yang bagus dari polymer.js tetapi sama sekali tidak menjawab pertanyaan secara menyeluruh ...
Christoph
57

Untuk pertanyaan Anda:

Apakah ada rencana untuk mengikat Polymer dengan AngularJS di masa mendatang?

Dari akun twitter resmi AngularJS: "angularjs akan menggunakan polimer untuk widgetnya. Menang-menang"

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

lih m.
sumber
2
@NREZ Ok, saya tidak menjawab judul posting, tetapi salah satu pertanyaan di dalam pos. Jawaban saya hanya untuk pertanyaan ke-3: Are there plans to tie Polymer in with AngularJS in the future? Saya kira adalah ide yang bagus untuk mengutip posting asli dari tim AngularJS yang menurut Anda tidak benar. ?
lih m.
Yup yakin poin Anda valid ... Hanya saja uraiannya bisa lebih baik ... Seperti yang sudah saya lakukan saat ini dan saya yakin lain kali Anda juga akan ...
NREZ
ya tentu. Terima kasih atas pembaruan Anda :) (saya baru mulai benar-benar menggunakan stackoverflow, jadi saya tidak melihat pembaruan Anda sebelum membalas Anda ...)
lih m.
Jadi apakah mereka berubah pikiran? Saya tidak bisa menemukan di mana mereka menggunakan polimer.
theblang
Saya rasa ini bukan jawaban.
astroanu
19

1 & 2) Komponen polimer dicakup karena pohon tersembunyi di dom bayangan. Itu berarti bahwa gaya dan perilaku mereka tidak bisa hilang. Sudut tidak dibatasi oleh arahan khusus yang Anda buat seperti komponen web polimer. Arahan sudut mungkin dapat bertentangan dengan sesuatu dalam lingkup global Anda. IMO manfaat yang akan Anda dapatkan dari polimer adalah apa yang saya jelaskan .. komponen modular yang memiliki cakupan css & JavaScript untuk komponen tertentu yang tidak dapat disentuh oleh apa pun. DOM yang tak tersentuh!

Arahan sudut dapat dibuat sehingga Anda dapat membuat anotasi elemen dengan beberapa fungsi. Dalam komponen web Polimer itu tidak terjadi. Jika Anda ingin menggabungkan fungsionalitas komponen, Anda memasukkan dua komponen ke komponen lain (atau membungkusnya dengan komponen lain) atau Anda dapat memperluas komponen yang ada. Ingat perbedaan utama masih adalah bahwa setiap komponen dicakup dalam komponen web polimer. Anda dapat berbagi file css & js di beberapa komponen atau Anda dapat mengikutinya.

3) Ya, Angular berencana untuk memasukkan polimer dalam versi 2+ menurut Rob Dodson dan Eric Bidelman

Sangat lucu bagaimana tidak ada orang di sini yang menyebutkan kata lingkup. Saya pikir itu adalah salah satu perbedaan utama.

Ada banyak perbedaan, tetapi mereka juga memiliki banyak kesamaan ketika datang untuk membuat lego modular seperti fungsi untuk aplikasi. Saya pikir aman untuk mengatakan bahwa Angular akan menjadi kerangka kerja aplikasi dan polimer suatu hari nanti bisa hidup dalam aplikasi yang sama di samping arahan dengan perbedaan utama adalah ruang lingkup tetapi polimer dapat menjadi pengganti banyak arahan Anda saat ini. Tetapi saya tidak melihat alasan mengapa Angular tidak dapat bekerja apa adanya dan memasukkan komponen polimer juga.

Membaca melalui jawaban lagi ketika saya menulis ini, saya perhatikan bahwa Eric Bidelman (ebidel) melakukan semacam sampul dalam jawabannya :

"Shadow DOM memungkinkan penulisan bit HTML tetapi juga merupakan alat untuk merangkum HTML itu."

Untuk memberi kredit di mana kredit seharusnya jatuh tempo, saya mendapat jawaban dari mendengarkan banyak wawancara dengan Rob Dodson dan Eric Bidelman . Tetapi saya merasa jawabannya tidak diucapkan untuk memberikan pertanyaan kepada orang ini pengertian yang dia inginkan. Dengan itu, saya pikir saya telah menyentuh jawaban yang dia cari, tetapi sama sekali tidak memiliki informasi lebih banyak tentang subjek daripada Rob Dodson dan Eric Bidelman

Berikut adalah sumber utama saya untuk informasi yang saya kumpulkan.

JavaScript Jabber - Polimer dengan Rob Dodson dan Eric Bidelman

Shop Talk Show - Komponen Web Dengan Rob Dodson

Eric Bishard
sumber
1
Jadi jika saya gunakan normalize.css, itu tidak menormalkan di dalam dom bayangan? Jadi saya perlu secara terpisah menormalkan setiap komponen seperti itu, tanpa cara melakukannya sekali? Apakah itu hal yang baik?
Dmitri Zaitsev
1
Tidak menganggap Shadow DOM sebagai IFRAME. Dan saya menggunakan perbandingan ini secara longgar karena ini bukan IFRAME. Tetapi dalam IFRAME, Anda akan memiliki dokumen Anda sendiri yang tidak terpengaruh oleh halaman CSS dan JavaScript dari dokumen induk. Ini adalah hal yang sangat bagus. Ini berarti bahwa Anda dapat menjamin bahwa komponen tertentu akan berjalan seperti yang dimaksudkan dan tidak terganggu oleh halaman induk. Namun, jika bayangan DOM ingin menggunakan DOM dari halaman induknya itu bisa. Tapi itu topik lain.
Eric Bishard
1
Saya mengerti, ya, CSS adalah bahasa yang bocor, tetapi dalam kebanyakan kasus ada solusi sederhana (meskipun tidak sempurna) dengan menggunakan awalan kelas unik di dalam DOM yang ingin Anda isolasi. Dan, tentu saja, dengan menghindari pemilih tag dan id, yang sebenarnya bukan praktik yang baik. Di sisi lain, beberapa deklarasi yang mungkin Anda benar-benar ingin bocor (seperti normalize.cssatau lembar berbasis tag lainnya), yang sekali lagi mudah dicapai tanpa Shadow DOM. Agaknya bukan isolasi yang sempurna tetapi masalah. bekerja di 95% kasus penggunaan, setidaknya yang bisa saya pikirkan.
Dmitri Zaitsev
2
Karena itu, saya harus mengatakan saya melihat manfaat isolasi yang tepat, dan menemukan jawaban Anda memberikan penjelasan yang baik.
Dmitri Zaitsev
6

Polimer adalah shim Komponen Web

  • " Komponen Web " adalah serangkaian standar baru yang diselimuti oleh HTML 5 yang dirancang untuk menyediakan blok bangunan yang dapat digunakan kembali untuk aplikasi web.

  • Browser berada di berbagai negara bagian menerapkan spesifikasi "Komponen Web", dan karena itu terlalu dini untuk menulis HTML menggunakan Komponen Web.

  • Namun sayang! Polimer untuk menyelamatkan! Polymer adalah pustaka yang menyediakan lapisan abstraksi untuk kode HTML Anda, yang memungkinkannya untuk menggunakan Web Components API seolah-olah sepenuhnya diimplementasikan di semua browser. Ini disebut pengisian-poli , dan tim Polimer mendistribusikan perpustakaan ini sebagai webcomponents.js . Ini dulu disebut platform.js btw.

Tapi Polymer lebih dari sekadar pustaka polyfill untuk komponen web ...

Polymer juga menyediakan blok bangunan Komponen Web yang terbuka dan dapat digunakan kembali melalui Elemen

masukkan deskripsi gambar di sini

Semua elemen dapat disesuaikan dan diperluas. Ini digunakan sebagai blok bangunan untuk apa pun mulai dari widget sosial hingga animasi hingga klien API web.

Polimer bukan kerangka kerja aplikasi web

  • Polimer lebih merupakan perpustakaan daripada kerangka kerja.

  • Polymer tidak memiliki dukungan untuk hal-hal seperti rute, ruang lingkup aplikasi, pengontrol, dll.

    • Tapi itu memang memiliki ikatan dua arah, dan menggunakan komponen "terasa" sama seperti menggunakan arahan Angular.

  • Meskipun ada beberapa tumpang tindih antara Polymer dan AngularJS, mereka tidak sama. Bahkan, tim AngularJS telah menyebutkan memanfaatkan perpustakaan Polymer dalam rilis mendatang.

  • Perhatikan juga bahwa Polymer masih dianggap "tepi pendarahan" saat AngularJS stabil.

  • Akan menarik untuk menyaksikan kedua proyek Google ini berkembang!

Robert Christian
sumber
Polimer bukan shim atau polyfill. Itulah yang dimaksud dengan polyfill webcomponents.js. Polymer adalah pustaka untuk pembuatan komponen web. Tim Polymer juga membuat koleksi komponen web (diimplementasikan menggunakan Polymer), tetapi itu juga bukan "Polymer"
ebidel
Pembaruan: Polymer sekarang memiliki rute, dan stabil! : D
JordyvD
5

Saya pikir dari perspektif praktis, pada akhirnya fitur template dari arahan sudut, dan metodologi komponen web yang dimanfaatkan oleh polimer keduanya menyelesaikan tugas yang sama. Perbedaan utama seperti yang saya lihat adalah bahwa polimer memanfaatkan API web untuk memasukkan bit HTML, cara yang lebih tepat secara sintaksis, dan sederhana untuk mencapai apa yang dilakukan Angular secara programatis saat membuat template. Namun polimer seperti yang telah dinyatakan, kerangka kerja kecil untuk membangun templat deklaratif dan interaktif menggunakan komponen. Ini tersedia hanya untuk tujuan desain UI, dan hanya didukung di sebagian besar browser modern. AngularJS adalah kerangka kerja MVC lengkap yang dirancang untuk membuat aplikasi web deklaratif dengan menggunakan binding data, dependensi, dan arahan. Mereka adalah dua binatang yang sangat berbeda. Untuk pertanyaan anda, menurut saya pada titik ini Anda tidak akan mendapat manfaat besar dari menggunakan polimer lebih dari sudut, kecuali memiliki puluhan komponen yang dibangun sebelumnya, namun itu masih akan mengharuskan Anda untuk port yang ke arah sudut. Namun di masa depan, ketika API web menjadi lebih maju, komponen web akan sepenuhnya menghapus kebutuhan untuk secara sistematis menentukan dan membangun template karena browser akan dapat dengan mudah memasukkan mereka dalam cara yang mirip dengan cara menangani file javascript atau css.

richbai90
sumber
1
"Mereka dua binatang yang sama sekali berbeda." Ya, tapi itu tidak ada hubungannya dengan pertanyaan. Pertanyaannya adalah tentang ELEMEN Polymer vs AngularJS DIRECTIVES. Dan mereka sangat mirip dalam banyak hal. Kami tidak bertanya tentang Kerangka apa yang terbaik untuk digunakan .. Polymer vs AngularJS. "Sepertinya saya pada titik ini Anda tidak akan mendapat manfaat besar dari menggunakan polimer lebih dari sudut" Tidak ada yang menyarankan ini, pada kenyataannya kita semua berbicara tentang akhirnya menggunakannya secara berdampingan dalam beberapa kapasitas. "Untuk pertanyaan Anda, ... Anda tidak akan mendapat manfaat dari menggunakan polimer lebih dari sudut" Sekali lagi, bukan pertanyaan.
Eric Bishard
0

MVVM (model-view, view-model) yang ditawarkan Angular bukan masalah yang ingin dipecahkan oleh Polymer. Sifat komposable & dapat digunakan kembali yang diberikan arahan Angular kepada Anda (tag khusus + kombinasi logika terkait) adalah perbandingan yang lebih waras ketika Anda mempertimbangkan membandingkan Angular dan Polimer. Angular adalah dan akan tetap menjadi kerangka kerja melayani tujuan yang lebih luas.

saurshaz
sumber
0

Apa perbedaan keduanya?

Untuk pengguna: Tidak banyak. Anda dapat membangun aplikasi yang luar biasa dengan keduanya.

Untuk pengembang: Mereka menggunakan sintaks yang berbeda sehingga kedua solusi memiliki kurva belajar yang cukup curam. Angular telah ada lebih lama dan memiliki komunitas BESAR sehingga Anda akan sulit sekali menemukan masalah yang belum diselesaikan.

Bagi seorang arsitek: Sangat berbeda. Angular adalah kerangka kerja aplikasi yang bertanggung jawab untuk semua aspek kehidupan Anda. Bahkan memiliki arahan terintegrasi secara vertikal jika Anda ingin fitur seperti komponen. Polimer di sisi lain lebih seperti pay-as-you-go. Anda ingin modal, tentu saja, Anda ingin widget interaktif, tidak masalah, Anda ingin penanganan rute, kita bisa melakukannya. Polimer juga lebih portabel karena Angular membutuhkan aplikasi Angular untuk menggunakan kembali arahan. Ide dengan Polymer menjadi lebih moduler dan akan bekerja di aplikasi lain, bahkan aplikasi Angular.

Masalah apa yang dipecahkan Polymer yang AngularJS belum atau tidak mau?

Polymer adalah pendekatan untuk menuju mengambil keuntungan dari standar komponen web baru. Jika fitur seperti elemen khusus, Shadow DOM, dan impor HTML didukung secara lokal, bodoh jika tidak memanfaatkannya. Saat ini sebagian besar fitur komponen web tidak didukung secara luas ( status saat ini ) sehingga Polymer bertindak sebagai shim atau jembatan. Agak seperti polyfill (sebenarnya ia menggunakan polyfill).

Apakah ada rencana untuk mengikat Polymer dengan AngularJS di masa mendatang?

Kami telah menggunakan Angular dan Polymer bersama selama lebih dari setahun. Sebagian dari keputusan untuk melakukan ini didasarkan pada janji yang dibuat langsung oleh tim Polymer kepada kami bahwa interoperabilitas ada di sana. Kami telah menyerah pada ide itu. Kami sekarang bergerak menggunakan hanya Polymer.

Untuk mengulanginya lagi, kita mungkin tidak akan menggunakan Polymer sama sekali, alih-alih menunggu sampai matang. Yang sedang berkata Polymer memiliki kelebihan (beberapa cukup bagus) dan kontra (beberapa di antaranya cukup membuat frustrasi) tapi saya pikir itu adalah diskusi untuk utas lainnya.

Mengapa tidak
sumber
0

Arahan Angularadalah pendekatan untuk membuat elemen khusus. Anda dapat menetapkan tag khusus baru dengan atribut khusus. Polimer juga bisa melakukan ini, tetapi ia akan melakukannya dengan cara yang menarik dan lebih sederhana. Polimer sebenarnya bukan kerangka kerja, itu hanya perpustakaan. Polymer memungkinkan Anda mempelajari teknologi komponen web asli yang dibuat oleh w3c, bahwa browser web akhirnya menerapkan komponen it.web adalah teknologi masa depan, tetapi polimer memungkinkan Anda menggunakan teknologi itu sekarang. Google Polymer adalah perpustakaan yang menyediakan gula dan polyfill sintaksis untuk membangun elemen dan aplikasi dengan komponen web. Ingat bahwa saya katakan polimer bukan kerangka kerja dan itu adalah perpustakaan. Tapi ketika Anda menggunakan Polimer, sebenarnya kerangka kerja Anda adalah DOM. posting ini adalah tentang angular js ver 1 dan polimer dan saya telah bekerja dengan keduanya adalah proyek saya dan saya pribadi lebih suka polimer daripada angularjs. Tetapi versi Angular 2 sangat berbeda dibandingkan dengan angularjs 1.direktif dalam angular 2 memiliki arti yang berbeda.

behzad besharati
sumber
0

Arahan sudut secara konseptual mirip dengan Elemen Kustom tetapi diterapkan tanpa menggunakan API Komponen Web. Arahan sudut adalah cara untuk membangun elemen khusus, tetapi spesifikasi Polimer dan Komponen Web adalah cara berbasis standar untuk melakukannya.

elemen polimer:

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

Arahan sudut:

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
sumber