C++JS = ?

По следам FullstackFest: WebAssembly

Валерий Кузьмин

КонфУР, 2016

Live:

malcoriel

Быстрый JS? Зачем?

Игры

Обработка видео/аудио/изображений

IDE

Виртуализация

VR

Визуализация

Распознавание

Интерпретаторы

Криптография

Asm.js

Пример кода

function module() {
  "use asm"; // начинаем asm.js
 
  function fib(n) {
    n = n|0; // аннотация, int n
    var a = 0, b = 1, t = 0; 
    while( (n|0) >= 0) {
        t = b;
        b = a + b|0; // аннотация выражения (int) (a + b)
        a = t;
        n = n - 1|0;
    }
    return b|0; // аннотация результата, int fib
  }
 
  return { fib: fib }; // экспорт
}


module().fib(5); // 8 - е число, 13

Пример кода

Пример кода

Пример кода

Пример кода

Пример кода

- "Низкоуровневое" подмножество JS

- Преимущественно линейная работа с памятью

- Типизированный

Особенности

- Хорошо оптимизируется

- Цель для компиляции C и C++

Демо: UT3 в Firefox

Поддержка

- Ошибка валидации - откат в JS

- Большой размер, тяжело парсить

- Сложно расширяем из-за основы на JS

Чем плох asm.js

WebAssembly

WebAssembly - это...

- Развиваемая W3C спецификация

- Текстовый и бинарный формат

- Цель компиляции для С, С++, Rust...

- Безопасная и портабельная платформа

WebAssembly - это...

- Развиваемая W3C спецификация

- Текстовый и бинарный формат

- Цель компиляции для С, С++, Rust...

- Безопасная и портабельная платформа

"Короткий путь к оптимизатору JS"

WebAssembly - это не...

- Замена Javascript

- Язык сам по себе

- Цель компиляции для TypeScript, Coffescript...

- Цель компиляции для Java, C# *

WebAssembly - это не...

- Замена Javascript

- Язык сам по себе

- Цель компиляции для TypeScript, Coffescript...

- Цель компиляции для Java, C# *

* Вообще неправда, уже есть компиляторы

Пример: fib-asm.js

function module() {
  "use asm"; // начинаем asm.js
 
  function fib(n) {
    n = n|0; // аннотация, int n
    var a = 0, b = 1, t = 0; 
    while( (n|0) >= 0) {
        t = b;
        b = a + b|0; // аннотация выражения (int) (a + b)
        a = t;
        n = n - 1|0;
    }
    return b|0; // аннотация результата, int fib
  }
 
  return { fib: fib }; // экспорт
}


module().fib(5); // 8 - е число, 13

Пример: fib.wast

(module
  (export "fib" (func $fib))
  (func $fib (param $n i32) (result i32)
    (local $a i32) (local $b i32) (local $t i32) // int a, b, t
    (loop $while-in (block $while-out // while
        (if (i32.eqz (i32.ge_s // n >= 0
            (get_local $n) 
            (i32.const 0)))
          (br $while-out))
        (block
          (set_local $t (get_local $b)) // t = b
          (set_local $b (i32.add (get_local $a) (get_local $b))) // b = a + b
          (set_local $a (get_local $t)) // a = t
          (set_local $n (i32.sub (get_local $n) (i32.const 1))) // n = n - 1
        )
        (br $while-in)
      )
    )
    (return (get_local $b)) // return b
  )
)

bin/asm2wasm --no-opts fib.asm.js

Пример: fib.wast

Пример: fib.wast

Пример: fib.wast

Пример: fib.wast

Пример: fib.wast

Пример: fib.wast

Пример: fib.wasm

00000000  00 61 73 6d 0c 00 00 00  01 86 80 80 80 00 01 40  |.asm...........@|
00000010  01 01 01 01 02 c4 80 80  80 00 04 03 65 6e 76 06  |............env.|
00000020  6d 65 6d 6f 72 79 02 01  80 02 80 02 03 65 6e 76  |memory.......env|
00000030  05 74 61 62 6c 65 01 20  01 00 00 03 65 6e 76 0a  |.table. ....env.|
00000040  6d 65 6d 6f 72 79 42 61  73 65 03 01 00 03 65 6e  |memoryBase....en|
00000050  76 09 74 61 62 6c 65 42  61 73 65 03 01 00 03 82  |v.tableBase.....|
00000060  80 80 80 00 01 00 07 87  80 80 80 00 01 03 66 69  |..............fi|
00000070  62 00 00 09 81 80 80 80  00 00 0a bc 80 80 80 00  |b...............|
00000080  01 b6 80 80 80 00 01 03  01 01 01 02 00 01 00 14  |................|
00000090  00 10 00 54 5a 03 00 06  01 0f 01 00 14 02 15 03  |...TZ...........|
000000a0  14 01 14 02 40 15 02 14  03 15 01 14 00 10 01 41  |....@..........A|
000000b0  15 00 0f 06 01 0f 0f 14  02 09 0f 0f              |............|

 bin/wasm-as fib.wast | hexdump -C

188 байт

Что можно сделать на WebAssembly

уже сейчас

- Компилировать полезные библиотеки

- Делать БД на SQLite

- Преобразовывать pdf при помощи poppler

- Запускать LUA

- компилировать webkit в js? o_O

Что нельзя сделать (пока)

- Полноценные потоки, разделяемая память

- Source-mapping

- SIMD

- Взаимодействие с другими процессами, vfork

- Интеграция со сборщиками мусора

- Работа с DOM / WebAPI

- Полноценная обработка исключений (просмотр, разматывание стэка)

- 64-битная (>4GB) память, map_file, mmap...

- ...

Поддержка

Polyfill!

Демо: Angry bots

http://webassembly.org/demo/

Демо: hello С++ в браузере

Используемые инструменты

- emscrippten sdk, "incoming" branch, 3bba682cc

- ubuntu 16.04, cmake, build-essentials

- binaryen, 360b5ee6d

- firefox 49.01, javascript.options.wasm = true

Скринкаст: hello.c

Скринкаст: emcc -s BINARYEN=1

Скринкаст: открываем в браузере

Будущее рядом

Полезные материалы

• https://www.youtube.com/watch?v=vmzz17JGPHI
• \\vkuzmin\wasm-virtual\
  
• http://webassembly.org/
• http://asmjs.org/ 
• https://kripken.github.io/emscripten-site/index.html
• https://github.com/WebAssembly/binaryen

Спасибо за внимание!

Вопросы?

Презентация:

malcoriel