SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Downloaden Sie, um offline zu lesen
ITERA UKRAINE 2017
WEB
ASSEMBLY
OLEKSANDR SKACHKOV @alSkachkov
ABOUT ME
• Itera’s Software Architect
• Itera’s FrontEnd Tech Lead
• WebKit contributor from 2015 & JS hacker
• Twitter: @alSkachkov
• Email: oleksandr.skachkov@itera.no
WEB ASSEMBLY
GAME CHANGER
• What was before
• WASM – why it is needed
• WASM – what is next
HOW JS EVOLVE
• Netscape Navigator 2.0 in 1995:
• JS was born
• NPAPI – for Java plugins
• IE 3.0 - ActiveX
• Flash player initial release - 1996
• HTML5
• JiT – in modern JS engines - 2008
• Aggressive optimization algorithms and ASM.js
WHAT IS WRONG WITH JS?
• Performance
• Access to OS features
THE STRENGTH IS A WEAKNESS
• Easy to learn
• Executes in browser environment
• Dynamic typing
=
• LOW PERFORMANCE!
HOW BROWSER EXECUTE JS
HOW BROWSER EXECUTE JS
HOW BROWSER EXECUTE JS
HOW TO SOLVE BY TOOLS
• Frameworks
• Minifiers
• Optimizers – Prepack
• Rules and Hucks
TRIES TO SOLVE IN BROWSER
• WebAssembly, a bytecode standard for
web browsers
• Announced in 17 June 2015
• Will be developed by major Browsers
• Developed by WebAssembly Working
Group
WebAssembly - Game Changer
• Build target
• Binary format
• Support integration with JS
• Close IR of the JS Engines
• WASM 1.2x speed of the native code
What is WebAssembly
WEBASSEMBLY IS BUILD TARGET
• Build target – for C/C++/Rust
WEBASSEMBLY IS BUILD TARGET
• Build target – for C/C++/Rust
• Used intermediate representation – S
expression WAT/WAST
WEBASSEMBLY IS BUILD TARGET
• Build target – for C/C++/Rust
• Used intermediate representation – S
expression WAT/WAST
• Binary format - WASM
HOW BROWSER EXECUTE WASM
JS
WASM
INTERACTION WITH JAVASCRIPT
We can use JS function in WASM and WASM function in JS
INTERACTION WITH JAVASCRIPT
We can use JS function in WASM and WASM function in JS
USAGE SCENARIOS
• Write faster version of the specific application
• Using existing C libraries in browser
• Reuse algorithm from service side
• Distribute whole application as WebAsm
SECURITY
• Limit set of operation
• Controlled operation with memory
CAN WE USE WEBASSEMBLY?
Global support 57%
Yes we can
CURRENT STATUS AND FUTURE
Current
• MVP
• No finalized spec (Experimental feature)
Future:
• GC
• Threads
• Tools
EXAMLES
• Video editor https://d2jta7o2zej4pf.cloudfront.net/
• Game: http://webassembly.org/demo/Tanks/
• Garden for Mozilla: https://s3.amazonaws.com/mozilla-
games/ZenGarden/EpicZenGarden.html
• TypeScript for WA: https://github.com/AssemblyScript/assemblyscript
QUESTIONS?
WebAssembly Overview

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Web assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail SorokovskyWeb assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail Sorokovsky
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
Web Assembly Big Picture
Web Assembly Big PictureWeb Assembly Big Picture
Web Assembly Big Picture
 
Introduction to webassembly
Introduction to webassemblyIntroduction to webassembly
Introduction to webassembly
 
React for Beginners
React for BeginnersReact for Beginners
React for Beginners
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
Rxjs ppt
Rxjs pptRxjs ppt
Rxjs ppt
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
react redux.pdf
react redux.pdfreact redux.pdf
react redux.pdf
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Javascript
JavascriptJavascript
Javascript
 
Async js
Async jsAsync js
Async js
 
Angular and The Case for RxJS
Angular and The Case for RxJSAngular and The Case for RxJS
Angular and The Case for RxJS
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
Angular Observables & RxJS Introduction
Angular Observables & RxJS IntroductionAngular Observables & RxJS Introduction
Angular Observables & RxJS Introduction
 
Introduction to NodeJS
Introduction to NodeJSIntroduction to NodeJS
Introduction to NodeJS
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 

Ähnlich wie WebAssembly Overview

Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
OdessaJS Conf
 

Ähnlich wie WebAssembly Overview (20)

WebAssembly overview. KievJS meetup
WebAssembly overview. KievJS meetupWebAssembly overview. KievJS meetup
WebAssembly overview. KievJS meetup
 
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
Oleksandr Skachkov - WebAssembly vs JavaScript: What is faster?
 
WebAssembly vs JavaScript: What is faster?
WebAssembly vs JavaScript: What is faster?WebAssembly vs JavaScript: What is faster?
WebAssembly vs JavaScript: What is faster?
 
WebAssemlby vs JavaScript
WebAssemlby vs JavaScriptWebAssemlby vs JavaScript
WebAssemlby vs JavaScript
 
JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript
JS Fest 2018. Александр Скачков. WebAssembly vs JavaScriptJS Fest 2018. Александр Скачков. WebAssembly vs JavaScript
JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript
 
JavaScript Engine and WebAssembly
JavaScript Engine and WebAssemblyJavaScript Engine and WebAssembly
JavaScript Engine and WebAssembly
 
Intro to Node.js
Intro to Node.jsIntro to Node.js
Intro to Node.js
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
Node.JS: Do you know the dependency of your dependencies dependency
Node.JS: Do you know the dependency of your dependencies dependencyNode.JS: Do you know the dependency of your dependencies dependency
Node.JS: Do you know the dependency of your dependencies dependency
 
Oleksandr Skachkov "How to run WebAssembly in your React web application"
Oleksandr Skachkov "How to run WebAssembly in your React web application"Oleksandr Skachkov "How to run WebAssembly in your React web application"
Oleksandr Skachkov "How to run WebAssembly in your React web application"
 
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG RomaJava 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
 
DevDay 2018 - Blazor
DevDay 2018 - BlazorDevDay 2018 - Blazor
DevDay 2018 - Blazor
 
Blazor.pptx
Blazor.pptxBlazor.pptx
Blazor.pptx
 
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
Blazor
BlazorBlazor
Blazor
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
Blazor v1.1
Blazor v1.1Blazor v1.1
Blazor v1.1
 
Building a Web Frontend with Microservices and NGINX Plus
Building a Web Frontend with Microservices and NGINX PlusBuilding a Web Frontend with Microservices and NGINX Plus
Building a Web Frontend with Microservices and NGINX Plus
 

Kürzlich hochgeladen

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
masabamasaba
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 

Kürzlich hochgeladen (20)

Harnessing ChatGPT - Elevating Productivity in Today's Agile Environment
Harnessing ChatGPT  - Elevating Productivity in Today's Agile EnvironmentHarnessing ChatGPT  - Elevating Productivity in Today's Agile Environment
Harnessing ChatGPT - Elevating Productivity in Today's Agile Environment
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 

WebAssembly Overview

  • 2. ABOUT ME • Itera’s Software Architect • Itera’s FrontEnd Tech Lead • WebKit contributor from 2015 & JS hacker • Twitter: @alSkachkov • Email: oleksandr.skachkov@itera.no
  • 3. WEB ASSEMBLY GAME CHANGER • What was before • WASM – why it is needed • WASM – what is next
  • 4. HOW JS EVOLVE • Netscape Navigator 2.0 in 1995: • JS was born • NPAPI – for Java plugins • IE 3.0 - ActiveX • Flash player initial release - 1996 • HTML5 • JiT – in modern JS engines - 2008 • Aggressive optimization algorithms and ASM.js
  • 5. WHAT IS WRONG WITH JS? • Performance • Access to OS features
  • 6. THE STRENGTH IS A WEAKNESS • Easy to learn • Executes in browser environment • Dynamic typing = • LOW PERFORMANCE!
  • 10. HOW TO SOLVE BY TOOLS • Frameworks • Minifiers • Optimizers – Prepack • Rules and Hucks
  • 11. TRIES TO SOLVE IN BROWSER
  • 12. • WebAssembly, a bytecode standard for web browsers • Announced in 17 June 2015 • Will be developed by major Browsers • Developed by WebAssembly Working Group WebAssembly - Game Changer
  • 13. • Build target • Binary format • Support integration with JS • Close IR of the JS Engines • WASM 1.2x speed of the native code What is WebAssembly
  • 14. WEBASSEMBLY IS BUILD TARGET • Build target – for C/C++/Rust
  • 15. WEBASSEMBLY IS BUILD TARGET • Build target – for C/C++/Rust • Used intermediate representation – S expression WAT/WAST
  • 16. WEBASSEMBLY IS BUILD TARGET • Build target – for C/C++/Rust • Used intermediate representation – S expression WAT/WAST • Binary format - WASM
  • 17. HOW BROWSER EXECUTE WASM JS WASM
  • 18. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
  • 19. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
  • 20. USAGE SCENARIOS • Write faster version of the specific application • Using existing C libraries in browser • Reuse algorithm from service side • Distribute whole application as WebAsm
  • 21. SECURITY • Limit set of operation • Controlled operation with memory
  • 22. CAN WE USE WEBASSEMBLY? Global support 57% Yes we can
  • 23. CURRENT STATUS AND FUTURE Current • MVP • No finalized spec (Experimental feature) Future: • GC • Threads • Tools
  • 24. EXAMLES • Video editor https://d2jta7o2zej4pf.cloudfront.net/ • Game: http://webassembly.org/demo/Tanks/ • Garden for Mozilla: https://s3.amazonaws.com/mozilla- games/ZenGarden/EpicZenGarden.html • TypeScript for WA: https://github.com/AssemblyScript/assemblyscript