WebAssembly เมื่อพลังที่ยิ่งใหญ่อยู่ในมือของคนทำเว็บ

ในงาน Tencent Open House ครั้งที่ 8 ที่ผ่านมา คุณ Phoomparin Mano ได้มาพูดถึง WebAssembly ซึ่งเป็นหัวข้อที่น่าสนใจมากๆ เรามาดูกันดีกว่าว่าเจ้า WebAssembly เนี่ย มันคืออะไร...

ก่อนอื่นต้องบอกก่อนว่า Assembly เป็น ภาษาโปรแกรมที่มีมานานมากกก… ก่อนสมัยผู้ใหญ่ลีตีกลองประชุมซะอีก ซึ่งมันเกิดขึ้นเพราะเราต้องการควบคุมเครื่องจักรโดยใช้คำสั่งที่มนุษย์และเครื่องจักรต่างก็เข้าใจกัน

ความพิเศษของ Assembly อย่างที่เรารู้กันคือมันระระเร็วววว !! เพราะมันแทบจะคุยภาษาเดียวกันกับฮาร์ดแวร์เลย ไม่ต้องผ่านการแปลอะไรมากมายที่ทำให้เสียเวลา

อ่าว? แล้วเกี่ยวอะไรกับเว็บไซต์ที่เราใช้กันทุกวันนี้! คือเมื่อก่อนเราอยากจะทำให้เว็บมีความสามารถมากกว่าแค่แสดงผล เราก็จะต้องเขียน JS ใช่มั้ยล่ะ พูดง่ายๆ ก็คือ ถ้าจะทำอะไรที่ HTML กับ CSS ทำไม่ได้ เราก็จะต้องใช้ JS

แต่ JS ก็ใช่ว่าจะดีเลิศประเสริฐศรีไปซะทุกอย่าง งานบางอย่าง เช่น การประมวลผลกราฟิก การคำนวณตัวเลขเยอะๆ JS เองก็เอาตัวไม่รอดเหมือนกัน ไม่เชื่อลองดู Benchmark นี้

เห็นมั้ยล่ะว่า JS มันช้ากว่า Assembly เยอะเลย งี้เราก็เปลี่ยนมาใช้ Assembly ไปเลยเซ่ จับมันมาเขียนในเว็บแทน JS ไปเลย … …. ลุย ~~!! #@&*^

ลองเขียนง่าย ๆ

โอ้โหหวววว O_O!! นี่หรือ Assembly แค่เอาเลขมาคูณกันยังเขียนยาวขนาดนี้ แต่เอาน่า! เพื่อแลกกับความเร็ว จัดไป…

แต่ประเด็นก็คือ แล้วเราจะเอาโค้ดที่เป็น low-level แบบนี้ไปรันบนเว็บยังไง? ในที่สุดก็เข้าเรื่อง! คำตอบคือเราจะต้องใช้ WebAssembly จ้าาา…

เอาง่ายๆ WebAssembly มันคือ Compiler ที่เอาไว้รันโค้ด low-level บนเว็บ โดยที่โค้ดนั้นจะต้องเขียนให้อยู่ใน format ของ .wasm ก่อน ซึ่งเจ้า format นี้เนี่ยมันจะเป็น binary format แน่นอนว่าโดยปกติแล้ว เราคงไม่เขียนโค้ดกันแบบนี้ตรงๆ T__T

วิธีที่เค้านิยมทำกันก็คือ เขียนด้วยภาษาอื่นๆ อย่าง C/C++ แทน แต่สุดท้ายก็ต้องเอามาแปลงเป็น .wasm ก่อนอะนะ ซึ่งการแปลงนั้น ก็แอบยุ่งยากนิดนึง คือจะแปลงไป .wasm ตรงๆ ไม่ได้ ต้องผ่าน LLVM ซะก่อน

ซึ่งเจ้า LLVM (Low Level Virtual Machine) เนี่ย มันเป็น Tool ที่เอาไว้แปลงภาษาโปรแกรมต่างๆ ให้อยู่ในรูปของ “ภาษากลาง” ที่พร้อมจะนำใช้งานต่อ ลองดูภาพนี้ๆ

พอแปลงโค้ด C/C++ ที่เราเขียน จนได้ “ภาษากลาง” มาแล้ว ขั้นตอนต่อไปก็คือ เราจะต้องแปลง “ภาษากลาง” นั้น ให้เป็น .wasm ด้วย Tool ที่มีชื่อว่า Emscripten ในที่สุด เราก็ได้ไฟล์ .wasm ที่พร้อมเอาไปใช้งานบนเว็บแล้ว!

แต่อย่าลืมว่า Emscripten นั้นสามารถแปลง “ภาษากลาง” ให้กลายเป็น .wasm ได้ นั่นแปลว่าเราสามารถเขียน WebAssembly ด้วยภาษาอะไรก็ได้ที่ LLVM รองรับ แล้วมันมีอะไรที่ดีกว่า C/C++ มั้ยน้าาา~

…

..

.

.

RUST ไง จะใครล่ะ!

มันคืออะไร เกียร์ของเด็กวิศวะหรอ? โน้ววว…ไม่ใช่อย่างงั้นนน !! มันคือภาษาโปรแกรมที่ถูกสร้างขึ้นมาเพื่อสั่งการฮาร์ดแวร์โดยตรง (Rust is a systems programming language) คำถามที่ตามมาภาษาใหม่อีกแล้วหรอ ทุกวันนี้ก็มีภาษาโปรแกรมมากมาย แล้วทำไมต้อง Rust…

คือ Rust มันเกิดมาทีหลังไง มันก็เลยถูกปรับปรุงเพื่อให้ดีขึ้นกว่าภาษาที่เกิดมาก่อน ซึ่งเหตุผลหลัก ๆ ที่ทำให้ Rust ดีกว่านั่นก็คือ

FAST → → → → →

Rust นั้นน เร็ว แรง ทะลุนรก !! เนื่องจากเจ้า Rust เองไม่มี GC (Garbage Collection) ที่คอยจัดการ Memory ให้กับเรา ทำให้เราสามารถจัดการเองได้หมด ซึ่งประสิทธิภาพของโปรแกรมขึ้นอยู่กับตัวเราล้วน ๆ

อีกเหตุผลก็คือ Rust ไม่ต้องผ่านกระบวนการ Emscripten เหมือนกับภาษาอย่าง C/C++ แล้ว เพราะตัว Rust เองตอนนี้สามารถแปลงเป็น .wasm ได้เลย

SAFE +-+-+-+-+-+

ความปลอดภัย Compiler ของ Rust นั่นจุกจิก มาก ๆ เขียนโค้ดได้ไม่ดีก็ด่า เขียนผิดก็ด่า แต่อย่างพึ่งน้อยใจไป ที่ด่าเนี่ย เพราะ Rust ต้องการให้ผลที่ได้จากโปรแกรมถูกต้องและมีประสิทธิภาพมากที่สุด ลองนึกถึงเหตุการณ์ที่เราสามารถเข้าไปวิ่งเล่นใน Memory ได้ แล้วสลับตำแหน่งของ Memory กลับไปกลับมา มันจะส่งผลต่อโปรแกรมอื่น ๆ แน่นอน

MODERN *********

สุดท้ายที่จะนำเสนอ คือ Rust นั้นทันสมัยแบบฝุด ๆ มี Feature ใหม่ ๆ ที่เราคุ้นเคยเช่น Array.map() ถ้าไปเขียน for Loop ใน C++ เองมันก็คงไม่เท่ซักเท่าไหร่

ความทันสมัยของ Rust อีกอย่างที่ดีงามมาก ๆ คือ Rust มี Package Manager! โดยจะใช้ชื่อว่า Cargo ซึ่งมันก็เหมือนกับ npm ของ Node.js นั่นแหละ

แล้วเวลาจะเขียนล่ะ ต้องทำยังไง ??

ข่าวดีก็คือ โค้ด Rust มันสามารถโหลดผ่าน Webpack ได้จ้าาา… เอาล่ะ! เรามาเริ่มเขียน Rust กันเลยดีกว่า

เริ่มด้วยการเขียนโค้ด Rust ง่ายๆ ไว้ในไฟล์นึง…

จากนั้นก็ Import โค้ด Rust ตะกี้ มาใช้งานร่วมกับ JS ที่เราคุ้นเคย ^0^

ส่วน Webpack ก็ให้เรา config เอาไว้แบบนี้

ผลที่ได้จากการรันโค้ด JS ที่เราโหลดโมดูลที่เขียนด้วย Rust มาใช้นั้นก็คือออ…

return value was 81

สุดยอดดด! เท่ากับว่าตอนนี้เราเขียน Rust ใน JS ได้แล้วใช่ป่ะ แต่ถ้าภาษา Rust ของเรายังไม่แข็งแรงเท่าไหร่ หรือมีบางงานที่เขียนด้วย Rust ยากกว่า JS มากกก… เราก็สามารถเขียน JS ใน Rust ได้เหมือนกัน โดยที่ Performance ยังเหมือนกับการเขียนด้วย Rust ล้วนๆ เลย

สมมติว่าเราอยากจะสร้าง Button ขึ้นมาซักอันนึงด้วย JS เราสามารถเอาโค้ด JS ไปผสมแบบนี้ได้เลย

ลืมบอกไปว่าท่านี้จะต้องใช้ Tool เพิ่มนิดนึง นั่นก็คือ cargo-web และ stdweb เพราะโดยปกติแล้ว Rust จะรันโค้ด JS ไม่ได้นั่นเอง ซึ่งผลที่ได้จะเป็นตามรูปด้านล่างนี้

เพียงแค่นี้เราก็จะสามารถใช้ Rust ร่วมกับ JS เพื่อเพิ่มประสิทธิภาพของเว็บเราให้เร็วสุดๆ ส่วนจะใช้กับตรงไหนบ้าง ก็อาจจะเลือกใช้กับงานในส่วนที่ต้องการ performance สูงๆ ก่อนก็ได้ ไม่ต้องเปลี่ยนเป็น Rust ทั้งหมดนะจ๊ะ~

ก็จบไปแล้วสำหรับการสรุปเนื้อหา WebAssembly จากงาน Tencent Open House ครั้งที่ 8 ที่ผ่านมา ส่วนจะมีหัวข้ออะไรดีๆ อีกนั้น เพื่อนๆ สามารถติดตามได้ที่แฟนเพจ Tencent Thailand Open House เลย~