Цілі, ключові концепції та випадки використання

Ви замислювалися про ключові концепції та випадки використання WASM? Якщо ні, ми допоможемо вам.

WebAssembly (WASM) — це нова мова низького рівня, яка дозволяє розблокувати продуктивність, схожу на нативну, в Інтернеті.

У WebAssembly для початківців – частина 1 ми представили WASM з точки зору початківця, охоплюючи його визначення та обмеження. Крім того, ми розглянули функції WebAssembly, дорожню карту WASM і те, як JavaScript працює з WebAssembly, а не проти неї.

У цій публікації буде розглянуто WebAssembly, обговорюючи цілі WASM, ключові концепції та випадки використання. Ми також розглянемо деякі з його захоплюючих проектів.

Давайте розпочнемо.

Цілі WebAssembly

Щоб зрозуміти ключові поняття WebAssembly, нам спочатку потрібно поглянути на його цілі. Ці цілі включають:

  • Можливість використовувати переваги доступного апаратного забезпечення за допомогою двійкового формату, що економить час завантаження та розмір, як ціль компіляції. Простими словами, WASM використовує абстрактне синтаксичне дерево (AST) у двійковому форматі, підтримуючи компіляцію та виконання з рідною швидкістю. Використовуючи цей підхід, WASM може працювати на різних пристроях, включаючи IoT, Інтернет і мобільні пристрої.
  • Метою WASM є не зміна або зміна існуючої веб-платформи. Завдяки такому підходу WebAssembly може добре інтегруватися з поточною та минулою мережею. Це також дозволяє WebAssembly безперебійно працювати з JavaScript, включаючи виконання паралельних або синхронних викликів з JavaScript.
  • Для бездоганної роботи з політиками безпеки дозволів і єдиним джерелом.
  • Переконайтеся, що розробники можуть створювати свої рішення для підтримки небраузерних вставок.
  • Нарешті, надання розробникам інструментів для ефективної роботи з вихідним кодом WebAssembly, надаючи текстовий формат, який можна редагувати людині.

Основні поняття WebAssembly

Усередині капота WebAssembly виконує наступні кроки:

  • Спочатку вам потрібно написати код статично типізованою мовою з визначеними типами.
  • Після цього ви створюєте попередньо скомпільований модуль WASM і вводите код у компілятор двигуна.
  • Наведений вище крок гарантує, що WASM пропускає розбір і робить код готовим до відтворення у веб-браузері.
  12 найкращих онлайн-IDE та редакторів коду для розробки веб-додатків

Основні поняття, що лежать в основі роботи WebAssembly у веб-переглядачі, включають:

  • Пам’ять: пам’яттю в WebAssembly керують і записують її низькорівневі інструкції доступу до пам’яті. Технічно це ArrayBuffer зі змінним розміром і містить масив байтів пам’яті.
  • Модуль: Модуль у WebAssembly — це скомпільований виконуваний комп’ютерний код. Завдяки своїй формі без стану веб-браузер компілює модуль і надає спільний доступ до нього Windows і Workers. Крім того, модуль зберігає та оголошує імпорт та експорт, крім розміщення функцій, таблиць, типів, глобальних і пам’яті.
  • Таблиця: таблиця складається з усіх посилань і функцій із використанням змінного розміру типізованого масиву. Це усуває необхідність зберігати необроблені байти в пам’яті.
  • Екземпляр: у WASM екземпляр — це модуль під час виконання, з усіма станами в парі. Ці стани включають таблицю, пам’ять та інші імпортовані набори значень.

Ключові поняття WASM

Як веб-розробник, ви можете використовувати JavaScript API для виклику та визначення модулів, таблиць, екземплярів і таблиць. Крім того, ви використовуєте 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 містить помилки, які виникають під час створення екземпляра модуля.
  Як надсилати текстові повідомлення зі свого ПК

Варіанти та проекти WASM

Ми вже знаємо, що WebAssembly пропонує нативну продуктивність у веб-браузері. Однак, щоб справді зрозуміти, де ви можете його використовувати, ви повинні подивитися на його випадки використання. Давайте перерахуємо кілька випадків використання WASM.

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

  • Редагування відео чи аудіо, наприклад проект ffmpegwasm.
  • Відеоігри у веб-браузері, наприклад ці високопродуктивні ігри.
  • Наукова візуалізація та моделювання
  • Емуляція/симуляція платформ, таких як DOSBox, MAME тощо.
  • Шифрування
  • Віддалений робочий стіл
  • Інструмент розробника

Випадки використання

Із загальної точки зору переконливі приклади використання WebAssembly включають

  • Можливість писати швидший код може використовувати базове обладнання.
  • Крім того, ви також можете виконувати стиснення на стороні клієнта, що призводить до кращого часу завантаження та економії пропускної здатності. Отже, ви використовуєте процесор клієнта або базове обладнання для виконання стиснення та розпакування, а потім використовуєте ресурси сервера.
  • Крім того, ви можете використовувати різні мови програмування для написання коду для Інтернету, крім використання JavaScript. Наприклад, ви можете використовувати Rust, C і C++ для написання високопродуктивного коду для певних аспектів ваших веб-додатків.

Проекти

Якщо перейти до реальних прикладів, то варто згадати наступні проекти.

  • Figma покращила продуктивність своєї веб-програми за допомогою WebAssembly. Вони скоротили час завантаження під час ініціалізації програми, відтворення всього дизайну та навіть завантаження файлу дизайну. Як ми обговорювали раніше, WebAssembly також чудово підходить для стиснення. Figma реалізувала WASM, щоб збільшити розмір завантаження, значно зменшивши їх.
  • Pyodide: ще один захоплюючий проект WASM — це проект Pyodide, який випустила Mozilla. Це дозволяє вченим компілювати науковий стек Python до WebAssembly, включаючи NumPy, SciPy, Scikit-learn тощо, у браузері. Він пропонує прозоре перетворення об’єктів між Python і JavaScript. Нарешті, це також дозволяє розробникам використовувати веб-інтерфейси API за допомогою Python.
  • Brazor WebAssembly: структура Brazor WebAssembly дозволяє розробникам створювати односторінкові, клієнтські та інтерактивні веб-програми за допомогою .NET. Ви можете розмістити ці програми у браузері за допомогою середовища виконання .NET на основі WebAssembly. Тут, як розробник, ви отримуєте доступ до функцій браузера у вашому коді .NET за допомогою API JavaScript WebAssembly.
  Як використовувати нагадування Slack (створювати, редагувати, видаляти та переглядати нагадування)

Джерело: Figma

Інші багато відомих і гідних проектів використовують WebAssembly. Це Binaryen, Cheerp, Forest, Grain та інші.

Заключні думки

WebAssembly не дуже зручний для початківців. Однак, вивчивши випадки використання та ключові поняття, ви зможете чітко зрозуміти його можливості.

З огляду на захоплюючі проекти на ринку, це найкращий час для вивчення WebAssembly, особливо якщо ви займаєтеся веб-розробкою. Здатність WASM працювати поза браузером також робить його чудовим вибором для розробки, орієнтованої на продуктивність.

Вам сподобалось читати статтю? Як щодо того, щоб поділитися зі світом?