watlings

KO | EN

gitlite — search

#javascript #ai #typescript #llm #go #android #rust #linux #docker #nodejs #java #awesome-list #security #ios

(★ 1,756)

Learn WebAssembly by writing small programs!

파일 탐색기

최종 버전 다운로드 (.zip)

- - exercises.yml
  - web-build.yml
- extensions.json
- 001_hello.wat
- 002_ordering.wat
- 003_export.wat
- 004_function.wat
- 005_variables.wat
- 006_numbers.wat
- 007_conditionals.wat
- 008_loops.wat
- 009_data.wat
- 010_memory.wat
- 011_host.mjs
- 011_host.wat
- 012_reftypes.wat
- 013_table.wat
- 014_memory_dynamic.wat
- 015_exceptions.wat
- 016_simd.wat
- 017_gc_types.wat
- 001_hello.patch
- 002_ordering.patch
- 003_export.patch
- 004_function.patch
- 005_variables.patch
- 006_numbers.patch
- 007_conditionals.patch
- 008_loops.patch
- 009_data.patch
- 010_memory.patch
- 011_host.patch
- 012_reftypes.patch
- 013_table.patch
- 014_memory_dynamic.patch
- 015_exceptions.patch
- 016_simd.patch
- 017_gc_types.patch
- README.md
- - colors.mjs
  - compileFiles.mjs
  - findFile.mjs
  - getWastParser.mjs
  - patch.mjs
  - patchFile.mjs
- build.mjs
- ci-check.mjs
- show-solution.mjs
- solve.mjs
- test.mjs
- - patch.test.js
  - tests.test.js
- - errorContext.mjs
  - getWasm.mjs
  - instantiate.mjs
  - test-runner.mjs
  - types.d.ts
- 001_hello.test.js
- 002_ordering.test.js
- 003_export.test.js
- 004_function.test.js
- 005_variables.test.js
- 006_numbers.test.js
- 007_conditionals.test.js
- 008_loops.test.js
- 009_data.test.js
- 010_memory.test.js
- 011_host.test.js
- 012_reftypes.test.js
- 013_table.test.js
- 014_memory_dynamic.test.js
- 015_exceptions.test.js
- 016_simd.test.js
- 017_gc_types.test.js
- - App.vue
  - compiler.ts
  - confetti.ts
  - editor.ts
  - env.d.ts
  - highlight.ts
  - main.ts
  - preview-worker.ts
  - progress.ts
  - runner.ts
  - style.css
  - types.ts
- .gitignore
- .oxfmtrc.json
- .oxlintrc.json
- chapters.mjs
- check-chapters.mjs
- generate.mjs
- index.html
- package-lock.json
- package.json
- tsconfig.json
- vite.config.ts
.gitignore
LICENSE
package-lock.json
package.json
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Watlings

Learn the WebAssembly Text Format
by fixing a bunch of small programs!

**[Try it in your browser!][Web Version]**

<br>

![Example Exercise]

</div>

<br>

## Usage

This project uses **[Node 23+]** & **[wasm-tools]** for compilation and testing.

> **Note:** Later exercises (015+) use newer WebAssembly features like exception handling and GC types that require the `--experimental-wasm-exnref` flag, which is only available in Node.js 23 and later.

<br>

```sh
git clone git@github.com:EmNudge/watlings.git
cd watlings
```

Complete lessons by following the instructions in each exercise within the `exercises` directory.

Test your answer to an exercise with the `start` command:

```sh
npm start 001_hello
```

<br>

If you'd like to view the solution to an exercise, use the `show` command:

```sh
npm run show 001_hello
```

To apply it directly to the exercise, use `solve` instead of `show`:

```sh
npm run solve 001_hello
```

<br>

### Recommended Editor

We recommend using **[VSCode]** with the **[wat-lsp]** extension.

This should provide syntax highlighting, intellisense, and other helpful features as you work through the exercises.

### Using wasm-tools CLI

To compile your WAT code, this project uses the `wasm-tools` CLI.

Install `wasm-tools` and ensure `wasm-tools` is on your PATH. The scripts will invoke `wasm-tools parse` under the hood.

See install instructions: [wasm-tools][wasm-tools]

<br>

## Motivations

I've found just diving in to be the best way to build experience with programming.

**[Rustlings]** & **[Ziglings]** have both had tremendous returns to my journeys with both languages.

WebAssembly (and by extension WAT) has a more sparse educational landscape than most and I was hoping to fill some of the gaps by building a project with the same sort of structure.

<br>

## Pedagogical Philosophy

Outlined here are some thoughts on what makes a good teaching experience.

### Typing Over Reading

The goal is to learn by doing. Comments on each file outline a task and some background. However, a lot about a language can be gleaned by its syntax alone. We should be adding **as little** explanation as possible.

Occasional gaps in knowledge can be filled by consistent exposure to the syntax within different contexts. Certain things can therefore be learned without any mention.

Introduction text is superfluous. Words add visual noise, so we should be careful with our count. Coding itself should supplement ambiguities in the text.

If you find a text confusing or too verbose, **please create a discussion post**!

### Create Struggle

Studies have shown that one cannot learn effectively without effort. This applies to practically every domain of knowledge. These projects should be educational, not easy.

This does not mean we should make the education itself elusive. We should not make learning more difficult, but instead more intentional.

When introducing a lot of new syntax, keep the problem scope small, but force the user to read a bit. If the syntax is not new, increase the problem scope. Maybe many variations of the same task.

<br>

## Credits

- [rustlings](https://github.com/rust-lang/rustlings)
- [Ziglings](https://github.com/ratfactor/ziglings)

[Example Exercise]:https://github.com/EmNudge/watlings/assets/24513691/a777c665-fd13-4422-a570-2d3669b0ee94

[NPM WABT]: https://www.npmjs.com/package/wabt
[VSCode]: https://code.visualstudio.com
[wat-lsp]: https://marketplace.visualstudio.com/items?itemName=EmNudge.wat-lsp
[WABT]: https://github.com/WebAssembly/wabt/releases/
[wasm-tools]: https://github.com/bytecodealliance/wasm-tools
[Node 23+]: https://nodejs.org/en
[NPM]: https://www.npmjs.com/

[Web Version]: https://watlings.emnudge.dev

[Rustlings]: https://github.com/rust-lang/rustlings
[ziglings]: https://github.com/ratfactor/ziglings

watlings

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

watlings

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README