Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

CodeFest

April 05, 2018
Tweet

More Decks by CodeFest

Other Decks in Programming

Transcript

  1. Что такое WebAssembly “WebAssembly (сокращенно wasm) — это бинарный формат

    инструкций для стековой виртуальной машины. WebAssembly спроектирован как портативная цель компиляции для высокоуровневых языков, таких как C/C++/Rust, которую можно развертывать в web для клиентских и серверных приложений.” — webassembly.org
  2. Что такое WebAssembly “WebAssembly (сокращенно wasm) — это бинарный формат

    инструкций для стековой виртуальной машины. WebAssembly спроектирован как портативная цель компиляции для высокоуровневых языков, таких как C/C++/Rust, которую можно развертывать в web для клиентских и серверных приложений.” — webassembly.org
  3. JavaScript плохо подходит для создания desktop-like приложений для Web •

    большой размер исходного кода • требовательный к ресурсам • много времени занимает парсинг • неэффективное управление памятью (сборка мусора) • ненадежность • динамическая природа и утиная типизация требуют спекулятивных оптимизаций • недетерминированность
  4. Чем WebAssembly не является • технология, область применения которой —

    исключительно web • язык ассемблера • (высокоуровневый) язык программирования • реализация VM • очередной Flash / Silverlight / ActiveX / NPAPI / PPAPI
  5. Популярные заблуждения о WebAssembly • является заменой JavaScript • технология

    только для C/C++ разработчиков • JavaScript (или любой язык, который можно скомпилировать в JS) можно скомпилировать в wasm (для увеличения производительности парсинга и исполнения) • можно было просто взять JVM / CLR / LLVM
  6. Кем и как развивается W3C WebAssembly Working Group — ведет

    разработку технологии. Включает сотрудников Mozilla, Google, Apple, Microsoft, Facebook, Intel, Igalia, др. W3C WebAssembly Community Group — совместная разработка технологии до ее стандартизации. Включает как сотрудников компаний, так и индивидуальных участников.
  7. Спецификации WebAssembly • Core specification — определяет структуру wasm-модулей, их

    бинарное и текстовое представления, а также семантику валидации, инстанциирования и исполнения • JavaScript API — определяет JavaScript классы и объекты для доступа к WebAssembly из JavaScript, включая методы валидации, компиляции, инстанциирования, а также импортов и экспортов из/в JavaScript • Web API — определяет расширения JavaScript API для браузеров, в частности потоковые компиляцию и инстанциирование Существует также референсный (эталонный) интерпретатор WebAssembly.
  8. Области применения • Кодирование и декодирование • Шифрование • Обработка

    изображений, видео, звука • Разработка игр • Движки физики • Эмуляторы • Виртуальные машины • Системы автоматизированного проектирования (CAD) • Компьютерное зрение • Виртуальная / дополненная реальность • Виртуальные машины • Научная симуляция • VPN • Базы данных
  9. Примеры использования Демки: • 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)
  10. Компиляция в wasm •wabt (wat2wasm, wasm2wat) •Emscripten (C/C++ 㱺 JS

    + wasm) •Binaryen (asm2wasm, s2wasm, mir2wasm) •LLVM (+ LLD)
  11. Функции в текстовом представлении (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”) …) Имена функций и переменных опциональны. Если присутствуют, то обязаны начинаться на $. Если не указаны, то обращаться к ним следует по индексу.
  12. 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 }>
  13. Линейная память • Каждый раздел памяти изолирован • На стороне

    JS представлена как ArrayBuffer с переменным размером • Любое веб приложение может создать много объектов Memory
  14. Таблицы • Изменяемый типизированный массив ссылок • Доступен из JS

    и wasm • Таблицы имеют тип элементов (в данный момент только функции) • Допускают мутации (set, grow / set_elem), что необходимо для динамического связывания
  15. Что появится в будущем 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
  16. Что читать •Чат @webassembly_ru в телеграме •Хэштеги в твиттере: #webassembly

    и #wasm •Официальный сайт http://webassembly.org •Раздел WebAssembly на MDN •Awesome WebAssembly list на гитхабе