Electron (เฟรมเวิร์ก) คืออะไร ?

Electron (เฟรมเวิร์ก) คืออะไร ?

ในอดีตการพัฒนาโปรแกรมสำหรับคอมพิวเตอร์ นักพัฒนาจำเป็นต้องเขียนโค้ดแยกตาม ระบบปฏิบัติการ (OS) เช่น เขียน ภาษา C# หรือ ภาษา C++ สำหรับ วินโดวส์ (Windows), เขียน ภาษา Objective-C หรือ ภาษา Swift สำหรับ แมคโอเอส (macOS) และเขียน C/C++ สำหรับ ลีนุกซ์ (Linux) ซึ่งใช้เวลา และทรัพยากรสูงมาก

ในขณะที่เทคโนโลยีการพัฒนาเว็บไซต์กลับสามารถเติบโตได้อย่างรวดเร็ว ด้วยความยืดหยุ่นของภาษา ภาษา JavaScript รวมถึงเอนจินประสิทธิภาพสูงอย่าง Chromium และ Node.js จึงเกิดแนวคิดว่า ถ้าอย่างงั้น ทำไมเราไม่เอาเทคโนโลยีเว็บที่พัฒนาได้เร็วกว่า มาทำงานบนระบบปฏิบัติการไปเลยล่ะ ? เพราะมันรองรับการทำงานแบบข้ามแพลตฟอร์ม (Cross-Platform) ได้ดีอยู่แล้ว

Electron Framework คืออะไร ? (What is Electron Framework ?)

Electron (เฟรมเวิร์ก) คือคำตอบของโจทย์ที่เราได้ตั้งคำถามไว้ โดยมันได้กลายเป็นรากฐานสำคัญของซอฟต์แวร์ระดับโลกมากมายที่เราใช้งานกันในชีวิตประจำวัน เช่น โปรแกรม Visual Studio Code, โปรแกรม Slack, โปรแกรม Discord, Notion, โปรแกรม Figma, Postman, โปรแกรม Claude และ โปรแกรม 1Password

โดย Electron เป็น เฟรมเวิร์ก (Framework) แบบ โอเพ่นซอร์ส (Open-Source) ที่ปัจจุบันดูแลโดย OpenJS Foundation มันถูกออกแบบมาเพื่อให้ผู้พัฒนาสามารถสร้างโปรแกรมสำหรับเดสก์ท็อปด้วยเทคโนโลยีเว็บพื้นฐาน ซึ่งประกอบไปด้วย ภาษา HTML, ภาษา CSS และ ภาษา JavaScript รวมถึงภาษา หรือเฟรมเวิร์กอย่าง TypeScript, React Native, Vue หรือ Angular

หัวใจสำคัญของ Electron เกิดจากการรวมพลังของเทคโนโลยีหลัก 2 ตัวเข้าด้วยกัน คือ

ภาพจาก : https://halfanhour.blogspot.com/2019/01/learning-electron-part-1.html

Chromium Engine

ทำหน้าที่เป็นส่วนการแสดงผล ส่วนต่อประสานกับผู้ใช้ (UI) เหมือนยก เว็บเบราว์เซอร์ (Web Browser) Chromium เข้ามาไว้ในแอปพลิเคชัน ทำให้การจัดเลย์เอาต์, ออกแบบ ส่วนติดต่อผู้ใช้งานแบบกราฟิก (GUI) และเอฟเฟกต์ต่าง ๆ ทำได้ด้วย HTML/CSS

Node.js Runtime

ทำหน้าที่เป็นส่วน หลังบ้าน (Back-End) รันไฟล์ JavaScript ในระดับระบบปฏิบัติการ ช่วยให้โปรแกรมสามารถเข้าถึงไฟล์ในเครื่อง (File System), ระบบเครือข่าย และฟังก์ชันภายในของระบบปฏิบัติการได้

ด้วยการผสมผสานนี้ ทำให้นักพัฒนาเขียนโค้ดเพียงชุดเดียว (Single Codebase) แต่สามารถนำไปคอมไพล์ และรันเป็นโปรแกรมบน Windows, macOS และ Linux ได้ทันที

Electron ทำงานอย่างไร ? (How does Electron work ?)

Electron ใช้สถาปัตยกรรมแบบ Multi-Process Architecture เช่นเดียวกับระบบประมวลผลของ Chromium โดยแบ่งกระบวนการทำงานออกเป็น 3 ส่วนหลัก ดังนี้

ภาพจาก : https://infosecwriteups.com/electron-based-app-security-testing-fundamentals-part-1-introduction-to-electron-framework-c17510e27dfb

1. Main Process (กระบวนการหลัก)

• ทำงานด้วย Node.js มีเพียงกระบวนการเดียวต่อหนึ่งแอปพลิเคชัน
• ทำหน้าที่ควบคุมวงจรชีวิตของแอปพลิเคชัน (Application Lifecycle)
• จัดการคำสั่งระดับ Native ของระบบปฏิบัติการ เช่น
  • การสร้างหน้าต่างแอป (BrowserWindow)
  • การจัดการเมนู (Native Menus)
  • ถาดระบบ (System Tray)
  • ระบบแจ้งเตือน (Notifications)
  • การอัปเดตแอปพลิเคชันอัตโนมัติ (Auto-updater)

2. Renderer Process (กระบวนการแสดงผล)

• ทำงานด้วยเอนจิน Chromium แยกออกมาสำหรับแต่ละหน้าต่าง (BrowserWindow)
• ทำหน้าที่เรนเดอร์หน้าเว็บ HTML/CSS/JavaScript แสดงผลให้ผู้ใช้เห็น
• มีการแยกการทำงานออกจากกันเพื่อความเสถียร, หากหน้าต่างใดหน้าต่างหนึ่งค้าง ก็จะไม่ส่งผลให้ทั้งแอปพลิเคชันล่ม

3. Inter-Process Communication (IPC)

• การติดต่อสื่อสารระหว่าง Main Process และ Renderer Process จะทำผ่านโมดูล ipcMain และ ipcRenderer หรือผ่านสคริปต์ Preload เพื่อความปลอดภัย ช่วยให้หน้า UI สามารถร้องขอให้ Main Process ดำเนินการเกี่ยวกับระบบปฏิบัติการแทนได้

ข้อดี-ข้อเสีย ของ Electron (Pros & Cons of of Electron)

ข้อดี

• เขียนโค้ดเพียงครั้งเดียว สามารถนำไปใช้งานบนระบบปฏิบัติการ Windows, macOS และ Linux ได้พร้อมกัน
• เข้าถึงอีโคซิสเต็มของ Web และ Node.js ได้ โดยนักพัฒนาสามารถดึงโมดูล และ ไลบรารี (Library) จาก npm ที่มีมหาศาล รวมถึง หน้าบ้าน (Front-End) เฟรมเวิร์กยอดนิยมอย่าง React, Vue, Svelte มาใช้งานได้ทันที
• หมดปัญหาเรื่อง Cross-browser Compatibility เพราะแอปพลิเคชันรันอยู่บนเวอร์ชันของ Chromium ที่ฝังมากับตัวโปรแกรมเสมอ
• จัดการฟังก์ชันระดับ Native ได้ครบครัน
  • มี API รองรับการสร้างตารางเมนู
  • หน้าต่างแจ้งเตือน
  • การลากวางไฟล์ (Drag and Drop)
  • การอัปเดตแอปแบบเบื้องหลัง

ข้อเสีย (Disadvantages)

• กินทรัพยากรสูง เนื่องจาก Electron จะต้องรัน Chromium และ Node.js พร้อมกัน ส่งผลให้กินหน่วยความจำ (RAM) และการประมวลผลมากกว่าแอปพลิเคชันที่เขียนด้วยภาษา Native โดยตรง
• ไฟล์สำหรับติดตั้ง (Installer) มีขนาดเริ่มต้นค่อนข้างใหญ่ มักจะมากกว่า 50–100 MB ขึ้นไป แม้ตัวโปรแกรมจะมีฟังก์ชันการทำงานเพียงเล็กน้อยก็ตาม
• หากออกแบบการใช้งาน JavaScript สื่อสารกับ Node.js ไม่รัดกุม หรือเปิดให้โหลดโค้ดภายนอกเข้ามารัน อาจเสี่ยงต่อการถูกโจมตีแบบ Remote Code Execution (RCE) ได้

ประวัติความเป็นมาของ Electron (History of Electron)

ในปี ค.ศ. 2013 (พ.ศ. 2556) Electron (เฟรมเวิร์ก) ถือกำเนิดขึ้นในชื่อ Atom Shell โดย Kevin Sawicki และทีมงานจาก Github เพื่อใช้เป็นฐานในการพัฒนาโปรแกรมแก้ไขข้อความ (Text Editor) ชื่อว่า Atom

แต่ภายหลังในเดือนเมษายน ค.ศ. 2015 (พ.ศ. 2558) ทาง GitHub ได้ทำการเปลี่ยนชื่อจาก Atom Shell เป็น Electron อย่างเป็นทางการ พร้อมปล่อยเปิดเผย ซอร์สโค้ด (Source Code) ในรูปแบบ Open-Source ภายใต้ใบอนุญาต MIT หลังการเปิดตัว บริษัทเทคโนโลยียักษ์ใหญ่หลายแห่งได้หันมาใช้ Electron ในการสร้างผลิตภัณฑ์หลัก เช่น Microsoft เลือกใช้ Electron สร้าง Visual Studio Code หรือแอปพลิเคชันอย่าง Slack และ Discord

เพื่อความเป็นกลาง และการเติบโตที่มั่นคง Electron ได้ย้ายการบริหารจัดการไปอยู่ภายใต้ OpenJS Foundation โดยมีชุมชนนักพัฒนานับพันคนช่วยกันดูแลมาจนถึงปัจจุบัน

สรุป (Conclude)

Electron เป็นเฟรมเวิร์กที่ทลายกำแพงระหว่างการพัฒนาเว็บไซต์ และการพัฒนาโปรแกรมบนเดสก์ท็อป ทำให้การพัฒนาโปรแกรมเพื่อนำไปใช้งานบนหลายแพลตฟอร์มกลายเป็นเรื่องที่เข้าถึงได้ง่าย และรวดเร็วขึ้นอย่างมาก

แม้ Electron จะมีข้อเสียในเรื่องการใช้ทรัพยากรเครื่อง และขนาดไฟล์ที่ค่อนข้างใหญ่ แต่ด้วยความคุ้มค่าด้านเวลาในการพัฒนา, ความยืดหยุ่นของเทคโนโลยีเว็บ และการดูแลจากองค์กรระดับสากล Electron จึงยังคงเป็นหนึ่งในตัวเลือกอันดับต้น ๆ ของการพัฒนาโปรแกรมในปัจจุบัน