Yo Polymer – ทัวร์เครื่องมือสร้างคอมโพเนนต์บนเว็บใน Whirlwind

Web Components กำลังจะเปลี่ยนแปลงทุกสิ่งที่คุณคิดว่ารู้เกี่ยวกับการสร้างเว็บไซต์ เป็นครั้งแรกที่เว็บจะมี API ระดับล่าง ซึ่งช่วยให้เราสร้างแท็ก HTML ของเราเองได้ และยังรวมตรรกะและ CSS ไว้ด้วย หมดปัญหาเกี่ยวกับไฟล์สไตล์ชีตส่วนกลางหรือโค้ด Boilerplate โลกใบใหม่นี้ทุกอย่างเป็นองค์ประกอบ

ในการบรรยายจาก DotJS เราได้อธิบายสิ่งที่คอมโพเนนต์ของเว็บมีให้และวิธีสร้างโดยใช้เครื่องมือสมัยใหม่ เราจะแสดง Yeoman ซึ่งเป็นเวิร์กโฟลว์ของเครื่องมือที่จะช่วยสร้างเว็บแอปโดยใช้ Polymer ได้อย่างมีประสิทธิภาพยิ่งขึ้น โดยไลบรารีนี้ประกอบด้วย polyfill และ Sugar สำหรับการพัฒนาแอปโดยใช้คอมโพเนนต์ของเว็บในเบราว์เซอร์สมัยใหม่ในปัจจุบัน

สร้างองค์ประกอบที่กำหนดเองและติดตั้งองค์ประกอบที่สร้างโดยผู้อื่น

คุณจะได้เรียนรู้สิ่งต่อไปนี้จากการบรรยายนี้

  • เกี่ยวกับข้อกำหนด 4 ข้อที่แตกต่างกันซึ่งประกอบกันเป็น Web Components ได้แก่ องค์ประกอบที่กำหนดเอง เทมเพลต Shadow DOM และ HTML Imports
  • วิธีกำหนดองค์ประกอบที่กำหนดเองของคุณเองและติดตั้งองค์ประกอบที่สร้างโดยผู้อื่นโดยใช้ Bower
  • เขียน JavaScript น้อยลงและมีเวลาสร้างหน้าเว็บมากขึ้น
  • ใช้เครื่องมือเฟรมเวิร์กหน้าเว็บสมัยใหม่ (Yeoman) เพื่อสร้างโครงสร้างแอปพลิเคชันโดยใช้ Polymer ด้วย generator-polymer
  • วิธีที่ Polymer Super เปลี่ยนแปลงการสร้างคอมโพเนนต์เว็บ

เช่น หากต้องการติดตั้ง polyfill ของ Web Component และไลบรารีของ Polymer ให้เรียกใช้บรรทัดคำสั่งนี้

bower install --save Polymer/platform Polymer/polymer

ซึ่งจะเพิ่มโฟลเดอร์ bower_components และเพิ่มแพ็กเกจข้างต้น --save จะเพิ่มไปยังไฟล์ bower.json ของแอป

หากต้องการติดตั้งองค์ประกอบ Accordion ของ Polymer ในภายหลัง ให้เรียกใช้คำสั่งต่อไปนี้

bower install --save Polymer/polymer-ui-accordion

จากนั้นนําเข้าลงในแอปพลิเคชัน

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

หากต้องการประหยัดเวลา คุณสามารถสร้างโครงสร้างพื้นฐานของแอป Polymer ใหม่ที่มี Dependency ทั้งหมดที่ต้องการ โค้ดที่เขียนไว้ล่วงหน้า และเครื่องมือสำหรับเพิ่มประสิทธิภาพแอปด้วย Yeoman โดยใช้บรรทัดคำสั่งเดียวนี้

yo polymer

คำแนะนำแบบทีละขั้นสำหรับโบนัส

นอกจากนี้ เรายังได้บันทึกวิดีโอแนะนำแอป Polymer Jukebox ความยาว 30 นาทีไว้ให้ด้วย

เนื้อหาในวิดีโอโบนัส

  • ความหมายของคําขวัญ "ทุกอย่างคือองค์ประกอบ"
  • วิธีใช้ Bower เพื่อติดตั้ง polyfill และองค์ประกอบของแพลตฟอร์ม Polymer
  • การสร้างโครงสร้างพื้นฐานของแอป Jukebox ด้วยเครื่องมือสร้าง Yeoman และเครื่องมือสร้างย่อย
  • ทำความเข้าใจฟีเจอร์ของแพลตฟอร์มที่สร้างผ่านบอยเลอร์เพลต
  • วิธีพอร์ตแอป Angular ไปยัง Polymer

นอกจากนี้ เรายังใช้เครื่องมือสร้างย่อยของ Yeoman เพื่อสร้างโครงสร้างพื้นฐานขององค์ประกอบ Polymer ใหม่ เช่น หากต้องการสร้างไฟล์ต้นฉบับสำหรับองค์ประกอบ foo เราจะเรียกใช้คำสั่งต่อไปนี้

yo polymer:element foo

ซึ่งจะแจ้งให้เราทราบว่าต้องการนำเข้าองค์ประกอบโดยอัตโนมัติหรือไม่ จำเป็นต้องใช้คอนสตรัคเตอร์หรือไม่ และค่ากําหนดอื่นๆ อีก 2-3 อย่าง

แหล่งที่มาล่าสุดของแอปที่แสดงในทั้ง 2 เวอร์ชันพร้อมให้ใช้งานแล้วใน GitHub เราได้ปรับแต่งเพิ่มเติมอีกเล็กน้อยเพื่อให้เป็นระเบียบและอ่านง่ายขึ้น

ตัวอย่างแอป

ตัวอย่างแอป Yo Polymer

อ่านเพิ่มเติม

โดยสรุปแล้ว Polymer คือไลบรารี JavaScript ที่เปิดใช้คอมโพเนนต์เว็บในเว็บเบราว์เซอร์สมัยใหม่ในตอนนี้ขณะที่เรารอให้คอมโพเนนต์เว็บใช้งานได้โดยค่าเริ่มต้น เครื่องมือสมัยใหม่จะช่วยปรับปรุงเวิร์กโฟลว์ของคุณได้ และคุณอาจลองใช้ Yeoman และ Bower เมื่อพัฒนาแท็กของคุณเอง

บทความอื่นๆ เกี่ยวกับเรื่องนี้ที่ควรอ่านมีดังนี้