{"id":360964,"date":"2024-05-21T01:03:41","date_gmt":"2024-05-21T01:03:41","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=360964"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=360964","title":{"rendered":"<span>WebAssembly: \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0430\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440\u0430 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438, \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u043d\u0438\u0445\u00a0\u2014 WebAssembly. \u041d\u0430\u00a0\u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 web\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043d\u0430\u00a0\u0447\u0442\u043e\u00a0\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0432\u0430\u0448\u0430 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u044f. \u0412\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e\u00a0\u0442\u0430\u043a\u043e\u0435 WebAssembly, \u043a\u0430\u043a\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u00a0\u0447\u0435\u043c \u0435\u0451 \u0435\u0434\u044f\u0442. \u0418 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u00a0\u0436\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430\u0448 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 <code>React<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>Yew<\/code>, \u043f\u0440\u0438\u043f\u0440\u0430\u0432\u0438\u043c \u0432\u0441\u0451 \u044d\u0442\u043e <code>webpack<\/code>-\u043e\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0449\u0435\u043f\u043e\u0442\u043e\u0447\u043a\u0443 <code>module\u2011federation<\/code>. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u00a0WebAssembly \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0432\u00a0\u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1ad\/707\/f21\/1ad707f219c22f7f3ecea1ff5379c7d2.png\" width=\"1024\" height=\"680\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ad\/707\/f21\/1ad707f219c22f7f3ecea1ff5379c7d2.png\"\/><\/figure>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Wasm \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d<\/h2>\n<p>WebAssembly (Wasm) \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0430\u0439\u0442-\u043a\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/caniuse.com\/wasm\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p>Wasm \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u044f\u0437\u044b\u043a\u0430\u0445 C, C++, C#, Rust \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.fermyon.com\/wasm-languages\/webassembly-language-support\"><u>\u0442\u0443\u0442<\/u><\/a>), \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u0431\u043b\u0438\u0437\u043a\u043e\u0439 \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439. <strong>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c WebAssembly \u0440\u0430\u0432\u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 JavaScript<\/strong>, \u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e \u043f\u0430\u043c\u044f\u0442\u0438 \u043a\u043e\u0434 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430 WebAssembly. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"https:\/\/mrale.ph\/blog\/2018\/02\/03\/maybe-you-dont-need-rust-to-speed-up-your-js.html\"><u>\u0441\u0442\u0430\u0442\u044c\u0435 \u0412\u044f\u0447\u0435\u0441\u043b\u0430\u0432\u0430 \u0415\u0433\u043e\u0440\u043e\u0432\u0430<\/u><\/a>.\u00a0<\/p>\n<p>\u042f\u0437\u044b\u043a WebAssembly \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 JavaScript, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u043e\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>JavaScript \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0433\u0438\u0431\u043a\u0438\u0439 \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0423 \u043d\u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432: \u043e\u043d \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043e\u0449\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>WebAssembly \u2014 \u044d\u0442\u043e \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u044f\u0437\u044b\u043a, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0430\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440, \u0441 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043f\u043e\u0447\u0442\u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043a\u0430\u043a C++ \u0438 Rust, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0443 WebAssembly \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0435\u0441\u0442\u044c <a href=\"http:\/\/webassembly.org\/docs\/high-level-goals\/\"><u>\u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u0446\u0435\u043b\u044c<\/u><\/a> \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u043c\u0438 \u043c\u0443\u0441\u043e\u0440\u0430 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a WebAssembly \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/h2>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 WebAssembly: \u0435\u0433\u043e \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a. \u041a\u043e\u0434 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0449\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>LLVM <\/code>) \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>Emscripten<\/code> \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041d\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"assembly\">(module   (func import \u201cimports\u201d \u201cimported_func\u201d) (param i32))   (func (export \u201cexported_func\u201d)     i32.const 42    call $i) )<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c JavaScript \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 Wasm-\u043c\u043e\u0434\u0443\u043b\u044c. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">WebAssembly.instantiateStreaming(     fetch(\"simple.wasm\"),     {     imports: {     imported_func: console.log,     },     }, ).then((module) =>     module.instance.exports.exported_func(), );<\/code><\/pre>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/533\/e2c\/9a5\/533e2c9a5721ed2a350c298f3c4899a9.jpg\" alt=\"Wasm \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" title=\"Wasm \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\" width=\"2497\" height=\"1601\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/533\/e2c\/9a5\/533e2c9a5721ed2a350c298f3c4899a9.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>Wasm \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445.<\/p>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0443\u0436 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/WebAssembly\/Concepts\"><u>\u0442\u0443\u0442.\u00a0<\/u><\/a><\/p>\n<h2>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 WebAssembly<\/h2>\n<h3>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430<\/h3>\n<p><strong>? \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442. <\/strong>\u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0448\u0438\u0440\u043e\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438 <a href=\"https:\/\/www.fermyon.com\/wasm-languages\/webassembly-language-support\"><u>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438<\/u><\/a>, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043c\u0443\u0441\u043e\u0440\u0430 (Garbage Collection). \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c <a href=\"https:\/\/webassembly.org\/roadmap\/\"><u>\u0432 Google Chrome \u0438 Mozilla Firefox<\/u><\/a>. \u0422\u0430\u043a\u0436\u0435 Wasm \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <a href=\"https:\/\/wasi.dev\/\"><u>WASI<\/u><\/a>.<\/p>\n<p><strong>? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. <\/strong>\u0418\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u043f\u044b\u0442 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e. \u0418, \u043e \u0447\u0443\u0434\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e\u0442 \u043e\u043f\u044b\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p><strong>? \u0414\u043e\u0441\u0442\u0443\u043f \u043a DOM \u0438 Browser API. <\/strong>WebAssembly \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a DOM \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c\u0443 API. \u0412\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API \u0432\u043d\u0443\u0442\u0440\u0438 Wasm \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 JavaScript (\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript-\u043a\u043e\u0434\u0430). \u0417\u043d\u0430\u0447\u0438\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432.<\/p>\n<p><strong>? \u0411\u044b\u0441\u0442\u0440\u043e\u0442\u0430 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. <\/strong>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e Wasm \u044d\u0442\u043e \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0431\u043b\u0438\u0437\u043a\u043e\u0439 \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 (\u043d\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430). \u0418 \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0435\u043d\u043d\u044b\u0439 \u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 Wasm-\u043c\u043e\u0434\u0443\u043b\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Content-Type: application\/wasm.<\/code><\/p>\n<p><strong>\u26d3\ufe0f \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f. <\/strong>\u0412 Wasm \u0435\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0442\u0438\u043f\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434. \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0432\u0441\u044e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 Wasm. <a href=\"https:\/\/webassembly.github.io\/spec\/core\/syntax\/types.html\"><u>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u0438\u043f\u0430\u0445 \u0432 WebAssembly<\/u><\/a>.<\/p>\n<p><strong>? \u0418\u0437\u043e\u043b\u044f\u0446\u0438\u044f.<\/strong> \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Wasm-\u043c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435, \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0435\u043c\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u0438. \u041d\u043e <strong>\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. <\/strong>\u0414\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CSP\"><u>Content Security Policy (CSP)<\/u><\/a>.<\/p>\n<h3>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p><strong>? \u0418\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435. <\/strong>\u0422\u0430\u043a \u043a\u0430\u043a Wasm \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0431\u0440\u0430\u0437\u0435\u0440\u0430, \u0441\u0442\u043e\u0438\u0442 \u0431\u0435\u0440\u0435\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c: \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438, \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u043e\u0442\u043e\u043a\u0430 \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u0432 JavaScript. \u041c\u044b \u0442\u0443\u0442 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 <code>Worker<\/code>&#8216;\u043e\u0432.<\/p>\n<p><strong>? \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432. <\/strong>\u041f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043a\u043e\u0434\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u043e\u043d\u043e\u043c \u0441 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440. \u0412\u044b\u0448\u0435 \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><strong>\u231b\ufe0f \u0412\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. <\/strong>Wasm \u2014 \u043c\u043e\u043b\u043e\u0434\u0430\u044f, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0449\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>JS<\/code>. \u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f Wasm-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u043d\u043e\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u0439\u0442\u0438 \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432 \u0438\u043b\u0438 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432. \u0418, \u0447\u0442\u043e \u043d\u0435\u043c\u0430\u043b\u043e\u0432\u0430\u0436\u043d\u043e, \u043e\u0431\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u044f \u0432\u0430\u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e.<\/p>\n<h3>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (\u043d\u0435 \u0441\u043c\u043e\u0433 \u043e\u0442\u043d\u0435\u0441\u0442\u0438 \u043a \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430\u043c \u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c)<\/h3>\n<p><strong>? JS \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 Wasm-\u043c\u043e\u0434\u0443\u043b\u044f. <\/strong>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Wasm \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c JS, \u0430 \u0441\u0442\u0430\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0440\u0443\u043a\u0430\u0445 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.\u00a0<\/p>\n<p><strong>? \u0421\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c. <\/strong>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>devtools<\/code>. \u041d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u043e\u0433\u043e, \u043a \u0447\u0435\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u043a JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c WebAssembly<\/h2>\n<p>\u041a\u043e\u0433\u043e-\u0442\u043e \u0443\u0434\u0438\u0432\u0438\u0442, \u043d\u043e \u043d\u0430 WebAssembly \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/yew.rs\"><u>Yew<\/u><\/a>. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 WebAssembly, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u044f\u0437\u044b\u043a Rust.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/react.dev\/blog\/2023\/03\/16\/introducing-react-dev\"><u>React<\/u><\/a>. \u041e\u0434\u043d\u0430 \u0438\u0437 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/yarnpkg.com\"><u>Yarn<\/u><\/a> . \u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/\"><u>Webpack<\/u><\/a>. \u0421\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.typescriptlang.org\/\"><u>Typescript<\/u><\/a>. \u041d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 JavaScript c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/prettier.io\/\"><u>Prettier<\/u><\/a>. \u0424\u043e\u0440\u043c\u0430\u0442\u0435\u0440 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/eslint.org\/\"><u>Eslint<\/u><\/a>. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0410\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0438\u043f\u044b \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0427\u0442\u043e \u0437\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c? \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>Yew<\/code> \u0438 <code>React<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <a href=\"https:\/\/yarnpkg.com\/getting-started\/install\"><u>Yarn<\/u><\/a>. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u044f 3.6.3. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <a href=\"https:\/\/yarnpkg.com\/getting-started\/editor-sdks#vscode\"><u>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0432\u043e\u0451 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e<\/u><\/a>.\u00a0<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439:<\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/easymikey\/wasm-example\/tree\/init-project<\/code><\/pre>\n<p>\u2026\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u0435\u0442\u043a\u0443 <code>init-project<\/code>.\u00a0\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438:<\/p>\n<pre><code class=\"bash\">mkdir packages &amp;&amp; mkdir packages\/shell &amp;&amp; mkdir packages\/react-counter &amp;&amp; mkdir packages\/yew-counter<\/code><\/pre>\n<h3>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"bash\">cd packages\/shell &amp;&amp; yarn init -y &amp;&amp; touch webpack.config.ts &amp;&amp; tsconfig.json &amp;&amp; mkdir public &amp;&amp; touch public\/index.html &amp;&amp; mkdir src &amp;&amp; touch src\/App.tsx<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">yarn add -D css-loader \\ esbuild \\ esbuild-loader \\ html-webpack-plugin \\ style-loader \\ typescript \\ typescript-plugin-css-modules \\ webpack \\ webpack-cli \\ webpack-dev-server \\<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>React<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add react react-dom<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 <code>package.json<\/code>:<\/p>\n<pre><code class=\"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\" } } <\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0421\u043b\u0435\u0434\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c TypeScript:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{     \"extends\": \"..\/..\/tsconfig.base.json\",     \"include\": [     \".\/src\/**\/*\",     ],     \"compilerOptions\": {     \"outDir\": \"dist\",     \"baseUrl\": \".\",     \"paths\": {          \/\/ \u0414\u0430\u0434\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c IDE \u043d\u0430\u0439\u0442\u0438 \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438     \"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\": [ ] } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">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 &amp; 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;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0442\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u0445\u043e\u0434\u043d\u043e\u0439 HTML-\u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0435 public:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"xml\">&lt;html>   &lt;head> &lt;meta charset=\"utf-8\" \/> &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/> &lt;title>Yew + React &lt;\/title>   &lt;\/head>   &lt;style> body {   margin: 0;   padding: 0; }   &lt;\/style>   &lt;body> &lt;div id=\"react-counter\">&lt;\/div>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.\u00a0<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b src\/App.tsx \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0435\u0435 \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0440\u0430\u0432\u043d\u043e\u043c\u0443 \u043d\u0443\u043b\u044e. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043b\u0431\u0435\u043a\u0438 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>onIncrement<\/code> \u0438 <code>onDecrement<\/code>.<\/p>\n<pre><code class=\"typescript\">import {FC, useState} from 'react'; \/\/ \u0421\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c 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 (     &lt;div className={styles.root}>     &lt;div className={styles.layout}>     &lt;div className={styles.counter}>{counter}&lt;\/div>     &lt;\/div>     &lt;\/div>     ); };  export default App; <\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b\u044b src\/index.tsx \u0438 src\/bootstrap.tsx \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\/\/ bootstrap.tsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import {createRoot} from 'react-dom\/client';  import App from '.\/App';  createRoot(document.getElementById('react-counter')!).render(&lt;App \/>);<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>index.tsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import('.\/bootstrap');<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u0440\u043d\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>yarn serve<\/code>.\u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0442\u043a\u0440\u044b\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430 <a href=\"http:\/\/localhost:3001\"><u>http:\/\/localhost:3001<\/u><\/a><u><\/p>\n<p><\/u><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e15\/905\/a69\/e15905a693c3d1f496c7562b39babdcc.png\" alt=\"\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" title=\"\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" width=\"1589\" height=\"797\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e15\/905\/a69\/e15905a693c3d1f496c7562b39babdcc.png\"\/><\/p>\n<div><figcaption>\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 <code>React<\/code>.\u00a0<\/p>\n<h3>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 React-c\u0447\u0435\u0442\u0447\u0438\u043a\u0430<\/h3>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"bash\">cd packages\/react-counter &amp;&amp; yarn init -y &amp;&amp; touch webpack.config.ts &amp;&amp; tsconfig.json &amp;&amp; mkdir src &amp;&amp; touch src\/ReactConter.tsx &amp;&amp; src\/index.tsx<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">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 \\<\/code><\/pre>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>React<\/code>:<\/p>\n<pre><code>yarn add react react-dom<\/code><\/pre>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 <code>package.json<\/code>:<\/p>\n<pre><code class=\"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\" } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c TypeScript.<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{     \"extends\": \"..\/..\/tsconfig.base.json\",     \"include\": [     \"src\",     ],     \"compilerOptions\": {     \"outDir\": \"dist\",     \"baseUrl\": \".\",     \"plugins\": [ { \"name\": \"typescript-plugin-css-modules\" } ],     },     \"exclude\": [     \"node_modules\",     \"dist\/**\/*\"     ],     \"references\": [ ] }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443.<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">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 &amp; 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;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043d\u0430 <code>React<\/code>.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b src\/ReactCounter.tsx \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u0443\u043c\u0430\u044e \u0432\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u043e\u0442\u043d\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0442\u0430\u043a\u0438\u0445. \u041a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"typescript\">import {FC} from 'react'; \/\/ \u0421\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c https:\/\/github.com\/easymikey\/wasm-example\/blob\/main\/packages\/react-counter\/src\/ReactCounter.module.css import styles from '.\/ReactCounter.module.css';  const ReactCounter: FC&lt;{     onIncrement: () => void;     onDecrement: () => void; }> = ({onDecrement, onIncrement}) => {     return (       &lt;div className={styles.layout}>       &lt;button className={styles.button} onClick={onIncrement}>       +       &lt;\/button>       &lt;button className={styles.button} onClick={onDecrement}>       -       &lt;\/button>       &lt;\/div>     ); };  export default ReactCounter; <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0438\u0441\u043f\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0442\u0435\u043d\u0434.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0444\u0430\u0439\u043b\u0443 packages\/shell\/webpack.config.ts \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e.<\/p>\n<pre><code class=\"typescript\">...  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;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043d\u0430 React. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u043d\u0430\u0448\u0443 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443. \u041a\u043e\u0434 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">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 \u2014  - 1);      return (       &lt;div className={styles.root}>       &lt;div className={styles.layout}>       &lt;Suspense fallback=\"Loading ReactCounter\">       &lt;ReactCounter       onIncrement={onIncrement}       onDecrement={onDecrement}       \/>       &lt;\/Suspense>       &lt;div className={styles.counter}>{counter}&lt;\/div>       &lt;\/div>       &lt;\/div>     ); };  export default App;<\/code><\/pre>\n<p>\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u0437 \u043a\u043e\u0440\u043d\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 yarn serve. \u041f\u0440\u043e\u0435\u043a\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f, \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d70\/3be\/d34\/d703bed34c8415c51309712c0486b501.png\" alt=\"\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c ReactCounter.\" title=\"\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c ReactCounter.\" width=\"1595\" height=\"797\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d70\/3be\/d34\/d703bed34c8415c51309712c0486b501.png\"\/><\/p>\n<div><figcaption>\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c ReactCounter.<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e\u0439, \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0430 Wasm.\u00a0<\/p>\n<h3>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 Yew-\u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430<\/h3>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"bash\">cd packages\/yew-counter &amp;&amp; yarn init -y &amp;&amp; touch webpack.config.ts<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Wasm-\u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <code>Rust<\/code> \u0438 <code>wasm-pack<\/code>.<br \/>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>Rust<\/code>, \u0441\u043b\u0435\u0434\u0443\u044f <a href=\"https:\/\/www.rust-lang.org\/tools\/install\"><u>\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. \u0417\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>wasm-pack<\/code> \u0441\u043d\u043e\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u044f <a href=\"https:\/\/rustwasm.github.io\/wasm-pack\/installer\/\"><u>\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">yarn add -D webpack \\ webpack-cli \\ webpack-dev-server \\ esbuild \\ esbuild-register \\ @wasm-tool\/wasm-pack-plugin \\<\/code><\/pre>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 <code>package.json<\/code>:<\/p>\n<pre><code class=\"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\" } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443.<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">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;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Wasm-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 c Yew:<\/p>\n<pre><code class=\"bash\">wasm-pack new core --template https:\/\/github.com\/yewstack\/yew-wasm-pack-minimal<\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430<code>core<\/code> \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043d\u0430\u043c \u0444\u0430\u0439\u043b\u0430\u043c\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0444\u0430\u0439\u043b <code>Cargo.toml<\/code>. \u042d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <code>package.json<\/code> \u0438 \u0432 \u043d\u0451\u043c \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u043d\u044b \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"cmake\">[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\"] } <\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u0430 src\/app.rs \u0438 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0435\u043c \u0435\u0433\u043e \u0432 src\/yew_counter.rs.\u00a0\u00a0<\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"rust\">\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c css use stylist::css; \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 use stylist::yew::styled_component; \/\/ \u0421\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f wasm use wasm_bindgen::prelude::*; \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430  use yew::prelude::*;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u043f\u0438\u0448\u0435\u043c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\u00a0 \u0412\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 <code>\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432 TypeScript<\/code>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 <a href=\"https:\/\/doc.rust-lang.org\/rust-by-example\/trait\/derive.html\"><u>derive<\/u><\/a>. \u0425\u043e\u0442\u044f \u043a\u043e\u0433\u043e \u044f \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u044e, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437 \u043d\u0430\u0441 \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0432 TypeScript.\u00a0<\/p>\n<pre><code class=\"rust\">#[derive(Properties, Clone, PartialEq)] pub struct Props { pub on_increment: js_sys::Function, pub on_decrement: js_sys::Function, } \/\/ \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430 Typescript export interface Props {     onIncrement: (...args: any[]) => any,     onDecrement: (...args: any[]) => any, }; <\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435 \u0440\u0430\u0432\u043d\u044b \u0432 Rust \u0438 JavaScript\/TypeScript. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e <strong>\u044d\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u0438<\/strong>.\u00a0 \u0415\u0441\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0442\u043e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0442\u0438\u043f\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043c\u0430\u043f\u0438\u0442\u044c \u0442\u0438\u043f\u044b \u0438\u0437 JS\/TS \u0432 Wasm, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0443\u0436\u0435 \u0432 Rust. \u041f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0442\u0443\u0442 \u0442\u0438\u043f <code>any<\/code>.\u00a0 \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u044e\u0431\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0430 <code>Rust<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043a\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438.<\/p>\n<p>\u0421 \u0442\u0438\u043f\u0430\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430. \u0418 \u043e\u043d \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 <code>React<\/code>.<\/p>\n<pre><code class=\"rust\">#[styled_component] pub fn YewCounter(props: &amp;Props) -> Html { html! {     &lt;div>         &lt;button>{\"+\"}&lt;\/button>         &lt;button>{\"-\"}&lt;\/button>     &lt;\/div> } }<\/code><\/pre>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.\u00a0 \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 <code>styled-components<\/code>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 Rust \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438  \u0431\u0435\u0437 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">\u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438<\/a>. \u041e\u0431\u0440\u0430\u0442\u0438\u043c \u043e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>clone<\/code>. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0442\u043e \u044d\u0442\u043e <a href=\"https:\/\/doc.rust-lang.org\/rust-by-example\/trait\/clone.html?highlight=clone#clone\"><u>\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0432 Rust<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044f\u0432\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043f\u0438\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.\u00a0<\/p>\n<pre><code class=\"rust\">#[styled_component] pub fn YewCounter(props: &amp;Props) -> Html {     let on_increment = {         let on_increment = props.on_increment.clone();         Callback::from(move |_| {             let _ = on_increment.call0(&amp;JsValue::NULL);         })     };     let on_decrement = {         let on_decrement = props.on_decrement.clone();         Callback::from(move |_| {             let _ = on_decrement.call0(&amp;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;  &amp; + &amp; { margin-left: 8px; }\"#     );      html! {         &lt;div class={layout}>             &lt;button class={button.clone()} onclick={on_increment}>{\"+\"}&lt;\/button>             &lt;button class={button} onclick={on_decrement}>{\"-\"}&lt;\/button>         &lt;\/div>     } }<\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0441\u0435\u0439\u0447\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0433\u0438\u0438 \u0432 <code>YewCounter<\/code>:<\/p>\n<pre><code class=\"rust\"> #[styled_component] pub fn YewCounter(props: &amp;Props) -> Html {     ... let on_increment = {     let on_increment = props.on_increment.clone();         Callback::from(move |_| {              let _ = on_increment.call0(&amp;JsValue::NULL);         }) }; let on_decrement = {     let on_decrement = props.on_decrement.clone();         Callback::from(move |_| {             let _ = on_decrement.call0(&amp;JsValue::NULL);        }) };     ... }<\/code><\/pre>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c \u0436\u0435, \u0441\u043d\u043e\u0432\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <code>React<\/code>? \u0414\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f, \u043d\u043e \u0432\u0441\u0451 \u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0435.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 Rust \u043d\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 JavaScript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/call\"><u>call<\/u><\/a> \u0441\u00a0\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"rust\"> \/\/ on_decrement.call0(&amp;JsValue::NULL) \u0412 Rust === on_decrement() \u0432 JavaScript   let on_decrement = {     let on_decrement = props.on_decrement.clone();         \/\/ \u0422\u0443\u0442 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e move.         \/\/ \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e move https:\/\/doc.rust-lang.org\/book\/ch13-01-closures.html?highlight=move#capturing-references-or-moving-ownership         Callback::from(move |_| {             \/\/ \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u043a \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0430\u043d\u0438\u043a\u0443. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e 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(&amp;JsValue::NULL);     }) }; <\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0442\u043e\u0447\u043a\u0443 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 lib.rs.<\/p>\n<pre><code class=\"rust\">\/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 Rust. https:\/\/doc.rust-lang.org\/book\/ch07-00-managing-growing-projects-with-packages-crates-and-modules.html mod yew_counter;  \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Document API use gloo::utils::document; \/\/ \u0418 \u0441\u043d\u043e\u0432\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f Wasm use wasm_bindgen::prelude::*; \/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0442\u0438\u043f \u043a\u0430\u043a JS use yew_counter::{YewCounter, Props};  \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0432\u0445\u043e\u0434\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f #[wasm_bindgen] pub fn run_app( root_id: String, on_increment: js_sys::Function, on_decrement: js_sys::Function, \/\/ \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043b\u0435\u0434 \u0430\u043b\u0433\u0435\u0431\u0440\u0430\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 ) -> Result&lt;(), JsValue> {      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c id \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. let root = match document().get_element_by_id(&amp;root_id) {         Some(v) => v,        None => return Ok(()), };     \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0443\u0434\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0434\u043b\u044f \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u044b yew::Renderer::&lt;App>::with_root_and_props(     root,     Props {         on_increment,         on_decrement,     }, ) .render();     \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e Ok(()) } <\/code><\/pre>\n<p>\u041e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>ReactDOM.createRoot<\/code>, \u0445\u043e\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u043e.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043d\u043e\u0432\u043e\u0438\u0441\u043f\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c. \u041e\u0431\u043d\u043e\u0432\u0438\u043c <code>\u043f\u043e\u043b\u0435 plugins<\/code> \u0432 shell\/webpack.config.ts:<\/p>\n<pre><code class=\"typescript\">...  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;<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f <code>YewCounter<\/code> \u0432 shell\/src\/App.tsx \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">import {FC, Suspense, lazy, useEffect, useState} from 'react'; import styles from '.\/App.module.css';  \/**  * \u041e\u0431\u0449\u0438\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0447\u0451\u0442\u0447\u0438\u043a\u0430  *\/ type CounterProps = {     onIncrement: () => void;     onDecrement: () => void; }; \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044f const onRejectedComponentHandler = (     error: unknown, ): {     default: FC&lt;CounterProps>; } => {     console.error('Component Failed Loading:', error);      return {     default: () => &lt;div>Failed to Load&lt;\/div>,     }; };  \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u044f const ReactCounter = lazy(() =>     import('react_counter\/ReactCounter').catch(onRejectedComponentHandler), );  const YEW_COUNTER = 'yew-counter';  \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 YewCounter \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 const YewCounter = lazy(() =>     \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c     import('yew_counter\/yew')     .then((module) => {     const YewCounter: FC&lt;CounterProps> = ({     onDecrement,     onIncrement,     }) => {     useEffect(() => {                  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0438\u0437 lib.rs API \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442     module.run_app(YEW_COUNTER, onIncrement, onDecrement);     }, []);      return &lt;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 (       &lt;div className={styles.root}>       &lt;div className={styles.layout}>       &lt;Suspense fallback=\"Loading ReactCounter\">       &lt;ReactCounter       onIncrement={onIncrement}       onDecrement={onDecrement}       \/>       &lt;\/Suspense>        &lt;div className={styles.counter}>{counter}&lt;\/div>        &lt;Suspense fallback=\"Loading YewCounter\">       &lt;YewCounter       onIncrement={onIncrement}       onDecrement={onDecrement}       \/>       &lt;\/Suspense>       &lt;\/div>       &lt;\/div>     ); };  export default App;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438\u0437 \u043a\u043e\u0440\u043d\u044f <code>yarn serve<\/code>.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bcb\/3b4\/447\/bcb3b4447012b0dc6a226cba49bece83.png\" alt=\"\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 ReactCounter \u0438 YewCounter.\" title=\"\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 ReactCounter \u0438 YewCounter.\" width=\"1600\" height=\"796\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bcb\/3b4\/447\/bcb3b4447012b0dc6a226cba49bece83.png\"\/><\/p>\n<div><figcaption>\u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 ReactCounter \u0438 YewCounter.<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0445\u0443\u0443\u0443. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0447\u0435\u0440\u0435\u0437 <code>React<\/code>, \u0438 \u0447\u0435\u0440\u0435\u0437 <code>Yew<\/code>. \u041c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0438, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Wasm. <a href=\"https:\/\/github.com\/easymikey\/wasm-example\/tree\/main\"><u>\u041f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430<\/u><\/a>.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f WebAssembly \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u043c\u0430\u0433\u0438\u044e. \u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f WebAssembly. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e\u0442 \u043e\u043f\u044b\u0442 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c. <\/p>\n<blockquote>\n<p>\u00ab\u0412\u0441\u0451, \u0447\u0442\u043e\u00a0\u0434\u043e\u043b\u0436\u043d\u043e\u00a0\u0431\u044b\u0442\u044c \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e. \u041d\u043e\u00a0\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e\u0433\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435\u00a0\u0443\u0441\u043b\u044b\u0448\u0430\u043b, \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0451 \u0447\u0442\u043e\u00a0\u0443\u0433\u043e\u0434\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0449\u0451 \u0440\u0430\u0437.\u00bb\u00a0\u2014 \u0410\u043d\u0434\u0440\u0435 \u0416\u0438\u0434<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/775852\/\"> https:\/\/habr.com\/ru\/articles\/775852\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438, \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u043d\u0438\u0445\u00a0\u2014 WebAssembly. \u041d\u0430\u00a0\u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 web\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043d\u0430\u00a0\u0447\u0442\u043e\u00a0\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0432\u0430\u0448\u0430 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u044f. \u0412\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e\u00a0\u0442\u0430\u043a\u043e\u0435 WebAssembly, \u043a\u0430\u043a\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u00a0\u0447\u0435\u043c \u0435\u0451 \u0435\u0434\u044f\u0442. \u0418 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u00a0\u0436\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430\u0448 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 <code>React<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>Yew<\/code>, \u043f\u0440\u0438\u043f\u0440\u0430\u0432\u0438\u043c \u0432\u0441\u0451 \u044d\u0442\u043e <code>webpack<\/code>-\u043e\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0449\u0435\u043f\u043e\u0442\u043e\u0447\u043a\u0443 <code>module\u2011federation<\/code>. \u0421\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u00a0WebAssembly \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0432\u00a0\u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Wasm \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d<\/h2>\n<p>WebAssembly (Wasm) \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0430\u0439\u0442-\u043a\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/caniuse.com\/wasm\"><u>\u0442\u0443\u0442<\/u><\/a>.<\/p>\n<p>Wasm \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u044f\u0437\u044b\u043a\u0430\u0445 C, C++, C#, Rust \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.fermyon.com\/wasm-languages\/webassembly-language-support\"><u>\u0442\u0443\u0442<\/u><\/a>), \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u0431\u043b\u0438\u0437\u043a\u043e\u0439 \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439. <strong>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c WebAssembly \u0440\u0430\u0432\u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 JavaScript<\/strong>, \u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e \u043f\u0430\u043c\u044f\u0442\u0438 \u043a\u043e\u0434 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430 WebAssembly. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"https:\/\/mrale.ph\/blog\/2018\/02\/03\/maybe-you-dont-need-rust-to-speed-up-your-js.html\"><u>\u0441\u0442\u0430\u0442\u044c\u0435 \u0412\u044f\u0447\u0435\u0441\u043b\u0430\u0432\u0430 \u0415\u0433\u043e\u0440\u043e\u0432\u0430<\/u><\/a>.\u00a0<\/p>\n<p>\u042f\u0437\u044b\u043a WebAssembly \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 JavaScript, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u043e\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>JavaScript \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0433\u0438\u0431\u043a\u0438\u0439 \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0423 \u043d\u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432: \u043e\u043d \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043e\u0449\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>WebAssembly \u2014 \u044d\u0442\u043e \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u044f\u0437\u044b\u043a, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0430\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440, \u0441 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u043f\u043e\u0447\u0442\u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043a\u0430\u043a C++ \u0438 Rust, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0443 WebAssembly \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0435\u0441\u0442\u044c <a href=\"http:\/\/webassembly.org\/docs\/high-level-goals\/\"><u>\u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u0446\u0435\u043b\u044c<\/u><\/a> \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u043c\u0438 \u043c\u0443\u0441\u043e\u0440\u0430 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a WebAssembly \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/h2>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 WebAssembly: \u0435\u0433\u043e \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a. \u041a\u043e\u0434 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0449\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>LLVM <\/code>) \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>Emscripten<\/code> \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041d\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"assembly\">(module   (func import \u201cimports\u201d \u201cimported_func\u201d) (param i32))   (func (export \u201cexported_func\u201d)     i32.const 42    call $i) )<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c JavaScript \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 Wasm-\u043c\u043e\u0434\u0443\u043b\u044c. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">WebAssembly.instantiateStreaming(     fetch(\"simple.wasm\"),     {     imports: {     imported_func: console.log,     },     }, ).then((module) =>     module.instance.exports.exported_func(), );<\/code><\/pre>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Wasm \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445.<\/p>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0443\u0436 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/WebAssembly\/Concepts\"><u>\u0442\u0443\u0442.\u00a0<\/u><\/a><\/p>\n<h2>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 WebAssembly<\/h2>\n<h3>\u0414\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430<\/h3>\n<p><strong>? \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442. <\/strong>\u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0448\u0438\u0440\u043e\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438 <a href=\"https:\/\/www.fermyon.com\/wasm-languages\/webassembly-language-support\"><u>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438<\/u><\/a>, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043c\u0443\u0441\u043e\u0440\u0430 (Garbage Collection). \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c <a href=\"https:\/\/webassembly.org\/roadmap\/\"><u>\u0432 Google Chrome \u0438 Mozilla Firefox<\/u><\/a>. \u0422\u0430\u043a\u0436\u0435 Wasm \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <a href=\"https:\/\/wasi.dev\/\"><u>WASI<\/u><\/a>.<\/p>\n<p><strong>? \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. <\/strong>\u0418\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u043f\u044b\u0442 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e. \u0418, \u043e \u0447\u0443\u0434\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e\u0442 \u043e\u043f\u044b\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p><strong>? \u0414\u043e\u0441\u0442\u0443\u043f \u043a DOM \u0438 Browser API. <\/strong>WebAssembly \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a DOM \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u043c\u0443 API. \u0412\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b API \u0432\u043d\u0443\u0442\u0440\u0438 Wasm \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 JavaScript (\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript-\u043a\u043e\u0434\u0430). \u0417\u043d\u0430\u0447\u0438\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432.<\/p>\n<p><strong>? \u0411\u044b\u0441\u0442\u0440\u043e\u0442\u0430 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. <\/strong>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e Wasm \u044d\u0442\u043e \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0431\u043b\u0438\u0437\u043a\u043e\u0439 \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 (\u043d\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430). \u0418 \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0435\u043d\u043d\u044b\u0439 \u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 Wasm-\u043c\u043e\u0434\u0443\u043b\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Content-Type: application\/wasm.<\/code><\/p>\n<p><strong>\u26d3\ufe0f \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f. <\/strong>\u0412 Wasm \u0435\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0442\u0438\u043f\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434. \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0432\u0441\u044e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 Wasm. <a href=\"https:\/\/webassembly.github.io\/spec\/core\/syntax\/types.html\"><u>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u0438\u043f\u0430\u0445 \u0432 WebAssembly<\/u><\/a>.<\/p>\n<p><strong>? \u0418\u0437\u043e\u043b\u044f\u0446\u0438\u044f.<\/strong> \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Wasm-\u043c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435, \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0435\u043c\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u0438. \u041d\u043e <strong>\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. <\/strong>\u0414\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CSP\"><u>Content Security Policy (CSP)<\/u><\/a>.<\/p>\n<h3>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438<\/h3>\n<p><strong>? \u0418\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435. <\/strong>\u0422\u0430\u043a \u043a\u0430\u043a Wasm \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0431\u0440\u0430\u0437\u0435\u0440\u0430, \u0441\u0442\u043e\u0438\u0442 \u0431\u0435\u0440\u0435\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c: \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438, \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u043e\u0442\u043e\u043a\u0430 \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u0432 JavaScript. \u041c\u044b \u0442\u0443\u0442 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 <code>Worker<\/code>&#8216;\u043e\u0432.<\/p>\n<p><strong>? \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432. <\/strong>\u041f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043a\u043e\u0434\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u043e\u043d\u043e\u043c \u0441 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440. \u0412\u044b\u0448\u0435 \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><strong>\u231b\ufe0f \u0412\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. <\/strong>Wasm \u2014 \u043c\u043e\u043b\u043e\u0434\u0430\u044f, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0449\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>JS<\/code>. \u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f Wasm-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u043d\u043e\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u0439\u0442\u0438 \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432 \u0438\u043b\u0438 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432. \u0418, \u0447\u0442\u043e \u043d\u0435\u043c\u0430\u043b\u043e\u0432\u0430\u0436\u043d\u043e, \u043e\u0431\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u044f \u0432\u0430\u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e.<\/p>\n<h3>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (\u043d\u0435 \u0441\u043c\u043e\u0433 \u043e\u0442\u043d\u0435\u0441\u0442\u0438 \u043a \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430\u043c \u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c)<\/h3>\n<p><strong>? JS \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 Wasm-\u043c\u043e\u0434\u0443\u043b\u044f. <\/strong>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Wasm \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c JS, \u0430 \u0441\u0442\u0430\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0440\u0443\u043a\u0430\u0445 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.\u00a0<\/p>\n<p><strong>? \u0421\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c. <\/strong>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>devtools<\/code>. \u041d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u043e\u0433\u043e, \u043a \u0447\u0435\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u043a JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c WebAssembly<\/h2>\n<p>\u041a\u043e\u0433\u043e-\u0442\u043e \u0443\u0434\u0438\u0432\u0438\u0442, \u043d\u043e \u043d\u0430 WebAssembly \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/yew.rs\"><u>Yew<\/u><\/a>. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 WebAssembly, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u044f\u0437\u044b\u043a Rust.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/react.dev\/blog\/2023\/03\/16\/introducing-react-dev\"><u>React<\/u><\/a>. \u041e\u0434\u043d\u0430 \u0438\u0437 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/yarnpkg.com\"><u>Yarn<\/u><\/a> . \u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/\"><u>Webpack<\/u><\/a>. \u0421\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.typescriptlang.org\/\"><u>Typescript<\/u><\/a>. \u041d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 JavaScript c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/prettier.io\/\"><u>Prettier<\/u><\/a>. \u0424\u043e\u0440\u043c\u0430\u0442\u0435\u0440 \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/eslint.org\/\"><u>Eslint<\/u><\/a>. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0410\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0438\u043f\u044b \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0427\u0442\u043e \u0437\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c? \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>Yew<\/code> \u0438 <code>React<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <a href=\"https:\/\/yarnpkg.com\/getting-started\/install\"><u>Yarn<\/u><\/a>. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u044f 3.6.3. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <a href=\"https:\/\/yarnpkg.com\/getting-started\/editor-sdks#vscode\"><u>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0432\u043e\u0451 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e<\/u><\/a>.\u00a0<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439:<\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/easymikey\/wasm-example\/tree\/init-project<\/code><\/pre>\n<p>\u2026\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u0435\u0442\u043a\u0443 <code>init-project<\/code>.\u00a0\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438:<\/p>\n<pre><code class=\"bash\">mkdir packages &amp;&amp; mkdir packages\/shell &amp;&amp; mkdir packages\/react-counter &amp;&amp; mkdir packages\/yew-counter<\/code><\/pre>\n<h3>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"bash\">cd packages\/shell &amp;&amp; yarn init -y &amp;&amp; touch webpack.config.ts &amp;&amp; tsconfig.json &amp;&amp; mkdir public &amp;&amp; touch public\/index.html &amp;&amp; mkdir src &amp;&amp; touch src\/App.tsx<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">yarn add -D css-loader \\ esbuild \\ esbuild-loader \\ html-webpack-plugin \\ style-loader \\ typescript \\ typescript-plugin-css-modules \\ webpack \\ webpack-cli \\ webpack-dev-server \\<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>React<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add react react-dom<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 <code>package.json<\/code>:<\/p>\n<pre><code class=\"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\" } } <\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0421\u043b\u0435\u0434\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c TypeScript:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{     \"extends\": \"..\/..\/tsconfig.base.json\",     \"include\": [     \".\/src\/**\/*\",     ],     \"compilerOptions\": {     \"outDir\": \"dist\",     \"baseUrl\": \".\",     \"paths\": {          \/\/ \u0414\u0430\u0434\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c IDE \u043d\u0430\u0439\u0442\u0438 \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438     \"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\": [ ] } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">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: {<\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-360964","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=360964"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360964\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=360964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=360964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=360964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}