เทมเพลตและคอมโพเนนต์บนเว็บที่รวดเร็วทันใจ - lit-html & LitElement

วันนี้เรายินดีที่จะประกาศการเปิดตัวรุ่นเสถียรครั้งแรกของไลบรารีการพัฒนาเว็บรุ่นถัดไป 2 รายการ ได้แก่ lit-html และ LitElement

lit-html เป็นไลบรารีขนาดเล็ก รวดเร็ว และแสดงผลได้ชัดเจนสำหรับเทมเพลต HTML LitElement เป็นคลาสพื้นฐานที่เรียบง่ายสําหรับการสร้างคอมโพเนนต์เว็บด้วยเทมเพลต lit-html

หากติดตามโปรเจ็กต์เหล่านี้มาอย่างต่อเนื่อง คุณก็น่าจะทราบแล้วว่า lit-html และ LitElement ทำอะไรบ้าง (และข้ามไปท้ายบทความได้หากต้องการ) หากคุณเพิ่งเริ่มใช้ lit-html และ LitElement โปรดอ่านภาพรวมต่อไปนี้

lit-html: ไลบรารีขนาดเล็กและรวดเร็วสำหรับเทมเพลต HTML

lit-html เป็นไลบรารี JavaScript ขนาดเล็ก (รวมไฟล์ บีบอัด และใส่ Gzip ไว้แล้ว 3,000 กว่ารายการ) และรวดเร็วสำหรับเทมเพลต HTML ซึ่งทำงานได้ดีกับแนวทางการเขียนโปรแกรมเชิงฟังก์ชัน ซึ่งช่วยให้คุณแสดง UI ของแอปพลิเคชันอย่างเป็นทางการได้ โดยใช้ฟังก์ชันของสถานะ

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

การแสดงผลเทมเพลต lit-html ทำได้ง่ายดังนี้

render(myTemplate('Ada'), document.body);

การแสดงผลเทมเพลตอีกครั้งจะอัปเดตเฉพาะข้อมูลที่เปลี่ยนแปลงเท่านั้น

render(myTemplate('Grace'), document.body);

lit-html มีประสิทธิภาพ แสดงผลได้ชัดเจน และขยายได้

  • มีประสิทธิภาพ lit-html ทำงานได้อย่างรวดเร็ว เมื่อข้อมูลเปลี่ยนแปลง lit-html ไม่จำเป็นต้องดำเนินการเปรียบเทียบ แต่จะจดจำตำแหน่งที่คุณแทรกนิพจน์ในเทมเพลตไว้ และอัปเดตเฉพาะส่วนแบบไดนามิกเหล่านี้เท่านั้น
  • แสดงออกได้อย่างเต็มที่ lit-html ช่วยให้คุณสามารถใช้ JavaScript, UI แบบประกาศ และรูปแบบการเขียนโปรแกรมเชิงฟังก์ชันได้อย่างเต็มประสิทธิภาพ นิพจน์ในเทมเพลต lit-html เป็นเพียง JavaScript คุณจึงไม่ต้องเรียนรู้ไวยากรณ์ที่กำหนดเองและสามารถใช้ภาษาได้อย่างเต็มรูปแบบ lit-html รองรับค่าหลายประเภทตั้งแต่ต้น เช่น สตริง โหนด DOM อาร์เรย์ และอื่นๆ เทมเพลตเองก็เป็นค่าที่คำนวณได้ ส่งไปยังและจากฟังก์ชัน และฝังได้
  • ขยายได้: lit-html ยังปรับแต่งและขยายได้อีกด้วย ซึ่งเป็นชุดเครื่องมือสร้างเทมเพลตของคุณเอง คำสั่งกําหนดค่าวิธีจัดการค่า ซึ่งช่วยให้ใช้ค่าแบบไม่พร้อมกัน การทำซ้ำตามคีย์ที่มีประสิทธิภาพ ขอบเขตข้อผิดพลาด และอื่นๆ ได้ lit-html มีคำสั่งที่พร้อมใช้งานหลายรายการและช่วยให้คุณกำหนดคำสั่งของคุณเองได้ง่ายๆ

ไลบรารีและโปรเจ็กต์จํานวนหนึ่งได้รวม lit-html ไว้แล้ว คุณดูรายการไลบรารีเหล่านี้บางส่วนได้ในที่เก็บ awesome-lit-html ใน GitHub

หากต้องการใช้เทมเพลตเท่านั้น คุณก็เริ่มใช้งานได้เลยจากเอกสาร lit-html หากต้องการสร้างคอมโพเนนต์เพื่อใช้ในแอปหรือแชร์กับทีม โปรดอ่านต่อเพื่อดูข้อมูลเพิ่มเติม

LitElement: คลาสพื้นฐานของ Web Component ที่มีน้ำหนักเบา

LitElement เป็นคลาสพื้นฐานที่มีน้ำหนักเบาซึ่งช่วยให้สร้างและแชร์คอมโพเนนต์เว็บได้ง่ายกว่าที่เคย

LitElement ใช้ lit-html เพื่อแสดงผลคอมโพเนนต์และเพิ่ม API เพื่อประกาศพร็อพเพอร์ตี้และแอตทริบิวต์แบบเรียลไทม์ องค์ประกอบจะอัปเดตโดยอัตโนมัติเมื่อพร็อพเพอร์ตี้มีการเปลี่ยนแปลง และอัปเดตอย่างรวดเร็วโดยไม่ต้องเปรียบเทียบ

คอมโพเนนต์ LitElement ง่ายๆ ใน TypeScript มีดังนี้

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(เรามี JavaScript API เวอร์ชันมาตรฐานที่ยอดเยี่ยมด้วย)

ซึ่งจะสร้างองค์ประกอบที่คุณสามารถใช้ได้ทุกที่ที่ต้องการใช้องค์ประกอบ HTML ปกติ

<name-tag name="Ida"></name-tag>

หากคุณใช้ Web Components อยู่แล้ว คุณคงดีใจที่ได้ทราบว่าตอนนี้ Web Components ได้รับการสนับสนุนใน Chrome, Safari และ Firefox โดยค่าเริ่มต้นแล้ว การรองรับ Edge จะพร้อมให้บริการในเร็วๆ นี้ และจำเป็นต้องใช้ polyfill สำหรับเบราว์เซอร์เวอร์ชันเดิมเท่านั้น

หากคุณเพิ่งเริ่มใช้ Web Components คุณควรลองใช้ คอมโพเนนต์เว็บช่วยให้คุณขยาย HTML ในลักษณะที่ทำงานร่วมกันกับไลบรารี เครื่องมือ และเฟรมเวิร์กอื่นๆ ได้ ด้วยเหตุนี้ คอมโพเนนต์จึงเหมาะสําหรับการแชร์องค์ประกอบ UI ภายในองค์กรขนาดใหญ่ การเผยแพร่คอมโพเนนต์เพื่อใช้ในที่ใดก็ได้บนเว็บ หรือการสร้างระบบการออกแบบ UI เช่น Material Design

คุณสามารถใช้องค์ประกอบที่กำหนดเองได้ทุกที่ที่ใช้ HTML ไม่ว่าจะเป็นในเอกสารหลัก ใน CMS ใน Markdown หรือในมุมมองที่สร้างขึ้นด้วยเฟรมเวิร์ก เช่น React และ Vue นอกจากนี้ คุณยังผสมผสานคอมโพเนนต์ LitElement เข้ากับคอมโพเนนต์เว็บอื่นๆ ได้ด้วย ไม่ว่าจะเป็นคอมโพเนนต์ที่เขียนโดยใช้เทคโนโลยีเว็บพื้นฐานหรือคอมโพเนนต์ที่สร้างด้วยความช่วยเหลือของเครื่องมือต่างๆ เช่น คอมโพเนนต์เว็บ Salesforce Lightning, Stencil ของ Ionic, SkateJS หรือไลบรารี Polymer

เริ่มต้นใช้งาน

หากต้องการลองใช้ lit-html และ LitElement จุดเริ่มต้นที่ดีคือบทแนะนำ LitElement

หากสนใจที่จะใช้ lit-html เพียงอย่างเดียว หรือผสานรวมเทมเพลต lit-html เข้ากับโปรเจ็กต์อื่น โปรดดูเอกสารประกอบของ lit-html

โปรดแจ้งให้เราทราบว่าคุณคิดอย่างไร ติดต่อเราได้ทาง Slack หรือ Twitter โครงการของเราเป็นโอเพนซอร์ส (แน่นอน) และคุณสามารถรายงานข้อบกพร่อง ส่งคำขอฟีเจอร์ หรือแนะนำการปรับปรุงได้ใน GitHub