อะไรคือความแตกต่างระหว่างองค์ประกอบโพลิเมอร์และคำสั่ง 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.jsx-foo.html

ดูเหมือนว่านี่จะเทียบเท่ากับโมดูล directive ใน 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 มีหรือไม่?

  • มีแผนจะผูกโพลีเมอร์กับ AngularJS ในอนาคตหรือไม่


ใช้ข้อมูลได้ที่นี่2ality - บทบาทของ AngularJS และโพลิเมอร์
LCJ

คำตอบ:


520

คุณไม่ใช่คนแรกที่ถามคำถามนี้ :) ให้ฉันอธิบายบางสิ่งก่อนที่จะตอบคำถามของคุณ

  1. พอลิเมอร์webcomponents.jsเป็นห้องสมุดที่มีโพลีฟิลหลายตัวสำหรับ W3C API ต่างๆที่อยู่ภายใต้ร่มของ Web Components เหล่านี้คือ:

    • องค์ประกอบที่กำหนดเอง
    • นำเข้า HTML
    • <template>
    • เงา DOM
    • เหตุการณ์ของตัวชี้
    • คนอื่น ๆ

    การนำทางด้านซ้ายในเอกสารประกอบ ( polymer-project.org ) มีหน้าสำหรับ "เทคโนโลยีแพลตฟอร์ม" เหล่านี้ทั้งหมด แต่ละหน้าเหล่านั้นยังมีตัวชี้ไปยัง polyfill แต่ละรายการ

  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 เมื่อเบราว์เซอร์เห็นคำจำกัดความนั้นจะมีการลงทะเบียนเป็นองค์ประกอบใหม่

ไปที่คำถาม!

ความแตกต่างระหว่างเชิงมุมและพอลิเมอร์คืออะไร?

เราครอบคลุมบางส่วนของเราในQ & A วิดีโอ โดยทั่วไปพอลิเมอร์เป็นห้องสมุดที่มีจุดประสงค์ในการใช้ (และแสดงวิธีใช้) ส่วนประกอบของเว็บ รากฐานของมันคือองค์ประกอบที่กำหนดเอง (เช่นทุกสิ่งที่คุณสร้างเป็นองค์ประกอบของเว็บ) และมันจะวิวัฒนาการเมื่อเว็บวิวัฒนาการ ด้วยเหตุนี้เราจึงสนับสนุนเฉพาะเบราว์เซอร์รุ่นใหม่ล่าสุดเท่านั้น

ฉันจะใช้ภาพนี้เพื่ออธิบายสถาปัตยกรรมทั้งหมดของพอลิเมอร์:

ป้อนคำอธิบายรูปภาพที่นี่

เลเยอร์สีแดง: เรารับเว็บของวันพรุ่งนี้ผ่านชุดโพลีฟิล โปรดทราบว่าไลบรารีเหล่านี้จะหายไปตามกาลเวลาเนื่องจากเบราว์เซอร์ใช้ API ใหม่

YELLOW layer: โรยในน้ำตาลด้วย polymer.js เลเยอร์นี้เป็นความเห็นของเราเกี่ยวกับวิธีการใช้ API ที่ระบุร่วมกัน นอกจากนี้ยังเพิ่มสิ่งต่าง ๆ เช่นการเชื่อมโยงข้อมูลน้ำตาล syntatic เปลี่ยนนักดูคุณสมบัติที่เผยแพร่ ... เราคิดว่าสิ่งเหล่านี้มีประโยชน์สำหรับการสร้างแอพที่ใช้ส่วนประกอบของเว็บ

GREEN: ชุดส่วนประกอบ UI ที่ครอบคลุม (เลเยอร์สีเขียว) ยังอยู่ในระหว่างดำเนินการ เหล่านี้จะเป็นองค์ประกอบของเว็บที่ใช้เลเยอร์สีแดง + เหลือง

คำสั่งเชิงมุมกับองค์ประกอบที่กำหนดเอง?

ดูอเล็กซ์รัสเซลคำตอบ โดยทั่วไป Shadow DOM อนุญาตให้เขียน HTML เป็นบิต แต่ยังเป็นเครื่องมือสำหรับห่อหุ้ม HTML นั้น นี่เป็นแนวคิดใหม่ในเว็บโดยพื้นฐานแล้วจะมีกรอบงานอื่นที่ใช้ประโยชน์ได้

พอลิเมอร์มีปัญหาอะไรบ้างที่ AngularJS มีหรือไม่?

ความคล้ายคลึงกัน: เทมเพลตที่ประกาศการเชื่อมโยงข้อมูล

ความแตกต่าง: Angular มี API ระดับสูงสำหรับบริการตัวกรองภาพเคลื่อนไหวและอื่น ๆ รองรับ IE8 และ ณ จุดนี้เป็นกรอบที่มีประสิทธิภาพมากขึ้นสำหรับการสร้างแอปที่ใช้งานจริง พอลิเมอร์เพิ่งเริ่มเป็นอัลฟ่า

มีแผนจะผูกโพลีเมอร์กับ AngularJS ในอนาคตหรือไม่

พวกเขากำลังโครงการแยก ที่กล่าวว่าทั้งทีม Angular และ Ember ประกาศว่าในที่สุดพวกเขาจะย้ายไปใช้ API แพลตฟอร์มพื้นฐานในกรอบงานของตนเอง

^ นี่เป็นรางวัลที่ยิ่งใหญ่สำหรับ IMO ในโลกที่นักพัฒนาเว็บมีเครื่องมือที่ทรงพลัง (Shadow DOM, Custom Elements) ผู้เขียนกรอบงานยังสามารถใช้สิ่งดั้งเดิมเหล่านี้เพื่อสร้างกรอบที่ดีกว่า ส่วนใหญ่ของพวกเขาผ่านห่วงที่ดีในการ "ทำให้งานเสร็จ"

UPDATE:

มีบทความที่ดีมากในหัวข้อนี้: " นี่คือความแตกต่างระหว่างพอลิเมอร์และเชิงมุม "


46
จุดสำคัญที่นี่คือพอลิเมอร์กำลังนำเว็บดังที่เราทราบไปข้างหน้าโดยเฉพาะโดยแสดงให้เห็นว่าองค์ประกอบของเว็บสามารถทำให้เว็บเปิดใช้งานได้ใช้ร่วมกันได้และขยายได้ AngularJS (และ Ember สำหรับเรื่องนั้น) เป็นเรื่องเกี่ยวกับการสร้างเฟรมเวิร์กที่ใช้ประโยชน์จากส่วนที่ดีที่สุดของเบราว์เซอร์สำหรับการสร้างแอปพลิเคชันที่ตอบสนองได้ เมื่อ Web Components ได้รับการสนับสนุนที่ดีขึ้นจากเบราว์เซอร์ Angular และเฟรมเวิร์กอื่น ๆ สามารถสร้างขึ้นเพื่อให้โค้ดเฟรมเวิร์กมีขนาดเล็กลงและแอปพลิเคชันง่ายขึ้น นั่นคือเหตุผลว่าทำไม Win-Win สำหรับทุกคน
Schmuli

31
ฉันยังไม่เข้าใจว่าอะไรคือความแตกต่างในทางปฏิบัติระหว่าง Polymer Custom Elements กับ Angular Directives? เหตุใดฉันจึงต้องใช้องค์ประกอบที่กำหนดเองของโพลิเมอร์แทนคำสั่งเชิงมุมในโครงการเชิงมุม
ronag

3
ดังนั้นโครงการ Angular และ Ember ที่มีอยู่ในที่สุดจะได้รับประโยชน์จากการใช้ API แพลตฟอร์มพื้นฐาน แต่เมื่อ Web Components ได้รับการสนับสนุนที่ดีขึ้นจากเบราว์เซอร์จะมีประโยชน์ในการใช้งาน Angular ในโครงการใหม่หรือไม่หรือมีประสิทธิภาพซ้ำซ้อนหรือไม่
แพนเค้ก

8
ฉันคิดว่ามันจะทำให้ขาวดำ: ใช้ AngularJS เพื่อผลิตสิ่งของและเล่นกับ Polymer ในเวลาว่างเพื่อที่คุณจะได้คุ้นเคยกับมันเมื่อถึงเวลา
thdoan

31
มันเป็นภาพรวมที่ดีของ polymer.js แต่ไม่สามารถตอบคำถามได้อย่างทั่วถึง ...
Christoph

57

สำหรับคำถามของคุณ:

มีแผนจะผูกโพลีเมอร์กับ AngularJS ในอนาคตหรือไม่

จากบัญชี Twitter อย่างเป็นทางการของ AngularJS: "angularjs จะใช้โพลีเมอร์สำหรับวิดเจ็ตของมันมันเป็น win-win"

แหล่งที่มา: https://twitter.com/angularjs/status/335417160438542337


2
@NREZ ตกลงฉันไม่ตอบชื่อของโพสต์ แต่หนึ่งในคำถามในโพสต์คำตอบของฉันเป็นเพียงคำถามที่ 3: Are there plans to tie Polymer in with AngularJS in the future? ฉันคิดว่าเป็นความคิดที่ดีที่จะพูดโพสต์ต้นฉบับจากทีม AngularJS ที่คุณไม่คิด ?
อ่านเพิ่มเติม

ใช่แล้วจุด ur ของคุณนั้นถูกต้อง ... เพียงแค่คำอธิบายน่าจะดีกว่า ... เหมือนที่ฉันทำไปแล้วและฉันมั่นใจว่าครั้งต่อไปที่คุณจะทำเช่นนั้น ...
NREZ

แน่นอน. ขอบคุณสำหรับการอัปเดตของคุณ :) (ฉันเพิ่งเริ่มใช้ stackoverflow จริงๆดังนั้นฉันไม่เห็นการอัปเดตของคุณก่อนที่จะตอบกลับคุณ ... )
ดู

ดังนั้นพวกเขาจึงเปลี่ยนใจ ฉันไม่สามารถหาตำแหน่งที่พวกเขาใช้โพลีเมอร์ได้
theblang

ฉันไม่คิดว่านี่เป็นคำตอบ
astroanu

19

ในวิดีโอนี้ 2 คนจาก AngularJS พูดคุยเกี่ยวกับความแตกต่างและความคล้ายคลึงกันเกี่ยวกับกรอบสองนี้ (AngularJS 1.2 and Beyond)

ลิงก์เหล่านี้จะนำคุณไปสู่คำถาม & คำตอบที่ถูกต้อง:


19

1 & 2)ส่วนประกอบโพลิเมอร์ถูกกำหนดขอบเขตเนื่องจากต้นไม้ที่ซ่อนอยู่ในเงา นั่นหมายความว่าสไตล์และพฤติกรรมของพวกเขาไม่สามารถตกออกมาได้ Angular ไม่ได้ถูกกำหนดขอบเขตให้กับคำสั่งเฉพาะนั้นที่คุณสร้างเช่นเว็บโพลีเมอร์ คำสั่งเชิงมุมอาจขัดแย้งกับบางสิ่งในขอบเขตทั่วโลกของคุณ IMO ประโยชน์ที่คุณจะได้รับจากโพลีเมอร์คือสิ่งที่ฉันอธิบาย .. ส่วนประกอบแบบแยกส่วนที่มีการกำหนดขอบเขต CSS & JavaScript ให้กับองค์ประกอบเฉพาะนั้นซึ่งไม่มีอะไรสามารถสัมผัสได้ DOM ไม่สามารถแตะต้องได้!

คำสั่งเชิงมุมสามารถสร้างขึ้นเพื่อให้คุณสามารถใส่คำอธิบายประกอบองค์ประกอบที่มีฟังก์ชันการทำงานหลายส่วน ในองค์ประกอบของเว็บโพลิเมอร์ที่ไม่ได้เป็นเช่นนั้น หากคุณต้องการรวมฟังก์ชั่นการทำงานของส่วนประกอบคุณรวมสององค์ประกอบไว้ในองค์ประกอบอื่น (หรือรวมองค์ประกอบเหล่านี้ไว้ในส่วนประกอบอื่น) หรือคุณสามารถขยายองค์ประกอบที่มีอยู่ได้ โปรดจำไว้ว่าความแตกต่างที่สำคัญยังคงเป็นว่าแต่ละองค์ประกอบมีการกำหนดขอบเขตในองค์ประกอบเว็บโพลิเมอร์ คุณสามารถแชร์ไฟล์ css & js ในหลาย ๆ องค์ประกอบหรือคุณสามารถอินไลน์ได้

3)ใช่แผนเชิงมุมเกี่ยวกับการรวมโพลีเมอร์ในเวอร์ชัน 2+ ตาม Rob Dodson และ Eric Bidelman

มันตลกดีที่ไม่มีใครพูดถึงขอบเขตของคำนี้ได้ที่นี่ ฉันคิดว่านั่นเป็นหนึ่งในความแตกต่างที่สำคัญ

มีความแตกต่างมากมาย แต่พวกเขายังมีความแตกต่างกันมากมายในการสร้างเลโก้แบบแยกส่วนเหมือนกับฟังก์ชั่นการใช้งานสำหรับแอพ ฉันคิดว่ามันปลอดภัยที่จะบอกว่า Angular จะเป็นกรอบแอปพลิเคชั่นและโพลีเมอร์อาจมีชีวิตอยู่ในแอพเดียวกันพร้อมกับคำสั่งด้านข้างที่มีขอบเขตแตกต่างกัน แต่พอลิเมอร์อาจทดแทนคำสั่งปัจจุบันของคุณได้ แต่ฉันไม่เห็นเหตุผลว่าทำไม Angular ไม่สามารถทำงานได้ตามที่เป็นอยู่และมีส่วนประกอบของโพลิเมอร์เช่นกัน

เมื่ออ่านคำตอบอีกครั้งขณะที่ฉันเขียนสิ่งนี้ฉันสังเกตเห็นว่า Eric Bidelman (ebidel) ทำสิ่งที่ครอบคลุมในคำตอบของเขา:

"Shadow DOM อนุญาตให้เขียน HTML ได้ แต่ยังเป็นเครื่องมือในการห่อหุ้ม HTML นั้น"

ที่จะให้เครดิตที่เป็นเครดิตเนื่องจากผมได้คำตอบของฉันจากการฟังการสัมภาษณ์จำนวนมากที่มีร็อบดอดและเอริค Bidelman แต่ฉันรู้สึกว่าคำตอบไม่ได้พูดเพื่อให้ความเข้าใจที่เขาต้องการ ด้วยที่กล่าวว่าฉันคิดว่าฉันได้สัมผัสกับคำตอบที่เขากำลังมองหา แต่ฉันไม่ได้มีข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้กว่า Rob Dodson และ Eric Bidelman

นี่คือแหล่งข้อมูลหลักของฉันสำหรับรวบรวมข้อมูล

JavaScript Jabber - โพลิเมอร์พร้อม Rob Dodson และ Eric Bidelman

รายการทอล์คโชว์ของร้าน - เว็บคอมโพเนนต์ด้วย Rob Dodson


1
ถ้าฉันใช้normalize.cssมันจะไม่ทำให้ปกติอยู่ภายในเงาโดมิโน? ดังนั้นฉันต้องแยกส่วนประกอบแต่ละอย่างให้เป็นมาตรฐานโดยไม่ต้องทำอีกครั้ง? มันเป็นสิ่งที่ดีหรือไม่?
Dmitri Zaitsev

1
ไม่คิดว่า Shadow DOM เป็น IFRAME และฉันใช้การเปรียบเทียบนี้อย่างหลวม ๆ เพราะไม่ใช่ IFRAME แต่ใน IFRAME คุณจะมีเอกสารของคุณเองที่ไม่ได้รับผลกระทบจากหน้า CSS และ JavaScript ของเอกสารหลัก นี่เป็นสิ่งที่ดีมาก หมายความว่าคุณสามารถรับประกันได้ว่าองค์ประกอบเฉพาะจะทำงานตามที่ต้องการและไม่ได้รับการแทรกแซงจากหน้าหลัก อย่างไรก็ตามหากเงา DOM ต้องการใช้ DOM จากหน้าหลักสามารถทำได้ แต่นั่นเป็นหัวข้ออื่น
Eric Bishard

1
ฉันเห็นว่าใช่ CSS เป็นภาษาที่รั่ว แต่ในกรณีส่วนใหญ่มีวิธีแก้ปัญหาที่ง่าย (แต่ไม่สมบูรณ์แบบ) โดยใช้คำนำหน้าคลาสที่ไม่ซ้ำกันภายใน DOM ที่คุณต้องการแยก และแน่นอนว่าการหลีกเลี่ยงตัวเลือกแท็กและรหัสซึ่งไม่ใช่วิธีปฏิบัติที่ดีอยู่แล้ว ในทางกลับกันการประกาศบางอย่างที่คุณอาจต้องการรั่วไหล (เช่นnormalize.cssหรือแผ่นงานตามแท็กอื่น ๆ ) ซึ่งทำได้โดยง่ายอีกครั้งโดยไม่ต้อง Shadow DOM เห็นด้วยไม่ใช่การแยกที่สมบูรณ์แบบ แต่เป็นปัญหา ใช้งานได้ 95% ของกรณีการใช้งานอย่างน้อยที่ฉันคิดได้
Dmitri Zaitsev

2
ต้องบอกว่าฉันต้องบอกว่าฉันเห็นประโยชน์ของการแยกที่เหมาะสมและหาคำตอบของคุณให้คำอธิบายที่ดี
Dmitri Zaitsev

6

พอลิเมอร์เป็นองค์ประกอบของเว็บ

  • " Web Components " เป็นชุดมาตรฐานใหม่ที่ถูกห่อหุ้มด้วย HTML 5 ที่ออกแบบมาเพื่อสร้างบล็อคที่สามารถใช้ซ้ำได้สำหรับแอปพลิเคชันบนเว็บ

  • เบราว์เซอร์อยู่ในสถานะต่างๆของการใช้ข้อมูลจำเพาะ "องค์ประกอบของเว็บ" ดังนั้นจึงเป็นการเร็วเกินไปที่จะเขียน HTML โดยใช้ Web Components

  • แต่อนิจจา! โพลิเมอร์เพื่อช่วยชีวิต! พอลิเมอร์เป็นห้องสมุดที่ให้เลเยอร์นามธรรมของโค้ด HTML ทำให้สามารถใช้งาน Web Components API ได้ราวกับว่ามันถูกนำไปใช้อย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมด นี้เรียกว่าโพลีบรรจุและทีม Polymer กระจายห้องสมุดนี้เป็นwebcomponents.js สิ่งนี้เคยถูกเรียกว่าplatform.js btw

แต่พอลิเมอร์เป็นมากกว่าคลังข้อมูลของพอลิฟิลสำหรับส่วนประกอบของเว็บ ...

พอลิเมอร์ยังให้หน่วยการสร้าง Web Component แบบเปิดและใช้ซ้ำได้ผ่านองค์ประกอบ

ป้อนคำอธิบายรูปภาพที่นี่

องค์ประกอบทั้งหมดสามารถปรับแต่งและขยาย สิ่งเหล่านี้ใช้เป็นหน่วยการสร้างสิ่งใด ๆ ตั้งแต่วิดเจ็ตโซเชียลจนถึงแอนิเมชั่นไปจนถึงไคลเอนต์เว็บ API

โพลิเมอร์ไม่ใช่กรอบงานเว็บแอปพลิเคชัน

  • พอลิเมอร์มีไลบรารีมากกว่ากรอบงาน

  • โพลิเมอร์ไม่รองรับสิ่งต่างๆเช่นเส้นทางขอบเขตแอปพลิเคชันตัวควบคุมและอื่น ๆ

    • แต่มันมีความผูกพันสองทางและการใช้ส่วนประกอบ "รู้สึก" เหมือนกับการใช้คำสั่งเชิงมุม
  • แม้ว่าจะมีการซ้อนทับกันระหว่างพอลิเมอร์และ AngularJS แต่ก็ไม่เหมือนกัน ในความเป็นจริงทีม AngularJS ได้กล่าวถึงการใช้ห้องสมุดโพลิเมอร์ในการเผยแพร่ที่กำลังจะมาถึง

  • โปรดทราบว่าโพลีเมอร์ยังถือว่าเป็น "ขอบเลือด" ในขณะที่ AngularJS มีเสถียรภาพ

  • มันจะน่าสนใจที่จะดูทั้งสองโครงการ Google วิวัฒนาการ!


โพลิเมอร์ไม่ใช่ shim หรือ polyfills นั่นคือสิ่งที่ polycompils webcomponents.js พอลิเมอร์เป็นห้องสมุดสำหรับการเขียนองค์ประกอบของเว็บ ทีมโพลิเมอร์ยังสร้างคอลเลกชันขององค์ประกอบเว็บ (ใช้งานโดยใช้พอลิเมอร์) แต่ก็ไม่ใช่ "พอลิเมอร์"
ebidel

ปรับปรุง: พอลิเมอร์ตอนนี้มีเส้นทางและมีความเสถียร! : D
JordyvD

5

ฉันคิดว่าจากมุมมองที่ใช้งานได้จริงในที่สุดคุณลักษณะเทมเพลตของคำสั่งเชิงมุมและวิธีการองค์ประกอบของเว็บที่ใช้ประโยชน์จากโพลีเมอร์ก็สามารถทำงานเดียวกันได้สำเร็จ ความแตกต่างที่สำคัญอย่างที่ฉันเห็นคือพอลิเมอร์ใช้ประโยชน์จาก API ของเว็บเพื่อรวมบิตของ HTML วิธีที่ถูกต้องมากขึ้นและง่ายต่อการบรรลุสิ่งที่แองกูลาร์ใช้ พอลิเมอร์เป็นอย่างไรตามที่ระบุไว้กรอบเล็ก ๆ สำหรับการสร้างเทมเพลตที่เปิดเผยและการโต้ตอบโดยใช้ส่วนประกอบ มีไว้สำหรับการออกแบบ UI เท่านั้นและรองรับเฉพาะในเบราว์เซอร์ที่ทันสมัยที่สุดเท่านั้น AngularJS เป็นกรอบ MVC ที่สมบูรณ์ซึ่งออกแบบมาเพื่อประกาศเว็บแอปพลิเคชันโดยใช้การเชื่อมโยงข้อมูลการอ้างอิงและคำสั่ง พวกมันเป็นสัตว์สองชนิดที่ต่างกันโดยสิ้นเชิง สำหรับคำถามของคุณ สำหรับฉันแล้ว ณ จุดนี้คุณจะไม่ได้รับประโยชน์อย่างมากจากการใช้โพลีเมอร์มากกว่าเชิงมุมยกเว้นการมีส่วนประกอบหลายอย่างที่สร้างไว้ล่วงหน้า อย่างไรก็ตามในอนาคตเมื่อ API ของเว็บมีความก้าวหน้ามากขึ้นส่วนประกอบของเว็บจะขจัดความต้องการในการกำหนดและสร้างเทมเพลตแบบเป็นโปรแกรมโดยสมบูรณ์


1
"พวกมันเป็นสัตว์สองชนิดที่ต่างกันอย่างสิ้นเชิง" ใช่พวกเขาเป็น แต่นั่นไม่เกี่ยวข้องกับคำถาม คำถามคือเกี่ยวกับพอลิเมอร์องค์ประกอบ VS AngularJS ทิศทาง และสิ่งเหล่านี้คล้ายกันมากในหลาย ๆ ทาง เราไม่ได้ถามว่าอะไรคือ Framework ที่ดีที่สุดที่จะใช้ .. Polymer vs AngularJS "สำหรับฉันในตอนนี้ดูเหมือนว่าคุณจะไม่ได้รับประโยชน์อย่างมากจากการใช้โพลีเมอร์ในเชิงมุม" ไม่มีใครแนะนำเรื่องนี้ในความเป็นจริงเราทุกคนพูดถึงกันแล้ว "สำหรับคำถามของคุณ ... คุณจะไม่ได้รับประโยชน์จากการใช้โพลีเมอร์มากกว่าเชิงมุม" อีกครั้งไม่ใช่คำถาม
Eric Bishard

0

MVVM (มุมมองแบบจำลอง, มุมมองแบบจำลอง) ที่ Angular เสนอไม่ใช่ข้อกังวลที่โพลิเมอร์มุ่งที่จะแก้ไข ลักษณะที่ประกอบได้และนำกลับมาใช้ใหม่ได้ซึ่งคำสั่งเชิงมุมให้กับคุณด้วย (แท็กที่กำหนดเอง + การรวมตรรกะที่เกี่ยวข้อง) เป็นการเปรียบเทียบที่มีเหตุผลมากขึ้นเมื่อคุณพิจารณาเปรียบเทียบเชิงมุมและโพลิเมอร์ เชิงมุมคือและจะยังคงเป็นกรอบการให้บริการวัตถุประสงค์ที่กว้างขึ้น


0

ความแตกต่างระหว่างสองคืออะไร?

สำหรับผู้ใช้: ไม่มาก คุณสามารถสร้างแอพเจ๋ง ๆ ได้ทั้งคู่

ถึงผู้พัฒนา: พวกเขาใช้วิธีการทางไวยากรณ์ที่แตกต่างกันดังนั้นวิธีการแก้ปัญหาอย่างใดอย่างหนึ่งมีเส้นโค้งการเรียนรู้ที่ค่อนข้างสูงชัน เชิงมุมนั้นมีมานานแล้วและมีชุมชนขนาดใหญ่ดังนั้นคุณจะต้องเจอกับปัญหาที่ยังไม่ได้รับการแก้ไข

สำหรับสถาปนิก: แตกต่างกันมาก Angular เป็นกรอบแอปพลิเคชั่นที่รับผิดชอบทุกด้านในชีวิตของคุณ มันยังมีคำสั่งรวมแนวตั้งในกรณีที่คุณต้องการส่วนประกอบเช่นคุณสมบัติ พอลิเมอร์ในทางกลับกันเหมือนจ่ายตามที่คุณไป คุณต้องการคำกริยาแน่นอนคุณต้องการวิดเจ็ตแบบโต้ตอบไม่มีปัญหาคุณต้องการการจัดการเส้นทางเราสามารถทำเช่นนั้นได้ พอลิเมอร์ยังพกพาได้มากกว่าในแองกูลาร์ซึ่งต้องการแอปพลิเคชันเชิงมุมเพื่อใช้คำสั่งซ้ำ ความคิดกับพอลิเมอร์นั้นเป็นโมเดอเรเตอร์มากกว่าและจะทำงานในแอพอื่น ๆ แม้แต่แอพเชิงมุม

พอลิเมอร์มีปัญหาอะไรบ้างที่ AngularJS มีหรือไม่?

พอลิเมอร์เป็นวิธีการที่มุ่งหน้าไปยังการใช้ประโยชน์จากมาตรฐานองค์ประกอบของเว็บใหม่ หากฟีเจอร์เช่นองค์ประกอบที่กำหนดเอง, Shadow DOM และการนำเข้า HTML ได้รับการสนับสนุนแบบโลคัลมันจะเป็นเรื่องโง่ที่จะไม่ใช้ประโยชน์จากมัน ปัจจุบันคุณสมบัติขององค์ประกอบเว็บส่วนใหญ่ไม่ได้รับการรองรับอย่างกว้างขวาง ( สถานะปัจจุบัน ) ดังนั้นโพลีเมอร์จึงทำหน้าที่เป็น shim หรือบริดจ์ ค่อนข้างเหมือน polyfill (อันที่จริงแล้วมันใช้ polyfills)

มีแผนจะผูกโพลีเมอร์กับ AngularJS ในอนาคตหรือไม่

เราใช้ Angular และ Polymer ร่วมกันมานานกว่าหนึ่งปี ส่วนหนึ่งของการตัดสินใจทำเช่นนี้ขึ้นอยู่กับสัญญาที่ทำโดยทีมโพลิเมอร์โดยตรงกับเราว่าการทำงานร่วมกันจะอยู่ที่นั่น เรายอมแพ้กับความคิดนั้น ตอนนี้เรากำลังเคลื่อนไปสู่การใช้พอลิเมอร์เท่านั้น

หากต้องการทำใหม่อีกครั้งเราอาจไม่ได้ใช้โพลีเมอร์เลย แต่ให้รอจนกว่าจะครบกำหนด การพูดถึงโพลีเมอร์มีข้อดี (ค่อนข้างดี) และข้อเสีย (บางอันค่อนข้างน่าผิดหวัง) แต่ฉันคิดว่านั่นเป็นการสนทนาสำหรับหัวข้ออื่น


0

คำสั่ง Angularjsเป็นวิธีการสร้างองค์ประกอบที่กำหนดเอง คุณสามารถกำหนดแท็กที่กำหนดเองใหม่พร้อมแอตทริบิวต์ที่กำหนดเอง พอลิเมอร์สามารถทำสิ่งนี้ได้ แต่มันจะทำในวิธีที่น่าสนใจและง่ายกว่าจริง ๆ แล้วพอลิเมอร์ไม่ใช่โครงร่างมันเป็นแค่ห้องสมุด แต่เป็นห้องสมุดที่ทรงพลังและน่าทึ่งที่คุณสามารถตกหลุมรักมันได้ (เช่นฉัน) พอลิเมอร์ช่วยให้คุณเรียนรู้เทคโนโลยีส่วนประกอบของเว็บเนทีฟที่สร้างขึ้นโดย w3c ซึ่งเว็บเบราว์เซอร์ในที่สุดจะใช้ส่วนประกอบนี้เป็นเทคโนโลยีในอนาคต แต่โพลีเมอร์ให้คุณใช้เทคโนโลยีนั้นทันที Google โพลิเมอร์เป็นห้องสมุดที่ให้น้ำตาล องค์ประกอบและแอปพลิเคชันที่มีส่วนประกอบของเว็บโปรดจำไว้ว่าฉันบอกว่าโพลิเมอร์ไม่ใช่กรอบและเป็นห้องสมุด แต่เมื่อคุณใช้โพลิเมอร์จริง ๆ แล้วกรอบงานของคุณคือ DOM โพสต์นี้เกี่ยวกับ angular js ver 1 และ polymer และฉันได้ทำงานกับทั้งคู่เป็นโครงการของฉันและโดยส่วนตัวแล้วฉันชอบโพลิเมอร์มากกว่า angularjs แต่ Angular version 2 นั้นแตกต่างอย่างสิ้นเชิงเมื่อเปรียบเทียบกับ angularjs เวอร์ชั่น 1. คำสั่งใน angular 2 มีความหมายที่แตกต่างกัน


0

คำสั่งเชิงมุมนั้นมีความคล้ายคลึงกับแนวคิดที่กำหนดเอง แต่จะถูกนำไปใช้โดยไม่ต้องใช้ Web Components 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}}" />'
  };
}]);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.