Web Assembly is a new web standard that defines a binary format for executable code in web pages. It is meant to enable executing code nearly as quickly as native machine code. Web Assembly allows other languages like C/C++ to be compiled to run in the browser. It has performance gains over JavaScript due to execution speed and smaller file sizes. Major browsers now support Web Assembly, allowing its use without plugins. Common use cases include games, media editing, peer-to-peer apps, and scientific/CAD applications.

1. WEB ASSEMBLY
YOUSIF A. SHALABY

2. Agenda:
1. Past and Current Web clientTechnologies
2. What IsWeb Assembly?
3. Is It JavaScript Replacement?
4. Web Assembly History
5. WhyWeb Assembly?
6. How ItWorks ?
7. HowTo BuildWebAssembly ?
8. Example Of Sites UsesWeb Assembly

3. Agenda(continue):
9. Use Cases
10. Browser Support
11. Next Session

4. 1-Past Technologies:
• ActiveX
• Flash
• Applets
• QuickTime
• Silverlight

5. 1-Current And Future :
•JavaScript
•Web Assembly

6. 2-What Is WebAssembly?
WebAssembly ?

7. 2-WebAssembly is:
• WebAssembly is a web standard that defines a binary format and a
corresponding assembly-like text format for executable code inWeb
pages. It is meant to enable executing code nearly as quickly as
running native machine code. => . Wikipedia
• WebAssembly (abbreviated Wasm) is a binary instruction format for a
stack-based virtual machine.Wasm is designed as a portable target
for compilation of high-level languages like C/C++/Rust, enabling
deployment on the web for client and server applications. https://webassembly.org/

8. 3-Is It JavaScript Replacement?

9. 4- Web Assembly History
June 2015 :
First
Announced
March 2016:
Definition of
core features
October 2016 :
Browser MVP
preview
Jan.2017 : Logo
Choosen
August :2017
:W3CWeb
Assembly
Working
Group
Feb.2018: W3c
Specification
draft

10. 5. Why Web Assembly?
• Other Language Can compiled toWeb Assembly
• Performance gains (Execution and file size)
• Supported by all Major Browsers
• Use of JS runtime without need for plugins
• Secure

11. 6-How It Works ?
Parse Compile Optimize Execute GC
Browser
Decode Parse+Compile Execute

12. 6-How It Works ?
Load
Run(Params)
Call Functions
JavaScript Runtime

13. 7-How To Build Web Assembly ?
• Using Online Studio https://webassembly.studio/
Main.wat
Main.wasm
Convert

14. 7-How To Build Web Assembly ?(Cont.)
• Compile other language Code toWASM
• C++
• C#
C++ Compile
Emscripten toolchain
runtime
C#/Razor Compile DLL
runtime
Run Mono.wasm
Microsoft BlazorToolchain

15. 7-How To Build Web Assembly ?(Cont.)
• Using existing WebAssembly in JS

16. 8-Examples
• https://webassembly.org/demo/Tanks/
• https://www.funkykarts.rocks/demo.html

17. 9-Use Cases
• mage / video editing.
• Games:
• Peer-to-peer applications (games, collaborative editing, decentralized and centralized).
• Music applications (streaming, caching).
• Image recognition.
• Live video augmentation (e.g. putting hats on people’s heads).
• VR and augmented reality (very low latency).
• CAD applications.
• Scientific visualization and simulation.
• Interactive educational software, and news articles.

18. 10-Browser Support
Source : https://caniuse.com/#feat=wasm

19. Resources
• https://webassembly.org/
• https://developer.mozilla.org/en-US/docs/WebAssembly
• http://www.wasmrocks.com/

20. Next Session
Microsoft Blazor.Net

21. ThankYou