I Built Voodoo.js: นำ TSX และ Reactivity สู่ HTML เพียวๆ
นักพัฒนาเปิดตัว Voodoo.js เฟรมเวิร์กใหม่ที่ช่วยให้เขียน TSX, ใช้ข้อมูลแบบ reactive และจัดการคอมโพเนนต์ได้โดยตรงในไฟล์ HTML ธรรมดาโดยไม่ต้องพึ่งเครื่องมือบิลด์ที่ซับซ้อน
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Voodoo.js เป็น HTML-first JavaScript framework สำหรับเพิ่มความสามารถฟรอนต์เอนด์สมัยใหม่
- รองรับ JSX และ TSX style syntax, reactive data, คอมโพเนนต์ และฟอร์มโดยตรงในไฟล์ HTML
- เริ่มต้นใช้งานได้ง่ายเพียงแค่เพิ่ม script tag และทำงานใกล้ชิดกับเบราว์เซอร์
- มีพื้นที่ทดลองใช้งาน interactive playground ให้ลองเขียนและดูผลลัพธ์แบบเรียลไทม์
นักพัฒนาซอฟต์แวร์หลายคนมักคุ้นเคยกับการตั้งค่าเครื่องมือคอมไพล์และบิลด์ที่ซับซ้อนเมื่อต้องการสร้างอินเทอร์เฟซเว็บสมัยใหม่ที่มีระบบรีแอกทีฟ แต่จะเกิดอะไรขึ้นหากคุณสามารถเขียนอินเทอร์เฟซแบบรีแอกทีฟ แปลงอาเรย์ กรองข้อมูล ใช้คอมโพเนนต์ และเขียนโค้ดสไตล์ JSX ได้โดยตรงภายในไฟล์ HTML ปกติโดยไม่ต้องผ่านกระบวนการเหล่านั้น
แนวคิดดังกล่าวเป็นที่มาของ Voodoo.js ซึ่งเป็น JavaScript เฟรมเวิร์กที่ถูกออกแบบมาให้ HTML เป็นศูนย์กลางสำหรับนักพัฒนาที่ต้องการความสามารถฟรอนต์เอนด์สมัยใหม่โดยไม่จำเป็นต้องติดตั้งเครื่องมือทูลเชนที่ยุ่งยาก ผู้พัฒนาสามารถเริ่มต้นใช้งานได้ทันทีด้วยการเพิ่มเพียง script tag เดี่ยวๆ ลงในหน้าเว็บ จากนั้นก็สามารถทำงานต่อไปได้โดยตรงบนโครงสร้าง HTML เดิมที่มีอยู่
จุดเด่นที่สำคัญคือไฟล์ดังกล่าวยังคงเป็นไฟล์ HTML ปกติ แต่ถูกเสริมด้วยชั้นรีแอกทีฟเข้ามาโอบล้อมมาร์กอัปเดิม แทนที่จะบังคับให้โครงสร้างแอปพลิเคชันต้องเปลี่ยนแปลงไปอย่างสิ้นเชิงแบบเฟรมเวิร์กอื่น นักพัฒนาสามารถใช้เมธอด JavaScript ที่คุ้นเคยไม่ว่าจะเป็น filter, sort หรือ map เพื่อสร้างมาร์กอัปแบบรีแอกทีฟขึ้นมาได้ทันทีบนหน้าเว็บ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
สำหรับผู้พัฒนาที่มีพื้นฐานมาจาก React, Vue, Alpine หรือแม้แต่ JavaScript แบบดั้งเดิม (vanilla JavaScript) จะสามารถทำความเข้าใจไวยากรณ์ของ Voodoo.js ได้อย่างรวดเร็ว โดยความสามารถที่รองรับประกอบด้วย:
- ข้อมูลแบบรีแอกทีฟและเหตุการณ์ (events)
- นิพจน์ (expressions) และคอมโพเนนต์
- เครื่องมือจัดการ HTTP และฟอร์ม
- เทมเพลตสไตล์ JSX
ความสามารถเหล่านี้ทำให้ Voodoo.js เหมาะอย่างยิ่งสำหรับงานประเภทโปรโตไทป์ แอปพลิเคชันขนาดเล็ก เครื่องมือภายในองค์กร เว็บไซต์แบบสถิต งานทดลอง หรือสำหรับนักพัฒนาที่ชื่นชอบการทำงานใกล้ชิดกับเบราว์เซอร์โดยตรง นอกจากนี้ผู้สร้างยังได้พัฒนา interactive playground ขึ้นมาเพื่อให้ผู้สนใจสามารถทดลองเขียนโค้ด HTML และดูผลลัพธ์ผ่านตัวอย่างพรีวิวสดได้ทันทีบนเบราว์เซอร์
การนำ TSX และความสามารถระดับรีแอกทีฟมาผสานเข้ากับ HTML เพียวๆ โดยตรง ถือเป็นการท้าทายแนวคิดการพัฒนาเว็บสมัยใหม่ที่มักพึ่งพา Build Tool ขนาดใหญ่ เช่น Webpack, Vite หรือ Next.js การตัดขั้นตอนนี้ทิ้งไปอาจช่วยลดอุปสรรคสำหรับโปรเจกต์ขนาดเล็กและการเรียนรู้ แต่ความท้าทายระยะยาวคือการจัดการสเกลโค้ดและการทำงานร่วมกับระบบนิเวศภายนอกเมื่อโปรเจกต์เติบโตขึ้น
ปัจจุบัน Voodoo.js เป็นโปรเจกต์โอเพนซอร์สที่กำลังพัฒนาอย่างต่อเนื่อง และผู้สร้างกำลังเปิดรับความคิดเห็นจากคอมมูนิตี้ของนักพัฒนา JavaScript เพื่อหาคำตอบว่าแนวทางการใช้ไวยากรณ์สไตล์ JSX หรือ TSX ในไฟล์ HTML โดยไม่ต้องมีขั้นตอนการบิลด์นั้นตอบโจทย์การทำงานจริงมากน้อยเพียงใด ผู้ที่สนใจสามารถเข้าไปตรวจสอบซอร์สโค้ด เปิดประเด็นปัญหา ร่วมพัฒนา หรือกดดาวให้กำลังใจได้ที่หน้า GitHub ของโปรเจกต์
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น