В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят. И конечно же я хотел поделиться рецептом приложения. Возьмем наш любимый React и добавим Yew, приправим всё это webpack-ом и добавим щепоточку module‑federation. Статья будет интересна всем, кто хочет познакомиться с WebAssembly и добавить разнообразия в список используемых фреймворков и библиотек для написания пользовательских компонентов.

Что такое Wasm и зачем он был создан

WebAssembly (Wasm) — это новый открытый формат байт-кода, исполняемого современными браузерами. Сейчас он поддерживается во всех браузерах. Подробнее можно почитать тут.

Wasm позволяет переносить код, написанный на языках C, C++, C#, Rust и других (поддерживаемый список можно посмотреть тут), для использования в браузерной среде с производительностью, близкой к нативной. Важно понимать, максимальная производительность WebAssembly равна максимальной производительности JavaScript, но написать оптимизированный по памяти код иногда проще на WebAssembly. Подробнее можно почитать в статье Вячеслава Егорова. 

Язык WebAssembly предназначен для дополнения и работы вместе с JavaScript, что позволяет веб-разработчикам использовать преимущества обоих языков:

• JavaScript — это язык высокого уровня, гибкий и достаточно выразительный для написания веб-приложений. У него много преимуществ: он динамически типизирован, не требует компиляции и обладает огромной экосистемой, которая предоставляет мощные фреймворки, библиотеки и другие инструменты.

• WebAssembly — это низкоуровневый язык, похожий на ассемблер, с компактным двоичным форматом, который работает с почти естественной производительностью и предоставляет низкоуровневые модели памяти для таких языков как C++ и Rust, чтобы компилировать их для работы в интернете. Обратите внимание, что у WebAssembly на будущее есть высокоуровневая цель по поддержке языков со сборщиками мусора в модели памяти.

Как WebAssembly работает в браузерах

Сейчас во всех браузерах уже есть поддержка WebAssembly: его код исполняется в специальной виртуальной машине. Выглядит это так. Код на низкоуровневом языке компилируется с помощью мощных компиляторов (например, LLVM ) или набора инструментов таких как Emscripten и превращается в бинарный формат. Но у него есть и текстовое представление:

(module
  (func import “imports” “imported_func”) (param i32))
  (func (export “exported_func”) 
   i32.const 42 
  call $i)
)

Затем модуль JavaScript вызывает Wasm-модуль. Пример кода:

WebAssembly.instantiateStreaming(
    fetch("simple.wasm"),
    {
   	 imports: {
   		 imported_func: console.log,
   	 },
    },
).then((module) =>
    module.instance.exports.exported_func(),
);

В браузере модуль скачивается, парсится и исполняется. 

Кажется, что всё довольно просто. Благодаря всей этой магии открылась возможность запускать десктопные приложения в браузере или использовать код на низкоуровневых языках.

Не будем сильно углубляться в эту тему, уж очень много статей написано. Подробнее ознакомиться можно тут. 

Достоинства и недостатки WebAssembly

Достоинства

???? Стандарт. Сейчас он широко распространяется в отрасли и поддерживается многими языками, в том числе и со сборкой мусора (Garbage Collection). Совсем недавно поддержка стандарта появилась в Google Chrome и Mozilla Firefox. Также Wasm можно использовать не только в браузере, но и на серверах, используя специальный интерфейс WASI.

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

???? Доступ к DOM и Browser API. WebAssembly напрямую не может обращаться к DOM или браузерному API. Все вызовы API внутри Wasm происходят через JavaScript (компиляторами добавляется специальная прослойка для исполнения JavaScript-кода). Значит, мы можем использовать почти все возможности современных браузеров с помощью специальных полифилов.

???? Быстрота и эффективность. Благодаря тому, что Wasm это бинарный формат, длительность его парсинга и компиляции заметно сокращается. Это позволяет ему исполняться в браузере на скорости, близкой к нативной (но тут есть некоторые нюансы, в основном зависящие от размера файла). И можно кешировать распарсенный и скомпилированный Wasm-модуль, используя специальный заголовок Content-Type: application/wasm.

⛓️ Типизация. В Wasm есть система типов. Это помогает корректно выполнять код. Но несмотря на всю привлекательность типизации, она может существенно замедлить работу, потому что каждый тип нужно конвертировать в понятный Wasm. Подробнее о типах в WebAssembly.

???? Изоляция. По умолчанию Wasm-модуль запускается в изолированной браузерной среде, и всё, что он может делать, это читать выделенную ему область памяти. Но изоляция не означает безопасность. Для безопасного исполнения лучше использовать последние стандарты в индустрии, к примеру, Content Security Policy (CSP).

Недостатки

???? Исполняется в основном потоке. Так как Wasm исполняется внутри основного потока бразера, стоит бережно следить и профилировать используемый код. Основные проблемы, которые могут возникнуть: накладные расходы на копирование данных, общение между потоками, блокировка потока и всё, что относится к работе с основным потоком в JavaScript. Мы тут опускаем взаимодействие с любыми типами Worker'ов.

???? Большие размеры файлов. Портируемость в браузер кода, написанного на системном языке программирования, требует добавления своего рода полифилов. Большая часть проблем такого рода решается оптимизацией сборки или прогоном с усиленной оптимизаций через компилятор. Выше я уже говорил, что файлы можно кешировать.

⌛️ Время на изучение технологии. Wasm — молодая, развивающая технология, которая только частично связана с использованием JS. Для написания Wasm-модулей нужно будет погрузиться в новый язык программирования, найти или написать плагины для используемых сборщиков или бандлеров. И, что немаловажно, обучиться грамотно отлаживать и профилировать новую для вас технологию.

Особенности (не смог отнести к достоинствам или недостаткам)

???? JS необходим для старта Wasm-модуля. Это связано с тем, что Wasm призван не заменить JS, а стать ещё одним инструментом в руках веб-разработчика. 

???? Сложно отлаживать. Сейчас можно это делать с помощью devtools. Но возможностей меньше того, к чему привык JavaScript-разработчик. В то же время уже сейчас можно отлаживать исходники файлов, написанных на низкоуровневых языках.

Пишем web-приложение c использованием WebAssembly

Кого-то удивит, но на WebAssembly можно писать и полноценные фронтенд-приложения. Вот список ингредиентов для приготовления проекта:

1. Yew. Фреймворк для написания веб-приложений на WebAssembly, использующий язык Rust.

2. React. Одна из популярных библиотек для создания пользовательских интерфейсов.

3. Yarn . Менеджер пакетов, который одновременно выполняет функции менеджера проекта.

4. Webpack. Сборщик приложений.

5. Typescript. Надстройка над JavaScript c добавлением типизации.

6. Prettier. Форматер кода.

7. Eslint. Статический Анализатор кода, помогающий придерживаться единого стиля кода и находить некоторые типы ошибки.

Что за проект мы будем создавать? Небольшое приложение с микрофронтендной архитектурой с использованием Yew и React.

Для начала установим Yarn. Нам потребуется версия 3.6.3. После успешной установки настроим своё рабочее пространство. 

Затем инициализируем конфигурацию проекта. Скачиваем репозиторий:

git clone https://github.com/easymikey/wasm-example/tree/init-project

…и переключаемся на ветку init-project. Создадим необходимые директории:

mkdir packages && mkdir packages/shell && mkdir packages/react-counter && mkdir packages/yew-counter

Разработка входной точки

Начнем с подготовки окружения:

cd packages/shell && yarn init -y && touch webpack.config.ts && tsconfig.json && mkdir public && touch public/index.html && mkdir src && touch src/App.tsx

Добавим dev-зависимости:

yarn add -D css-loader \
esbuild \
esbuild-loader \
html-webpack-plugin \
style-loader \
typescript \
typescript-plugin-css-modules \
webpack \
webpack-cli \
webpack-dev-server \

Добавим React:

yarn add react react-dom

Получим такой package.json:

{
	"name": "shell",
	"version": "0.1.0",
	"sideEffects": false,
	"scripts": {
		"serve": "webpack serve --color --open"
	},
	"dependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	},
	"devDependencies": {
		"@types/react": "^18.2.20",
		"@types/react-dom": "^18.2.8",
		"@types/webpack": "^5.28.3",
		"@types/webpack-dev-server": "^4.7.2",
		"css-loader": "^6.8.1",
		"esbuild": "^0.19.4",
		"esbuild-loader": "^4.0.2",
		"esbuild-register": "^3.5.0",
		"html-webpack-plugin": "^5.5.3",
		"style-loader": "^3.3.3",
		"typescript": "4.9.5",
		"typescript-plugin-css-modules": "4.1.1",
		"webpack": "^5.88.2",
		"webpack-cli": "^5.1.4",
		"webpack-dev-server": "^4.15.1"
	},
	"packageManager": "yarn@3.6.3",
	"volta": {
		"node": "20.8.1"
	}
}

{
    "extends": "../../tsconfig.base.json",
    "include": [
   	 "./src/**/*",
    ],
    "compilerOptions": {
   	 "outDir": "dist",
   	 "baseUrl": ".",
   	 "paths": {
         // Дадим возможность IDE найти наши модули
   		 "react_counter/*": [ "../react-counter/dist/@mf-types/*" ],
   		 "yew_counter/*": [ "../yew-counter/core/pkg/index.d.ts" ]
   	 },
   	 "plugins": [ { "name": "typescript-plugin-css-modules" } ],
    },
    "exclude": [
   	 "node_modules",
   	 "./dist/**/*"
    ],
    "references": [ ]
}

import path from 'path';
import webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config: webpack.Configuration = {
    entry: './src/index.tsx',
    mode: 'development',
    devServer: {
   	 static: {
   		 directory: path.join(__dirname, 'dist'),
   	 },
   	 headers: {
   		 'Access-Control-Allow-Origin': '*',
   	 },
   	 port: 3001,
    },
    resolve: {
   	 extensions: ['.js', '.ts', '.tsx', '.css'],
    },
    module: {
   	 rules: [
   		 // Use esbuild to compile JavaScript & TypeScript
   		 {
   			 // Match `.js`, `.jsx`, `.ts` or `.tsx` files
   			 test: /\.[jt]sx?$/,
   			 exclude: /yarn/,
   			 loader: 'esbuild-loader',
   			 options: {
   				 // JavaScript version to compile to
   				 target: 'es2015',
   			 },
   		 },
   		 {
   			 test: /\.module.css$/,
   			 use: [
   				 'style-loader',
   				 {
   					 loader: 'css-loader',
   					 options: {
   						 modules: {
   							 localIdentName:
   								 '[name]__[local]--[hash:base64:16]',
   						 },
   					 },
   				 },
   			 ],
   		 },
   	 ],
    },
    plugins: [
   	 new HtmlWebpackPlugin({
   		 template: './public/index.html',
   	 }),
    ],
};

export default config;

Если хочется детально изучить настройки, то почитайте документацию используемых плагинов.

<html>
  <head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Yew + React </title>
  </head>
  <style>
	body {
  	margin: 0;
  	padding: 0;
	}
  </style>
  <body>
	<div id="react-counter"></div>
  </body>
</html>

И можно приступать к разработке. 

Откроем файл src/App.tsx и напишем оболочку нашего приложения, отображающее счётчик с состоянием по умолчанию, равному нулю. Добавим колбеки для обновления состояния onIncrement и onDecrement.

import {FC, useState} from 'react';
// Стили можно посмотреть https://github.com/easymikey/wasm-example/blob/main/packages/shell/src/App.module.css
import styles from './App.module.css';

const App: FC = () => {
    const [counter, setCounter] = useState(0);

    const onIncrement = () => setCounter((c) => c + 1);

    const onDecrement = () => setCounter((c) => c - 1);

    return (
   	 <div className={styles.root}>
   		 <div className={styles.layout}>
   			 <div className={styles.counter}>{counter}</div>
   		 </div>
   	 </div>
    );
};

export default App;

Затем создадим файлы src/index.tsx и src/bootstrap.tsx со следующим содержанием:

import {createRoot} from 'react-dom/client';

import App from './App';

createRoot(document.getElementById('react-counter')!).render(<App />);

import('./bootstrap');

Теперь можно запускать наше приложения из корня командой yarn serve.Можно увидеть текущее состояние приложения, открыв браузер на http://localhost:3001

Отлично, с входной точкой закончили, время начать разрабатывать модуль для уменьшения и увеличения счётчика на React. 

Разработка React-cчетчика

Как и в первом случае начнем с настройки окружения.

cd packages/react-counter && yarn init -y && touch webpack.config.ts && tsconfig.json && mkdir src && touch src/ReactConter.tsx && src/index.tsx

Добавим dev-зависимости:

yarn add -D css-loader \
esbuild \
esbuild-loader \
html-webpack-plugin \
style-loader \
typescript \
typescript-plugin-css-modules \
webpack \
webpack-cli \
webpack-dev-server \
@module-federation/typescript \

И добавим React:

yarn add react react-dom

Итоговый package.json:

{
	"name": "react-counter",
	"version": "0.1.0",
	"sideEffects": false,
	"scripts": {
		"serve": "webpack serve --color"
	},
	"dependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	},
	"devDependencies": {
		"@module-federation/typescript": "^3.0.1",
		"@types/react": "^18.2.21",
		"@types/webpack": "^5.28.3",
		"@types/webpack-dev-server": "^4.7.2",
		"css-loader": "^6.8.1",
		"esbuild": "^0.19.4",
		"esbuild-loader": "^4.0.2",
		"esbuild-register": "^3.5.0",
		"html-webpack-plugin": "^5.5.3",
		"style-loader": "^3.3.3",
		"typescript": "4.9.5",
		"typescript-plugin-css-modules": "4.1.1",
		"webpack": "^5.88.2",
		"webpack-cli": "^5.1.4",
		"webpack-dev-server": "^4.15.1"
	},
	"volta": {
		"node": "20.8.1"
	}
}

{
    "extends": "../../tsconfig.base.json",
    "include": [
   	 "src",
    ],
    "compilerOptions": {
   	 "outDir": "dist",
   	 "baseUrl": ".",
   	 "plugins": [ { "name": "typescript-plugin-css-modules" } ],
    },
    "exclude": [
   	 "node_modules",
   	 "dist/**/*"
    ],
    "references": [ ]
}

import path from 'path';
import webpack from 'webpack';
import 'webpack-dev-server';
import {FederatedTypesPlugin} from '@module-federation/typescript';
import {ModuleFederationPluginOptions} from '@module-federation/typescript/src/types';

const federationConfig: ModuleFederationPluginOptions = {
	name: 'react_counter',
	filename: 'remoteEntry.js',
	exposes: {
		'./ReactCounter': './src/ReactCounter.tsx',
	},
	shared: {
		react: {singleton: true},
		'react-dom': {singleton: true},
	},
};
const config: webpack.Configuration = {
	entry: './src/index.tsx',
	mode: 'development',
	devServer: {
		static: {
			directory: path.join(__dirname, 'dist'),
		},
		hot: true,
		port: 3002,
		headers: {
			'Access-Control-Allow-Origin': '*',
		},
	},
	output: {
		publicPath: 'auto',
	},
	resolve: {
		extensions: ['.js', '.ts', '.tsx', '.css'],
	},
	module: {
		rules: [
			// Use esbuild to compile JavaScript & TypeScript
			{
				// Match `.js`, `.jsx`, `.ts` or `.tsx` files
				test: /\.[jt]sx?$/,
				exclude: /yarn/,
				loader: 'esbuild-loader',
				options: {
					// JavaScript version to compile to
					target: 'es2015',
				},
			},
			{
				test: /\.module.css$/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							modules: {
								localIdentName:
									'[name]__[local]--[hash:base64:16]',
							},
						},
					},
				],
			},
		],
	},
	plugins: [
		new FederatedTypesPlugin({
			federationConfig,
		}),
		new webpack.container.ModuleFederationPlugin(federationConfig),
	],
};

export default config;

Приступаем к написанию нашего микрофронтенда на React.

Откроем файл src/ReactCounter.tsx и добавим возможность обновлять счётчик. Это очень простой компонент, думаю вы писали сотни или даже тысячи таких. Код можно увидеть ниже.

import {FC} from 'react';
// Стили можно посмотреть https://github.com/easymikey/wasm-example/blob/main/packages/react-counter/src/ReactCounter.module.css
import styles from './ReactCounter.module.css';

const ReactCounter: FC<{
    onIncrement: () => void;
    onDecrement: () => void;
}> = ({onDecrement, onIncrement}) => {
    return (
     	 <div className={styles.layout}>
     		 <button className={styles.button} onClick={onIncrement}>
     			 +
     		 </button>
     		 <button className={styles.button} onClick={onDecrement}>
     			 -
     		 </button>
     	 </div>
    );
};

export default ReactCounter;

Теперь нам нужно добавить новоиспеченный микрофонтенд.

Переходим к файлу packages/shell/webpack.config.ts и обновляем его.

...

const config: webpack.Configuration = {
	...
	plugins: [
		new webpack.container.ModuleFederationPlugin({
			name: 'shell',
			remotes: {
				// Used modules
				react_counter:
					'react_counter@http://localhost:3002/remoteEntry.js',
			},
			shared: {
				react: {singleton: true},
				'react-dom': {singleton: true},
			},
		}),
		new HtmlWebpackPlugin({
			template: './public/index.html',
		}),
	],
    ...
};

export default config;

Теперь у нас есть возможность загружать модуль счётчик на React. Давайте это используем и добавим обработку в нашу оболочку. Код изменится следующим образом:

import {FC, Suspense, lazy, useState} from 'react';
import styles from './App.module.css';

const ReactCounter = lazy(() => import('react_counter/ReactCounter'));

const App: FC = () => {
    const [counter, setCounter] = useState(0);

    const onIncrement = () => setCounter((c) => c + 1);

    const onDecrement = () => setCounter((c) => c —  - 1);

    return (
     	 <div className={styles.root}>
     		 <div className={styles.layout}>
     			 <Suspense fallback="Loading ReactCounter">
     				 <ReactCounter
     					 onIncrement={onIncrement}
     					 onDecrement={onDecrement}
     				 />
     			 </Suspense>
     			 <div className={styles.counter}>{counter}</div>
     		 </div>
     	 </div>
    );
};

export default App;

Снова запустим проект из корня командой yarn serve. Проект изменился, теперь он выглядит так:

Отличной, второй кусочек нашего приложения готов. Теперь мы можем добавить модуль на Wasm. 

Разработка Yew-счётчика

Как и в первых двух случаях начнем с подготовки окружения.

cd packages/yew-counter && yarn init -y && touch webpack.config.ts

Для разработки Wasm-модуля нам потребуется установить Rust и wasm-pack.
Сначала установим Rust, следуя официальной документации. Затем установим wasm-pack снова следуя официальной документации.

Установим dev-зависимости:

yarn add -D webpack \
webpack-cli \
webpack-dev-server \
esbuild \
esbuild-register \
@wasm-tool/wasm-pack-plugin \

Итоговый package.json:

{
	"name": "yew-counter",
	"version": "0.1.0",
	"sideEffects": false,
	"scripts": {
		"serve": "webpack serve --color"
	},
	"devDependencies": {
		"@types/webpack": "^5.28.3",
		"@types/webpack-dev-server": "^4.7.2",
		"@wasm-tool/wasm-pack-plugin": "^1.7.0",
		"esbuild": "^0.19.4",
		"esbuild-register": "^3.5.0",
		"webpack": "^5.88.2",
		"webpack-cli": "^5.1.4",
		"webpack-dev-server": "^4.15.1"
	},
	"packageManager": "yarn@3.6.3",
	"volta": {
		"node": "20.8.1"
	}
}

import path from 'path';
import webpack from 'webpack';
import 'webpack-dev-server';
import WasmPackPlugin from '@wasm-tool/wasm-pack-plugin';

const config: webpack.Configuration = {
	entry: './core/pkg/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].js',
	},
	mode: 'development',
	experiments: {asyncWebAssembly: true},
	devServer: {
		static: {
			directory: path.join(__dirname, 'dist'),
		},
		headers: {
			'Access-Control-Allow-Origin': '*',
		},
		port: 3003,
	},
	resolve: {
		extensions: ['.js', '.ts'],
	},
	plugins: [
		new WasmPackPlugin({
			crateDirectory: path.resolve(__dirname, 'core'),
			outDir: path.join(__dirname, 'core/pkg'),
		}),
		new webpack.container.ModuleFederationPlugin({
			name: 'yew_counter',
			filename: 'remoteEntry.js',
			exposes: {
				'./yew': './core/pkg',
			},
		}),
	],
};

export default config;

Инициализируем Wasm-репозиторий c Yew:

wasm-pack new core --template https://github.com/yewstack/yew-wasm-pack-minimal

У нас появляется создатся папкаcore со всеми необходимыми нам файлами.

Для начала обновим файл Cargo.toml. Это аналог package.json и в нём сосредоточны все наши зависимости.

[package]
name = "core"
version = "0.1.0"
edition = "2021"
readme = "README.md"

[lib]
crate-type = ["cdylib"]


# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
yew = { version = "0.21", features = ["csr"] }
serde-wasm-bindgen = "0.6.1"
wasm-bindgen = "0.2.78"
web-sys = "0.3.64"
gloo = "0.10.0"
js-sys = "0.3.64"
stylist = { version = "0.13.0", features = ["yew_integration"] }

Начнем с файла src/app.rs и переименуем его в src/yew_counter.rs.  

Начнём реализовывать счётчик. Для начала импортируем необходимые зависимости.

// Добавляем возможность использовать css
use stylist::css;
// Добавляем возможность стилизации компонентов
use stylist::yew::styled_component;
// Своего рода полифил для wasm
use wasm_bindgen::prelude::*;
// Инициализация фреймворка 
use yew::prelude::*;

Затем опишем типы для нашего компонента.  Вы скорее всего заметите, что это напоминает описание интерфейсов в TypeScript, за исключением использования декоратора derive. Хотя кого я обманываю, большинство из нас так или иначе пробовали использовать декораторы в TypeScript. 

#[derive(Properties, Clone, PartialEq)]
pub struct Props {
	pub on_increment: js_sys::Function,
	pub on_decrement: js_sys::Function,
}
// Если это перенести на Typescript
export interface Props {
    onIncrement: (...args: any[]) => any,
    onDecrement: (...args: any[]) => any,
};

Следует отметить, что функции и типы данных не равны в Rust и JavaScript/TypeScript. В частности потому, что это разные языки.  Если немного уточнить, то для перевода типов нужно сначала замапить типы из JS/TS в Wasm, а только потому уже в Rust. По этой причине мы видим тут тип any.  Поэтому любые функции, передаваемые в модуль на Rust мы будем вызывать не таким образом как все привыкли.

С типами разобрались, давайте начнем писать компонент счётчика. И он удивительным образом похож на React.

#[styled_component]
pub fn YewCounter(props: &Props) -> Html {
	html! {
    	<div>
        	<button>{"+"}</button>
        	<button>{"-"}</button>
    	</div>
	}
}

Стилизуем наш компонент.  Получилось что-то очень похожее на styled-components, за исключением того, что библиотека на Rust только генерирует стили без обертки в компонент через шаблонные строки. Обратим особое внимание на функцию clone. Если простыми словами, то это концепция в Rust, которая явным образом позволяет создавать копию переменной. 

#[styled_component]
pub fn YewCounter(props: &Props) -> Html {
    let on_increment = {
        let on_increment = props.on_increment.clone();
        Callback::from(move |_| {
            let _ = on_increment.call0(&JsValue::NULL);
        })
    };
    let on_decrement = {
        let on_decrement = props.on_decrement.clone();
        Callback::from(move |_| {
            let _ = on_decrement.call0(&JsValue::NULL);
        })
    };

    let layout = css!(
        r#"
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;"#
    );

    let button = css!(
        r#"
		height: 65px;
		width: 65px;
		padding: 0;
		border: none;
		background-color: #aee18b;
		color: #e16541;
		font-size: 40px;
		text-align: center;
		box-shadow:
			rgb(50 50 93 / 25%) 0px 2px 5px -1px,
			rgb(0 0 0 / 30%) 0px 1px 3px -1px;
		cursor: pointer;

		& + & {
			margin-left: 8px;
		}"#
    );

    html! {
        <div class={layout}>
            <button class={button.clone()} onclick={on_increment}>{"+"}</button>
            <button class={button} onclick={on_decrement}>{"-"}</button>
        </div>
    }
}

У нас нет никаких обработчиков, сейчас есть просто статический модуль, который загружает кнопки. Добавим немного магии в YewCounter:

#[styled_component]
pub fn YewCounter(props: &Props) -> Html {
    ...
	let on_increment = {
    	let on_increment = props.on_increment.clone();
    	    Callback::from(move |_| {
        	     let _ = on_increment.call0(&JsValue::NULL);
    	    })
	};
	let on_decrement = {
    	let on_decrement = props.on_decrement.clone();
    	    Callback::from(move |_| {
        	    let _ = on_decrement.call0(&JsValue::NULL);
       	})
	};
    ...
}

Согласитесь же, снова очень похоже на React? Да есть некоторые отличия, но всё же похоже.

Давайте немного разберём создание функции. В Rust нет функций с переменным количеством параметров, поэтому для связи с JavaScript используется обертка над функцией call с передачей контекста и аргументов.

// on_decrement.call0(&JsValue::NULL) В Rust === on_decrement() в JavaScript


let on_decrement = {
    let on_decrement = props.on_decrement.clone();
        // Тут мы используем анонимную функцию и ключевое слово move.
        // Подробнее про move https://doc.rust-lang.org/book/ch13-01-closures.html?highlight=move#capturing-references-or-moving-ownership
        Callback::from(move |_| {
            // Присваиваем к неиспользуемой переменной, чтобы вызвать панику. Подробнее про unwrap https://doc.rust-lang.org/book/ch09-02-recoverable-errors-with-result.html?highlight=unwrap#shortcuts-for-panic-on-error-unwrap-and-expect
            let _ = on_decrement.call0(&JsValue::NULL);
    	})
};

Компонент нашего приложения мы написали, теперь нужно добавить для него точку монтирования, и это будет lib.rs.

// Указываем имя модуля. Подробнее про модули в Rust. https://doc.rust-lang.org/book/ch07-00-managing-growing-projects-with-packages-crates-and-modules.html
mod yew_counter;

// Добавляем возможность использовать Document API
use gloo::utils::document;
// И снова добавляем полифил для Wasm
use wasm_bindgen::prelude::*;
// Импортируем компонент и тип как JS
use yew_counter::{YewCounter, Props};

// Указываем, входную точку модуля
#[wasm_bindgen]
pub fn run_app(
	root_id: String,
	on_increment: js_sys::Function,
	on_decrement: js_sys::Function,
// Небольшой след алгебраических типов данных
) -> Result<(), JsValue> {
     // Добавляем проверку, что элемент с нужным id существует.
	let root = match document().get_element_by_id(&root_id) {
    	    Some(v) => v,
       	None => return Ok(()),
	};
    // Указываем, куда отрисовывать элемент и какие пропсы для это нужны
	yew::Renderer::<App>::with_root_and_props(
    	root,
    	Props {
        	on_increment,
        	on_decrement,
    	},
	)
	.render();
    // Указываем, что инициализация модуля произошла успешно
	Ok(())
}

Очень похоже на вызов функции ReactDOM.createRoot, хоть и более многословно.

Дальше нам нужно добавить возможность вызвать наш новоиспеченный модуль. Обновим поле plugins в shell/webpack.config.ts:

...

const config: webpack.Configuration = {
	...
	plugins: [
		new webpack.container.ModuleFederationPlugin({
			name: 'shell',
			remotes: {
				// Used modules
				react_counter:
					'react_counter@http://localhost:3002/remoteEntry.js',
                yew_counter: 'yew_counter@http://localhost:3003/remoteEntry.js',
			},
			shared: {
				react: {singleton: true},
				'react-dom': {singleton: true},
			},
		}),
		new HtmlWebpackPlugin({
			template: './public/index.html',
		}),
	],
    ...
};

export default config;

Добавим ленивую инициализацию модуля YewCounter в shell/src/App.tsx и возможность обрабатывать ошибку загрузку модуля:

import {FC, Suspense, lazy, useEffect, useState} from 'react';
import styles from './App.module.css';

/**
 * Общие пропсы для любого счётчика
 */
type CounterProps = {
    onIncrement: () => void;
    onDecrement: () => void;
};
// Обработчик ошибки при импорте модуля
const onRejectedComponentHandler = (
    error: unknown,
): {
    default: FC<CounterProps>;
} => {
    console.error('Component Failed Loading:', error);

    return {
   	 default: () => <div>Failed to Load</div>,
    };
};

// Добавим возможность обрабатывать ошибку импорта модуля
const ReactCounter = lazy(() =>
    import('react_counter/ReactCounter').catch(onRejectedComponentHandler),
);

const YEW_COUNTER = 'yew-counter';

// Добавим возможность ленивой загрузки YewCounter и обработку ошибки
const YewCounter = lazy(() =>
    // импортируем модуль и инициализируем модуль
    import('yew_counter/yew')
   	 .then((module) => {
   		 const YewCounter: FC<CounterProps> = ({
   			 onDecrement,
   			 onIncrement,
   		 }) => {
   			 useEffect(() => {
                 // Используя доступное из lib.rs API монтируем компонент
   				 module.run_app(YEW_COUNTER, onIncrement, onDecrement);
   			 }, []);

   			 return <div id={YEW_COUNTER} />;
   		 };
   		 return {default: YewCounter};
   	 })
   	 .catch(onRejectedComponentHandler),
);


const App: FC = () => {
    const [counter, setCounter] = useState(0);

    const onIncrement = () => setCounter((c) => c + 1);

    const onDecrement = () => setCounter((c) => c - 1);

    return (
     	 <div className={styles.root}>
     		 <div className={styles.layout}>
     			 <Suspense fallback="Loading ReactCounter">
     				 <ReactCounter
     					 onIncrement={onIncrement}
     					 onDecrement={onDecrement}
     				 />
     			 </Suspense>

     			 <div className={styles.counter}>{counter}</div>

     			 <Suspense fallback="Loading YewCounter">
     				 <YewCounter
     					 onIncrement={onIncrement}
     					 onDecrement={onDecrement}
     				 />
     			 </Suspense>
     		 </div>
     	 </div>
    );
};

export default App;

Снова запускаем из корня yarn serve. 

Ихууу. Теперь мы можем менять состояние своего приложения и через React, и через Yew. Мы попробовали новую технологию, и, кажется, у нас получилось построить простое, но в то же время необычное приложения c использование Wasm. Полная версия кода.

Заключение

Как я уже говорил, в последнее время WebAssembly стремительно развивается и позволяет творить настоящую магию. Мы с вами разработали небольшое web-приложение, используя WebAssembly. Надеюсь, этот опыт поможет вам в дальнейшем.

«Всё, что должно быть сказано, уже сказано. Но поскольку этого никто не услышал, можно всё что угодно сказать ещё раз.» — Андре Жид