วัน: 21 กุมภาพันธ์ 2004

JavaScript Interoperability: JSInterop (การเรียกใช้งาน JavaScript ร่วมกับ C# ไปมา)JavaScript Interoperability: JSInterop (การเรียกใช้งาน JavaScript ร่วมกับ C# ไปมา)

ในสถาปัตยกรรมซอฟต์แวร์ระดับองค์กร (Enterprise Architecture) ยุคปัจจุบัน การพัฒนาแอปพลิเคชันที่สมบูรณ์แบบมักไม่ได้จำกัดอยู่แค่ภาษาเดียว แต่เป็นการผสานรวม (Integration) ของเทคโนโลยีหลายส่วน ตั้งแต่ Business Logic ที่แข็งแกร่งบน Backend ไปจนถึง User Experience (UX) ที่โต้ตอบได้สูงบน Frontend ความท้าทายที่สำคัญที่สุดคือการทำให้ส่วนประกอบที่เขียนด้วยภาษาหรือแพลตฟอร์มที่แตกต่างกันสามารถสื่อสารกันได้อย่างราบรื่นและมีประสิทธิภาพ

เมื่อพูดถึงการเชื่อมต่อระหว่าง C# (ซึ่งทำงานใน Managed Runtime) กับ JavaScript (ที่ทำงานใน Browser Engine) เรากำลังพูดถึงกลไกที่เรียกว่า Interoperability หรือ JSInterop โดยแก่นแท้ของมันคือการสร้าง ‘สะพานเชื่อม’ ให้โค้ดจากโลกหนึ่งสามารถเรียกใช้ฟังก์ชันหรือเข้าถึง Object จากอีกโลกหนึ่งได้

💡 JSInterop คืออะไร และทำงานอย่างไร?

JSInterop คือชุดเครื่องมือและรูปแบบการออกแบบที่ช่วยให้ .NET (C#) สามารถเรียกใช้โค้ด JavaScript และในทางกลับกันสามารถเปิดเผยเมธอดของ .NET object ให้ JavaScript สามารถเรียกใช้ได้โดยตรง การทำงานนี้มีความสำคัญอย่างยิ่งในการรักษาหลักการ Separation of Concerns โดยที่ Backend (C#) ยังคงรับผิดชอบเรื่องการจัดการข้อมูลหลัก (เช่น การเชื่อมต่อกับ PostgreSQL) ในขณะที่ Frontend (JS) รับผิดชอบเรื่องการแสดงผลและการโต้ตอบกับผู้ใช้

🧩 บทบาทของ PostgreSQL ในสถาปัตยกรรม Interop

ในระบบที่ใช้ JSInterop, PostgreSQL จะทำหน้าที่เป็นแหล่งข้อมูลหลัก (Single Source of Truth) ข้อมูลที่ถูกดึงออกมาจาก PostgreSQL จะถูกจัดการและประมวลผลในชั้น C# ก่อน จากนั้นจึงถูกแปลงรูปแบบ (Serialization) ให้เป็นข้อมูลที่ JavaScript สามารถนำไปใช้ในการแสดงผลบนหน้าเว็บได้ ตัวอย่างเช่น การดึงรายการสินค้าจาก PostgreSQL แล้วส่งเป็น JSON Array ให้ JavaScript นำไปสร้าง UI Component ต่างๆ

ตัวอย่างการไหลของข้อมูล (Data Flow Example)

สมมติว่าเราต้องการดึงรายการ ID และชื่อสินค้าจาก PostgreSQL เพื่อให้ JavaScript นำไปแสดงผลบนตาราง:

SQL

SELECT id, product_name FROM products WHERE category = 'electronics';

โค้ด C# จะเรียกใช้คำสั่ง SQL นี้ผ่านไลบรารี ADO.NET เพื่อรับผลลัพธ์ จากนั้น C# จะใช้ IJSRuntime เพื่อส่งข้อมูล JSON ที่จัดรูปแบบแล้วไปยัง JavaScript เพื่อให้ JS นำไปใช้ในการอัปเดต DOM โดยไม่ต้องให้ JavaScript เข้าถึงการเชื่อมต่อฐานข้อมูลโดยตรง

🚀 ข้อดีของการใช้ JSInterop

  • ประสิทธิภาพสูง: ช่วยให้แอปพลิเคชันทำงานได้เร็วขึ้น เพราะสามารถใช้จุดแข็งของแต่ละภาษาได้อย่างเต็มที่
  • ความยืดหยุ่น: รองรับการขยายระบบด้วยเทคโนโลยีที่หลากหลายในอนาคต
  • ความปลอดภัย: รักษาความปลอดภัยของข้อมูลฐานข้อมูล (PostgreSQL) เพราะการเข้าถึงข้อมูลทั้งหมดต้องผ่านชั้น Business Logic ของ C# เสมอ

✅ บทสรุป

JSInterop ไม่ใช่แค่การเชื่อมต่อโค้ด แต่คือการสร้างสถาปัตยกรรมที่แข็งแกร่งและแยกส่วนกันอย่างชัดเจน (Decoupled Architecture) การทำความเข้าใจกลไกนี้ช่วยให้สถาปนิกสามารถออกแบบระบบที่ขยายตัวได้ (Scalable) และบำรุงรักษาได้ง่าย แม้ว่าเราจะใช้ PostgreSQL เป็นหัวใจของข้อมูล แต่การผสานพลังระหว่าง C# และ JavaScript ผ่าน JSInterop คือกุญแจสำคัญที่ทำให้ผลิตภัณฑ์ระดับองค์กรสามารถทำงานได้อย่างสมบูรณ์แบบในโลกแห่งความเป็นจริง