Introduction for web assembly

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