WebAssembly (WASM) เป็นคำยอดนิยมในช่วงไม่กี่ปีที่ผ่านมา เป็นเทคโนโลยีที่ได้รับความสนใจอย่างมาก แต่ไม่ค่อยได้ใช้ในทางปฏิบัติ ฉันสงสัยเกี่ยวกับสถานะปัจจุบันของมัน ดังนั้นฉันจึงตรวจสอบและสรุปผลการวิจัยของฉัน บางคนอาจทำให้คุณประหลาดใจ

พื้นหลัง

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

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

บันทึกสั้นๆ สองสามข้อก่อนที่เราจะไปต่อ:

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

ในเบราว์เซอร์

ผู้คนใช้ WebAssembly ในเบราว์เซอร์เป็นหลักด้วยเหตุผลสามประการ:

1. ปรับประสิทธิภาพให้เหมาะสมสำหรับการคำนวณและงานที่ใช้ทรัพยากรมาก
2. โอนย้ายแอปเนทีฟดั้งเดิมไปยังเว็บแอป
3. อนุญาตให้ใช้ภาษาอื่นที่ไม่ใช่ Javascript ในเบราว์เซอร์

ฟิกม่า

หากคุณเป็นนักออกแบบ UI/UX หรือนักพัฒนาที่ยุ่งกับการออกแบบของคุณเป็นครั้งคราว คุณไม่ควรพลาด Figma ในปีที่ผ่านมา เป็นผลิตภัณฑ์ที่ยอดเยี่ยมที่แสดงให้เห็นถึงประสิทธิภาพอันล้ำสมัยที่เว็บแอปสามารถมีได้ในทุกวันนี้

WebAssembly เป็นหนึ่งในความลับสู่ความสำเร็จของ Figma สร้างความประหลาดใจให้กับหลายๆ คน แม้ว่าจะเป็นเว็บแอป ตัวแก้ไขของ Figma เขียนด้วย C++ แม้กระทั่งก่อนรุ่งของ WebAssembly เป็นไปได้อย่างไร เนื่องจากเบราว์เซอร์ที่รันเฉพาะ Javascript เท่านั้น คำตอบนั้นง่าย โค้ด C++ จะถูกแปลงเป็น Javascript ก่อนส่งไปยังเว็บ

แต่ทำไมไม่ Javascript ตั้งแต่เริ่มต้น? ความแตกต่างที่สำคัญคือวิธีที่โค้ด C++ ถูกทรานสไพล์เป็น JS Javascript เป็นภาษาแบบไดนามิกมาก เพื่อให้มันทำงานได้อย่างรวดเร็ว เอ็นจิ้นของเบราว์เซอร์ใช้เวทย์มนตร์มากมายเพื่อเพิ่มประสิทธิภาพในทันที อย่างไรก็ตาม ผลที่ได้ยังถือว่าไม่ดีและคาดเดาไม่ได้ มีวิธีที่จะทำให้ Javascript มีประสิทธิภาพดีขึ้น — เขียนโค้ดให้เหมือนกับที่คุณใช้ภาษาสแตติก เพื่อให้เอ็นจิ้นประมวลผลได้ง่ายขึ้น ในตอนแรก Figma ใช้ “asm.js” เพื่อให้บรรลุเป้าหมาย โดยพื้นฐานแล้วมันคือ transpiler ที่เปลี่ยนโค้ด C++ ให้เป็นโค้ด Javascript อย่างมีประสิทธิภาพ

อย่างไรก็ตาม ท้ายที่สุดแล้ว ยังคงเป็นโค้ด Javascript ไม่กะทัดรัดสำหรับการโหลดผ่านเครือข่าย และเบราว์เซอร์ยังคงต้องแยกวิเคราะห์ข้อความ นี่คือจุดที่ WebAssembly ชนะแนวทางก่อนหน้านี้ WASM เป็นรหัสเชิงเครื่อง มีขนาดกะทัดรัดกว่า Javascript มากและมีค่าใช้จ่ายที่ต่ำกว่ามากสำหรับเบราว์เซอร์ในการประมวลผล เมื่อย้ายจาก asm.js ไปยัง WebAssebmly ทำให้ Figma มีประสิทธิภาพเพิ่มขึ้น 3 เท่า

ออโต้แคด

ในฐานะที่เป็นผลิตภัณฑ์ที่สร้างขึ้นในปี 1982 AutoCad นั้นเก่ากว่าเว็บและมีขนาดมหึมา — มีโค้ด C++ มากถึง 15 ล้านบรรทัด มีความต้องการที่จะย้ายไปที่เว็บมาสักระยะหนึ่งแล้ว แต่การเขียนทุกอย่างใหม่ด้วย Javascript นั้นทำไม่ได้จริง: งานจำนวนมากและผลลัพธ์ที่ช้ากว่ามาก ในที่สุด WebAssembly ก็เข้ามาเป็นผู้กอบกู้

ในหลาย ๆ ด้าน การใช้ WebAssembly ของ AutoCAD นั้นคล้ายคลึงกับ Figma ยกเว้นว่าจะมีปัญหาเพิ่มเติมของการพึ่งพา Windows OS ที่เข้มงวดในการแก้ไข อย่างไรก็ตาม เป็นเรื่องน่าทึ่งที่เห็นว่า WebAssembly ซึ่งเป็นเทคโนโลยีที่ค่อนข้างใหม่ มีความเป็นไปได้ที่จะสนับสนุนแอปพลิเคชันขนาดใหญ่และซับซ้อนเช่นนี้ และมอบรูปลักษณ์ใหม่ในยุคปัจจุบัน

นอกจากนี้Adobe Photoshop ยังย้ายไปที่เว็บด้วยความช่วยเหลือของ WebAssembly

ไมโครซอฟท์ เบลเซอร์

Blazorเป็นข้อเสนอของ Microsoft ในการพัฒนาส่วนหน้าของเว็บด้วยภาษาแบ็กเอนด์หลัก — C# ผ่าน WebAssembly ตามสโลแกนที่กล่าวไว้ เป้าหมายคือการสร้างเว็บแอปแบบ full-stack โดยไม่ต้องเขียน Javascript แต่ทำไมล่ะ

ความคิดนี้อาจเป็นไปได้ว่านักพัฒนาซอฟต์แวร์ของ Microsoft ชอบ C# มากและต้องการใช้งานทุกที่

// A Blazor component
@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

// C# below
@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

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

บนเซิร์ฟเวอร์

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

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

• ผู้ให้บริการโฮสติ้งแบบไร้เซิร์ฟเวอร์ที่ต้องการรันรูทีนในช่วงเวลาสั้นๆ สำหรับผู้เช่าในสเกลที่กว้างขวาง การเริ่มต้นอย่างรวดเร็ว รอยเท้าต่ำ และแซนด์บ็อกซ์เป็นสิ่งสำคัญ
• ผลิตภัณฑ์ SaaS ที่รองรับการใช้งานปลั๊กอินของผู้ใช้หรือชุมชน
• สภาพแวดล้อม Edge ที่ทรัพยากรจำกัดมาก

หากคุณสนใจในความก้าวหน้าในโลกแห่งความเป็นจริง ลองดูบริษัทต่อไปนี้ที่รวม WASM ฝั่งเซิร์ฟเวอร์ไว้ในบริการต่างๆ

• จักรวาล
• เฟอร์มิออน
• รองรับ Cloudflare WASI

อะไรต่อไป

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

เป็นเรื่องน่าสนใจที่จะดูว่า WebAssembly จะผลักดันขอบเขตของการพัฒนาเว็บต่อไปในปี 2023 ได้อย่างไร

Want to Connect?

I'm the creator of ZenStack, a toolkit that supercharges
Prisma ORM with a powerful access control layer and
unleashes its full potential for full-stack development.
Our goal is to let you save time writing boilerplate code
and focus on building what matters - the user experience.