บทความ IT เจ๋งๆ

หากคุณเป็น Web Developer ที่กำลังมองหา Web Components Library ไม่ว่าจะเพื่อใช้ในการทำงานของคุณ, เพื่อเรียนรู้ หรืออยากทดลองใช้งาน Web Component Library ใหม่ ๆ อยู่ ไม่ควรพลาดบทความนี้ เพราะบทความนี้จะมาบอกถึง 9 Web Components UI Libraries ที่คุณควรรู้จัก ซึ่งน่าจะเป็นประโยชน์กับคุณ

1. Material components web

พอขึ้นชื่อว่า “Material” ก็มักจะเป็น UI Component Library ที่อยู่ในอันดับ Top ในแง่ของความนิยมและจำนวนการดาวน์โหลด Material-Components-Web Library ของ Google เป็น Web-Component ใน version ของ Material-UI Library ในขณะที่มันยังคงถูกพัฒนาอยู่ Web Components เหล่านี้ก็สามารถถูกรวมเข้าไว้ในหลากหลาย Contexts และ Frameworks ทำให้มันเป็น Web Component ที่น่าติดตามมากตัวหนึ่ง

2. Polymer elements

Polymer Library ของ Google ช่วยให้คุณสร้าง Web Components ที่สามารถ Encapsulated และ Reusable ได้ ซึ่งมันทำงานเหมือนกับ HTML Elements มาตรฐานพร้อมทั้งง่ายต่อการ Import และใช้ HTML Elements อื่น ๆ Polymer Elements เป็นการจัดการ GitHub ที่มี Reusable Polymer Components มากกว่า 100 รายการ ซึ่งเป็น Repository แบบ Standalone ที่คุณสามารถ Browse และนำมาใช้งานหรือดัดแปลง ได้อย่างง่ายดาย ลองดูตัวอย่างนี้:

3. Vaadin web components

นี่คือ Library ที่ค่อนข้างใหม่ ซึ่งประกอบด้วยชุดของ Open Source Web Components เกือบ 30 รายการ เพื่อใช้ในการสร้าง UI ของ Mobile และ Desktop Web Applications ใน Browser ใหม่ที่ทันสมัย ถือว่าเป็น Library ที่น่าติดตามและใช้งาน ลองดูรายละเอียดเพิ่มเติมได้ที่นี่

4. Wired elements

Wired Elements เป็นชุดของ Elements ที่เป็นลักษณะเหมือนวาดด้วยมือ ในการสร้างสำหรับ Wireframes, Elements จะมีการวาดเพื่อให้ไม่มี 2 การ Rendering ที่เหมือนกัน ซึ่งมันก็เหมือนกับการวาด 2 รูปทรงด้วยมือคนละครั้ง หากถามว่ามันมีประโยชน์ไหม? คำตอบคือ มีประโยชน์ หากถามว่ามันยอดเยี่ยมไหม? แน่นอนว่าใช่ คุณสามารถลองเล่นมันผ่าน Online  ที่นี่ แถมยังมีของ React และ Vue อีกด้วย

5. Elix

Elix เป็นชุดของ Web Components สำหรับ Pattern ของ User Interface ทั่วไป ที่สามารถ Customize ได้ ซึ่งมันขับเคลื่อนโดย Community เพื่อให้มั่นใจในมาตรฐานของคุณภาพที่สูง, Components ถูกวัดเทียบกับ Gold Standard Checklist สำหรับ Web Components ซึ่งใช้ Built-in HTML Elements เป็น Quality Bar

6. Time elements

Library ที่ค่อนข้างเก่าแก่ตัวนี้เป็น Component ที่ได้จัดเตรียม Subtypes ของ HTML <time> element มาตรฐานเอาไว้ให้แล้ว ด้วยการจัดรูปแบบของ Timestamp เป็น Localized String หรือเป็น Relative Text ซึ่งมีการ Update โดยอัตโนมัติใน Browser ของ User คุณยังสามารถสร้าง Extensions แบบกำหนดเองเพื่อนำไปใช้งานตามที่ต้องการได้

7. UI5-webcomponents

ถูกสร้างขึ้นโดย UI5 ของ SAP โดย Library นี้เป็นชุดของ UI Elements ที่มีน้ำหนักเบา, สามารถ Reusable ได้ และเป็น Independence ไม่ขึ้นกับใคร คุณสามารถใช้งานมันข้าม Frameworks และ Apps ได้ การออกแบบของ Components นั้นสอดคล้องกับ SAP Fiori Design Guidelines และรวมเข้ากับ Fiori 3 design ลองดู Live playground และ APIs ได้ที่นี่

8. Patternfly

Run demo:

PatternFly Elements เป็นชุด Web Components เกือบ 20 รายการ ที่ทั้งยืดหยุ่นและมีน้ำหนักเบา อีกทั้งเป็น Tool ที่ใช้ในการสร้างพวกมันอีกด้วย PatternFly Elements มีขนาดเล็กและเบา และเป็นต้นแบบสำเร็จรูป (ซึ่งใกล้เคียงมาตรฐานของ Web Component ค่อนข้างมาก), สามารถทำงานใน React, Vue, Angular, Vanilla JS และที่ใดก็ตามที่ HTML Elements จะถูกนำไปใช้งาน

9. Web components org

นี่ไม่ได้เป็นเพียงแค่ Library แต่มันเป็น Web Component Discovery Portal ของ Google ที่ถูกสร้างขึ้นจาก Polymer Elements รวมทั้งตัวอื่น ๆ ด้วย การที่เลือกมันมาอยู่ใน List นี้ด้วยก็เพราะ มันเป็นช่องทางที่มีประโยชน์ในการอัปเดต Web Components ใหม่ ๆ จากทีมของ Polymer เอง อีกทั้งยังเป็น Resource ที่มีประโยชน์เพื่อให้คุณได้อ่าน กรณีที่คุณกำลังจะเริ่มต้นด้วย Web Components นั่นเอง

ที่มา:  https://blog.bitsrc.io/