PyScript ทำอะไรได้บ้าง? แล้วจะมาแทน JavaScript ได้จริงไหม?

Published in

KBTG Life

3 min readJun 7, 2022

สวัสดีครับ หลังจากได้เห็นตัว PyScript และได้ทดลองใช้งานเบื้องต้น ผมเลยรีบเขียนบทความทันทีด้วยความตื่นเต้น หากสนใจสามารถติดตามได้ที่ลิงก์ด้านล่างครับ

ลาก่อน JavaScript Python รันใน HTML บน Browser ได้แล้วเว้ย !

ในงาน PyCon US 2022 ได้มีการเปิดตัว PyScript ที่ทำให้เราสามารถเขียน Python ภายใต้ HTML tags ได้นั้นเอง

bohat.medium.com

วันนี้ผมจะพาทุกท่านไปรู้จักกับ PyScript มากยิ่งขึ้นผ่านตัวอย่างจากงาน PyCon 2022 ที่เพิ่งจัดกันไปครับ พร้อมกับตอบคำถามสำคัญว่า PyScript จะมาแทน JavaScript ได้จริงหรือไม่

PyScript คืออะไร

PyScript เป็น Framework ที่ช่วยให้เราสามารถรันโปรแกรม Python ได้บนบราวเซอร์ผ่าน Tag HTML (<py-script>) ซึ่ง Framework นี้ถูกพัฒนาขึ้นโดย Anaconda

Anaconda | The World's Most Popular Data Science Platform

We're sorry this site works best with Javascript enabled browsers. Forms and other actions may not work properly…

www.anaconda.com

โดยคุณสมบัติของ PyScript สรุปได้ตามนี้ครับ

รันภาษา Python ได้บนบราวเซอร์
สามารถใช้ Library ยอดฮิตได้ เช่น Pandas, NumPy และ Matplotlib เป็นต้น
สามารถทำงานร่วมกับ JavaScript และสามารถกำหนดว่าแต่ละ Page จะใช้งาน Package/Library ไหน
สามารถสร้าง UI ได้ เช่น ปุ่ม ตัวอักษร เป็นต้น

ส่วนลักษณะการใช้งานนั้น เพื่อให้ทุกคนเห็นภาพได้ครบถ้วน ผมขอหยิบมาสัก 5 ตัวอย่างครับ

1. REPL

ตัวอย่างแรกเป็นการใช้งาน REPL (Read–Eval–Print Loop) โดยเราสามารถเขียนโค้ด Python และแสดงผลลัพธ์ออกมาบนบราวเซอร์ได้เลย

pyscript/repl2.html at main · pyscript/pyscript (github.com)

จะเห็นว่าหากเราใช้คำสั่ง Print IFrame ตัวเล่นเพลงจาก Spotify จะสามารถแสดงผลออกมาได้ทันที (แต่ก็น่ากลัวเหมือนกันถ้าถูกนำมาใช้ทำ Cross Site Scripting)

2. To Do List

pyscript/todo.html at main · pyscript/pyscript (github.com)

ตัวอย่างที่สองเป็นการทำ To Do List โดยจุดที่จะแสดงในตัวอย่างนี้คือความสามารถในการเลือก Event ที่เกิดขึ้นในบราวเซอร์ ไม่ว่าจะเป็นการกดปุ่ม Add Task การกดปุ่ม Enter บน Keyboard และการเรียก Function ภายใน Python ได้ทันทีที่เกิด Event

3. K-Means

pyscript/panel_kmeans.html at main · pyscript/pyscript (github.com)

ถัดมาเป็นการแสดงผลกราฟในการทำ K-Means เพื่อจัดกลุ่มของข้อมูลครับ เราสามารถแสดงผลกราฟการจัดกลุ่มข้อมูล โดยเลือกแกน X, แกน Y และจำนวนกลุ่ม ได้ตามต้องการ กราฟที่แสดงผลก็จะเปลี่ยนไปตามที่เราเลือก

4. Data Visualization

อันนี้เป็นตัวอย่างการแสดงแผนที่ข้อมูลแบบสามมิติครับ โดยเป็นข้อมูลความหนาแน่นของแท็กซี่ภายในเมือง New York ในแต่ละช่วงเวลา

pyscript/panel_deckgl.html at main · pyscript/pyscript (github.com)

ถือเป็นอีกหนึ่งตัวอย่างที่แสดงให้เห็นถึงการนำ PyScript มาใช้ร่วมกับการทำ Data Visualization ได้อย่างเรียบเนียน

5. Super Mario Bros JavaScript Clone

และในตัวอย่างสุดท้าย เรามีการนำ Super Mario Bros JavaScript Clone มาทำงานร่วมกับ Python เพื่อตรวจจับการเคลื่อนไหวของมือในการควบคุมตัวละครในเกมนั่นเอง พิสูจน์ให้เห็นว่าตัว PyScript สามารถทำงานร่วมกับ JavaScript ได้อย่างดีเยี่ยม

สรุปแล้ว PyScript ใช้แทน JavaScript ได้มั้ย ?

เนื่องจาก PyScript นั้นยังอยู่ในช่วงแรกของการพัฒนา จึงอาจจะยังมี Bug และปัญหาเรื่องความรวดเร็วในการทำงาน อย่างไรก็ตามถ้ามองในระยะยาวนับว่า PyScript มีอนาคตที่สดใสอย่างแน่นอน

ในมุมที่ผู้เขียนมองนั้น หากเราต้องการพัฒนาเว็บแอพพลิเคชันขึ้นมาซักเว็บนึง ในปัจจุบันผู้พัฒนาจำเป็นต้องเรียนรู้ทั้งภาษา Python (Backend) และ JavaScirpt (Frontend) ดังนั้นจะดีกว่าไหมถ้าเราสามารถใช้ภาษา Python ในการพัฒนาทั้งหมดเลย (แต่หากใช้ JavaScript ในการพัฒนา Backend ก็อีกเรื่องนึงครับ) ในขณะเดียวกันเอง PyScript ก็กำลังจะเปลี่ยนโลกของ Data Science/Visualization เราสามารถเขียน PyScript และเซฟใส่ Flash Drive หรือแม้กระทั่งอัพโหลดให้อีกฝั่งสามารถใช้งานโปรแกรมของเราได้เลย โดยที่ไม่ต้องลงหรือติดตั้งโปรแกรมใดๆ เพิ่มเติมในการใช้งาน

สุดท้ายนี้ในตัวอย่างมีการเทียบความเร็วในการโหลดระหว่าง PyScript และ JavaScript ซึ่ง PyScript ยังช้าอยู่พอสมควร ตอนนี้จึงอาจจะยังไม่สามารถทดแทน JavaScript ได้เต็มๆ แต่อย่างที่บอกครับ เราต้องมาจับตาดูในอนาคตกัน