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

WebAssembly *

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

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

Vange-rs: взгляд на реализацию WebAssembly в Rust

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

Вангеры одна из самых почитаемых и технологичных игр своего времени, продолжает жить и развиваться. Благодаря сплоченному сообществу игра получила множество усовершенствований: HD, 60 FPS, новые сетевые режимы и много другое. Vange-rs один из интереснейших проектов по Вангерам. Это rust версия игры, основной изюминкой которой является 3D рендер основанный на wgpu.

Запустить в браузере
Всего голосов 34: ↑33 и ↓1+32
Комментарии14

Постигаем WebAssembly, рисуя кривую дракона

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

Познакомьтесь с WebAssembly на примере этого простого туториала, требующего лишь самых общих знаний в веб-разработке. Весь инструментарий, который понадобится вам, чтобы составить впечатление о Wasm на основе готовых к запуску примеров кода – это редактор кода, любой современный браузер, а также контейнер Docker с наборами инструментов для C и Rust – он прилагается к статье.

На момент написания статьи WebAssembly в ходу уже три года. Она работает во всех современных браузерах, а некоторые компании уже даже решились использовать ее в продакшене  (Figma, наше почтение). За этим продуктом стоит мощная интеллектуальная поддержка: Mozilla, Microsoft, Google, Apple, Intel, Red Hat — в разработке участвовал инженерный цвет этих и других компаний. Web Assembly повсеместно считается Следующим Большим Прпорывом в веб-технологиях, но широкая аудитория фронтенд-разработчиков не спешит на нее переходить. Все мы знаем HTML, CSS и JavaScript, тех трех китов, на которых зиждется Веб, и для пересмотра такой парадигмы трех лет мало. Особенно, если краткий поиск в Google дает нечто подобное:

Читать далее
Всего голосов 15: ↑15 и ↓0+15
Комментарии9

Как хранить данные в png, не привлекая внимания санитаров

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

Всё началось с мема, который вы видите выше.

Сначала я посмеялся. А потом задумался: может ли быть так, что скриншот базы равноценен её снэпшоту?

Для этого у нас должно быть такое графическое представление базы, которое 1 к 1 отображает данные и структуру. Если сделать скриншот такого представления, из него можно восстановить базу.

Или... графическое представление и должно быть базой!

Это как?
Всего голосов 255: ↑254 и ↓1+253
Комментарии88

Рендеринг DOOM с помощью чекбоксов

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

Дисклеймер: перевод статьи публикуется с одобрения оригинального автора

Поиграть можно тут (Chrome/Edge), исходный код здесь, текст статьи ниже.

На этой неделе я прочитал статью Брайана Брауна — "Я всё ещё продолжаю экспериментировать с чекбоксами". Там он рассказывал про свою библиотеку Checkboxland.

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии4

Истории

JavaScript: заметка о WebAssembly

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


Привет, друзья!


В 2019 году WebAssembly (далее — WA или wasm) стал четвертым "языком" веба. Первые три — это, разумеется, HTML, CSS и JavaScript. Сегодня wasm поддерживается 94% браузеров. Он, как утверждается, обеспечивает скорость выполнения кода, близкую к нативной (естественной, т.е. максимально возможной для браузера), позволяя портировать в веб десктопные приложения и видеоигры.


Что не так с JS?


JS — это интерпретируемый язык программирования с динамической типизацией. Динамическая типизация означает, что тип переменной проверяется (определяется) во время выполнения кода. И что с того? — спросите вы. Вот как определяется переменная в C++:


int n = 42

Такое определение сообщает компилятору тип переменной n и ее локацию в памяти. И все это в одной строке. А в случае с определением аналогичной переменной в JS (const n = 42), движку сначала приходится определять, что переменная является числом, затем, что число является целым и т.д. при каждом выполнении программы. На определение и (часто) приведение (преобразование) типов каждой инструкции уходит какое-то время.

Читать дальше →
Всего голосов 15: ↑14 и ↓1+13
Комментарии15

Книга «WebAssembly в действии»

Время на прочтение8 мин
Количество просмотров3.6K
image Привет, Хаброжители! Создавайте высокопроизводительные браузерные приложения, не полагаясь на один только JavaScript! Компилируясь в бинарный формат WebAssembly, ваш код на C, C++ или Rust будет работать в браузере с оптимальной скоростью. WebAssembly обеспечивает большую скорость, возможности повторного использования существующего кода и доступ к новым и более быстрым библиотекам. Кроме того, при необходимости вы можете настроить взаимодействие с JavaScript.

Книга была написана, чтобы помочь вам понять, что такое WebAssembly, как он работает и что с ним можно и нельзя сделать. Она показывает разные варианты сборки модуля WebAssembly в зависимости от ваших потребностей. Мы начинаем с простых примеров и затем переходим к более сложным темам, например к динамическому связыванию, параллельной обработке и отладке.
Читать дальше →
Всего голосов 6: ↑6 и ↓0+6
Комментарии1

Как научиться работать в Blazor, делая что-то полезное. Часть II

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


Как я сказал в первой части этой статьи, мы решили написать систему, которая преобразует команды для отправки многочисленных инструкций на различные IoT реле на Blazor. Где по-быстрому, практически на коленке собрали отличную систему работы с этими реле. Всё было просто замечательно и быстро! Но не всё было так просто, как обещали.
Читать дальше →
Всего голосов 25: ↑24 и ↓1+23
Комментарии3

Почему сооснователь Wasmer ушёл из компании?

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

4 октября 2021 года — последний день работы одного из основателей Wasmer в компании. Wasmer — стартап, который разрабатывает очень популярную одноимённую среду выполнения WebAssembly. Речь пойдёт о том, чего автору статьи удалось достичь за время работы в компании.

Это не технический обзор — скорее, эмоциональный. Статья также о том, что вынуждает автора покинуть компанию. Автор считает, что его откровенность может помочь другим избежать погружения в тот кошмар, который пришлось пережить команде Wasmer. Материалом делимся к старту курса по Frontend-разработке.

Читать далее
Всего голосов 24: ↑23 и ↓1+22
Комментарии8

Как научиться работать в Blazor, делая что-то полезное. Часть I

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

Когда я вижу, как кто-то учит кого-то языку программирования, то частенько замечаю тенденцию показывать новичкам примитивные примеры в виде ToDo list. Помимо того, что подобные примеры не учат ничему полезному в программировании, они очень однобоки и не позволяют оценить все плюсы и минусы какой-либо среды разработки.

Меня это удручает. Давайте попробуем написать что-нибудь полезное и при этом показать вам, что можно и чего не нужно делать с достаточно новой технологией Microsoft под названием Blazor.
Читать дальше →
Всего голосов 24: ↑24 и ↓0+24
Комментарии9

Blazor WebAssembly: соединительные линии в SVG

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

Demo | GitHub

В статье описан способ реализации соединительных линий между SVG объектами. Соединительные линии автоматически перестраиваются при изменении положения объектов. Попутно рассмотрен метод OnParametersSet.

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

Бандлинг всего того, что не относится к обычному JavaScript-коду

Время на прочтение8 мин
Количество просмотров5.6K
Предположим, вы работаете над веб-приложением. В таком случае весьма вероятно то, что вам приходится иметь дело не только с JavaScript-модулями, но и с самыми разными другими ресурсами. Это и веб-воркеры (их тоже пишут на JavaScript, но они обособлены от обычного кода фронтенда), и изображения, и стили, и шрифты, и WebAssembly-модули, и иные материалы, входящие в состав сайта.

Ссылки на некоторые из подобных ресурсов можно включить непосредственно в HTML-код, но часто они логически связаны с компонентами, используемыми во многих местах проектов. Например, таблица стилей для особого выпадающего списка связана с JavaScript-кодом, реализующим этот список, а изображения иконок связаны с компонентом, реализующим панель инструментов. Точно так же WebAssembly-модуль связан с JavaScript-кодом, обеспечивающим использование этого модуля. Удобнее было бы обращаться к подобным ресурсам прямо из соответствующих JavaScript-модулей и загружать их динамически тогда (или если), когда загружается соответствующий компонент.


Ресурсы разных типов, импортируемые в JS-коде

Правда, в большинстве крупных проектов используются системы для сборки таких проектов, которые выполняют дополнительные оптимизации и реорганизации контента. Например — это бандлинг и минификация ресурсов. Они не могут выполнять код и предсказывать то, каким будет результат его запуска. Они не могут и анализировать все строковые литералы в JavaScript-программах и делать предположения касательно того, является ли конкретная строка неким URL, ведущим к какому-то ресурсу, или нет. Как сделать так, чтобы бандлеры «видели» бы динамические ресурсы, загружаемые JavaScript-компонентами и включали бы их в сборку проекта?
Читать дальше →
Всего голосов 43: ↑42 и ↓1+41
Комментарии2

OpenSilver. Воскрешаем Silverlight

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

12 октября Майкрософт прекращает поддержку Silverlight. С одной стороны - ок, все равно никто им уже не пользуется. А с другой, выясняется, что есть много компаний, которые 10 лет назад написали свои внутренние продукты на Silverlight, и успешно все это время работают. А сейчас нет ни людей, знакомых с бизнес логикой этих приложений, ни времени/возможности/знаний все это переписать с нуля.

Мы попытались бросить соломинку таким компаниям и выпустили OpenSilver - бесплатную  опенсорс реализацию Silverlight, которая работает во всех современных браузерах через WebAssembly.

Читать далее
Всего голосов 24: ↑23 и ↓1+22
Комментарии19

TypeScript Native (AOT) Compiler

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

TypeScript Native (AOT) Compiler

Имплементация нативного Ahead-of-Time компилятора для языка TypeScript

Читать далее
Всего голосов 17: ↑11 и ↓6+5
Комментарии25

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

Blazor WebAssembly: Drag and Drop в SVG

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

Demo | GitHub

В статье описан способ реализации перетаскивания SVG объектов.

Попутно рассмотрены следующие моменты разработки на Blazor:

Шаблонные компоненты. Содержимое шаблонного компонента можно задавать в родительском компоненте.

Передача событий от родительского компонента дочернему (Parent -> Child);

Проблема перезаписи входных параметров компонента внутри самого компонента (Overwritten parameters problem);

Двухсторонний биндинг между родителем и дочерним компонентом. Т.е. входной параметр дочернего компонента может менять и родительский компонент и дочерний;

Как сделать stopPropagation на Blazor.

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии2

WebAssembly в действии. Создание вашего первого модуля WebAssembly

Время на прочтение10 мин
Количество просмотров4.1K
image Привет, Хабр! Обращаем ваше внимание на одну новинку (сдана в типографию), доступную уже сейчас для покупки в электронном виде.

Книга была написана, чтобы помочь вам понять, что такое WebAssembly, как он работает и что с ним можно и нельзя сделать. Она показывает разные варианты сборки модуля WebAssembly в зависимости от ваших потребностей. Мы начинаем с простых примеров и затем переходим к более сложным темам, например к динамическому связыванию, параллельной обработке и отладке.

Книга предназначена для разработчиков, имеющих базовое знание C и C++, JavaScript и HTML. По WebAssembly есть информация в Интернете, однако она частично устарела и обычно не очень подробна и не освещает сложные темы.. В этой книге информация подана в удобочитаемом формате, который поможет как начинающим, так и опытным разработчикам создавать модули WebAssembly и взаимодействовать с ними.
Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии2

Что не так с сорсмапами и как с ними не связываться?

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

Здравствуйте, меня зовут Дмитрий Карловский и у меня… посттравматическое стрессовое расстройство после генерации сорсмапов. И сегодня, с вашей помощью, мы будем это лечить путём максимально глубокого погружения в травмирующие события.



Это — текстовая расшифровка выступления на HolyJS'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

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

Blazor WebAssembly: динамическое создание компонентов по JSON описанию

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

В заметке описан способ динамического добавления на страницу компонентов по JSON-описанию с помощью DynamicComponent из ASP.NET Core 6.0 (в настоящее время в статусе Preview).

Динамическое создание компонентов пригодится например при реализации конструктора форм:

• Форма описывается JSON-ом;

• Элементы (или контролы) формы не ограничены предустановленным набором. Контролы можно добавлять, в том числе подгружать из других dll-библиотек.

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии1

Что это за зверь — WebAssembly?

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


По мнению многих специалистов WebAssembly представляет будущее эффективных и безопасных вычислений. В чем же конкретно выражаются его достоинства, и почему стоит отнестись к этому языку более внимательно?
Читать дальше →
Всего голосов 49: ↑44 и ↓5+39
Комментарии30

Как запустить Jupyter Notebook в браузере без бэкенда

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

К старту нашего флагманского курса по Data Science представляем перевод обзора JupyterLite прямо из блога его разработчиков. JupyterLite — это перезагрузка множества попыток создать полный статический выполняемый в браузере дистрибутив Jupyter, чтобы не было необходимости запускать сервер Jupyter.

Цель проекта — дать лёгкую вычислительную среду в браузере, доступную по одному клику спустя несколько секунд, без установки чего-либо на устройство конечного пользователя. При работе с дистрибутивами в браузере не нужно предоставлять среду выполнения на бэкенде. Приложение в основном представляет собой набор статических файлов, поэтому проще масштабируется и его легче развёртывать.

Читать далее
Всего голосов 14: ↑12 и ↓2+10
Комментарии2

Использование потоков WebAssembly из C, C++ и Rust

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


Поддержка многопоточности стала одним из важнейших апгрейдов производительности в WebAssembly. Она позволяет выполнять либо части кода на разных ядрах параллельно, либо один код для независимых элементов входных данных, масштабируя его на максимально доступное пользователю число ядер. Все это значительно сокращает общее время выполнения.

В этой статье вы узнаете, как использовать потоки WebAssembly для переноса многопоточных приложений, написанных на языках C, C++ и Rust, в веб-среду.
Читать дальше →
Всего голосов 38: ↑38 и ↓0+38
Комментарии20

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