Coding in React + Others

ตอนทำธิสิสทางอาจารย์จะให้ทำเป็นตัวโปรแกรมเพื่อให้ใช้งานกับคอมพิวเตอร์แทนที่จะใช้อุปกรณ์ไม้บรรทัดวัดมุมการเคลื่อนไหวของศีรษะและลำคอ หรือเรียกอีกอย่างว่า Goniometer เพราะเครื่องมือนั้นขึ้นกับผู้วัดแต่ละคน ทำให้เกิดความคลาดเคลื่อนระหว่างการวัดได้ เลยเป็นสาเหตุที่เราจะพัฒนาตัวโปรแกรมกัน

ตอนพัฒนาตัวเว็บที่จะใช้ในงานวิจัย (ธีสิสนะแหละ) เดิมใช้ภาษา HTML, CSS และ JS ที่ใช้เครื่องมือ Bootstrap ร่วมกันกับ jQuery ในตอนนั้นเขียนเสร็จแล้ว ตัวเว็บทำงานได้ตามปกติเพียงแต่เกิดปัญหาเมื่อโปรแกรมที่มีขนาดใหญ่มากขึ้นเนื่องจาก

  • โค้ดที่มีความซับซ้อนส่งผลต่อประสิทธิภาพในการทำงาน
  • การแก้ไขตัวโต้ดเวลาเกิดบั้กทำได้ยาก เกิดปัญหาเวลาติดบั้กแล้วต้องไล่อ่านโค้ดที่เอ่อ งงไปหน่อย
  • เพิ่มเครื่องมือ (Library) ได้ลำบาก

โดยจากบทความที่แล้วที่พูดถึงการใช้เทคนิคการจับภาพใบหน้าที่เขียนโดย Tensorflow.js กับ ONNX.js ที่ใช้ตัวจาวาสคริปธรรมดาแล้วเวลาเขียนไปเรื่อย ๆ ก็เริ่มงงและ

React

React

หลังจากความงงของตัวโค้ดมานานมากจนกระทั่งมาทำงานโปรเจ็คหนึ่งในแล็ปที่ต้องมาใช้ React พอดี เดิมทีเห็นคู่มือแล้วพบว่ายากไปหน่อยเลยไม่ใช้ พอกลับมาเรียนรู้อีกรอบ เริ่มจากการอ่าน ค่อย ๆ อ่าน พร้อมกับลงมือเขียนโค้ดไปทีละบท แล้วฝึกการเขียนโค้ด หรือเรียกการเรียนรู้แบบนี้อีกอย่างว่า Learn by doing ทำแบบนี้ไปตลอด หลังจากการฝึกด้วยวิธีนี้แล้วนำมาพัฒนาตัวเว็บใช้ในงานนั้นก็พบว่าทำงานได้ดี เขียนแล้วเข้าใจง่าย มีประสิทธิภาพที่สูงมาก (แต่ไม่ได้รับประกันความพึงพอใจแบบบริษัทนึง) เลยลองพัฒนาตัวโปรแกรมขึ้นมาพบว่าเวิร์คดีนะ

หลังจากที่พัฒนาตัวโปรแกรมนั้นแล้ว รวมกับพบปัญหาระหว่างการเขียนโค้ดในเว็บที่ทำงานในงานวิจัย เลยปรับโค้ดใหมให้เป็น React เลยดีกว่า จับเอาแต่ละส่วนในหน้าเว็บเป็น Component แทน เขียนตัวแปรแต่ละตัวให้เป็น props, state ตามที่คู่มือในเว็บได้เขียนไว้ รวมถึง

  • เดิมหน้าเว็บที่เป็น Bootstrap รวมกับ jQuery เลยลงเครื่องมือที่เรียกว่า react-bootstrap ปรับตัวโค้ดให้เป็น component แต่ละชิ้นแทน ทำแล้วโค้ดจากเดิมที่ใช้ class กลายมาเป็นตัวนี้แทน
  • ตัวเว็บใช้ AJAX เดิมทีใช้ XMLHttprequest แล้วเอามาเขียน พบว่าตัวโค้ดดูซับซ้อนไปหน่อย เลยเปลี่ยนมาใช้ axios แทน นอกเหนือจากนี้ตัวโค้ดที่โหลดหน้าที่เก็บข้อมูลหลาย ๆ อันที่ทำมาเป็นตารางใช้ axios-hook แทน
  • จากการใช้ getUsermedia เพื่อให้เปิดกล้องเว็บแคม เลยลง react-webcam แล้วใส่ component Webcam แทนเพื่อเปิดกล้อง
  • และอื่น ๆ
ก่อนแล้วหลังการเปลี่ยนมาใช้ React

หลังจากการปรับเปลี่ยนโค้ดแล้วโดยสรุปคือตัวโค้ดเรียบง่ายขึ้นกว่าเดิมมาก แก้ปัญหาที่เกิดจากการทำงานตัวโค้ดได้ง่ายขึ้น รวมถึงประสิทธิภาพของตัวโค้ดที่ดีขึ้น เลยคิดว่าจะเอาตัวโค้ดนี้นี่แหละมาใช้

นอกเหนือจากนี้การเขียนโค้ดโดยใช้ React ทำให้เราสามารถทำหน้าเว็บได้เร็วขึ้นกว่าเดิมมากด้วย สบายเราล่ะ

โดยสรุป

เราควรจะเลือกเครื่องมือให้ถูกต้อง เพื่อให้ทำงานได้จนถึงเป้าหมายที่ต้องการ ในที่นี้คือเปลี่ยนการเขียนโค้ดเดิมที่ใช้ jQuery มาใช้ React แทน พบว่าเขียนโค้ดได้ง่าย มีประสิทธิภาพที่ดี และสามารถเพิ่มเครื่องมือ (Library) ไปได้ตามที่ต้องการ ในที่นี้คือ react-bootstrap, axios, react-webcam เป็นต้น

นอกเหนือจากนี้สิ่งที่สำคัญที่สุดของการใช้เครื่องมือไหนก็ตามการเรียนรู้สำคัญที่สุด โดย

คนที่ยึดการเรียนรู้ไว้เป็นลำดับหนึ่งเป็นบุคคลชั้นหนึ่ง

อ.เฉิน

และอีกอย่างนึง งานวิจัย (ธีสิส) นี้ จะเอาเครื่องมือนี้แหละไปพัฒนาหน้าเว็บให้เสร็จ แล้วทดสอบเครื่องมือให้เรียบร้อย ก็จบงานได้ครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  เปลี่ยนแปลง )

Google photo

You are commenting using your Google account. Log Out /  เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out /  เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out /  เปลี่ยนแปลง )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.