Цели, ключови концепции и случаи на употреба

от

Чудили ли сте се за ключовите концепции и случаи на употреба на WASM? Ако не, ние ви покриваме.

WebAssembly(WASM) е нов език на ниско ниво, който ви позволява да деблокирате подобна на естествената производителност в мрежата.

В WebAssembly за начинаещи – част 1, ние представихме WASM от гледна точка на начинаещи, като покрихме неговата дефиниция и ограничения. Освен това прегледахме функциите на WebAssembly, пътната карта на WASM и как JavaScript работи с WebAssembly, а не срещу него.

Тази публикация ще изследва WebAssembly чрез обсъждане на WASM цели, ключови концепции и случаи на употреба. Ще разгледаме и някои от неговите вълнуващи проекти.

Да започваме.

Цели на WebAssembly

За да разберем ключовите концепции на WebAssembly, първо трябва да разгледаме неговите цели. Тези цели включват:

  • Възможност да се възползвате от наличния хардуер чрез използване на двоичен формат, ефективен по време на зареждане и размера, като цел за компилация. С прости думи, WASM използва абстрактно синтактично дърво (AST) в двоичен формат, поддържайки компилация и изпълнение с естествена скорост. Използвайки подхода, WASM може да работи на различни устройства, включително IoT, Web и мобилни устройства.
  • Целта на WASM не е да променя или променя съществуващата уеб платформа. С този подход WebAssembly може да се интегрира добре с настоящата и предишната мрежа. Той също така позволява на WebAssembly да работи безпроблемно с JavaScript, включително изпълнение успоредно или извършване на синхронни извиквания от JavaScript.
  • За безпроблемна работа с политики за сигурност на разрешенията и същия произход.
  • Уверете се, че разработчиците могат да проектират своите решения, за да поддържат вграждания извън браузър.
  • И накрая, предоставяне на разработчиците на инструментите за ефективна работа с изходния код на WebAssembly чрез предоставяне на редактиран от хора текстов формат.
  Как да направите плакат с помощта на Microsoft PowerPoint

Ключови концепции на WebAssembly

Вътре в капака WebAssembly следва следните стъпки:

  • Първо трябва да напишете код на статично въведен език с дефинирани типове.
  • След като сте готови, генерирате предварително компилиран WASM модул и подавате кода в компилатора на двигателя.
  • Горната стъпка гарантира, че WASM пропуска анализирането и прави кода готов за изобразяване в уеб браузъра.

Ключовите концепции зад WebAssembly, работещи в уеб браузъра, включват:

  • Памет: Паметта в WebAssembly се управлява и записва от неговите инструкции за достъп до паметта на ниско ниво. Технически това е ArrayBuffer с възможност за промяна на размера и съдържа масив от байтове памет.
  • Модул: Модулът в WebAssembly е компилиран изпълним компютърен код. Поради своята форма без състояние, уеб браузърът компилира модула и го споделя между Windows и Workers. Също така, модулът съхранява и декларира импорти и експорти, в допълнение към поместването на функциите, таблиците, типовете, глобалните стойности и паметта.
  • Таблица: Таблицата се състои от всички препратки и функции, използващи въведен масив с възможност за промяна на размера. Това премахва необходимостта от съхраняване на необработени байтове в паметта.
  • Екземпляр: В WASM екземплярът е модул по време на изпълнение, като всички състояния са сдвоени. Тези състояния включват таблица, памет и други импортирани набори от стойности.

Ключови концепции на WASM

Като уеб разработчик можете да използвате API на JavaScript за извикване и дефиниране на модули, таблици, екземпляри и таблици. Освен това вие използвате JavaScript, за да извиквате WASM експорти синхронно в рамките на функциите на JavaScript. Следователно JavaScript работи добре с WebAssembly, тъй като можете да използвате WASM за писане на високопроизводителни приложения в уеб браузъра.

WASM обекти

Когато работите с WebAssembly, трябва да следите осем WASM обекта. Тези обекти включват:

  • WebAssembly.Global – Глобалният обект е екземпляр на глобална променлива. Той е достъпен както от WebAssembly.Module, така и от JavaScript.
  • WebAssembly.Module – Тук обектът Module съдържа WASM кода без състояние. Кодът е предварително компилиран.
  • WebAssembly.Instance – WebAssembly.Instance е изпълним екземпляр със състояние на WebAssembly.Module.
  • WebAssembly.Table – Обектът Table съдържа препратки към функции и действа като обвивка на JavaScript.
  • WebAssembly.CompileError – Обектът CompileError съдържа всички грешки по време на валидиране и декодиране.
  • WebAssembly.RuntimeError – Тук обектът RuntimeError изброява всички грешки по време на изпълнение.
  • WebAssembly.LinkError – Обектът LinkError съдържа грешки, които възникват по време на инстанциране на модул.
  10 причини да използвате CRT вместо светодиоди за ретро геймъри или нещо подобно

Случаи и проекти на WASM

Вече знаем, че WebAssembly предлага нативна производителност в уеб браузъра. Въпреки това, за да разберете наистина къде можете да го използвате, трябва да разгледате случаите на употреба. Нека изброим по-долу няколко от случаите на използване на WASM.

Случаите на използване на WebAssembly обхващат както вътре, така и извън браузъра. Например, ако искате да използвате WASM в браузър, можете да направите много неща, включително:

  • Редактиране на видео или аудио, като например проекта ffmpegwasm.
  • Видеоигри в уеб браузъра, като тези игри с висока производителност.
  • Научна визуализация и симулация
  • Емулация/симулация на платформа като DOSBox, MAME и др.
  • Шифроване
  • Отдалечен работен плот
  • Инструменти за разработчици

Случаи на употреба

От обща гледна точка завладяващите случаи на използване на WebAssembly включват

  • Възможността за писане на по-бърз код може да се възползва от основния хардуер.
  • Освен това можете също така да правите компресия от страна на клиента, което води до по-добро време за зареждане и спестяване на честотна лента. И така, вие използвате процесора на клиента или основния хардуер, за да извършите компресията и декомпресията, след което използвате ресурсите на сървъра.
  • Освен това можете да използвате различни езици за програмиране, за да пишете код за уеб, различен от използването само на JavaScript. Например, можете да използвате Rust, C и C++, за да напишете високопроизводителен код за определени аспекти на вашите уеб приложения.
  Как да добавите предварителни настройки към Adobe Lightroom

проекти

Ако преминем към примери от реалния свят, заслужава да се споменат следните проекти.

  • Figma подобри производителността на своето уеб приложение с използването на WebAssembly. Те намалиха времето за зареждане по време на инициализация на приложението, изобразяване на целия дизайн и дори изтегляне на файл с дизайн. Както обсъдихме по-рано, WebAssembly също е страхотен за компресиране. Figma внедри WASM, за да подобри размера на изтеглянето, като ги сви значително.
  • Pyodide: Друг вълнуващ проект WASM е проектът Pyodide, който беше пуснат от Mozilla. Той позволява на учените да компилират научен стек на Python към WebAssembly, включително NumPy, SciPy, Scikit-learn и др., към браузъра. Предлага прозрачно преобразуване на обекти между Python и JavaScript. И накрая, той също така позволява на разработчиците да използват уеб API с помощта на Python.
  • Brazor WebAssembly: Рамката Brazor WebAssembly позволява на разработчиците да изграждат едностранични, клиентски и интерактивни уеб приложения с .NET. Можете да хоствате тези приложения в браузъра с базираната на WebAssembly .NET среда за изпълнение. Тук, като разработчик, получавате достъп до функционалността на браузъра във вашия .NET код с помощта на JavaScript API на WebAssembly.

Източник: Figma

Други много известни и достойни проекти използват WebAssembly. Това са Binaryen, Cheerp, Forest, Grain и други.

Последни мисли

WebAssembly не е точно удобен за начинаещи. Въпреки това, като изучавате неговите случаи на употреба и ключови концепции, можете ясно да разберете неговите възможности.

С вълнуващи проекти на пазара, това е най-доброто време да научите WebAssembly, особено ако се занимавате с уеб разработка. Способността на WASM да работи извън браузъра също го прави отличен избор за разработка, ориентирана към производителността.

Приятно ви е да прочетете статията? Какво ще кажете за споделяне със света?