У кожному браузері, незалежно від того, використовуєте ви Chrome, Firefox, Edge або Safari, код інтерпретується та виконується рушієм JavaScript, який тільки запускає його. На жаль, JavaScript не ідеальний для кожного завдання, яке ми хотіли б виконати. Саме тоді на допомогу приходить WebAssembly.
WebAssembly — новий тип коду, який можна запускати у сучасних браузерах. Його було створено для досягнення більшої продуктивності у світі вебу. Завдяки низькорівневому бінарному формату, що має невеликий розмір, він швидко завантажується і виконується. Ви не пишете на WebAssembly, а лише компілюєте іншу високорівневу мову у нього.
Асемблер зазвичай відноситься до зрозумілих для людей мов, що близькі до машинного коду. Останній є набором чисел, які добре сприймаються вашим процесором.
Кожна високорівнева мова програмування транслюється у машинний код для запуску процесором цього коду. Різні архітектури процесорів потребують різні машинні коди, а отже, і різні асемблери.
Попри свою назву, WebAssembly не зовсім мова ассемблеру, тому що він не призначений для якоїсь певної машини. Насправді, WebAssembly — для браузерів, і коли ви надаєте код для виконання браузером, ви не знаєте машина якої архітектури виконуватиме ваш код.
WebAssembly — мова для концептуальної машини, яка є надзвичайно популярною серед реального обладнання. Коли браузер завантажує код WebAssembly, він швидко перетворює його на машинний асемблер.
WebAssembly зберігається у текстовому форматі, який легко читається (.wat), але двійкове представлення — це те, що насправді передається браузеру (.wasm).
Що дозволяє WebAssembly робити такі ж речі, як, скажімо, C, C++ або Rust та компілювати код у так званий модуль WebAssembly. Його можна завантажити у ваш веб-застосунок та викликати з JavaScript.
Варто зазначити, що це не заміна JavScript: WebAssembly працює разом з JavScript.
Навіщо нам потрібен WebAssembly
Згадайте випадки, коли вам необхідно використовувати ПЗ поза браузером: відеоігри, обробка відео, 3D графіка, створення музики. Такі програми виконують безліч обчислень та вимагають високого рівня продуктивності. Такого рівня важко досягнути у JavaScript.
JavaScript створювався, як проста скриптова мова, призначена для створення деякої інтерактивності у вебі, повного легких гіпертекстових документів. JavaScript мав бути легким у засвоєнні та написанні, але не швидким. З роками браузери почали додавати оптимізацію до їх інтерпретації JavaScript, що призвело до значних покращень продуктивності.
З пришвидшенням мови, перелік функцій, які можна створити у браузері розширився. Нові API впровадили інтерактивні графіки, потокове відео, офлайн перегляд та багато іншого. У свою чергу, все більше багатих застосунків, що спершу були лише нативними, почали переходити у веб. Сьогодні можна з легкістю редагувати документи та надсилати електронні листи з браузера, але є сфери, де продуктивність JavaScript досі залишає бажати кращого.
Відеоігри особливо складні з цього погляду, тому що необхідно координувати не лише відео та аудіо, але також часто фізику та штучний інтелект. Змога досягти продуктивності для ефективного запуску ігор у вебі, відчинити двері для залучення багатьох інших застосунків у веб — те, що WebAssembly може забезпечити.
Чому веб такий привабливий?
Привабливість вебу у тому, що він схожий на магію, адже працює усюди. Ніякого завантаження та установки. В один клік веб застосунки завантажуються в міру потреби. Так безпечніше, ніж завантажувати та запускати бінарник прямо на комп'ютері, тому що браузери мають встановлені параметри безпеки, а код, запущений з цими параметрами, не зашкодить вашій системі. А обмін у вебі — це просто: посилання є рядками, які ви можете розмістити будь-де.
Веб — єдина дійсно універсальна платформа, що робить ваш застосунок доступним на будь-якому пристрої. Це також дозволяє підтримувати єдину кодову базу, спрощувати оновлення та бути впевненим, що кожен зможе отримати доступ до вашого застосунку.
Завдяки потужним вбудованим можливостям та інтерактивності, які пропонує веб, ми перейшли від гіпертексту та невеликої мови сценаріїв до неймовірно потужної та популярної платформи, наповненої чудовими застосунками і можливостями. Але до цього часу веб ґрунтовно працював завдяки тій самій мові сценаріїв, що першочергово не була створена для такої потужної функціональності.
Що забезпечує WebAssembly?
Наступні пункти роблять WebAssembly особливим та незамінним для вебу:
- швидкість
- портативність
- гнучкість
WebAssembly був розроблений для швидкості. Його бінарники набагато менші за текстові файли JavaScript, що дозволяє їм завантажуватись швидше, а це особливо важливо для повільних мереж.
До того ж, вони швидше декодуються та виконуються. JavaScript — динамічно типізована мова, тому типи змінних не повинні бути визначені заздалегідь, і нема потреби їх компілювати надалі. Такий підхід дозволяє писати код швидко та легко, але також означає, що рушій JavaScript має багато роботи: парсити, компілювати та оптимізувати код, поки він виконується на сторінці.
Парсинг JavaScript полягає у перетворенні звичайного тексту у структуру даних під назвою абстрактне синтаксичне дерево та перетворює її у двійковий формат. WebAssembly доставляється як бінарник, а його декодування відбувається набагато швидше. Він статично типізований, на відміну від JavaScript, його рушію не треба робити припущення про типи, що використовуватимуться, під час компіляції. Більша частина оптимізації відбувається під час компіляції сирцевого коду, до того як він потрапляє у браузер. Пам'ять керується вручну, як у мовах, подібних до С та С++, тому немає сміття. Усе це працює краще та забезпечує більш надійною продуктивністю. Час виконання бінарників WASM лише на 20% повільніше за виконання такого ж машинного коду.
Одним з важливих аспектів при розробці WebAssembly була портативність. Для запуску застосунку на девайсі, він повинен бути сумісним з його процесором, архітектурою та ОС. А це означає, що необхідно компілювати сирцевий код для кожної комбінації операційної системи та архітектури ЦП, яку ви хочете підтримувати. З WebAssembly необхідний лише один крок компіляції — і ваш застосунок запуститься у будь-якому сучасному браузері.
Ви можете переносити у веб не лише власні застосунки, а й неймовірну кількість бібліотек С++ та застосунків з відкритим сирцевим кодом, що існують зараз. С++ підтримується практично на кожній платформі, разом з iOS та Android. З WebAssembly, ви можете використовувати цю мову як спільну мову для веб- та мобільних застосунків.
Найбільш дивовижна річ про WebAssembly — з ним написання для вебу буде більш гнучким. До цього часу JavaScript була єдиною повністю підтримуваною мовою у веб-браузерах. З WebAssembly, веб розробники матимуть змогу обрати інші мови, тому більше розробників зможуть писати код для вебу. JavaScript досі буде найкращим вибором для більшості потреб, але натомість, буде можливість звертатися до спеціалізованої мови, коли вам дійсно необхідне прискорення. Такі частини як UI та логіка застосунку можуть бути на JavaScript з основною функціональністю на WebAssembly. При оптимізації продуктивності в наявних JS-застосунках, «вузькі місця» можна переписати мовою, що краще підходить для можливої проблеми.
На даний час повністю підтримуваними мовами є С, С++ та Rust, але існує й багато інших на стадії розробки: Kotlin та .NET, котрим вже було надано експериментальну підтримку.
Як це працює?
Вам необхідно мати інструмент, що компілюватиме ваш сирцевий код у WebAssembly. Одним зі способів є застосування модульного компілятора LLVM, який доступний для різних мов. Для компіляції С та С++ можна використовувати спрощений інструмент, що базується на LLVM — Emscripten. Rust Nightly має власний компілятор rustc, що може одразу виводити WebAssembly.
Якщо у вас є «Hello world», написаний на С, приведена нижче команда Emscripten згенерує необхідні файли для запуску у браузері. Ви отримаєте модуль WebAssembly, поруч з HTML and JS файлами.
emcc hello.c -s WASM=1 -o hello.html
HTML та JS файли є необхідними, тому що у WebAssembly немає прямого доступу до будь-яких API платформ —DOM, WebGL, WebAudio тощо. Для роботи з переліченими технологіями та для відображення на сторінці результату роботи вашого коду на WebAssembly, вам необхідно пройти через JavaScript. Emscripten створює JS код, що встановлює ваш модуль та робить можливою комунікацію з веб API. Файл HTML завантажує цей JS та відображає результат роботи WebAssembly в елемент textarea або canvas.
Ви можете розглядати бінарники WebAssembly як звичайні модулі застосунку: браузер може витягувати, завантажувати та виконувати їх. Вони мають імпорт та експорт, що дозволяє працювати з ними як зі звичайними об'єктами JavaScript . Ви можете викликати функції WebAssembly у коді JavaScript, а функції JavaScript у модулях WebAssembly.
У WebAssembly існує лише чотири примітивні типи, і всі вони є числовими — цілочислові та з плаваючою комою (i32, i64, f32 та f64). Тож передача більш складних даних між JavaScript та WebAssembly не є очевидною. Наприклад. якщо ви хотіли б передати рядок, вам необхідно закодувати його у масив чисел та передати вказівник на нього. WebAssembly може лише читати та писати з власної лінійної пам'яті та не має прямого доступу до зовнішніх змінних JavaScript, поки вони не будуть скопійовані у пам'ять або передані через стек викликів.
Зараз створення багатьох викликів у JavaScript є не дуже швидким, тому що рушій повинен виконувати деяке налаштування кожного разу. Ймовірно, таке становище зміниться у майбутньому, але зараз варто думати про WebAssembly як про систему, що добре працює ізольовано, та використовувати її для розвантаження великих шматків роботи.
Якщо ви хочете спробувати без будь-якого встановлення, перейдіть за посиланнями:webassembly.studio або WebAssembly Explorer.
Чи можна користуватися WebAssembly?
Так!
Він тут і він реальний. Підтримка WebAssembly була додана у всіх основних браузерах минулого року. Зараз він підтримується 74.93% користувачів по всьому світі й, навіть, 82.92% користувачів настільних комп'ютерів. Як запасний варіант для старих браузерів можна використовувати Emscripten для компіляції у asm.js — підмножина JavaScript, що використовує лише числа (ніяких рядків, об'єктів тощо). Такий формат і привів до створення WebAssembly і широко використовується у вебі, наприклад, при завантаженні фотографій на Facebook та для обробки зображень у Adobe's Lightroom.
WebAssembly вже добре зарекомендував себе на практиці.
Вище було зазначено, що відео ігри — велика мета для WebAssembly. В Unity та Unreal Engine 4 вже є робочі демо. Ви можете пограти у Tanks! з WebAssembly, запущеним у рушії Unity, а в Epic є невелике демо WebAssembly онлайн.
Figma — інструмент для дизайну інтерфейсу, що запускається у браузері та дозволяє дизайнерам з легкістю співпрацювати та ділитися своєю роботою. Здебільшого написаний на C++, він має також 2D WebGL рушій рендерингу, що може обробляти дуже великі документи. Спочатку для компіляції C++ коду для вебу використовували asm.js. З використанням WebAssembly час завантаження пришвидшився більше, ніж у 3 рази, залежно від розміру документа.
AutoCAD — ПЗ для дизайну, яке здебільшого застосовується в інженерії для створення схем планування, електричних ланцюгів та інших конструкцій. Він був написаний на C++ більше, ніж 35 років тому, тобто ще до виникнення вебу. З WebAssembly AutoCAD став зараз доступний як веб-застосунок без потреби переписувати величезний код іншою мовою.
Очікується ще більше застосунків, що використовуватимуть WebAssembly. Можна вже оглянути цікаві демо, як-от: відеоредактор, raytracer, алгоритм розпізнавання обличчя, що працює безпосередньо у браузері.
Далі буде...
Браузери вже працюють над новим функціоналом. Підтримка потоків та збірки сміття вже наближаються, що зробить WebAssembly більш слушним для таких мов як Java, C# та Go. Важливою метою є створення інструментів для налагодження, що підтримують карти коду, які дозволять розробникам з легкістю мапити WebAssembly до їхнього сирцевого коду.
JavaScript, як і раніше, займатиме важливе місце у веб розробці. Складно заперечити, що JavaScript відрізняється гнучкістю у створенні застосунків, а наявні прогалини наразі складно заповнити WebAssembly. Компіляція JavaScript у WebAssembly не є можливою, і вона, насправді, немає сенсу, тому що браузери вже створені для безпосередньої роботи з JS та збільшення її продуктивності.
Але навіть якщо ви продовжите працювати тільки з JavaScript, ви все ще зможете отримати перевагу від WebAssembly і пришвидшенням, що їм забезпечується, через поліпшені бібліотеки та фреймворки. Досить скоро ви зможете завантажити та імпортувати модулі як будь-які інші ECMAScript модулі, використовуючи <script type='module'> та просто викликаючи їх функції з JavaScript. Щодо фреймворків, Ember вже вивчає реалізацію WebAssembly для їх Glimmer VM; також існує потенціал для впровадження деяких функцій React у WebAssembly.
Майбутнє вже тут, і воно виглядає яскравим та швидким🚀🌞
Ще немає коментарів