WASM from Zero

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues.

WASM from Zero

Ce cours fait partie de Spécialisation "Rust for Data Engineering"

Instructeur : Noah Gift

Inclus avec

5 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

5 heures à compléter

Planning flexible

Apprenez à votre propre rythme

5 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

5 heures à compléter

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

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

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Récemment mis à jour !

mai 2026

Évaluations

1 devoir

Enseigné en Anglais

91%

of learners achieved a positive career outcome

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours fait partie de la Spécialisation "Rust for Data Engineering"

Lorsque vous vous inscrivez à ce cours, vous êtes également inscrit(e) à cette Spécialisation.

Apprenez de nouveaux concepts auprès d'experts du secteur
Acquérez une compréhension de base d'un sujet ou d'un outil
Développez des compétences professionnelles avec des projets pratiques
Obtenez un certificat professionnel partageable

Il y a 5 modules dans ce cours

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.

Inclus

6 vidéos6 lectures

6 vidéosTotal 9 minutes

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

6 lecturesTotal 51 minutes

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

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.

Inclus

6 vidéos4 lectures

6 vidéosTotal 8 minutes

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

4 lecturesTotal 40 minutes

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

Inclus

6 vidéos4 lectures

6 vidéosTotal 9 minutes

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

4 lecturesTotal 40 minutes

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

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.

Inclus

6 vidéos4 lectures

6 vidéosTotal 8 minutes

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

4 lecturesTotal 40 minutes

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

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.

Inclus

3 vidéos6 lectures1 devoir

3 vidéosTotal 5 minutes

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

6 lecturesTotal 60 minutes

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

1 devoirTotal 30 minutes

Final Graded Quiz: WASM from Zero30 minutes

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Noah Gift

Pragmatic AI Labs

58 Cours3 782 apprenants

Offert par

Pragmatic AI Labs

En savoir plus sur Software Development

Pragmatic AI Labs
Claude From Zero
Cours
Pragmatic AI Labs
HelixDB From Zero
Cours
Pragmatic AI Labs
Shipping Rust
Cours
Pragmatic AI Labs
IAC from Zero
Cours

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Débloquez l'accès à plus de 10 000 cours grâce à un abonnement
Faites progresser votre carrière avec un diplôme en ligne
Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne
Rejoignez les 4 700 entreprises internationales qui ont choisi Coursera for Business.

Foire Aux Questions

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.