Codefest 2018. Сергей Рубанов (Exantech) — Понятно о WebAssembly

Посмотрите выступление Сергея: https://2018.codefest.ru/lecture/1324/

WebAssembly набирает обороты. Он уже используется для того, чтобы майнить Monero в Вашем браузере, чтобы декодировать незнакомые браузеру форматы, для портирования игр в веб, как альтернативная целевая платформа для смарт-контрактов Ethereum, для криптографии, движков физики и много-много другого. Настало время разобраться что такое WebAssembly, развеять несколько популярных мифов о нем, понять что с его помощью можно сделать, а что сделать (пока еще) нельзя.

Transcript

1. Просто о WebAssembly Сергей Рубанов JavaScript Kamikaze
2. Кто я такой
3. Кто я такой CG
4. Кто я такой и др.
5. Публичные выступления и участия в подкастах https://github.com/chicoxyzzy/public-talks
6. Что такое WebAssembly “WebAssembly (сокращенно wasm) — это бинарный формат инструкций для стековой виртуальной машины. WebAssembly спроектирован как портативная цель компиляции для высокоуровневых языков, таких как C/C++/Rust, которую можно развертывать в web для клиентских и серверных приложений.” — webassembly.org
7. Что такое WebAssembly “WebAssembly (сокращенно wasm) — это бинарный формат инструкций для стековой виртуальной машины. WebAssembly спроектирован как портативная цель компиляции для высокоуровневых языков, таких как C/C++/Rust, которую можно развертывать в web для клиентских и серверных приложений.” — webassembly.org
8. JavaScript плохо подходит для создания desktop-like приложений для Web • большой размер исходного кода • требовательный к ресурсам • много времени занимает парсинг • неэффективное управление памятью (сборка мусора) • ненадежность • динамическая природа и утиная типизация требуют спекулятивных оптимизаций • недетерминированность
9. Подробнее в моём прошлом докладе https://www.youtube.com/watch?v=kS29TT4wk44
10. Сегодня компании Mozilla исполняется 20 лет!
11. WebAssembly как цель компиляции
12. Текстовый формат
13. Бинарный формат
14. Бинарный формат
15. Текстовое представление WebAssembly
16. Стековая виртуальная машина push a push b push c multiply add push d add + + a × b c d a + b × c + d
17. Портативность и безопасность
18. Чем WebAssembly не является • технология, область применения которой — исключительно web • язык ассемблера • (высокоуровневый) язык программирования • реализация VM • очередной Flash / Silverlight / ActiveX / NPAPI / PPAPI
19. Популярные заблуждения о WebAssembly • является заменой JavaScript • технология только для C/C++ разработчиков • JavaScript (или любой язык, который можно скомпилировать в JS) можно скомпилировать в wasm (для увеличения производительности парсинга и исполнения) • можно было просто взять JVM / CLR / LLVM
20. Кем и как развивается W3C WebAssembly Working Group — ведет разработку технологии. Включает сотрудников Mozilla, Google, Apple, Microsoft, Facebook, Intel, Igalia, др. W3C WebAssembly Community Group — совместная разработка технологии до ее стандартизации. Включает как сотрудников компаний, так и индивидуальных участников.
21. Спецификации WebAssembly • Core specification — определяет структуру wasm-модулей, их бинарное и текстовое представления, а также семантику валидации, инстанциирования и исполнения • JavaScript API — определяет JavaScript классы и объекты для доступа к WebAssembly из JavaScript, включая методы валидации, компиляции, инстанциирования, а также импортов и экспортов из/в JavaScript • Web API — определяет расширения JavaScript API для браузеров, в частности потоковые компиляцию и инстанциирование Существует также референсный (эталонный) интерпретатор WebAssembly.
22. Области применения • Кодирование и декодирование • Шифрование • Обработка изображений, видео, звука • Разработка игр • Движки физики • Эмуляторы • Виртуальные машины • Системы автоматизированного проектирования (CAD) • Компьютерное зрение • Виртуальная / дополненная реальность • Виртуальные машины • Научная симуляция • VPN • Базы данных
23. Примеры использования Демки: • Tanks! demo • Funky Karts (+ статья) • wasm 3D Animation Demo Компании делятся опятом использования WebAssembly: • WebAssembly cut Figma’s load time by 3x • KeePass tweet • WebAssembly at PSPDFKit • Optimizing WebAssembly startup speed • Ethereum Foundation’s eWASM • Rust contracts & WebAssembly (Parity)
24. Поддержка браузерами https://caniuse.com/#feat=wasm
25. Компиляция в wasm •wabt (wat2wasm, wasm2wat) •Emscripten (C/C++ 㱺 JS + wasm) •Binaryen (asm2wasm, s2wasm, mir2wasm) •LLVM (+ LLD)
26. Языки, созданные специально для компиляции в в wasm •AssemblyScript (+ playground) •walt
27. AssemblyScript tsc asc Binaryen
28. Walt • Синтаксический сахар • Минимальный оверхед
29. Всякие ништяки •webassemblyjs •wasm-util
30. Пишем wat-модуль
31. Функции в текстовом представлении (func <name> <signature> <locals> <body>) Основные блоки: • signature — описание параметров (param <name> <type>) и возвращаемого значения (result <type>) • locals — описание локальных переменных (local <name> <type>) • body — список инструкций Типы данных • i32 • i64 • f32 • f64 Экспорт: • (export “name” (func $name)) • (func $name (export “name”) …) Имена функций и переменных опциональны. Если присутствуют, то обязаны начинаться на $. Если не указаны, то обращаться к ним следует по индексу.
32. Используем wat-модуль
33. JS API cheatsheet Методы • WebAssembly.validate(bufferSource) возвращает boolean • WebAssembly.compile(bufferSource) возвращает Promise<WebAssembly.Module> • WebAssembly.instantiate(bufferSource, importObject) возвращает Promise<{ module: WebAssembly.Module, instance: WebAssembly.Instance }> • WebAssembly.instantiate(WebAssembly.Module, importObject) возвращает Promise<WebAssembly.Instance> • ⚠WebAssembly.compileStreaming(source) возвращает Promise<WebAssembly.Module> • ⚠WebAssembly.instantiateStreaming(source, importObject) возвращает Promise<{ module: WebAssembly.Module, instance: WebAssembly.Instance }>
34. Импортируем функцию из JS
35. То же самое
36. Выводим результат
37. Линейная память • Каждый раздел памяти изолирован • На стороне JS представлена как ArrayBuffer с переменным размером • Любое веб приложение может создать много объектов Memory
38. Читаем память из JS
39. Таблицы • Изменяемый типизированный массив ссылок • Доступен из JS и wasm • Таблицы имеют тип элементов (в данный момент только функции) • Допускают мутации (set, grow / set_elem), что необходимо для динамического связывания
40. Вызов функции по ее индексу из JS Первый console.log вернет function 2() { [native code] }
41. Rust + WebAssembly = ❤ •wasm32-unknown-emscripten •wasm32-unknown-unknown •rust-wasm
42. Другие языки, которые умеют в wasm
43. Что появится в будущем Feature Tracking issue Status Specification 1077 in progress Threads 1073 in progress Fixed-width SIMD 1075 in progress Exception handling 1078 in progress Garbage collection 1079 in progress Bulk memory operations 1114 in progress Web Content Security Policy 1122 in progress ECMAScript module integration 1087 not started
44. Что появится в будущем
45. А также •Sourcemaps •Multiple return values •Closures •Tail calls •и много всего другого
46. Что появится скоро
47. Бандлеры всё хорошо
48. JS библиотеки и фреймворки у Glimmer всё хорошо
49. Что читать •Чат @webassembly_ru в телеграме •Хэштеги в твиттере: #webassembly и #wasm •Официальный сайт http://webassembly.org •Раздел WebAssembly на MDN •Awesome WebAssembly list на гитхабе
50. @chicoxyzzy Сергей Рубанов JavaScript Kamikaze Вопросы? @chicoxyzzy chicoxyzzy.github.io @chicoxyzzy