TypeScript для WebAssembly: что, как и почему

Кривая обучения WASM очень крутая. Иногда это отпугивает людей. AssemblyScript - идеальный способ написания совместимого кода, если вы уже знаете TypeScript.

Ассемблерные и подобные ассемблерам языки очень мощны в том смысле, что они обеспечивают фантастическую производительность, учитывая, насколько они близки к своей среде исполнения (то есть виртуальной машине, на которой они работают, и т. Д.), Но в то же время им обычно не хватает всего. нам нравятся языки программирования: актуальные высокоуровневые абстракции, такие как операторы IF, циклы FOR, КЛАССЫ и тому подобное.

Таким образом, использование этих низкоуровневых языков требует очень сложного обучения, учитывая, насколько они отличаются от других языков. Именно это и происходит с WebAssembly (или, как его еще называют, WASM), языком ассемблерного типа, который браузеры теперь поддерживают (или, я бы сказал, начинают поддерживать). Вы можете использовать его, когда действительно нуждаетесь в повышении производительности, проблема? Это выглядит так:

Теперь не беспокойтесь, если вы пытаетесь интерпретировать этот код и ничего не добиваетесь, цель WASM - не писать вручную, а скомпилировать с других языков. Итак, вы можете использовать код Rust и скомпилировать его в WASM или даже в Go. Это означает, что вы можете писать веб-совместимый код на других языках и запускать его в браузере. Какие?! Да, вы правильно прочитали, это основная цель WASM - иметь низкоуровневый интерфейс для любого другого языка программирования.

Опять же, если вы хотите использовать WASM, вам нужно изучить один из этих языков, который теперь имеет компилятор для WASM, и одним из таких языков является TypeScript (или почти) благодаря WebAssemblyScript.

Совет: Делитесь своими повторно используемыми компонентами между проектами с помощью Bit (Github). Bit упрощает совместное использование, документирование и организацию независимых компонентов любого проекта .

Используйте его для максимального повторного использования кода, совместной работы над независимыми компонентами и создания масштабируемых приложений.

Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.

Что же тогда такое WebAssemblyScript?

Теперь, когда вы знаете, что такое WebAssembly, вы понимаете, как вам нужен другой язык, и WebAssemblyScript является именно таким: по сути, более строгая версия TypeScript (если вы можете в это поверить), которую можно легко скомпилировать в WASM.

Что я имею в виду под строгим? Что ж, TypeScript по своей природе имеет несколько ограничений по сравнению с JavaScript, когда дело доходит до типов и всего, что с ними связано, потому что в этом весь смысл!

Тем не менее, он по-прежнему выигрывает от динамизма и гибкости JavaScript, который сложно эффективно скомпилировать раньше времени. Помните, что JavaScript компилируется во время выполнения, и здесь мы не можем этого сделать, нам нужно сначала его скомпилировать, а затем выполнить этот вывод.

Таким образом, с WebAssemblyScript мы не можем делать то, что мы привыкли с TypeScript:

• Больше никаких типов any или undefined. Вы должны быть явным, когда это важно, то есть есть некоторый вывод типа, но вы не можете допускать здесь динамическое поведение.
• Вы не можете создавать объединения типов (например, string | number).
• Объекты нужно строго типизировать. Это означает, что вы не можете просто создавать буквальные объекты и начинать добавлять к ним свойства, вы должны использовать либо Map, либо правильный class с предопределенными типами.
• Все модули выполняются в защищенной песочнице, что означает отсутствие прямого доступа к каким-либо внешним API. Это замечательно, пока вы не осознаете, это означает отсутствие прямого доступа к DOM для интерфейсных проектов. Вам придется вручную импортировать и экспортировать функции, которые вы хотите использовать или поделиться с внешним миром вашего модуля.
• На данный момент текущая реализация WebAssemblyScript позволяет обмениваться только числовыми значениями между вашими модулями и внешним миром (т.е. средой выполнения, в которой выполняется ваш код). Это означает, что об обмене строками, массивами и объектами (на данный момент) не может быть и речи. У них есть обходные пути, которые также ограничиваются строками и массивами, но это всего лишь обходные пути. Реальные решения все еще находятся в стадии разработки.
• Закрытия еще не реализованы. Это функция, в которой они в значительной степени заинтересованы, но, учитывая, что она еще не реализована, вы должны быть уверены, что не используете какие-либо замыкания в своем коде. Это может быть сложнее сказать, чем сделать, учитывая, насколько частью языка являются эти конструкции.

Их рекомендация, когда дело доходит до отсутствия поддержки закрытий, - реализовать что-то вроде этого:

Либо используйте цикл for, либо переместите объявление sum за пределы функции computeSum, например:

Моя личная рекомендация - выбрать второй вариант и по возможности избегать функционального подхода, чтобы избежать закрытий.

Как использовать WebAssemblyScript?

Если вам все еще интересно ознакомиться с этим проектом, то вам повезло, потому что использовать его относительно легко.

Прежде всего, вам необходимо установить Node, потому что мы собираемся установить пару пакетов npm.

Сначала создайте новую папку проекта и, войдя в нее, запустите:

$ npm init

Это запустит ваш проект, он задаст несколько вопросов, вы можете оставить значения по умолчанию для всех из них. Затем, когда это будет решено, выполните следующие команды:

$ npm install --save @assemblyscript/loader
$ npm install --save-dev assemblyscript

Это установит все, что вам нужно для начала работы, как только обе команды будут завершены, вы можете запустить:

$ npx asinit .

Это создаст необходимую структуру папок со всем стандартным кодом.

Как видите, создается довольно много файлов и папок. После этого вам нужно будет установить новые зависимости, добавленные в проект с помощью npm install.

Вот и все, после того как вы установили все новые зависимости, вы действительно готовы приступить к работе. Я знаю, что это звучит как большая настройка, но это все. Теперь вы можете начать добавлять код в папку assembly, а когда будете готовы его скомпилировать, просто запустите:

$ npm run asbuild 

И ищите скомпилированный код в папке build. Пример кода уже включен, поэтому вы можете запустить эту команду прямо из коробки и посмотреть, что она делает.

Наконец, если вы хотите протестировать свой скомпилированный код, вы можете создать index.html файл в корне проекта и добавить к нему следующий код:

Опять же, требуется много шаблонного кода, чтобы просто загрузить ваш код WASM и использовать его, но подумайте о возможностях, которые вы получаете через него. Обратите внимание, как мы используем объект WebAssembly из ниоткуда. Он был протестирован в Chrome и отлично работает, а это значит, что это встроенная функция ваших браузеров, которые вы не используете.

Зачем вам использовать WebAssemblyScript?

После всего этого, всех ограничений и всего необходимого шаблонного кода, зачем вам тратить время на написание полу-машинописного текста, чтобы потом загружать его таким неудобным образом?

Что ж, в конце концов, есть преимущества, особенно для WebAssembly, вы должны помнить, что, поскольку вы компилируете код перед выполнением, у вас есть следующие преимущества:

• Уровень безопасности, который вам не может дать ни один динамический язык. Если ваш код компилируется, вы можете быть уверены, что он не приведет к сбою из-за неправильно введенной переменной.
• Надежная оптимизация. Помните, что мы здесь не имеем дело с JIT, которая требует времени выполнения, чтобы понять, как оптимизировать ваш код. Ваш скомпилированный код будет оптимизирован в нужных местах, каждый раз вы его выполняете, несмотря ни на что.
• С точки зрения производительности, если мы говорим о тяжелом вычислительном коде, то он намного лучше, чем JavaScript.

И, в частности, если вы добавите ко всему этому тот факт, что вам не нужно изучать совершенно новый язык (например, Rust или C), чтобы скомпилировать его для WASM, WebAssemblyScript приобретает полный смысл. Это идеальный способ восполнить пробел для разработчиков JavaScript, которые не привыкли к другим языкам.

Конечно, изучение совершенно нового языка также имеет свои преимущества, но если время не на вашей стороне, всегда полезно воспользоваться уже знакомым синтаксисом!

Итак, чтобы ответить на вопрос, зачем вам использовать WebAssemblyScript? Хорошо, если вы имеете дело с тяжелой вычислительной проблемой, такой как:

• Редактирование видео
• Музыкальные приложения
• VR-проекты
• Распознавание изображений
• Разработка игр (по крайней мере, некоторые части)
• Алгоритмы, связанные с криптографией
• …так далее

Тогда, возможно, WASM и, в частности, WebAssemblyScript могут быть хорошим вариантом.

Если, с другой стороны, вы имеете дело с обычными проектами, связанными с JavaScript (или TypeScript), такими как веб-сайт или REST API, то нет, нет необходимости выполнять всю суету, необходимую для добавления кода WASM в ваш проект. (если у вас есть проблемы с производительностью в этих проектах, проблемы где-то еще, а не во время выполнения).

Конечно, у WebAssemblyScript есть ограничения, как я уже упоминал, и для полной реализации проекта потребуется время. Но если вы думаете об этом как о входе в мир WASM, после того, как вы протестируете возможности, к которым вы можете получить доступ, и в конечном итоге переключитесь на компиляцию Rust или C в WASM (по крайней мере, пока этот проект еще не завершен ), то это однозначно очень хороший вариант.

Вы раньше использовали WebAssemblyScript или даже WASM? Какой у вас был опыт с этим? Вы бы порекомендовали это?

Оставьте комментарий ниже и поделитесь своим опытом, я хотел бы знать, как вы используете эту технологию в повседневной жизни!

Учить больше