- PyScript ช่วยให้สามารถฝังโค้ด Python ลงใน HTML โดยใช้ WebAssembly ซึ่งรองรับไลบรารีที่มีประสิทธิภาพ เช่น NumPy และ Pandas
- Brython แปลงโค้ด Python เป็น JavaScript ทำให้เหมาะสำหรับการจัดการองค์ประกอบ DOM และ SVG อย่างรวดเร็วและมีประสิทธิภาพ
- WebAssembly เป็นเทคโนโลยีสำคัญที่ช่วยให้ภาษาโปรแกรมแบบคอมไพล์สามารถทำงานบนเว็บได้ด้วยประสิทธิภาพใกล้เคียงกับภาษาโปรแกรมแบบเนทีฟ
- มีทางเลือกแบบดั้งเดิมที่ใช้เซิร์ฟเวอร์ เช่น Flask และ Django สำหรับจัดการตรรกะฝั่งเซิร์ฟเวอร์
การนำพลังของ Python มาสู่สภาพแวดล้อมของเบราว์เซอร์เป็นความฝันของนักพัฒนาหลายคนมานานแล้ว จนกระทั่งเมื่อไม่นานมานี้ หากคุณต้องการให้สิ่งใดก็ตามทำงานบนเว็บJavaScript คือราชาที่ไม่มีใครโต้แย้งได้และเป็นตัวเลือกเดียวที่ใช้งานได้จริงสำหรับการประมวลผลตรรกะฝั่งไคลเอ็นต์โดยไม่ต้องพึ่งพาเซิร์ฟเวอร์ภายนอก
อย่างไรก็ตาม ภูมิทัศน์ได้เปลี่ยนแปลงไปอย่างสิ้นเชิงแล้ว ด้วยการเกิดขึ้นของเครื่องมือและมาตรฐานต่างๆ ที่ทำลายอุปสรรคในส่วนแบ็กเอนด์ปัจจุบัน มีหลายวิธีในการผสานรวม Python กับ HTML ตั้งแต่คอมไพเลอร์ที่แปลงโค้ด ไปจนถึงการใช้เทคโนโลยีไบนารีที่ช่วยให้ประสิทธิภาพการทำงานที่ยอดเยี่ยมโดยตรงในแท็บของเบราว์เซอร์ชั้นนำอย่าง Chrome
PyScript: การปฏิวัติอนาคอนดา
หนึ่งในความก้าวหน้าที่สำคัญที่สุดเกิดขึ้นเมื่อ Anaconda เปิดตัว PyScript เฟรมเวิร์กนี้เป็นเพียงเลเยอร์ห่อหุ้มอยู่เหนือ... Pyodide, Emscripten และ WebAssembly (Wasm)วิธีนี้ทำให้ Python สามารถทำงานบนฝั่งไคลเอนต์ได้อย่างเกือบโปร่งใส จุดเด่นที่สุดคือ คุณสามารถเขียนโค้ด Python ลงในแท็ก HTML ที่กำหนดเองได้โดยตรง เช่น <script> <py-script>ซึ่งช่วยอำนวยความสะดวกอย่างมากในการสร้างแอปพลิเคชันแบบโต้ตอบ
เริ่มต้นใช้งานได้ง่ายๆ เพียงแค่เพิ่มไฟล์ CSS และ JS ของ PyScript ลงในส่วนหัวของเอกสาร ข้อดีอย่างหนึ่งคือ... รองรับไลบรารีขนาดใหญ่ เช่น NumPy, Pandas หรือ Scikit-learn ซึ่งสามารถกำหนดค่าได้โดยใช้แท็ก <py-env>นอกจากนี้ PyScript ยังมีคุณสมบัติอื่นๆ อีกด้วย การสื่อสารแบบสองทิศทางด้วย JavaScriptอนุญาตให้จัดการ DOM ของเบราว์เซอร์โดยใช้โมดูล js Python
ในส่วนของอินเทอร์เฟซนั้น PyScript ก็ไม่ทำให้ผิดหวัง เพราะมีคุณสมบัติครบครัน ส่วนประกอบ UI แบบบูรณาการ ในขณะที่ <py-button> o <py-inputbox>ซึ่งจะเรียกใช้ฟังก์ชัน Python เมื่อมีการโต้ตอบ อย่างไรก็ตาม ควรสังเกตว่า เนื่องจากใช้ WebAssembly เป็นพื้นฐาน อาจใช้เวลานานในการโหลดครั้งแรก และประสิทธิภาพการทำงานบนอุปกรณ์เคลื่อนที่อาจลดลง
Brython: Python แปลเป็น JavaScript
ถ้าเรามองหาทางเลือกที่เบากว่าในแง่ของภาระการทำงาน Brython คือตัวเลือกคลาสสิก ต่างจาก PyScript ตรงที่ Brython เป็นการใช้งาน Python 3 ที่เขียนขึ้นทั้งหมดด้วย JavaScript แปลโค้ด Python เพื่อให้เบราว์เซอร์เข้าใจได้ ในการใช้งาน จำเป็นต้องเรียกใช้ฟังก์ชันนั้น brython() ในเหตุการณ์ onload ของเนื้อหา HTML
Brython โดดเด่นในด้านความสามารถในการโต้ตอบกับองค์ประกอบ HTML และ SVG ผ่านการใช้ออบเจ็กต์ documentเป็นไปได้ แทรกเนื้อหาแบบไดนามิก หรือวาดรูปทรงเรขาคณิตบนผืนผ้าใบ SVG โดยใช้ตัวดำเนินการแบบกำหนดเอง เช่น =< เพื่อเพิ่มโหนดลงในโครงสร้างเอกสาร แม้ว่าจะมีประโยชน์หลากหลาย แต่ก็มีข้อจำกัดอยู่บ้าง: มันไม่รองรับโมดูลทั้งหมด ของไลบรารีมาตรฐานและกำหนดให้การรับและส่งข้อมูลต้องดำเนินการผ่านองค์ประกอบ HTML เนื่องจาก print() o input() มันไม่ได้ทำงานในแบบดั้งเดิม
การนำไปใช้และการเปรียบเทียบอื่นๆ
ระบบนิเวศนั้นกว้างขวาง และยังมีโครงการที่น่าสนใจอื่นๆ อีกมากมาย เช่น Skulpt ที่รองรับ Python 2 และ 3 ผ่าน JavaScript และ Transcrypt ที่ทำหน้าที่เป็นคอมไพเลอร์สำหรับ JavaScript แม้ว่า Transcrypt ดูเหมือนจะถูกลืมไปแล้วก็ตาม นอกจากนี้ยังมี VistaPython ซึ่งนำเสนอแนวทางที่แตกต่างออกไป โดยใช้ตัวแปลไบต์โค้ดที่เขียนด้วย JavaScriptและตัวแยกวิเคราะห์ที่สร้างด้วย Antlr ทำให้การอัปเกรดเป็น Python เวอร์ชันใหม่ทำได้ง่ายขึ้น
เมื่อเปรียบเทียบวิธีการต่างๆ เราจะเห็นว่า Brython และ Skulpt ใช้ตัวแยกวิเคราะห์แบบแมนนวลซึ่งดูแลรักษายาก ในทางตรงกันข้ามPyodide (รากฐานของ PyScript)เป็นการพอร์ต CPython ไปยัง WebAssembly อย่างแท้จริง ทำให้มีความเข้ากันได้มากขึ้น แม้ว่าจะมีข้อเสียคือขนาดไฟล์ใหญ่กว่ามากก็ตาม VistaPython พยายามสร้างสมดุลระหว่างความยืดหยุ่นและขนาดโดยปรับโปรไฟล์การโหลดให้เหมาะสมเพื่อให้แน่ใจว่าแอปพลิเคชันทำงานได้อย่างรวดเร็วบนอุปกรณ์ใดๆ ก็ตาม
วิธีการแบบดั้งเดิมและระบบแบ็กเอนด์
ไม่ใช่ว่าทุกอย่างจะต้องเกิดขึ้นในเบราว์เซอร์เสมอไป สำหรับหลายๆ คน วิธีที่มีประสิทธิภาพที่สุดในการผสานรวม Python และ HTML ยังคงเป็นการใช้... เฟรมเวิร์กเซิร์ฟเวอร์ เช่น Flask ใน Python หรือ จังโก้ในรูปแบบนี้ Python จะจัดการตรรกะบนเซิร์ฟเวอร์และส่ง HTML ที่แสดงผลแล้วไปยังไคลเอ็นต์ หรือทำหน้าที่เป็นตัวกลาง REST API ที่แลกเปลี่ยนข้อมูลในรูปแบบ JSON กับส่วนหน้าเว็บที่เขียนด้วย JavaScript โดยใช้ fetch o axios.
นอกจากนี้ยังมีวิธีการเก่าๆ เช่น CGI (Common Gateway Interface) ซึ่งแม้ว่าปัจจุบันจะถือว่าล้าสมัยเนื่องจากความซับซ้อน แต่ก็เป็นพื้นฐานของเว็บแบบไดนามิก สำหรับผู้ที่ต้องการนำเสนอข้อมูลการแปลง Jupyter notebooks เป็น HTMLเป็นวิธีที่เร็วที่สุดในการเผยแพร่รายงานทางเทคนิคโดยไม่ยุ่งยากทางเทคนิค
หัวใจสำคัญที่อยู่เบื้องหลังทั้งหมด: WebAssembly
เคล็ดลับสำคัญที่ทำให้ภาษาโปรแกรมอย่าง Python, C++ และ Rust สามารถใช้งานบนเว็บได้ก็คือ WebAssembly (Wasm) มาตรฐานเปิดนี้ช่วยให้สามารถประมวลผลโค้ดไบนารีได้ด้วยประสิทธิภาพใกล้เคียงกับโปรแกรมดั้งเดิม ด้วย Wasm บริษัทต่างๆ เช่น Adobe จึงสามารถพอร์ตPhotoshop ไปใช้งานบนเว็บได้และ AutoCAD กับ Figma ก็สามารถปรับปรุงประสิทธิภาพการโหลดและประมวลผลข้อมูลได้อย่างมาก
ความสามารถในการเรียกใช้ Python บนฝั่งไคลเอ็นต์ ไม่ว่าจะผ่านการแปลง Brython หรือพลังของการประมวลผลแบบไบนารีของ PyScript เปิดโลกแห่งความเป็นไปได้สำหรับการสร้างเครื่องมือและแอปพลิเคชันด้านวิทยาศาสตร์ข้อมูล ที่ซับซ้อน โดยที่ผู้ใช้ไม่จำเป็นต้องติดตั้งอะไรลงในคอมพิวเตอร์ของตน ทำให้การเข้าถึงการเขียนโปรแกรมขั้นสูงเป็นเรื่องที่เข้าถึงได้ง่ายขึ้น
การผสานรวม Python บนเว็บได้พัฒนาจากสคริปต์ฝั่งเซิร์ฟเวอร์แบบง่ายๆ ไปสู่การประมวลผลแบบไบนารีผ่าน WebAssembly ทำให้คุณสามารถเลือกระหว่างการแปลงเป็น JavaScript ที่มีน้ำหนักเบาด้วย Brython หรือพลังเต็มรูปแบบของ PyScript และ Pyodide ซึ่งเป็นการเปลี่ยนแปลงวิธีที่เราคิดเกี่ยวกับการพัฒนาส่วนหน้า (frontend development)
