diff --git a/docs/webassembly/introduction.md b/docs/webassembly/introduction.md index 50afe22..c69034b 100644 --- a/docs/webassembly/introduction.md +++ b/docs/webassembly/introduction.md @@ -124,7 +124,7 @@ Whilst WebAssembly primary format is binary, it also has a human-readable text f ![text format](https://github.com/user-attachments/assets/0e3c9e90-08da-4d72-9908-b0d75cc92d13) -## WebAssembly Modules +## Modules Like any other high level programming language, WebAssembly code is organized into modules. A module is a collection of functions, types, tables, memories, and globals. It's backbones of WebAssembly. @@ -177,10 +177,8 @@ Apart from functions modules can have other components like: **Types**: They are used to define the types of functions, tables, memories, and globals. They can be imported from other modules or defined within the module. - ![beyond functions](https://github.com/user-attachments/assets/4dec5e7a-de30-4c5f-b9fe-769d7c953747) - ### Importing and Exporting Modules can declare dependencies, pulling in necessary functions, memories, tables, and globals from other modules. This is done using the `import` keyword. For example if a module requires the current date from the JavaScript, it would import the function like: @@ -208,3 +206,61 @@ For eg: If a module has a function to access to Database it can't directly acces ![security considerations](https://github.com/user-attachments/assets/4a34f53d-77d5-41fc-92aa-fa8fcf42c290) +### Portability and Universality + +WebAssembly offers cross-platform compatibility. Modules are platform-agnostic can run on any device that supports WebAssembly. For example a physics simulation module once created can be run on PC's browser, a smartphone, or even a smart TV ensuring consistent user experience, behavior, and performance. + +![portability and universality](https://github.com/user-attachments/assets/186de57e-4541-4b8c-894d-3a2491d39e5a) + +## Instructions and Data Types + +### Why we need instructions and data types? + +It's more like as the verbs of a language, dictating what actions to perform. And data types are like nouns, specifying what kind of data to work with. Together they form the building blocks of WebAssembly. + +### Instructions + +Like we give instructions verbally, we give instructions in WebAssembly. For example, to add two numbers, we use the `i32.add` instruction. It's a binary instruction that tells the WebAssembly engine to add two 32-bit integers. + +As WebAssembly instructions are low-level the execution is fast. + +Instructions - References: + +- `.add`: Add two numbers +- `.sub`: Subtract two numbers +- `.mul`: Multiply two numbers +- `.div`: Divide two numbers +- `.eq`: Check if two numbers are equal +- `.lt`: Check if one number is less than another +- `.gt`: Check if one number is greater than another +- `.block`: Define a block of code +- `.loop`: Define a loop +- `.br`: Branch to a label +- `.load`: Load data from memory +- `.store`: Store data in memory + +![instructions and data types](https://github.com/user-attachments/assets/253d9410-4b43-4fbd-b64a-d78e6ba32437) + +### Data Types + +Data types define the kind of data we can work with. It help set the rule and how the data is stored and processed. For example in a weather app the temperature in once city is a whole number like 25°C, while in another city it's a decimal number like 25.5°C. So, we represent using `i32` (32-bit integer) and `f32` (32-bit floating point number) respectively. + +Data types are very essential to make the code is predictable by defining the kind of data and hoe it's used, we avoid errors and ensure efficient use of memory. For example imagine pouring water into a glass. Each glass (data type) can hold a specific amount and shape of water (data). If we try to pour too much water or wrong type of liquid, it either won't fit or won't function as intended. Same goes with data types, ensuring data fits well and works as intended. + +Data Types - References: + +- `i32`: 32-bit integer +- `i64`: 64-bit integer +- `f32`: 32-bit floating point number +- `f64`: 64-bit floating point number +- `v128`: 128-bit vector +- `funcref`: Function reference +- `externref`: External reference +- `anyref`: Any reference + +![instructions and data types](https://github.com/user-attachments/assets/ff3cd2c3-9264-4ef1-8531-344cbe592756) + +### Symbiosis of Instructions and Data Types + +Instructions and data types work together to perform specific tasks. For example, to add two numbers, we use the `i32.add` instruction. It's a binary instruction that tells the WebAssembly engine to add two 32-bit integers. Here, `i32` is the data type that specifies the kind of data we are working with, and `add` is the instruction that tells the engine what action to perform. +