public speak at KharkivJS 2015

1. Sergey Rubanov
JavaScript samurai at EXANTE ltd.

2. Web Assembly

3. Кратчайшая история web-приложений
• Ajax: A New Approach to Web Applications (18 февраля 2005)
• JIT-компиляция
• v8, Nitro (2008)
• TraceMonkey (2009)
• Chakra (2011)
3

4. JavaScript как compile target
JavaScript is Assembly Language for the Web (июль 2011)
• Sematic Markup is Dead! Clean vs. Machine-coded HTML
• Part 2 - Madness or just Insanity?
4

5. Главная проблема
JavaScript —это
сам JavaScript

6. И вот это
null == 0; // false
null > 0; // false
null >= 0; // true
Math.min() < Math.max(); // false
6

7. Дальнейшее
развитие
ECMAScript
ограничено

8. Reserved words
8

9. Future reserved words
9

10. Принцип don't
break the Web

11. asm.js
статически-типизированное подмножество JavaScript
• представлен 21 марта 2013 (поддержка в FireFox 22)
• на Google I/O 2013 было объявлено об улучшенной поддержке asm.js
в Chrome 28 beta
• 7 мая 2015 объявлена поддерживается браузером Microsoft Edge
11

12. asm.js pipeline
Не предназначен для написания программ человеком, получается с
помощью компиляторов исходного кода в исходный код, таких как
Emscripten
12

13. код на c
int add1(int i) {
return i + 1;
}
13

14. код на asm.js
function add1(i) {
i = i|0;
return (i + 1)|0;
}
14

15. особенности asm.js
• нет сборщика мусора
• нет потоков
• нет разделяемой памяти
• так как это подмножество JS, то
• долгий и ресурсоемкий парсинг
• большой размер конечного кода
• на нем сложно написать web-приложение вручную
15

16. PNaCl
архитектурно-независимое решение для исполнения нативного кода в
песочнице
• представлен 12 ноября 2013
• основан на NaCl
• компилирует C и C++ код в промежуточное представление
подмножества LLVM с помощью AOT-компилятора
• исполняется в песочнице браузера
16

17. Особенности PNaCl
изолирован в собственной виртуальной машине и не имеет прямого
доступа к DOM, JS
17

18. Что насчет JVM?

20. А может быть...
LLVM?

22. А что если...
Flash VM?

24. Web Assembly

26. a new binary syntax for low-level safe code, initially co-expressive with
asm.js, but in the long run able to diverge from JS’s semantics, in order to
best serve as common object-level format for multiple source-level
programming languages.
Brendan Eich
Он представил Web Assembly в своем блоге 17 июня 2015
“

27. High-Level Goals
• Определить портативный, эффективный по объему и времени загрузки
бинарный формат как compile-target, который в свою очередь может
быть компилирован для исполнения на околонативной скорости на
разных платформах, включая мобильные платформы и IoT.
27

28. High-Level Goals
• Описать и имплементировать
• MVP для стандартной функциональности, аналогичной asm.js
• эффективный polyfill для MVP, который позволяет транслировать
wasm в js для запуска в браузерах
• PostMVP, который добавляет несколько значимых фич
• Дополнительные фичи на основе обратной связи и опыта
использования, включая поддержку других языков
28

29. High-Level Goals
• Интеграция в существующую web-платформу:
• безверсионная разработка, обратная совместимость
• выполняется той же самантической вселенной, что и JavaScript
• предоставлять синхронные вызовы в и из JavaScript
• политика безопасности и правил ограничения домена
• доступ к функциональности браузера через Web API
• определить человеко-понятный текстовый формат, который можно
конвертировать в бинарный формат и обратно
29

30. High-Level Goals
• WebAssembly должен поддерживать интеграцию не только в браузеры
30

31. High-Level Goals
• Создать привлекательную платформу
• новый LLVM-бэкенд и сопутствующий порт Clang
• поощрять другие компиляторы и инструменты для использования
WebAssembly как цели компиляции
• предоставить ползезный инструментарий разработки и отладки
31

32. MVP
• модули
32

33. Модули WebAssembly
• набор импортов и экспортов
• секция, определяющая линейную память
• секция с кодом
• после MVP— секция debug-информация
• Возможно другие секции в будущем
33

34. Инстанс модуля содержит
• код из модуля, из которого он был загружен
• линейную память
• полностью разрешенные импорты
• host-specific state (например, reflect экспортов в JS)
• код нескольких модулей, динамически связанных в один инстанс
(когда будет доступно динамическое связывание)
• другие семантически-видимые секции в будущем
34

35. Линейная память
• memory_size
• load
• store
• grow_memory
35

36. MVP
• модули
• AST
36

37. Порядок вычисления AST
Все узлы, отличающиеся от конструкций управления, вычисляются в
том порядке, в котором они представлены в AST.
(i32.add
(set_local $x (i32.const 1))
(set_local $x (i32.const 2)))
37

38. Ловушки
Если экземпляр прервал работу, то информация об этом
прокидывается во внешнее окружение. В JavaScript окружении,
например, таком как браузер, ловушка вызывает исключение и может
быть увидена в DevTools.
38

39. Типы
WebAssembly имеет следующие типы значений:
• 32: 32-bit integer
• i64: 64-bit integer
• f32: 32-bit floating point
• f64: 64-bit floating point
39

40. Управляющие конструкции
• block
• loop
• if, if_else
• br, br_if
• tableswitch, case
• return
40

41. MVP
• модули
• AST
• Бинарный формат
41

42. Бинарный Формат
Предназначен быстрого старта, а именно уменьшение размера
модулей и быстрого декодирования
Этапы сжатия:
• сырой формат - стандартизированный бинарный формат
• специальное сжатие бинарного формата (не специфицировано,
зависит от окружения)
• общая компрессия (gzip, LZMA, LZHAM, Brotli)
42

43. MVP
• модули
• AST
• Бинарный формат
• Текстовый формат
43

44. Текстовый формат
• View Source для модуля WebAssembly, что позволит вписаться в web
(где каждый исходник может быть просмотрен) естественным образом.
• Отображение инструментах разработки браузера когда source maps
недоступны (обязательное требование MVP).
• Написание кода WebAssembly напрямую для педогогических целей,
экспериментов, отладки, оптимизации и тестирования спецификации.
44

45. Отладка текстового формата
Текстовый формат эквивалентен и изоморфен бинарному.
В бинарном представлении все имена функций и переменных
сжимаются до индексов, поэтому в текстовом режиме могут не
отображаться. Для решения этой проблемы можно добавить
опциональную глобальную секцию debug symbol.
45

46. MVP
• модули
• AST
• Бинарный формат
• Текстовый формат
• Среды исполнения
46

47. MVP
• модули
• AST
• Бинарный формат
• Текстовый формат
• Среды исполнения
• Polyfill
47

48. Polyfill
• эффективное преобразовывание бинарного формата в JavaScript
• конвертирование asm.js кода в WebAssembly
48

49. PostMVP
• потоки
• SIMD
• zero-cost exception handling
• доступ к модулям JS
• Сборщик мусора
• Поддержка DOM, Web API
49

50. Дальнейшие планы
• динамическое связывание
• полное управление памятью (mmap, Shared Memory)
• низкоуровневый доступ к структурам сборщика мусора
• JIT компиляция
50

51. Feature detection
Подход из JavaScript не работает
if (foo)
foo();
else
alternativeToFoo();
51

52. Feature detection
Подход, который работает
1. Компиляция нескольких версий модуля, каждый подразумевает
разную поддержку фич и использует has_feature тесты, чтобы
определить какую версию нужно загрузить.
2. Специальный уровень декодирования — использование has_feature
для определения неподдерживаемых фич и использование полифилла
или ловушек.
52

53. Инструментарий
• редакторы
• компиляторы и vm
• дебаггеры
53

54. Какие плюсы принесет WebAssembly
Внедрение WebAssembly даст возможность воплотить в жизнь
создание новых продуктов, работающих в браузере, в том числе:
• высокопроизводительных игр
• систем редактирования видео/звука/изображений
• P2P-систем
• САПР
• средств разработки и коммуникации (запуск локального веб-сервера в
браузере, эффективная упаковка веб-фреймворков)
54

55. Что почитать
• WebAssembly Design Documents
• WebAssembly organization on GitHub
• статья о WebAssembly в блоге Брендана Айка
• статья инженера Mozilla Люка Вагнера
• интервью Эрика Эллиота с Брендоном Айком
• https://bugs.webkit.org/show_bug.cgi?id=146064
• Статья Майка Холдмана из Microsoft
55

56. Contact me
github.com/chicoxyzzy
twitter.com/chicoxyzzy
ru.linkedin.com/in/chicoxyzzy
Slides
chicoxyzzy.github.io/talks/wasm/index.html
56