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

Автор

Чи ви коли-небудь замислювалися над основними принципами та сферами застосування WASM? Якщо ні, ми тут, щоб вам допомогти розібратися.

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

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

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

Тож, почнемо.

Мета WebAssembly

Для глибшого розуміння фундаментальних принципів WebAssembly, перш за все, необхідно розглянути його основні цілі. Серед них:

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

Ключові концепції WebAssembly

Принципи роботи WebAssembly можна звести до наступних кроків:

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

Основні концепції, що лежать в основі функціонування 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++ для створення високопродуктивного коду для певних аспектів веб-застосунків.

Проєкти

Розглянемо кілька конкретних проєктів, які використовують WebAssembly:

  • Figma покращила продуктивність свого веб-застосунку за допомогою WebAssembly. Вони скоротили час завантаження під час ініціалізації програми, відтворення дизайну та завантаження файлів. Крім того, WebAssembly чудово підходить для стиснення, що дозволило Figma значно зменшити розмір файлів для завантаження.
  • 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.

Джерело: Figma

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

Підсумкові міркування

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

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

Чи сподобалася вам стаття? Поділіться нею з іншими!