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

WebAssembly *

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

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

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

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

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

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

Для этого у нас должно быть такое графическое представление базы, которое 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 мин
Количество просмотров 6K


Как я сказал в первой части этой статьи, мы решили написать систему, которая преобразует команды для отправки многочисленных инструкций на различные 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.4K

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

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

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

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

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.8K

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

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

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

TypeScript Native (AOT) Compiler

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

TypeScript Native (AOT) Compiler

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

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

Blazor WebAssembly: Drag and Drop в SVG

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

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 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн

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

Время на прочтение 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 мин
Количество просмотров 9K


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

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

Приключения в портировании большой C++ кодовой базы на WASI WebAssembly

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

Привет хакеры, сегодня мы с вами отправимся в путешествие в мир индустриального C++ и Webassembly. Недавно мне довелось поучаствовать в портировании такой сложной и большой кодовой базы на C/C++ как SpiderMonkey на WASI платформу и я хочу поделиться с вами этим опытом.

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

Пишем frontend на golang

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

Вас задрало, что node_modules соревнуются по количеству используемого места с вашей коллекцией музыки?

Вы перечитали инструкцию к Redux  в шестидесятый раз и поняли две вещи: "До меня кажется доходит..." и "Думаю, мне стоит перечитать это ещё раз!"

Вы в очередной раз узнали, что 1 + "1" == "11", а  [] - {} == NaN?

Билд скрипт в webpack занимает больше места чем ваша библиотека на javascript?

Тогда заходите под кат, я покажу вам, как можно перевести ваш фронтэнд на го. 

ничеgoшеньки...
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 18

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