Как стать автором
Обновить
7.6

WebAssembly *

Низкоуровневый байт-код для исполнения в браузере

Сначала показывать
Порог рейтинга
Уровень сложности

Будущее WebAssembly в виде «дерева навыков»

Время на прочтение18 мин
Количество просмотров16K
Некоторые люди как-то неправильно поняли WebAssembly. Есть те, кто считает, что раз браузеры уже поддерживают выполнение WebAssembly (ещё с 2017 года), значит всё уже готово. Даже и близко ещё нет, готов лишь MVP (минимально жизнеспособный продукт). Я могу предположить откуда произрастает корень этого заблуждения: после релиза MVP его разработчики пообещали поддерживать обратную совместимость на уровне «любой написанный сейчас код будет работать и в будущем». Но это ведь не значит, что разработка WebAssembly закончена, совсем нет! Множество фич разрабатывается прямо сейчас и планируется к разработке в ближайшем будущем. И когда они будут реализованы — всё очень сильно изменится.

Все эти фичи можно попробовать представить себе в виде дерева навыков в какой-нибудь игре. У нас есть пару «базовых» (уже реализованные фичи) и целое дерево со множеством веток и листьев, которые будут со временем открываться, давая нам всё больше и больше могущества.
image
Давайте посмотрим на то, что у нас уже есть сейчас и что нам ещё предстоит открыть.
(Под катом много картинок, трафик)
Читать дальше →
Всего голосов 58: ↑55 и ↓3+52
Комментарии87

Как я попробовал сделать статический анализатор GLSL (и что пошло не так)

Время на прочтение10 мин
Количество просмотров6.3K

Однажды я готовился к Ludum Dare и сделал простую игру, где использовал пиксельные шейдеры (других в движок Phaser не завезли).


Что такое шейдеры?

Шейдеры — это программы на си-подобном языке GLSL, которые выполняются на видеокарте. Есть два вида шейдеров, в этой статье речь идет про пиксельные (они же “фрагментные”, fragment shaders), которые очень грубо можно представить в таком виде:


color = pixelShader(x, y, ...other attributes)

Т.е. шейдер выполняется для каждого пикселя выводимого изображения, определяя или уточняя его цвет.
Вводную можно почитать на другой статье на хабре — https://habr.com/post/333002/


Потестировав, кинул ссылку другу, и получил от него вот такой скриншот с вопросом "а это нормально?"



Нет, это было ненормально. Посмотрев внимательно код шейдера, я обнаружил ошибку в вычислениях:


if (t < M) {
    realColor = mix(color1,color2, pow(1. - t / R1, 0.5));
}

Т.к. константа R1 была меньше чем M, то в некоторых случаях в первом аргументе pow получалось число меньше нуля. Квадратный корень из отрицательного числа — штука загадочная, по крайней мере для стандарта GLSL. Мою видеокарту ничего не смутило, и она как-то выпуталась из этого положения (похоже, вернув из pow 0), а вот у друга она оказалась более разборчивой.


И тут я задумался: а могу ли я избежать таких проблем в будущем? От ошибок никто не застрахован, особенно таких, которые не воспроизводятся локально. Юнит-тесты на GLSL не напишешь. В то же время преобразования внутри шейдера довольно простые — умножения, деления, синусы, косинусы… Неужели нельзя отследить значения каждой переменной и убедиться, что ни при каких условиях не происходит выхода за допустимые границы значений?


Так я решил попробовать сделать статический анализ для GLSL. Что из этого получилось — можно прочитать под катом.


Сразу предупрежу: какого-то законченного продукта получить не удалось, только учебный прототип.

Читать дальше →
Всего голосов 41: ↑41 и ↓0+41
Комментарии20

Новости Rust #1 (Сентябрь 2018)

Время на прочтение6 мин
Количество просмотров6.9K

кдпв


Мой комментарий к новости про Rust 1.28 с обзором ржавых событий за месяц неплохо зашел, так что вот держите очень субъективный срез ржавых новостей за прошлый месяц.


В этой подборке: Rust 1.29, записи докладов с Rustconf 2018, gfx-rs, Rust2018, порт Flatbuffers, новые версии ripgrep и Alacritty.


Rust 1.29


Вышел Rust 1.29. Основные нововведения — доступные сразу из rustupcargo fix и cargo clippy (подробнее в хабропереводе).


Следом была выпущена версия 1.29.1, закрывшая ошибку в std::repeat (обсуждение).


Rust 1.30 и 1.31 будут очень значительными.

Точного списка пока нет, но ожидается что:


  • в 1.30 (2018.10.26) войдет частичная стабилизация процедурных макросов;
  • в 1.31 (2018.12.07) войдут Rust 2018 + non-lexical lifetimes (NLL).
Читать дальше →
Всего голосов 43: ↑42 и ↓1+41
Комментарии6

Yew — Rust&WebAssembly-фреймворк для фронтенда

Время на прочтение14 мин
Количество просмотров17K
Yew — аналог React и Elm, написанный полностью на Rust и компилируемый в честный WebAssembly. В статье Денис Колодин, разработчик Yew, рассказывает о том, как можно создать фреймворк без сборщика мусора, эффективно обеспечить immutable, без необходимости копирования состояния благодаря правилам владения данными Rust, и какие есть особенности при трансляции Rust в WebAssembly.



Пост подготовлен по материалам доклада Дениса на конференции HolyJS 2018 Piter. Под катом — видео и текстовая расшифровка доклада.
Всего голосов 53: ↑50 и ↓3+47
Комментарии22

Истории

Как сделать поиск пользователей по GitHub на WebAssembly

Время на прочтение8 мин
Количество просмотров6K

image


Всем привет! 24 августа 2018 вышла версия Go 1.11 с экспериментальной поддержкой WebAssembly (Wasm). Технология интересная и у меня сразу возникло желание поэкспериментировать. Написать "Hello World" скучно (и он кстати есть в документации), тем более тренд прошедшего лета статьи из серии "Как сделать поиск пользователей по GitHub <вставить свой любимый JS-фреймворк>"

Читать дальше →
Всего голосов 17: ↑12 и ↓5+7
Комментарии18

Go 1.11 зарелизился — WebAssembly и Нативные модули

Время на прочтение3 мин
Количество просмотров11K
В эту пятницу состоялся релиз Go 1.11. Ключевые вещи релиза — экспериментальная поддержка WebAssembly, а также новая концепция Модулей, которые призваны стать стандартом распространения кода.
Всего голосов 36: ↑34 и ↓2+32
Комментарии40

WebAssembly — это возвращение апплетов Java и Flash?

Время на прочтение6 мин
Количество просмотров14K
В последней статье по WebAssembly я сделал следующее утверждение:
Некоторые сравнивают WebAssembly с Java-апплетами. В определённом смысле они правы, но с другой стороны сильно ошибаются. Как-нибудь я напишу статью о различиях, но пока поговорим о сходстве. В некотором смысле WebAssembly — иной способ выполнения того, для чего предназначалась JVM: это обычная виртуальная машина для кроссплатформенного ПО.
Многие люди выразили заинтересованность в этой теме, так что давайте рассмотрим её подробнее! В этой статье сравним WebAssembly с тремя технологиями: Flash, Java-апплеты и немножко с PNaCL. Кроме того, статья сосредоточиться на использовании в вебе, хотя раньше мы рассматривали варианты использования WebAssembly в офлайне. Но о таком сравнении поговорим позже. Наконец, эта статья похожа на поедание тапаса [испанская закуска из множества разных компонентов — прим. пер.], здесь куча маленьких разделов. Мне кажется, она слегка коротковата, но в то же время я пытаюсь вести блог, а если продолжать её расширять, то это займёт вечность, так что извините.
Читать дальше →
Всего голосов 27: ↑26 и ↓1+25
Комментарии45

Благодаря WebAssembly можно писать Frontend на Go

Время на прочтение9 мин
Количество просмотров24K
Оригинал статьи.

В феврале 2017 года член команды go Brad Fitzpatrick предложил сделать поддержку WebAssembly в языке. Спустя четыре месяца в ноябре 2017 автор GopherJS Ричард Музиол начал реализовывать идею. И, наконец, полная реализация была смержена в mаster. Разработчики получат wasm примерно в августе 2018, с версией go 1.11. В результате, стандартная библиотека берёт на себя почти все технические сложности с импортом и экспортом функций, знакомых вам, если вы уже пробовали компилировать Си в wasm. Звучит многообещающе. Давайте посмотрим, что можно сделать с первой версией.
Читать дальше →
Всего голосов 20: ↑17 и ↓3+14
Комментарии93

Разработка веб-приложения на Rust

Время на прочтение11 мин
Количество просмотров34K
Автор материала, перевод которого мы сегодня публикуем, говорит, что его самым свежим экспериментом в области архитектуры программных проектов стало создание рабочего веб-приложения с использованием исключительно языка Rust и с минимально возможным применением шаблонного кода. В этом материале он хочет поделиться с читателями тем, что он выяснил, разрабатывая приложение и отвечая на вопрос о том, готов ли уже Rust к применению его в различных сферах веб-разработки.


Читать дальше →
Всего голосов 58: ↑56 и ↓2+54
Комментарии12

Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям?

Время на прочтение14 мин
Количество просмотров61K


Когда изменения происходят постепенно, шаг за шагом, порой бывает трудно заметить насколько они драматичны и всеобъемлющи. Казалось бы всего несколько лет назад web платформа проигрывала нативным приложением практически по всем фронтам, и пропасть между тем, что можно было сделать в браузере, и тем, что было доступно приложениями, загружаемым из магазинов, таких как Apple App Store или Google Play Store, была ужасающе огромной. Одним из свидетельств этой пропасти является то, что в 2007 году web по факту был основной платформой разработки приложений для первого iPhone, но эта платформа явно не взлетела. App Store же появился только год спустя со второй версии операционной системы, и сразу же случился бум нативных приложений, который и сформировал рыночный ландшафт таким, каким мы его знаем теперь.


Многое изменилось с тех пор, и web технологии на месте не стояли. Они шли по пути снятия ограничений, и то, что раньше было принципиально невозможно — работа оффлайн, фоновая синхронизация данных, push-нотификации, поддержка входа в один клик и оплаты с помощью кредитных карт, Apple Pay, Google Pay и других методов, встроенная в браузер — теперь реальность. Эти функции органично дополняют основную часть платформы — HTML/CSS и JavaScript, которая в последние годы развивалась более чем активными темпами. Например новый проект Houdini, который ещё находится на достаточно ранней стадии, снимает почти все ограничения на то, что можно сделать с помощью CSS, давая возможность среди прочего создавать свои лэйауты и использовать их наравне с Grid и Flexbox, и открывая программный доступ к внутренностям CSS движка. Но даже и без Houdini уже сейчас можно создавать CSS анимации, работающие со скоростью 60 FPS (frames per second).

Читать дальше →
Всего голосов 53: ↑51 и ↓2+49
Комментарии66

C++ креши в WebAssembly на разных браузерах

Время на прочтение2 мин
Количество просмотров4.3K

Заметка задумывалась как продолжение предыдущей заметки о том, как собираем C++ креши на различных платформах включая asm.js и wasm. По количеству материала, это тянет только на заметку, а не полноценную статью, да и нужно быть наркоманом, что бы делать нативный клиент на C++, а потом засовывать его в браузер.


Но! Мы недавно делали доклад об опыте использования wasm на cppconf. Оказалось, что наркоманов больше чем я думал, да и новость Beta for Qt for WebAssembly Technology Preview. Данная заметка может быть полезна, если вы захотите сделать отлов крешей в production окружении.


Под катом:


  • отлов падений в asm.js и wasm;
  • как выглядит стек вызовов в Safari, Firefox, Chrome.
Читать дальше →
Всего голосов 11: ↑9 и ↓2+7
Комментарии0

От JavaScript к Rust и обратно: рассказ о wasm-bindgen

Время на прочтение10 мин
Количество просмотров11K

Мы уже видели насколько WebAssembly быстро компилируется, ускоряет js библиотеки и генерирует более компактные бинарники. У нас даже есть общее представление как наладить взаимодействие не только между сообществами Rust и JavaScript, но и с сообществами других языков. В прошлой статье мы упоминали специальный инструмент wasm-bindgen и сейчас я бы хотел остановиться на нем более подробно.

Читать дальше →
Всего голосов 26: ↑26 и ↓0+26
Комментарии5

Ускоренный курс по ассемблерам

Время на прочтение3 мин
Количество просмотров16K
Это перевод одной из статей Lin Clark. Если вы не читали остальные, мы рекомендуем начать с начала.

Чтобы понять, как работает WebAssembly, неплохо понимать, что такое код на ассемблере и как компиляторы его генерируют. В статье о JIT я сравнивала взаимодействие с компьютером со взаимодействием с инопланетянином.

Читать дальше →
Всего голосов 48: ↑39 и ↓9+30
Комментарии6

Ближайшие события

19 сентября
CDI Conf 2024
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн

Blazor: Техническое введение

Время на прочтение10 мин
Количество просмотров79K
Сегодня команда ASP.NET анонсировала, что проект Blazor был перемещён в репозиторий организации ASP.NET. Мы начинаем стадию эксперимента, чтобы понять сможем ли мы развить Blazor в поддерживаемый продукт. Это большой шаг вперёд!

image

Что такое Blazor? Это фреймворк для браузерных приложений, написанный на .NET и запускающийся с помощью WebAssembly. Он даёт вам все преимущества богатых современных одностраничных приложений (SPA), позволяя при этом использовать .NET от начала и до конца, вплоть до общего кода на сервере и клиенте. В посте с анонсом подробно описаны основные случаи применения, сроки и так далее.

В этом посте я хочу поглубже поговорить о технических деталях для тех, кому интересно как же это работает.
Читать дальше →
Всего голосов 38: ↑37 и ↓1+36
Комментарии46

Ещё большее ускорение WebAssembly: новый потоковый и многоуровневый компилятор в Firefox

Время на прочтение6 мин
Количество просмотров14K
Оба авторе: Лин Кларк — разработчик в группе Mozilla Developer Relations. Занимается JavaScript, WebAssembly, Rust и Servo, а также рисует комиксы о коде.

Люди называют WebAssembly фактором, меняющим правила игры, потому что эта технология ускоряет выполнение кода в вебе. Некоторые из ускорений уже реализованы, а другие появятся позже.

Одна из техник — потоковая компиляция, когда браузер компилирует код во время его загрузки. До настоящего времени эта технология рассматривалась лишь как потенциальный вариант ускорения. Но с выпуском Firefox 58 она станет реальностью.

Firefox 58 также включает в себя двухуровневый компилятор. Новый базовый компилятор компилирует код в 10–15 раз быстрее, чем оптимизирующий компилятор.

Вместе эти два изменения означают, что мы компилируем код быстрее, чем он поступает из сети.



На десктопе мы компилируем 30-60 МБ кода WebAssembly в секунду. Это быстрее, чем сеть доставляет пакеты.
Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии49

Технопорно с WebAssembly

Время на прочтение13 мин
Количество просмотров9.9K

По просьбам трудящихся, пишу о внутреннем устройстве WebAssembly.


WebAssembly — байткод для стековой виртуальной машины. Значит, для запуска кода такой нужны интерпретатор, стек и хранилище кода. Если мы хотим взаимодействовать с внешним миром, нужен интерфейс к внешней машине, хосту. Дополнительно стандарт определяет две структуры: непрерывную память и таблицы. В версии MVP стандарта их может быть по одной штуке каждого, или не быть вовсе.


В итоге, наш технобордель выглядит так:



  • Интерпретатор
  • Интерфейс к хосту
  • Стек
  • Хранилище кода
  • Память
  • Таблица

Займёмся делом!

Читать дальше →
Всего голосов 37: ↑36 и ↓1+35
Комментарии11

Скриптуем на WebAssembly, или WebAssembly без Web

Время на прочтение6 мин
Количество просмотров11K

Представлять WebAssembly не нужно — поддержка уже есть в современных браузерах. Но технология годится не только для них.


WebAssembly — кроссплатформенный байткод. Значит, этот байткод можно запустить на любой платформе, где есть его виртуальная машина. И для этого вовсе не нужен браузер и Javascript-движок.


Далее — проверка концепции на прочность, инструментарий и первый скриптовый модуль.

Читать дальше →
Всего голосов 21: ↑18 и ↓3+15
Комментарии19

Как работает JS: особенности и сфера применения WebAssembly

Время на прочтение9 мин
Количество просмотров26K
Сегодня мы представляем вам шестую часть серии материалов, которые посвящены особенностям работы всего того, что связано с JavaScript. Здесь мы поговорим о WebAssembly. А именно, детально проанализируем эту технологию, рассмотрим особенности её работы, а так же то, как она соотносится с обычным JavaScript в плане производительности. Речь пойдёт о времени загрузки кода, о скорости выполнения программ, о сборке мусора, об использовании памяти, о доступе к API платформы, об отладке, о многопоточности и о переносимости WebAssembly-кода. Эта технология, хотя и находится сейчас в самом начале своего развития, уже начала менять взгляды на разработку веб-приложений. Если разработчику нужна высочайшая производительность браузерного кода, ему просто необходимо познакомиться с WebAssembly.

image
Читать дальше →
Всего голосов 28: ↑27 и ↓1+26
Комментарии35

Знакомство с WebAssembly

Время на прочтение14 мин
Количество просмотров119K


Эта статья основана на моём выступлении на ITSubbotnik, прошедшем в Рязани 14 октября 2017 года. На русском пока что довольно мало материала на эту тему, надеюсь что статья будет вам полезна.


Disclaimer: Автор не является экспертом ни в WebAssembly, ни в JavaScript. Данная статья есть компиляция мыслей и идей, полученных из выступлений других людей на данную тему, плюс эпизодического опыта изучения WebAssembly в течение нескольких месяцев.

Читать дальше →
Всего голосов 70: ↑68 и ↓2+66
Комментарии121

ArrayBuffer и SharedArrayBuffer в JavaScript, часть 1: краткий курс по управлению памятью

Время на прочтение5 мин
Количество просмотров15K
Автоматическое управление памятью… Хорошо это или плохо? Однозначного ответа нет и быть не может. С одной стороны — это удобно, хотя совсем забыть о памяти не получится. С другой — за удобства приходится платить.

JavaScript — это как раз тот случай, когда управление памятью выполняется в автоматическом режиме, однако, появление ArrayBuffer и SharedArrayBuffer меняет ситуацию.



Для того, чтобы понять, что именно приносят в JS-разработку ArrayBuffer и SharedArrayBuffer, почему эти объекты появились в языке, предлагаем начать с самого начала, а именно — с разговора об управлении памятью.
Читать дальше →
Всего голосов 37: ↑24 и ↓13+11
Комментарии12

Вклад авторов