What is WebAssembly – Wasm explain with example in telugu And English
🌐 What is WebAssembly (Wasm)?
WebAssembly (often shortened to Wasm) is a low-level, binary instruction format designed to run code on the web at ⚡ near-native speeds.
🌐 For years, JavaScript was the only language that could run natively inside a web browser. While JavaScript is incredibly versatile, it can struggle with highly intensive tasks like:
- 🎮 3D Gaming
- 🎬 Video Editing
- 🕶️ VR/AR (Virtual/Augmented Reality)
- 🧮 Complex Mathematical Simulations
⚙️ Wasm solves this by acting as a compilation target. You don’t usually write WebAssembly by hand. Instead, you write high-performance code in languages like C, C++, Rust, or Go, and compile it into a .wasm binary file. Your browser can then execute this binary file much faster than it could parse and run equivalent JavaScript.
💡 Key Things to Know About Wasm
- 🤝 It’s not a replacement for JavaScript: Wasm is designed to work alongside JavaScript. JavaScript handles the user interface, DOM manipulation, and frontend logic, while Wasm handles the heavy computational lifting.
- 🔒 It’s secure: It runs inside the same browser sandbox as JavaScript, meaning it strictly enforces the same-origin and security permissions.
- 🚀 It’s fast: Because it is delivered as pre-compiled binary code, the browser can load, parse, and execute it almost instantly.
🛠️ WebAssembly in Action: An Example
To understand how it works, let’s look at a simple example of writing a high-performance function in C, compiling it to WebAssembly, and using it inside a regular HTML/JavaScript webpage.
📝 Step 1: Write the Source Code (in C)
Imagine we need a function to perform a quick calculation. We write it in C for maximum efficiency.
C
// math.c
int add(int a, int b) {
return a + b;
}
🔄 Step 2: Compile to Wasm
Using a compiler toolchain like Emscripten, you convert that math.c file into a binary file called math.wasm.
Inside that .wasm file, the human-readable C code turns into a compact bytecode that looks like this (represented here in text format):
Code snippet
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)
💻 Step 3: Load and Run it in JavaScript
Now, you can fetch this binary file in your standard frontend web code and call the C function directly from JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wasm Demo</title>
</head>
<body>
<h1>WebAssembly Demo</h1>
<script>
// 1. Fetch the binary .wasm file
WebAssembly.instantiateStreaming(fetch('math.wasm'))
.then(result => {
// 2. Extract the exported 'add' function from the C code
const addNumbers = result.instance.exports.add;
// 3. Call the function just like standard JavaScript
const output = addNumbers(15, 25);
console.log("Result from Wasm:", output); // Outputs: 40
})
.catch(err => console.error("Error loading Wasm:", err));
</script>
</body>
</html>
🎯 When Should You Use It?
🟢 You don’t need Wasm for a standard business application, a blog, or a simple e-commerce site. JavaScript is perfectly fine (and often better) for those.
🔥 However, major web applications use Wasm today for performance-critical features:
- 🎨 Figma: Uses Wasm to render its complex, collaborative design canvas instantly.
- 📸 Adobe Photoshop Web: Uses Wasm to bring decades worth of legacy C++ photo-editing algorithms directly into the browser.
- 🌍 Google Earth: Compiles its massive 3D rendering engine to Wasm so it runs smoothly on any web browser without extra plugins.
🌐 WebAssembly (Wasm) అంటే ఏమిటి?
WebAssembly (దీన్ని సింపుల్ గా Wasm అంటారు) అనేది ఒక low-level, binary instruction format. వెబ్ లో కోడ్‌ను ⚡ near-native speeds (అంటే సిస్టమ్ లో రన్ అయినంత ఫాస్ట్‌గా) రన్ చేయడానికి దీన్ని డిజైన్ చేశారు.
🌐 చాలా ఏళ్లుగా, web browser లో natively రన్ అవ్వడానికి JavaScript మాత్రమే ఏకైక language గా ఉండేది. JavaScript చాలా versatile (బహుముఖ ప్రజ్ఞ కలది) అయినప్పటికీ, కింద పేర్కొన్న highly intensive tasks చేసేటప్పుడు ఇది కాస్త స్ట్రగుల్ అవుతుంది:
- 🎮 3D Gaming
- 🎬 Video Editing
- 🕶️ VR/AR
- 🧮 Complex Mathematical Simulations
⚙️ Wasm ఈ ప్రాబ్లమ్‌ను ఒక compilation target గా మారి సాల్వ్ చేస్తుంది. మీరు సాధారణంగా WebAssembly ని చేత్తో రాయరు. దానికి బదులుగా, మీరు C, C++, Rust, లేదా Go లాంటి high-performance languages లో కోడ్ రాసి, దాన్ని ఒక .wasm binary file గా compile చేస్తారు. దీనివల్ల మీ browser ఈ binary file ను సాధారణ JavaScript కంటే చాలా వేగంగా execute చేయగలుగుతుంది.
💡 Wasm గురించి తెలుసుకోవాల్సిన ముఖ్యమైన విషయాలు:
- 🤝 ఇది JavaScript కి రీప్లేస్‌మెంట్ కాదు (It’s not a replacement for JavaScript): Wasm అనేది JavaScript తో కలిసి పనిచేయడానికి డిజైన్ చేయబడింది. User interface, DOM manipulation, మరియు logic ని JavaScript చూసుకుంటే, heavy computational lifting (కష్టమైన ప్రాసెసింగ్) అంతా Wasm చూసుకుంటుంది.
- 🔒 ఇది సురక్షితమైనది (It’s secure): ఇది JavaScript లాగే browser sandbox లోపల రన్ అవుతుంది, అంటే దీనికి కూడా అదే same-origin మరియు security permissions వర్తిస్తాయి.
- 🚀 ఇది చాలా ఫాస్ట్ (It’s fast): ఇది pre-compiled binary code రూపంలో రావడం వల్ల, browser దీన్ని దాదాపు తక్షణం (almost instantly) load, parse, మరియు execute చేయగలదు.
🛠️ WebAssembly ఎలా పనిచేస్తుందో ఒక Example చూద్దాం
ఇది ఎలా పనిచేస్తుందో అర్థం చేసుకోవడానికి, C language లో ఒక high-performance function రాసి, దాన్ని WebAssembly కి compile చేసి, ఒక regular HTML/JavaScript webpage లో ఎలా వాడుకోవాలో చూద్దాం.
📝 Step 1: Source Code రాయడం (C లో)
ఒక calculation చేయడానికి మనకు ఒక function కావాలని అనుకుందాం. Maximum efficiency కోసం మనం దీన్ని C లో రాస్తాం.
C
// math.c
int add(int a, int b) {
return a + b;
}
🔄 Step 2: Wasm కి Compile చేయడం
Emscripten లాంటి ఒక compiler toolchain ని ఉపయోగించి, మనం ఆ math.c file ను math.wasm అనే binary file గా మారుస్తాం.
ఆ .wasm file లోపల, మనుషులు చదవగలిగే C code ఒక compact bytecode గా మారుతుంది. అది చూడటానికి (text format లో) ఇలా ఉంటుంది:
Code snippet
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)
💻 Step 3: దీన్ని JavaScript లో Load చేసి Run చేయడం
ఇప్పుడు, మీరు ఈ binary file ని మీ standard frontend web code లో fetch చేసి, ఆ C function ని నేరుగా JavaScript నుండి call చేయవచ్చు.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wasm Demo</title>
</head>
<body>
<h1>WebAssembly Demo</h1>
<script>
// 1. Binary .wasm file ను Fetch చేయడం
WebAssembly.instantiateStreaming(fetch('math.wasm'))
.then(result => {
// 2. C code నుండి export అయిన 'add' function ని ఎక్స్‌ట్రాక్ట్ చేయడం
const addNumbers = result.instance.exports.add;
// 3. Normal JavaScript లాగే ఈ function ని call చేయడం
const output = addNumbers(15, 25);
console.log("Result from Wasm:", output); // Outputs: 40
})
.catch(err => console.error("Error loading Wasm:", err));
</script>
</body>
</html>
🎯 దీన్ని ఎప్పుడు ఉపయోగించాలి?
🟢 ఒక సాధారణ business application, blog, లేదా ఒక simple e-commerce site కోసం మీకు Wasm అవసరం లేదు. వాటికి JavaScript చాలా పర్ఫెక్ట్ గా సరిపోతుంది (ఇంకా చెప్పాలంటే అదే బెస్ట్).
🔥 కానీ, ఈ రోజుల్లో పెద్ద పెద్ద web applications తమ performance-critical features కోసం Wasm ని వాడుతున్నాయి:
- 🎨 Figma: తమ కాంప్లెక్స్ కాలాబొరేటివ్ డిజైన్ కాన్వాస్ (collaborative design canvas) ను ఇన్స్టంట్‌గా render చేయడానికి Wasm ని వాడుతుంది.
- 📸 Adobe Photoshop Web: దశాబ్దాల నాటి తమ పాత C++ photo-editing algorithms ని నేరుగా browser లోకి తీసుకురావడానికి Wasm ని upgradation కోసం ఉపयोగిస్తుంది.
- 🌍 Google Earth: దీని భారీ 3D rendering engine ను Wasm కి compile చేయడం వల్లే, ఇది ఎటువంటి plugins లేకుండా ఏ web browser లోనైనా చాలా స్మూత్ గా రన్ అవుతుంది.
