เป้าหมาย แนวคิดหลัก และกรณีการใช้งาน

คุณเคยสงสัยเกี่ยวกับแนวคิดหลักและกรณีการใช้งานของ WASM หรือไม่? ถ้าไม่ เราช่วยคุณได้

WebAssembly (WASM) เป็นภาษาระดับต่ำใหม่ที่ให้คุณปลดบล็อกประสิทธิภาพที่เหมือนเนทีฟบนเว็บ

ใน WebAssembly สำหรับผู้เริ่มต้น – ตอนที่ 1 เราแนะนำ WASM จากมุมมองของผู้เริ่มต้นโดยครอบคลุมคำจำกัดความและข้อจำกัด นอกจากนี้ เรายังศึกษาคุณลักษณะของ WebAssembly, แผนงานของ WASM และวิธีการทำงานของ JavaScript กับ WebAssembly และไม่ได้ต่อต้าน

โพสต์นี้จะสำรวจ WebAssembly โดยพูดคุยเกี่ยวกับเป้าหมาย WASM แนวคิดหลัก และกรณีการใช้งาน เราจะดูโครงการที่น่าตื่นเต้นบางโครงการด้วย

มาเริ่มกันเลย.

เป้าหมายของ WebAssembly

เพื่อให้เข้าใจแนวคิดหลักของ WebAssembly เราต้องดูเป้าหมายก่อน เป้าหมายเหล่านี้รวมถึง:

  • ความสามารถในการใช้ประโยชน์จากฮาร์ดแวร์ที่มีอยู่โดยใช้รูปแบบไบนารีที่ใช้เวลาในการโหลดและขนาดที่มีประสิทธิภาพเป็นเป้าหมายในการรวบรวม พูดง่ายๆ ก็คือ WASM ใช้ Abstract Syntax Tree (AST) ในรูปแบบไบนารี ซึ่งสนับสนุนการคอมไพล์และการดำเนินการด้วยความเร็วแบบเนทีฟ ด้วยการใช้วิธีการนี้ WASM สามารถดำเนินการบนอุปกรณ์ต่างๆ รวมถึง IoT, เว็บ และอุปกรณ์พกพา
  • เป้าหมายของ WASM ไม่ใช่การแก้ไขหรือเปลี่ยนแปลงแพลตฟอร์มเว็บที่มีอยู่ ด้วยวิธีการนี้ WebAssembly สามารถผสานรวมเข้ากับเว็บปัจจุบันและในอดีตได้เป็นอย่างดี นอกจากนี้ยังช่วยให้ WebAssembly สามารถทำงานร่วมกับ JavaScript ได้อย่างราบรื่น รวมถึงดำเนินการควบคู่ไปกับหรือทำการเรียกแบบซิงโครนัสจาก JavaScript
  • ทำงานได้อย่างราบรื่นด้วยนโยบายการรักษาความปลอดภัยของสิทธิ์และแหล่งที่มาเดียวกัน
  • ตรวจสอบให้แน่ใจว่านักพัฒนาซอฟต์แวร์สามารถออกแบบโซลูชันของตนเพื่อรองรับการฝังแบบไม่ใช้เบราว์เซอร์
  • ประการสุดท้าย มอบเครื่องมือให้นักพัฒนาทำงานอย่างมีประสิทธิภาพด้วยซอร์สโค้ด WebAssembly โดยจัดเตรียมรูปแบบข้อความที่มนุษย์แก้ไขได้

แนวคิดหลักของ WebAssembly

ภายในประทุน WebAssembly ทำตามขั้นตอนต่อไปนี้:

  • ในตอนแรก คุณต้องเขียนโค้ดในภาษาที่พิมพ์แบบสแตติกด้วยประเภทที่กำหนดไว้
  • เมื่อเสร็จแล้ว คุณจะสร้างโมดูล WASM ที่คอมไพล์ไว้ล่วงหน้าแล้วป้อนโค้ดลงในคอมไพเลอร์ของโปรแกรม
  • ขั้นตอนข้างต้นช่วยให้แน่ใจว่า WASM จะข้ามการแยกวิเคราะห์และทำให้โค้ดพร้อมที่จะแสดงบนเว็บเบราว์เซอร์
  วิธีเปลี่ยนไอคอนแอพ ไฟล์ และโฟลเดอร์บน Mac

แนวคิดหลักเบื้องหลัง WebAssembly ที่ทำงานบนเว็บเบราว์เซอร์ประกอบด้วย:

  • หน่วยความจำ: หน่วยความจำใน WebAssembly ได้รับการจัดการและเขียนโดยคำแนะนำการเข้าถึงหน่วยความจำระดับต่ำ ในทางเทคนิคแล้ว มันเป็น ArrayBuffer ที่ปรับขนาดได้และมีอาร์เรย์ของหน่วยความจำหลายไบต์
  • โมดูล: โมดูลใน WebAssembly เป็นโค้ดคอมพิวเตอร์ที่คอมไพล์แล้ว เนื่องจากรูปแบบไร้สถานะ เว็บเบราว์เซอร์จึงรวบรวมโมดูลและแบ่งปันระหว่าง Windows และ Workers นอกจากนี้ โมดูลยังจัดเก็บและประกาศการนำเข้าและส่งออก นอกเหนือจากการบรรจุฟังก์ชัน ตาราง ประเภท globals และหน่วยความจำ
  • ตาราง: ตารางประกอบด้วยการอ้างอิงและฟังก์ชันทั้งหมดโดยใช้อาร์เรย์แบบปรับขนาดได้ สิ่งนี้ทำให้ไม่จำเป็นต้องจัดเก็บไบต์ดิบในหน่วยความจำ
  • อินสแตนซ์: ใน WASM อินสแตนซ์คือโมดูลระหว่างรันไทม์ โดยสถานะทั้งหมดจะจับคู่กัน สถานะเหล่านี้รวมถึงตาราง หน่วยความจำ และชุดค่าที่นำเข้าอื่นๆ

แนวคิดหลักของ WASM

ในฐานะนักพัฒนาเว็บ คุณสามารถใช้ JavaScript API เพื่อเรียกและกำหนดโมดูล ตาราง อินสแตนซ์ และตาราง นอกจากนี้ คุณใช้ JavaScript เพื่อเรียกใช้การส่งออก WASM พร้อมกันภายในฟังก์ชัน JavaScript ดังนั้น JavaScript จึงเล่นได้ดีกับ WebAssembly เนื่องจากคุณสามารถใช้ WASM เพื่อเขียนแอปพลิเคชันประสิทธิภาพสูงในเว็บเบราว์เซอร์ได้

วัตถุ WASM

เมื่อทำงานกับ WebAssembly คุณต้องติดตามวัตถุ WASM แปดรายการ วัตถุเหล่านี้รวมถึง:

  • WebAssembly.Global – Global object เป็นอินสแตนซ์ตัวแปรส่วนกลาง สามารถเข้าถึงได้โดยทั้ง WebAssembly.Module และ JavaScript
  • WebAssembly.Module – ที่นี่ วัตถุโมดูลประกอบด้วยรหัส WASM ไร้สัญชาติ รหัสถูกรวบรวมไว้ล่วงหน้า
  • WebAssemly.Instance – WebAssembly.Instance เป็นอินสแตนซ์ที่ปฏิบัติการได้และมีสถานะของ WebAssembly.Module
  • WebAssembly.Table – วัตถุ Table มีการอ้างอิงฟังก์ชันและทำหน้าที่เป็นตัวห่อหุ้ม JavaScript
  • WebAssembly.CompileError – วัตถุ CompileError มีข้อผิดพลาดทั้งหมดระหว่างการตรวจสอบและถอดรหัส
  • WebAssembly.RuntimeError – ที่นี่ วัตถุ RuntimeError แสดงรายการข้อผิดพลาดรันไทม์ทั้งหมด
  • WebAssembly.LinkError – วัตถุ LinkError มีข้อผิดพลาดที่เกิดขึ้นระหว่างการสร้างโมดูล
  วิธีลงชื่อออกจากอุปกรณ์ทั้งหมดบน PlayStation

กรณีการใช้งานและโครงการ WASM

เรารู้อยู่แล้วว่า WebAssembly ให้ประสิทธิภาพเหมือนเนทีฟในเว็บเบราว์เซอร์ อย่างไรก็ตาม เพื่อให้เข้าใจถึงตำแหน่งที่คุณสามารถนำไปใช้ได้อย่างแท้จริง คุณต้องดูกรณีการใช้งานของมัน มาดูรายการกรณีการใช้งาน WASM บางส่วนด้านล่าง

กรณีการใช้งาน WebAssembly ครอบคลุมทั้งภายในและภายนอกเบราว์เซอร์ ตัวอย่างเช่น หากคุณต้องการใช้ WASM ในเบราว์เซอร์ คุณสามารถทำได้หลายอย่าง รวมถึง:

  • การตัดต่อวิดีโอหรือเสียง เช่น โครงการ ffmpegwasm
  • วิดีโอเกมในเว็บเบราว์เซอร์ เช่น เกมประสิทธิภาพสูงเหล่านี้
  • การสร้างภาพและการจำลองทางวิทยาศาสตร์
  • การจำลอง/จำลองแพลตฟอร์ม เช่น DOSBox, MAME เป็นต้น
  • การเข้ารหัส
  • เดสก์ท็อประยะไกล
  • เครื่องมือสำหรับนักพัฒนา

ใช้กรณี

จากมุมมองทั่วไป กรณีการใช้งานที่น่าสนใจของ WebAssembly ได้แก่

  • ความสามารถในการเขียนโค้ดที่เร็วขึ้นสามารถใช้ประโยชน์จากฮาร์ดแวร์พื้นฐานได้
  • ยิ่งไปกว่านั้น คุณยังสามารถทำการบีบอัดฝั่งไคลเอ็นต์ ซึ่งส่งผลให้เวลาในการโหลดดีขึ้นและประหยัดแบนด์วิธ ดังนั้น คุณจึงใช้ CPU ของไคลเอ็นต์หรือฮาร์ดแวร์พื้นฐานในการบีบอัดและคลายการบีบอัด จากนั้นจึงใช้ทรัพยากรของเซิร์ฟเวอร์
  • นอกจากนี้ คุณสามารถใช้ภาษาโปรแกรมต่างๆ เพื่อเขียนโค้ดสำหรับเว็บนอกเหนือจากการใช้ JavaScript ตัวอย่างเช่น คุณสามารถใช้ Rust, C และ C++ เพื่อเขียนโค้ดประสิทธิภาพสูงสำหรับบางแง่มุมของเว็บแอปพลิเคชันของคุณ

โครงการ

หากเราย้ายไปที่ตัวอย่างในโลกแห่งความเป็นจริง โครงการต่อไปนี้ควรค่าแก่การกล่าวถึง

  • Figma ปรับปรุงประสิทธิภาพของเว็บแอปด้วยการใช้ WebAssembly ลดเวลาในการโหลดระหว่างการเริ่มต้นแอป การเรนเดอร์การออกแบบทั้งหมด และแม้กระทั่งการดาวน์โหลดไฟล์การออกแบบ ดังที่เราได้กล่าวไว้ก่อนหน้านี้ WebAssembly นั้นยอดเยี่ยมสำหรับการบีบอัด Figma ใช้ WASM เพื่อปรับปรุงขนาดการดาวน์โหลด โดยลดขนาดลงอย่างมาก
  • Pyodide: โครงการ WASM ที่น่าตื่นเต้นอีกโครงการหนึ่งคือโครงการ Pyodide ซึ่งเปิดตัวจาก Mozilla ช่วยให้นักวิทยาศาสตร์สามารถรวบรวมสแต็คทางวิทยาศาสตร์ของ Python ไปยัง WebAssembly รวมถึง NumPy, SciPy, Scikit-learn ฯลฯ ไปยังเบราว์เซอร์ มีการแปลงวัตถุโปร่งใสระหว่าง Python และ JavaScript สุดท้ายนี้ยังอนุญาตให้นักพัฒนาใช้ Web APIs โดยใช้ Python
  • Brazor WebAssembly: เฟรมเวิร์ก Brazor WebAssembly ช่วยให้นักพัฒนาสร้างเว็บแอปหน้าเดียว ฝั่งไคลเอ็นต์ และแบบโต้ตอบด้วย .NET คุณสามารถโฮสต์แอปเหล่านี้กับเบราว์เซอร์ด้วยรันไทม์ .NET ที่ใช้ WebAssembly ที่นี่ ในฐานะนักพัฒนา คุณสามารถเข้าถึงการทำงานของเบราว์เซอร์ในโค้ด .NET ของคุณด้วยความช่วยเหลือของ JavaScript API ของ WebAssembly
  วิธีแก้ไขรูปภาพใน Google สไลด์

ที่มา: ฟิกม่า

โครงการที่มีชื่อเสียงและคุ้มค่าอื่น ๆ อีกมากมายกำลังใช้ WebAssembly เหล่านี้คือ Binaryen, Cheerp, Forest, Grain และอื่นๆ

ความคิดสุดท้าย

WebAssembly นั้นไม่เป็นมิตรกับผู้เริ่มต้น อย่างไรก็ตาม เมื่อศึกษากรณีการใช้งานและแนวคิดหลัก คุณจะเข้าใจความสามารถของมันได้อย่างชัดเจน

ด้วยโครงการที่น่าตื่นเต้นในตลาด เป็นเวลาที่ดีที่สุดในการเรียนรู้ WebAssembly โดยเฉพาะอย่างยิ่งหากคุณอยู่ในการพัฒนาเว็บ ความสามารถของ WASM ในการทำงานนอกเบราว์เซอร์ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการพัฒนาที่เน้นประสิทธิภาพ

สนุกกับการอ่านบทความ? แล้วแบ่งปันกับโลกล่ะ?

เรื่องล่าสุด

x