WASM from Zero

本课程是 Rust for Data Engineering 专项课程的一部分

位教师：Noah Gift

包含在中

了解更多

5个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

5 小时完成

灵活的计划

自行安排学习进度

5个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

5 小时完成

灵活的计划

自行安排学习进度

您将学到什么

Compile Rust to WebAssembly and render to the HTML5 canvas with a deterministic Canvas2DRenderer
Build Elm-style components with update/view, then compose them with a small router into a multi-screen app
Package with wasm-pack and verify VDOM behavior against committed snapshot fixtures for byte-identical CI runs

要了解的详细信息

可分享的证书

添加到您的领英档案

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

本课程是 Rust for Data Engineering 专项课程专项课程的一部分

在注册此课程时，您还会同时注册此专项课程。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有5个模块

WASM from Zero is a hands-on introduction to WebAssembly for engineers who want to ship fast, portable, sandboxed code that runs anywhere: the browser, the edge, the server, and embedded devices. You will learn what WebAssembly is, why it was designed, how it relates to Rust, and how to compile Rust libraries to .wasm modules that can be invoked from JavaScript, Python, or any host language. The course walks through the toolchain (rustc target wasm32, wasm-bindgen, wasm-pack, wasmtime, wasmer), the WASM component model, WASI, and the security and performance trade-offs that make WebAssembly a compelling deployment target for data engineering, ML inference, plugin systems, and serverless workloads. By the end of this course, you will be able to build, package, deploy, and debug a Rust-to-WASM data processing module, embed it in a web page and a server runtime, and reason about when WASM is the right tool versus a native binary or a container. This is part of the Rust for Data Engineering specialization and assumes basic Rust familiarity from Rust From Zero.

Covers the HTML5 canvas element as a 2D raster surface, every draw is immediate-mode, Canvas2D vs WebGL vs WebGPU, Canvas2DRenderer wraps a web_sys::CanvasRenderingContext2d and exposes the same draw API as the terminal renderer, and every method takes an aprender_present_core::Color and a Rect, not raw f64s.

涵盖的内容

6个视频6篇阅读材料

6个视频总计9分钟

1.1.1 The Browser Canvas2分钟
1.1.2 Presentar Canvas2d Renderer2分钟
1.1.3 Nan Safe Coords Color Clamp1分钟
1.2.1 App Mount Returns Result2分钟
1.2.2 JsValue Color Roundtrip2分钟
1.2.3 Widget Trait Paint Canvas Rect1分钟

6篇阅读材料总计51分钟

About This Course10分钟
Key Terms: The Browser Canvas as a 2D Draw Surface10分钟
Machine Code to WASM1分钟
Reflection: The Browser Canvas as a 2D Draw Surface10分钟
Key Terms: App::mount Returns Result, Not Panic10分钟
Reflection: App::mount Returns Result, Not Panic10分钟

Port the Elm-style init / update / view shape from the terminal app to the browser without changing its meaning. State lives in WebAssembly linear memory, update is the single mutator, and view returns a Virtual DOM. Then plug the loop into the browser by treating requestAnimationFrame as the event loop, using a dirty flag to keep view at-most-once-per-frame, and storing every JS closure in a Vec so App::unmount drops them with zero leaks.

涵盖的内容

6个视频4篇阅读材料

6个视频总计8分钟

2.1.1 Init Update View WASM1分钟
2.1.2 Counter on Canvas1分钟
2.1.3 Replay Determinism WASM1分钟
2.2.1 Request Animation Frame1分钟
2.2.2 At Most Once Per Frame1分钟
2.2.3 Unmount Drops Callbacks2分钟

4篇阅读材料总计40分钟

Key Terms: init / update / view — The Elm Shape, Retargeted10分钟
Reflection: init / update / view — The Elm Shape, Retargeted10分钟
Key Terms: requestAnimationFrame as the Browser’s Event Loop10分钟
Reflection: requestAnimationFrame as the Browser’s Event Loop10分钟

涵盖的内容

6个视频4篇阅读材料

6个视频总计9分钟

3.1.1 Sparkline Canvas Port1分钟
3.1.2 Braille Graph Canvas1分钟
3.1.3 Monotonic Cursor Bounds Clamp1分钟
3.2.1 Component Layout Non Overlap1分钟
3.2.2 Browser Router Total Match1分钟
3.2.3 Hash Routing Demo2分钟

4篇阅读材料总计40分钟

Key Terms: Charts — Sparkline and Braille Graph in the Browser10分钟
Reflection: Charts — Sparkline and Braille Graph in the Browser10分钟
Key Terms: Components and Router — Disjoint Rects, Total Match10分钟
Reflection: Components and Router — Disjoint Rects, Total Match10分钟

Bundles the WASM artifact for production and verifies behavior without launching a real browser. Covers the wasm32-unknown-unknown Rust target, wasm-bindgen as the JS<->Rust bridge, and the presentar-cli serve command for local hosting. Then introduces Probar, a deterministic VDOM-snapshot harness: stringify a virtual DOM tree, compare against a golden inline string, and assert correctness with zero headless-browser dependencies.

涵盖的内容

6个视频4篇阅读材料

6个视频总计8分钟

4.1.1 wasm32-unknown-unknown2分钟
4.1.2 wasm-bindgen JS Bridge1分钟
4.1.3 presentar-cli Serve and Bundle1分钟
4.2.1 VDOM Snapshot Stringify1分钟
4.2.2 Golden Diff Inline String1分钟
4.2.3 No Headless Browser1分钟

4篇阅读材料总计40分钟

Key Terms: wasm-pack and the JS Bridge10分钟
Reflection: wasm-pack and the JS Bridge10分钟
Key Terms: Probar VDOM Snapshot Testing10分钟
Reflection: Probar VDOM Snapshot Testing10分钟

Tie everything together by building wasm-dash, a real-time system dashboard rendered entirely in WebAssembly. Compose every prior module — Canvas2D rendering, Elm-style update/view, components, charts, and the router — into one screen. Use a committed snapshot fixture for zero-panic determinism, a short pure view() composing earlier widgets, and a six-demo gallery that proves WASM-from-Rust handles real interactive workloads.

涵盖的内容

3个视频6篇阅读材料1个作业

3个视频总计5分钟

5.1.1 Snapshot Fixture1分钟
5.1.2 view() Composes M1–M41分钟
5.2.1 Six-Demo Gallery Tour3分钟

6篇阅读材料总计60分钟

Key Terms: wasm-dash Snapshot Fixture and view() Composition10分钟
Reflection: wasm-dash Snapshot Fixture and view() Composition10分钟
Key Terms: Six-Demo Gallery10分钟
Reflection: Six-Demo Gallery10分钟
Before You Go10分钟
Next Steps10分钟

1个作业总计30分钟

Final Graded Quiz: WASM from Zero30分钟

获得职业证书

将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。

位教师

Noah Gift

Pragmatic AI Labs

58 门课程3,782 名学生

提供方

Pragmatic AI Labs

从 Software Development 浏览更多内容

Pragmatic AI Labs
Claude From Zero
课程
Pragmatic AI Labs
IAC from Zero
课程
Pragmatic AI Labs
Valkey From Zero
课程
Pragmatic AI Labs
Rust for Data Source Monitoring and Automation
课程

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

通过订阅解锁 10,000 多门课程的访问权限
通过在线学位推动您的职业生涯
获取世界一流大学的学位 - 100% 在线
加入全球超过 4,700 家选择 Coursera for Business 的公司

常见问题

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.