Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebAssembly

1,532 views

Published on

public speak at KharkivJS 2015

  • Be the first to comment

  • Be the first to like this

WebAssembly

  1. 1. Sergey Rubanov JavaScript samurai at EXANTE ltd.
  2. 2. Web Assembly
  3. 3. Кратчайшая история web-приложений • Ajax: A New Approach to Web Applications (18 февраля 2005) • JIT-компиляция • v8, Nitro (2008) • TraceMonkey (2009) • Chakra (2011) 3
  4. 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. 5. Главная проблема JavaScript —это сам JavaScript
  6. 6. И вот это null == 0; // false null > 0; // false null >= 0; // true Math.min() < Math.max(); // false 6
  7. 7. Дальнейшее развитие ECMAScript ограничено
  8. 8. Reserved words 8
  9. 9. Future reserved words 9
  10. 10. Принцип don't break the Web
  11. 11. asm.js статически-типизированное подмножество JavaScript • представлен 21 марта 2013 (поддержка в FireFox 22) • на Google I/O 2013 было объявлено об улучшенной поддержке asm.js в Chrome 28 beta • 7 мая 2015 объявлена поддерживается браузером Microsoft Edge 11
  12. 12. asm.js pipeline Не предназначен для написания программ человеком, получается с помощью компиляторов исходного кода в исходный код, таких как Emscripten 12
  13. 13. код на c int add1(int i) { return i + 1; } 13
  14. 14. код на asm.js function add1(i) { i = i|0; return (i + 1)|0; } 14
  15. 15. особенности asm.js • нет сборщика мусора • нет потоков • нет разделяемой памяти • так как это подмножество JS, то • долгий и ресурсоемкий парсинг • большой размер конечного кода • на нем сложно написать web-приложение вручную 15
  16. 16. PNaCl архитектурно-независимое решение для исполнения нативного кода в песочнице • представлен 12 ноября 2013 • основан на NaCl • компилирует C и C++ код в промежуточное представление подмножества LLVM с помощью AOT-компилятора • исполняется в песочнице браузера 16
  17. 17. Особенности PNaCl изолирован в собственной виртуальной машине и не имеет прямого доступа к DOM, JS 17
  18. 18. Что насчет JVM?
  19. 19. А может быть... LLVM?
  20. 20. А что если... Flash VM?
  21. 21. Web Assembly
  22. 22. 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 “
  23. 23. High-Level Goals • Определить портативный, эффективный по объему и времени загрузки бинарный формат как compile-target, который в свою очередь может быть компилирован для исполнения на околонативной скорости на разных платформах, включая мобильные платформы и IoT. 27
  24. 24. High-Level Goals • Описать и имплементировать • MVP для стандартной функциональности, аналогичной asm.js • эффективный polyfill для MVP, который позволяет транслировать wasm в js для запуска в браузерах • PostMVP, который добавляет несколько значимых фич • Дополнительные фичи на основе обратной связи и опыта использования, включая поддержку других языков 28
  25. 25. High-Level Goals • Интеграция в существующую web-платформу: • безверсионная разработка, обратная совместимость • выполняется той же самантической вселенной, что и JavaScript • предоставлять синхронные вызовы в и из JavaScript • политика безопасности и правил ограничения домена • доступ к функциональности браузера через Web API • определить человеко-понятный текстовый формат, который можно конвертировать в бинарный формат и обратно 29
  26. 26. High-Level Goals • WebAssembly должен поддерживать интеграцию не только в браузеры 30
  27. 27. High-Level Goals • Создать привлекательную платформу • новый LLVM-бэкенд и сопутствующий порт Clang • поощрять другие компиляторы и инструменты для использования WebAssembly как цели компиляции • предоставить ползезный инструментарий разработки и отладки 31
  28. 28. MVP • модули 32
  29. 29. Модули WebAssembly • набор импортов и экспортов • секция, определяющая линейную память • секция с кодом • после MVP— секция debug-информация • Возможно другие секции в будущем 33
  30. 30. Инстанс модуля содержит • код из модуля, из которого он был загружен • линейную память • полностью разрешенные импорты • host-specific state (например, reflect экспортов в JS) • код нескольких модулей, динамически связанных в один инстанс (когда будет доступно динамическое связывание) • другие семантически-видимые секции в будущем 34
  31. 31. Линейная память • memory_size • load • store • grow_memory 35
  32. 32. MVP • модули • AST 36
  33. 33. Порядок вычисления AST Все узлы, отличающиеся от конструкций управления, вычисляются в том порядке, в котором они представлены в AST. (i32.add (set_local $x (i32.const 1)) (set_local $x (i32.const 2))) 37
  34. 34. Ловушки Если экземпляр прервал работу, то информация об этом прокидывается во внешнее окружение. В JavaScript окружении, например, таком как браузер, ловушка вызывает исключение и может быть увидена в DevTools. 38
  35. 35. Типы WebAssembly имеет следующие типы значений: • 32: 32-bit integer • i64: 64-bit integer • f32: 32-bit floating point • f64: 64-bit floating point 39
  36. 36. Управляющие конструкции • block • loop • if, if_else • br, br_if • tableswitch, case • return 40
  37. 37. MVP • модули • AST • Бинарный формат 41
  38. 38. Бинарный Формат Предназначен быстрого старта, а именно уменьшение размера модулей и быстрого декодирования Этапы сжатия: • сырой формат - стандартизированный бинарный формат • специальное сжатие бинарного формата (не специфицировано, зависит от окружения) • общая компрессия (gzip, LZMA, LZHAM, Brotli) 42
  39. 39. MVP • модули • AST • Бинарный формат • Текстовый формат 43
  40. 40. Текстовый формат • View Source для модуля WebAssembly, что позволит вписаться в web (где каждый исходник может быть просмотрен) естественным образом. • Отображение инструментах разработки браузера когда source maps недоступны (обязательное требование MVP). • Написание кода WebAssembly напрямую для педогогических целей, экспериментов, отладки, оптимизации и тестирования спецификации. 44
  41. 41. Отладка текстового формата Текстовый формат эквивалентен и изоморфен бинарному. В бинарном представлении все имена функций и переменных сжимаются до индексов, поэтому в текстовом режиме могут не отображаться. Для решения этой проблемы можно добавить опциональную глобальную секцию debug symbol. 45
  42. 42. MVP • модули • AST • Бинарный формат • Текстовый формат • Среды исполнения 46
  43. 43. MVP • модули • AST • Бинарный формат • Текстовый формат • Среды исполнения • Polyfill 47
  44. 44. Polyfill • эффективное преобразовывание бинарного формата в JavaScript • конвертирование asm.js кода в WebAssembly 48
  45. 45. PostMVP • потоки • SIMD • zero-cost exception handling • доступ к модулям JS • Сборщик мусора • Поддержка DOM, Web API 49
  46. 46. Дальнейшие планы • динамическое связывание • полное управление памятью (mmap, Shared Memory) • низкоуровневый доступ к структурам сборщика мусора • JIT компиляция 50
  47. 47. Feature detection Подход из JavaScript не работает if (foo) foo(); else alternativeToFoo(); 51
  48. 48. Feature detection Подход, который работает 1. Компиляция нескольких версий модуля, каждый подразумевает разную поддержку фич и использует has_feature тесты, чтобы определить какую версию нужно загрузить.
 2. Специальный уровень декодирования — использование has_feature для определения неподдерживаемых фич и использование полифилла или ловушек. 52
  49. 49. Инструментарий • редакторы • компиляторы и vm • дебаггеры 53
  50. 50. Какие плюсы принесет WebAssembly Внедрение WebAssembly даст возможность воплотить в жизнь создание новых продуктов, работающих в браузере, в том числе: • высокопроизводительных игр • систем редактирования видео/звука/изображений • P2P-систем • САПР • средств разработки и коммуникации (запуск локального веб-сервера в браузере, эффективная упаковка веб-фреймворков) 54
  51. 51. Что почитать • WebAssembly Design Documents • WebAssembly organization on GitHub • статья о WebAssembly в блоге Брендана Айка • статья инженера Mozilla Люка Вагнера • интервью Эрика Эллиота с Брендоном Айком • https://bugs.webkit.org/show_bug.cgi?id=146064 • Статья Майка Холдмана из Microsoft 55
  52. 52. Contact me github.com/chicoxyzzy twitter.com/chicoxyzzy ru.linkedin.com/in/chicoxyzzy Slides chicoxyzzy.github.io/talks/wasm/index.html 56

×