เริ่มต้นใช้ Polymer 2.0 สร้าง Web Component

Polymer 2.0

Polymer คืออะไร

หากใครที่ได้อ่าน blog ของผมก่อนหน้านี้ที่อธิบายเรื่องของ Web Component ไว้อาจจะสงสัยว่าในเมื่อเราสามารถสร้าง Web Component โดยที่ไม่ต้องใช้ library อะไรช่วย แล้วทำไมเราถึงต้องใช้ Polymer? (หากใครยังไม่ได้อ่านเรื่องของ Web Component กลับไปอ่านได้ที่นี่นะครับ)

Web Components มาตรฐานใหม่ของ Web

Polymer คือ library ที่มาช่วยลดความซับซ้อนในการสร้าง web component และเรายังได้ความสามารถบางอย่างโดยที่เราไม่ต้องเขียนโค้ดเองเช่น Data Binding, DOM templating, Property Declaration และอีกมากมาย เดี๋ยวเรามาดูกันนะครับว่าการสร้าง web component ด้วย Polymer เป็นยังไง

สร้าง Web Component ด้วย Polymer

เพื่อความง่ายในการทำความเข้าใจเราจะใช้ Plunker รันโค้ดให้เรานะครับ แนะนำให้ Plunker ของแต่ละเรื่องขึ้นมาและอ่านคำอธิบายตาม แล้วลองแก้ค่า Plunker เพื่อความเข้าใจมากขึ้นนะครับ

Register element

Register element

ขั้นตอนการสร้าง web component ด้วย polymer เริ่มต้นด้วย สร้างไฟล์ใหม่ขึ้นมาสำหรับ component ใหม่ของเราซึ่งในตอนนี้คือ custom-element.html แล้ว import polymer library เข้ามา

<link rel="import" href="https://polygit.org/polymer+2.0.0-rc.2/components/polymer/polymer-element.html">

ที่เราต้อง import polymer เข้ามาเพราะเราจะต้องสร้าง class ที่ extend Polymer.Element

<script>
   class CustomElement extends Polymer.Element {     
      static get is() { return "custom-element"; }     
   }
   customElements.define(CustomElement.is, CustomElement); 
</script>

Polymer มี pattern ในการระบุชื่อ tag ของ custom element ด้วยการประกาศ property is เป็นแบบ static และ read only เมื่อประกาศ class เสร็จแล้วก็ register custom element ด้วย customElements.define()
แค่นี้เราก็ได้ custom element ที่สร้างด้วย Polymer แล้วครับ

Add shadow DOM

Add shadow DOM

ถ้า custom element ของเรามี ui เราสามารถใช้ Polymer’s DOM templating ช่วยเราสร้าง template ภายใต้ shadow DOM ได้ วิธีการคือใส่ tag <dom-module> ครอบ <script> และระบุ property id ของ <dom-module> เป็นชื่อเดียวกับชื่อ tag ของ custom element

<dom-module id="dom-element">
   <style>
      p { color: red; }
   </style>  
   <template>     
      <p>I'm a DOM element. This is my shadow DOM!</p>   
   </template>
  
   <script>     
      class DomElement extends Polymer.Element {       
         static get is() { return "dom-element"; }     
      }     
      customElements.define(DomElement.is, DomElement);   
   </script>  
</dom-module>

เสร็จแล้วเพิ่ม tag <template> เข้าไป dom ของ custom element เราจะอยู่ภายใต้ tag <template>

และเราสามารถเขียน style ได้เพียงแค่ใส่ tag <style> เข้าไปภายใต้ <dom-module> style ที่ถูกประกาศภายใต้ shadow DOM จะมีผลเฉพาะกับ dom ที่ถูกประกาศภายใต้ shadow DOM เดียวกันเท่านั้น

Data binding

Data binding

เพื่อความสะดวกสบาย Polymer ได้ใส่ data binding มาให้เราด้วยครับ ซึ่งมี 2 แบบคือ

This is <b>[[owner]]</b>'s name-tag element.
<iron-input bind-value="{{owner}}">
   <input is="iron-input" placeholder="Your name here...">
</iron-input>

1. One-way data binding วิธีนี้ค่าของตัวแปรจะเปลี่ยนได้จากใน code อย่างเดียว วิธีการใช้คือใส่ [[]] ครอบตัวแปร
2. Two-way data binding วิธีนี้ค่าของตัวแปรสามารถเปลี่ยนได้จากใน code และจากทาง ui วิธีใช้คือใส่ {{}} ครอบตัวแปร

จากในตัวอย่างตัวแปร owner จะเปลี่ยนค่าตาม input เพราะ binding แบบ two-way ไว้ หากเราเปลี่ยนจาก {{}} เป็น [[]] ตัวแปร owner จะไม่เปลี่ยนค่าตาม input

ลองเล่นใน plunker กันดูนะครับ ที่ <input> ต้องมีตัว <iron-input> ครอบเพราะ <input> ไม่มี data binding ให้เราใช้ครับ เราจะมาลงรายละเอียดเรื่องนี้กันอีกทีในบทความของ data binding โดยเฉพาะ

Property declaration

Property declaration

เราสามารถประกาศ property ของ custom element ของเราได้ง่ายๆด้วย syntax

static get properties() {         
   return {           
      owner: {             
         type: String,             
         value: 'Daniel'           
      }         
   };       
}

ตอนนี้เวลาใครเอา custom element ของเราไปใช้ เค้าสามารถให้ค่า property owner ได้

<configurable-name-tag owner="Scott"></configurable-name-tag>

ไม่ยากเลยใช่ไหมครับการใช้ Polymer สร้าง web component เดี๋ยวบทความต่อไปผมจะเขียนถึง Polymer CLI เพื่อสร้าง project บนเครื่องของเรากันนะครับ

Ref: https://www.polymer-project.org/2.0/start/quick-tour

ช่วงโฆษณาครับ

สัญลักษณ์ Web Component (ซ้าย) และ สัญลักษณ์ Polymer (ขวา)

ใครสนใจ Web Component สามารถ Join Facebook group Polymer and Web Component Developer Thailand ใน Facebook เพื่อมาคุยกันได้นะครับ

ปล. Web Component สามารถเอาไปใช้กับ framework อื่นๆได้นะครับ