เทมเพลตและคอมโพเนนต์บนเว็บที่รวดเร็วทันใจ - 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 ขนาดจิ๋ว (รวมกลุ่ม ลดขนาด และบีบอัดเกิน 3,000 รายการ) และไลบรารี JavaScript ที่รวดเร็วสำหรับเทมเพลต HTML lit-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: คลาสฐานของคอมโพเนนต์เว็บที่ใช้ทรัพยากรน้อย

LitElement เป็นคลาสพื้นฐานขนาดเล็กที่ช่วยให้สร้างและแชร์ Web Components ได้ง่ายกว่าที่เคย

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>`;
  }
}

(เรามี Vanilla JavaScript API ที่ยอดเยี่ยมด้วย)

การดำเนินการดังกล่าวจะสร้างองค์ประกอบที่คุณใช้ได้ทุกที่ที่คุณใช้องค์ประกอบ HTML ปกติ ดังนี้

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

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

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

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

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

ต้องการลองใช้ lit-html และ LitElement ใช่ไหม ควรเริ่มด้วยการดูบทแนะนำ LitElement:

หากคุณสนใจจะใช้ lit-html เพียงอย่างเดียว หรือรวมเทมเพลต lit-html ไว้ในโครงการอื่น โปรดดูเอกสาร lit-html:

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