SlideShare a Scribd company logo
1 of 22
WASM - WEB ASSEMBLY KẺ
HUỶ DIỆT JS HAY NGƯỜI
BẠN HỮU LÂU DÀI
NGUYỄN DUY ĐỨC
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
WASM - WEB ASSEMBLY
1. Giới thiệu sơ lược về WASM.
2. LLVM, ASM.js, PNaCL và Emscripten.
3. Cấu trúc chi tiết của WASM.
4. Tương lai nào cho WASM trên nền tảng Web.
5. Liệu WASM có thay thế Javascript.
6. Ứng dụng của WASM qua một số demo.
7. Q&A.
GIỚI THIỆU SƠ LƯỢC VỀ
WASM
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
ĐÔI CHÚT VỀ WASM
▸ WASM - WAST.
▸ 17 tháng 6 năm 2015.
▸ 15 tháng 3 năm 2016.
▸ Tạo ra trải nghiệm tốt hơn JS hiện tại.
▸ Hướng tới việc có thể viết ứng dụng
nền cho web bằng bất kì ngôn ngữ nào
(Hiện tại C/C++ đã hỗ trợ việc chuyển
đổi).
▸ Việc triển khai WASM hỗ trợ trên trình
duyệt dựa trên ASM.js và PNaCL.
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
TIÊU CHÍ CỦA WASM
▸ Nhanh và Hiệu quả.
▸ An toàn.
▸ Mở và Dễ dàng trong xử lý lỗi.
▸ Trở thành cốt yếu trong nền tảng
web nguồn mở.
LLVM - ASM.js - PNaCL và
Emscripten
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
LLVM
▸ Máy ảo cấp thấp.
▸ Năm 2000 (Vikram Adve và Chris
Lattner).
▸ Mã nguồn mở.
▸ Đa dụng và đang trở thành trình biên
dịch đa dụng tiêu chuẩn do không phụ
thuộc nền tảng (Ứng dụng: CUDA -
NVIDIA, ByteCode, Swift - Apple…).
▸ Trở thành dự án tổ hợp.
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
LLVM
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
ASM.JS
▸ Do Firefox phát hành và ứng dụng trong nhiều trình duyệt và V8 engine.
▸ ASM.js là một tập hợp con của Javascript được sử dụng như một ngôn
ngữ cấp thấp, hiệu quả nhằm tối ưu trình biên dịch. Nó mô tả lại một
phần tập lệnh nhỏ của thư viện C/C++ giúp tối ưu máy ảo và cho phép
việc kết hợp nhuần nhuyễn từ những ngôn ngữ static type và dynamic
type như C/C++ được tối ưu trước khi chạy và chuyển qua Javascript.
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
PORTABLE NATIVE
CLIENT
▸ Được Google phát hành.
▸ Máy ảo giúp việc các dev không phụ thuộc vào nền tảng chỉ cần quan
tâm đến việc lập trình và PNaCl sẽ giúp thực thi những mã lệnh đó trên
mọi trình duyệt mà vẫn đảm bảo được tính bảo mật - hiệu năng và tính
mềm dẻo (khả chuyển).
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀITEXT
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
EMSCRIPTEN
▸ Là một máy ảo chuyển đổi mã C/C++ thành Javascript dựa trên máy ảo
bậc thấp LLVM, Clang, llvm-gcc và tập lệnh tối ưu ASM.js.
Cấu trúc chi tiết của WASM
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
Tương lAi nào cho WASM
trên nền tảng Web
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
Liệu WASM có thay thế
Javascript
WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU
DÀI
TRIỆU GỌI WASM TRONG JAVASCRIPT
fetch('memory.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(results => {
// add your code here
});
Ứng dụng của WASM qua
một số demo
Q&A

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Wasm

  • 1.
  • 2. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI NGUYỄN DUY ĐỨC
  • 3. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI WASM - WEB ASSEMBLY 1. Giới thiệu sơ lược về WASM. 2. LLVM, ASM.js, PNaCL và Emscripten. 3. Cấu trúc chi tiết của WASM. 4. Tương lai nào cho WASM trên nền tảng Web. 5. Liệu WASM có thay thế Javascript. 6. Ứng dụng của WASM qua một số demo. 7. Q&A.
  • 4. GIỚI THIỆU SƠ LƯỢC VỀ WASM
  • 5. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI ĐÔI CHÚT VỀ WASM ▸ WASM - WAST. ▸ 17 tháng 6 năm 2015. ▸ 15 tháng 3 năm 2016. ▸ Tạo ra trải nghiệm tốt hơn JS hiện tại. ▸ Hướng tới việc có thể viết ứng dụng nền cho web bằng bất kì ngôn ngữ nào (Hiện tại C/C++ đã hỗ trợ việc chuyển đổi). ▸ Việc triển khai WASM hỗ trợ trên trình duyệt dựa trên ASM.js và PNaCL.
  • 6. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI TIÊU CHÍ CỦA WASM ▸ Nhanh và Hiệu quả. ▸ An toàn. ▸ Mở và Dễ dàng trong xử lý lỗi. ▸ Trở thành cốt yếu trong nền tảng web nguồn mở.
  • 7. LLVM - ASM.js - PNaCL và Emscripten
  • 8. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI LLVM ▸ Máy ảo cấp thấp. ▸ Năm 2000 (Vikram Adve và Chris Lattner). ▸ Mã nguồn mở. ▸ Đa dụng và đang trở thành trình biên dịch đa dụng tiêu chuẩn do không phụ thuộc nền tảng (Ứng dụng: CUDA - NVIDIA, ByteCode, Swift - Apple…). ▸ Trở thành dự án tổ hợp.
  • 9. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI LLVM
  • 10. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI ASM.JS ▸ Do Firefox phát hành và ứng dụng trong nhiều trình duyệt và V8 engine. ▸ ASM.js là một tập hợp con của Javascript được sử dụng như một ngôn ngữ cấp thấp, hiệu quả nhằm tối ưu trình biên dịch. Nó mô tả lại một phần tập lệnh nhỏ của thư viện C/C++ giúp tối ưu máy ảo và cho phép việc kết hợp nhuần nhuyễn từ những ngôn ngữ static type và dynamic type như C/C++ được tối ưu trước khi chạy và chuyển qua Javascript.
  • 11. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI
  • 12. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI PORTABLE NATIVE CLIENT ▸ Được Google phát hành. ▸ Máy ảo giúp việc các dev không phụ thuộc vào nền tảng chỉ cần quan tâm đến việc lập trình và PNaCl sẽ giúp thực thi những mã lệnh đó trên mọi trình duyệt mà vẫn đảm bảo được tính bảo mật - hiệu năng và tính mềm dẻo (khả chuyển).
  • 13. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀITEXT
  • 14. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI EMSCRIPTEN ▸ Là một máy ảo chuyển đổi mã C/C++ thành Javascript dựa trên máy ảo bậc thấp LLVM, Clang, llvm-gcc và tập lệnh tối ưu ASM.js.
  • 15. Cấu trúc chi tiết của WASM
  • 16. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI
  • 17. Tương lAi nào cho WASM trên nền tảng Web
  • 18. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI
  • 19. Liệu WASM có thay thế Javascript
  • 20. WASM - WEB ASSEMBLY KẺ HUỶ DIỆT JS HAY NGƯỜI BẠN HỮU LÂU DÀI TRIỆU GỌI WASM TRONG JAVASCRIPT fetch('memory.wasm').then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes) ).then(results => { // add your code here });
  • 21. Ứng dụng của WASM qua một số demo
  • 22. Q&A

Editor's Notes

  1. Nhanh và Hiệu quả: Dựa vào máy ảo cấp thấp được thiết kế để tối ưu kích thước cũng như thời gian tải của tệp tin dạng nhị phân. 2. An toàn WASM cung cấp một môi trường chạy an toàn trên thanh ghi, có thể triển khai bằng các máy ảo Javascript hiện có. Khi được nhúng vào nền tảng web, WASM sẽ tuần theo các chính sách bảo mật đã tồn tại trên trình duyệt. 3. Tính mở và dễ dàng bắt lỗi WASM được thiết kế đơn giản dưới dạng tệp văn bản giúp cho việc tìm lỗi, kiểm thử, thử nghiệm cũng như quá trình tối ưu hoá bằng tay. Định dạng văn bản của tệp tin này sẽ được sử dụng để xem mã nguồn của các module wasm trên nền web. 4. Trở thành cốt yếu trong nền tảng web nguồn mở: WASM được thiết kế để duy trì tính tương thích ngược (cho phép phần mềm chạy trên phần cứng mới) trên nền tảng web. Các module WASM có thể được sử dụng thông qua Javascript và truy cập vào các chức năng tương tự nhau trên các trình duyệt thông qua Javascript Web API. WASM có thể chạy được mà không cần nhúng vào web.
  2. • Front-ends • AST • IR • LLVM Optimizer • LLVM Code Generator • Backends • assembly code • byte code (object code) • Linker • Platform Architecture • The LLVM project/infrastructure: This is an umbrella for several projects that, together, form a complete compiler: frontends, backends, optimizers, assemblers, linkers, libc++, compiler-rt, and a JIT engine. The word "LLVM" has this meaning, for example, in the following sentence: "LLVM is comprised of several projects". • An LLVM-based compiler: This is a compiler built partially or completely with the LLVM infrastructure. For example, a compiler might use LLVM for the frontend and backend but use GCC and GNU system libraries to perform the final link. LLVM has this meaning in the following sentence, for example: "I used LLVM to compile C programs to a MIPS platform". • LLVM libraries: This is the reusable code portion of the LLVM infrastructure. For example, LLVM has this meaning in the sentence: "My project uses LLVM to generate code through its Just-in-Time compilation framework". • LLVM core: The optimizations that happen at the intermediate language level and the backend algorithms form the LLVM core where the project started. LLVM has this meaning in the following sentence: "LLVM and Clang are two different projects". • The LLVM IR: This is the LLVM compiler intermediate representation. LLVM has this meaning when used in sentences such as "I built a frontend that translates my own language to LLVM".