คนที่ติดตามงาน Google I/O 2014 คงได้ยินชื่อโครงการ Polymer ของกูเกิลกันมาบ้าง มันคือ "ไลบรารีสำหรับสร้าง UI ด้วยเทคโนโลยีเว็บ" ที่พัฒนาขึ้นบนมาตรฐานเว็บตัวใหม่ Web Components ที่ว่ากันว่าจะปฏิวัติแนวคิดของการเขียนเว็บแบบเดิมๆ ไปอย่างสิ้นเชิง

บทความนี้จะแนะนำแนวคิดของ Web Components ในฐานะมาตรฐานที่กำลังพัฒนาขึ้นโดยคณะทำงานของ W3C ก่อนจะกล่าวถึง Polymer ในตอนต่อไป (ผู้อ่านควรมีพื้นฐานด้านการพัฒนาเว็บมาบ้างพอสมควร)

Web Components คืออะไร

Web Components คือ "มาตรฐาน" (standard) เป็นเอกสารสเปกที่สร้างโดยคณะทำงานของ W3C (แกนหลักคือคนของกูเกิล)

มาตรฐาน Web Components ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน HTML5 โดยตรง แต่เป็นส่วนขยายที่เรียกใช้งานเทคโนโลยีเว็บหลายๆ ตัว เช่น HTML5, CSS, DOM

ปัจจุบันมาตรฐาน Web Components ยังไม่เสร็จสมบูรณ์และต้องพัฒนาต่ออีกมาก (สถานะเป็น Editor's Draft ที่ยังไม่เข้ากระบวนการรับรองมาตรฐานของ W3C ด้วยซ้ำ) แต่เว็บเบราว์เซอร์บางตัวอย่าง Chrome, Opera, Firefox ก็เริ่มรองรับมาตรฐานนี้เป็นบางส่วนแล้ว

แนวคิดของ Web Components

คนที่เคยเขียน Delphi หรือ VB มาก่อนคงคุ้นเคยกับคำว่า "คอมโพเนนต์" หรือ UI สำเร็จรูปที่พิเศษกว่า UI widget ทั่วๆ ไป (เช่น button, textbox, radio) โดยมีนักพัฒนาจำนวนหนึ่งสร้าง "คอมโพเนนต์" ที่ใช้บ่อยเหล่านี้แจกหรือขาย

Web Components ก็อยู่บนแนวคิดเดียวกัน เพียงแต่เปลี่ยนมาอิงอยู่บนเทคโนโลยีเว็บแทนเท่านั้นเอง

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

ตัวอย่างที่ชัดเจนที่สุดคือการสร้าง "แท็บ" (tab) บนหน้าเว็บที่คลิกเพื่อสลับแท็บได้ เราต้องสร้างมันขึ้นมาจากเอลิเมนต์ (element) หรือแท็กพื้นฐานของ HTML อย่าง div หรือ ul/li จากนั้นค่อยปรับแต่งหน้าตาด้วย CSS และกำหนดความสามารถให้มันด้วย JavaScript

ถ้าเทียบความยาวโค้ดของแท็บที่สร้างด้วย HTML กับ UITabBarController บน iOS จะพบว่าเทียบกันไม่ได้เลยครับ (ฮา)

Web Components ออกแบบมาเพื่อแก้ปัญหานี้ แนวคิดของมันคือเปิดให้นักพัฒนาสร้างคอมโพเนนต์ขึ้นมาใช้เอง โดยอิงอยู่บนมาตรฐานเว็บตัวใหม่นี้ (ที่เว็บเบราว์เซอร์ต้องรองรับด้วย) ตัวอย่างเช่น ผมสามารถสร้างคอมโพเนนต์ <mytab> ขึ้นมาเองแล้วฝังบนหน้าเว็บได้ ใช้ซ้ำบนเว็บแอพตัวอื่นๆ ได้ รวมถึงขายหรือแจกให้คนอื่นใช้งานได้ด้วย

มีอะไรบ้างในมาตรฐาน Web Components

Web Components ไม่ใช่ภาษาโปรแกรมใหม่ แต่มันคือ "ส่วนขยาย" ของเทคโนโลยีเว็บในปัจจุบัน แนวคิดของมันคือใช้เทคโนโลยีเว็บเดิมเท่าที่เป็นไปได้ แล้วค่อยสร้างส่วนขยายที่จำเป็นเข้ามาเสริม

เหตุนี้ทำให้ Web Components ประกอบด้วยส่วนประกอบย่อย 4 อย่าง (จะอธิบายรายละเอียดตามลำดับ)

1. HTML Templates
2. Shadow DOM
3. Custom Elements
4. HTML Imports

1. HTML Templates

HTML Template คือการจัดชุดของเอลิเมนต์หลายชิ้นเข้าด้วยกันภายใต้แท็ก <template> (จะมองว่ามันคล้ายกับ struct ของภาษาซีก็ได้ครับ)

ตัวอย่างการสร้าง template ชื่อ commentTemplate โดยมีส่วนประกอบ 3 ชิ้นคือ div, img, div

เมื่อเว็บเบราว์เซอร์อ่านโค้ดในแท็ก <template> จะตีความ (parse) แต่ไม่แสดงผล (render) โค้ดเพราะมองว่ามันคือเทมเพลตหรือแม่แบบ ไม่ใช่เอลิเมนต์จริงๆ

ในการใช้งานจริงเราจะต้อง "โคลน" เทมเพลตออกมาเป็นเอลิเมนต์ด้วย JavaScript จึงจะใช้งานได้

แท็ก template มีไว้สร้างโครงสร้าง (structure) ของเอลิเมนต์ใหม่ ซึ่งจะกล่าวต่อไปครับ

2. Shadow DOM

อธิบายแบบสั้นๆ Shadow DOM คือ DOM ของเอลิเมนต์ใหม่ที่เราจะสร้างขึ้น แต่ถ้าอธิบายแบบละเอียดคงยาวหน่อยครับ

นักพัฒนาเว็บคงรู้จักแนวคิดของ DOM กันดีอยู่แล้ว อธิบายสั้นๆ สำหรับคนที่อาจไม่รู้จัก DOM คือการนำสายสัมพันธ์ของเอลิเมนต์ (หรือ "แท็ก" ถ้าเรียกกันภาษาปาก) ในหน้าเว็บมาสร้างเป็นโครงสร้างต้นไม้ (tree) มีลำดับชั้นแม่-ลูกที่ชัดเจน

DOM มีความสำคัญมากในการแสดงผลหน้าเว็บ เพราะเว็บเบราว์เซอร์จะอ่านโค้ด HTML แล้วแปลงมันเป็น DOM ดูโครงสร้างทั้งหมดก่อน แล้วจึงค่อยเรนเดอร์แต่ละส่วน ประกอบกันออกมาเป็นภาพบนหน้าจอ

เอกสาร HTML ทุกหน้าที่ถูกแสดงผลบนเบราว์เซอร์จะมี DOM เสมอ และนักพัฒนาเว็บสามารถปรับแต่งหน้าตาหรือโครงสร้างแต่ละส่วนได้จาก DOM

อย่างไรก็ตาม ในความเป็นจริงแล้ว มีวัตถุหรือเอลิเมนต์บางอย่างบนหน้าเว็บที่ไม่ถูกแสดงผลใน DOM แบบปกติ

ตัวอย่างเช่นแท็ก <input type="date"> หรือ <input type="time"< ที่เวลาเรียกใช้งานก็เป็นแค่แท็กสั้นๆ แท็กเดียวจบ แต่ตอนแสดงผลจริงๆ เราจะเห็นว่าตัววัตถุมีความซับซ้อน มีปุ่มหรือข้อความย่อยซ่อนอยู่หลายชิ้น

ในความเป็นจริงแล้ว เอลิเมนต์พวกนี้มี DOM ซ่อนอยู่ แต่ไม่ถือเป็นส่วนหนึ่งของเว็บเพจ เพราะเบราว์เซอร์แต่ละตัวจะอ่านแท็ก <input type="date"> แล้วสร้างวัตถุนั้นขึ้นมาด้วยโค้ดของตัวเอง (เบราว์เซอร์แต่ละตัวจึงอาจตีความ input date แตกต่างกันไป)

DOM ของวัตถุเหล่านี้จึงถือเป็น Hidden DOM หรือ Shadow DOM ที่แยกขาดออกมาจาก DOM หลักของเว็บเพจ ถ้าลองดูตัวอย่างจากโค้ดใน Developer Tools ของ Chrome (โดยเปิดให้แสดง Shadow DOM) จะเห็นโค้ดส่วนสีเทาตามภาพ

คลิกเพื่อขยายมันออกมาแล้ว จะเห็นว่า <input type="date"> มี DOM ที่ถูกซ่อนเอาไว้ (ซึ่งไปเปิดใน Firefox โค้ดอาจไม่เหมือนกัน แต่ทำงานได้เหมือนกัน)

ย้อนกลับมาที่เรื่อง Web Components ครับ เป้าหมายของเราคือสร้างคอมโพเนนต์ใหม่ขึ้นมา กำหนดโครงสร้างของมันด้วย template ตามข้อ 1 และปรับเปลี่ยนค่าของมันตอนใช้งานจริงผ่าน Shadow DOM ด้วย JavaScript อีกทีหนึ่ง

ตัวอย่างตามภาพด้านล่าง เป็นการสร้างเอลิเมนต์ชื่อ <div id="host"< ขึ้นมา ภายใน div ประกอบด้วยเอลิเมนต์หลายอย่าง

จากนั้นเราใช้โค้ด JavaScript ด้านล่างสร้าง Shadow DOM ของ <div id="host"< แล้วปรับเปลี่ยนเอลิเมนต์ลูกของมัน ได้ผลออกมาเป็นโค้ดในกรอบชื่อ Composed Tree และภาพเรนเดอร์จริงด้านล่างสุด

เหตุผลที่ต้องใช้ Shadow DOM แทน DOM ปกติก็เพราะว่า "สไตล์" ที่กำหนดให้เอลิเมนต์บนเว็บเพจนั้นไม่มีผลกับเอลิเมนต์ใน Shadow DOM นั่นเองครับ

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

ดังนั้นการสร้างคอมโพเนนต์ใหม่ด้วย Shadow DOM จึงการันตีว่าคอมโพเนนต์ของเราจะไม่ถูกดัดแปลงแก้ไขจาก CSS ของเว็บเพจที่เอาคอมโพเนนต์ไปฝัง เพราะมันถูกแยกสัดส่วนชัดเจนตอนเรนเดอร์ด้วย Shadow DOM เรียบร้อยแล้ว (style encapsulation)

หมายเหตุ: อย่างที่บอกไปตอนแรกว่า Web Components สร้างขึ้นด้วยเทคโนโลยีเว็บเดิม ดังนั้นงานบางอย่างจึงซับซ้อนเกินกว่าที่ควรจะเป็นไปอยู่บ้าง กรณีของ Shadow DOM เป็นตัวอย่างที่ดีของการพยายามใช้ "ของที่มีอยู่แล้ว" มาสร้างของใหม่

3. Custom Elements

เข้าเรื่องหลักของ Web Components สักทีครับ หลังจากเรามี template และ Shadow DOM เรียบร้อยแล้ว ขั้นต่อไปเราก็นำมันมาประกอบร่างให้เป็นเอลิเมนต์ที่เราสร้างเอง (custom element) สักที

Custom Element คือการสร้างแท็กใหม่และสอนให้เบราว์เซอร์รู้จักแท็กนี้ด้วย JavaScript

ตัวอย่างการสร้างแท็ก x-foo และลงทะเบียนกับเว็บเบราว์เซอร์ด้วยฟังก์ชัน register ตามโค้ดข้างล่าง

เมื่อเสร็จแล้ว เราก็เรียกใช้ตรงๆ โดยสั่ง <x-foo></x-foo>

นอกจากการสร้างเอลิเมนต์ขึ้นมาใหม่ทั้งหมดแล้ว เรายังสามารถดัดแปลงแก้ไขเอลิเมนต์เดิมของ HTML เพื่อสร้างเป็นอันใหม่ได้ด้วย

ตัวอย่างการสร้างเอลิเมนต์ชื่อ mega-button โดยขยายมาจาก button (สังเกตคำสั่ง extends)

ขั้นต่อมา เราก็ประกอบร่างทุกอย่างด้วยกันครับ โดยนำ template และ Shadow DOM มาเป็นส่วนหนึ่งของเอลิเมนต์ใหม่ที่เราสร้างขึ้น ตามโค้ดด้านล่าง

จากขั้นตอนที่ 1-3 น่าจะพอเห็นภาพแล้วนะครับว่าเราสามารถสร้างคอมโพเนนต์ใหม่ขึ้นมาอย่างไร

4. HTML Imports

ขั้นสุดท้าย เราจะนำคอมโพเนนต์ที่สร้างขึ้นด้วย HTML Templates, Shadow DOM, Custom Elements ไปใช้ต่อ โดยเซฟทุกอย่างไว้ในไฟล์เดียวกัน (เช่น x-foo.html) แล้วค่อยให้เว็บเพจเรียกใช้ด้วย Imports ลักษณะเดียวกับการเรียก JavaScript หรือ CSS

ดังนั้นในการใช้งานจริง เราก็จะนิยามคอมโพเนนต์ของเราไว้ในไฟล์หนึ่ง แล้วเรียกใช้จากเว็บเพจผ่าน Import ตามตัวอย่าง

ทั้งหมดนี้ถือเป็นอันจบเนื้อหาส่วนเทคนิคของ Web Components ครับ

การรองรับของเบราว์เซอร์

Web Components เป็นแนวคิดใหม่ที่น่าสนใจ แต่มันยังใหม่มากและเบราว์เซอร์อาจยังรองรับไม่ครบ สถานะในตอนนี้ เบราว์เซอร์ที่รองรับยังมีแค่ Chrome/Opera (ที่ใช้เอนจิน Blink) และ Firefox เท่านั้น ส่วน Safari กับ IE ยังไม่มีวี่แวว

ในโลกอุดมคติ เว็บเบราว์เซอร์ทุกตัวรองรับ Web Components และเราสามารถซื้อขายแลกเปลี่ยนคอมโพเนนต์กันได้ง่ายๆ ฝังคอมโพเนนต์สำเร็จรูปข้ามระหว่างเว็บเพจ-เบราว์เซอร์ได้เลย

แต่ในโลกความเป็นจริงเมื่อเบราว์เซอร์ยังไม่รองรับ คนที่อยากใช้ Web Components จึงแก้ปัญหาโดยเขียน "ส่วนขยาย" ให้เบราว์เซอร์รู้จักโค้ด Web Components ด้วยการแปลงมันเป็น JavaScript/CSS แทน ส่วนขยายเหล่านี้มีชื่อเรียกว่า "polyfills"

ปัจจุบันโลกของเรามี polyfills หลายตัว (โครงการเหล่านี้ยังสร้างเอลิเมนต์พื้นฐานเพื่อนำไปใช้ต่อด้วย) เช่น Bosonic, X-Tags และ Polymer ที่จะกล่าวถึงในบทความลำดับถัดไปครับ

แหล่งข้อมูลเพิ่มเติม

• Introduction to Web Components เอกสารแนะนำข้อมูลอย่างเป็นทางการของคณะทำงาน W3C (อ่านยากตามสไตล์ W3C)
• WebComponents.org เว็บไซต์อย่างเป็นทางการของทีมพัฒนาสเปก Web Components (อ่านง่าย สีสันสดใส)
• Are We Componentized Yet? เว็บรวมสถานะล่าสุดของเว็บเบราว์เซอร์แต่ละตัวว่ารองรับ Web Components หรือยัง
• รวม tutorial ที่เกี่ยวข้องกับ Web Components จากเว็บ HTML5Rocks ของกูเกิล
  • HTML Template
  • Shadow DOM
  • Custom Elements
  • HTML Imports

วิดีโอ

วิดีโอพื้นฐานที่ต้องดูคือ Web Components: A Tectonic Shift for Web Development จากงาน Google I/O 2013 (เอกสารนำเสนอประกอบวิดีโอ)

ถ้ามีเวลาเหลือและอยากเข้าใจแนวคิดมากขึ้น ดูวิดีโอ The Web Components Revolution is Here โดย Eric Bidelman ผู้พูดคนเดียวกันกับคลิปแรก