WebAssembly сегодня

Тим Маринин, 2018, WSD Saint Petersburg

WebAssembly сегодня

Говорит и показывает Тим Маринин

Old computer
© Federica Galli

Кто я такой

Программист, делаю подкаст Веб-истории.

@marinintim в твиттере, гитхабе, доткоме.

В свободное время пишу сервис на Rust: seccopy.

План

  1. Что такое WebAssembly?
  2. Что уже можно делать?
  3. Зачем оно нам?

Джаваскрипт победил

good_parts.jpg

good_parts.jpg

Новые слои поверх древнего языка (который становится лучше).

  1. JavaScript

Шаг в сторону

asm.js

Подмножество JavaScript с кучей ограничений.

— Типы в джаваскрипте до того, как это было модно.

— Память — массив.

				function avg(a, b) {
				  a = a|0; // 32-bit int
				  b = b|0;
				  return ((a + b) / 2)|0;
				}

asm.js

Можно компилировать C в JS с помощью компилятора Emscripten (основан на LLVM).

LLVM — основа для многих компиляторов, например, Clang.

Можно использовать кучу оптимизаций LLVM!

На выходе — джаваскрипт с определенными гарантиями.

Но… зачем?

WebAssembly

Спецификация виртуальной машины, формат файлов (два: текстовый и бинарный), модель для работы с памятью.

Бинарный формат парсится быстрее, чем asm.js (читай: джаваскрипт).

WebAssembly

			(module
			  (func $avg (export "avg")
			    (param $p0 i32) (param $p1 i32) (result i32)
			    (i32.div_s
			      (i32.add (get_local $p1)
			               (get_local $p0))
			      (i32.const 2))))

WebAssembly

			00 61 73 6D 01 00 00 00 01 07 01 60 02 7F 7F 01
			7F 03 02 01 00 07 07 01 03 61 76 67 00 00 0A 0C
			01 0A 00 20 01 20 00 6A 41 02 6D 0B 00 1A 04 6E
			61 6D 65 01 06 01 00 03 61 76 67 02 0B 01 00 02
			00 02 70 30 01 02 70 31

72 байта.

Не только про веб

Несмотря на то, что WebAssembly появился в браузере, одна из целей проекта — быть настолько универсальным форматом, чтобы можно было использовать везде.

Уже есть два проекта, которые запускают WebAssembly поверх ядра Linux.

Что компилировать в WebAssembly

Rust

Молодой язык программирования, в который сильно вкладывается Mozilla (в частности, на него переписывают части Firefox; Servo)

Ключевая особенность: необычная система работы с памятью.

Mix of ML and C++ for the modern age.

Rust

			fn avg(a: i32, b: i32) -> i32 {
			  (a + b) / 2
			}

Rust + WebAssembly

Есть инициативная группа, которая разрабатывает инструменты.

Поддержка на уровне компилятора — просто указать другой target

Rust не нужен GC и у него практически нет рантайма.

Приятнее, чем C и C++ для разработки нового кода.

WASM <-> JS

Сейчас в функции WebAssembly можно передавать, по сути, только числа.

Но в джаваскрипте есть доступ к памяти WebAssembly — можем вручную доставать и записывать, что нам нужно.

wasm-bindgen

Тулза для взаимодействия Rust <-> JS

Автоматически генерирует код, который связывает WASM и JS.

wasm-bindgen

			#[wasm_bindgen]
			pub fn avg(a: i32, b: i32) -> i32 {
			  (a + b) / 2
			}

wasm-bindgen

Используем из JS:

			const myModule = import('./mymodule')
			myModule.then(myModule => {
			  let num = myModule.avg(10, 20)
			  console.log(num) // 15
			})

А нам-то что с этого?

Оптимизация тяжелых вычислений

Сначала, конечно, нужно измерять.

Game-dev like: считаем в WASM, обновляем UI из JS.

Использование готового

PSPDFKit: 500 000 строк C++

Внутри инструментов

Люди, разрабатывающие Ember, экспериментируют с выносом virtual DOM в WebAssembly.

WebAssembly + обёртка на JS = быстрый инструмент для нас

Веб — не джаваскрипт

Веб — не джаваскрипт

Сила веб-приложений не в джаваскрипте, а в доступности.

Это не означает, что джаваскрипт не нужен.

Будущее

Пока только MVP: minimum viable product.

Будет Garbage Collection, взаимодействие напрямую с DOM, треды, etc.

marinintim.com/presents/webassembly