精华内容
下载资源
问答
  • webassembly 框架
    2022-04-04 23:09:45

    解决Wasm和Js之间互调问题,程序猿直接上代码更清晰。

    • DEMO项目结构
      在这里插入图片描述
    • 分别贴出核心三个文件代码
      • main.go
    package main
    
    import (
    	"fmt"
    	"learn/util"
    	"syscall/js"
    )
    
    func main() {
       
    	fmt.
    更多相关内容
  • 为什么 WebAssembly 框架是 Web 的未来

    千次阅读 2022-01-20 17:10:38
    WASM 框架是像 React 这样的 JavaScript 库的可行竞争对手吗? 什么是 WebAssemblyWebAssembly 或 WASM 是所有 Web 浏览器都可以理解和运行的第二种通用​​编程语言。但是,您不会自己在 WebAssembly 中编写脚本...

    在这里插入图片描述
    WebAssembly 是一种在 Web 上运行代码的新方法。它背后有大型科技公司,它有望彻底改变我们编写 Web 应用程序的方式,但也有其自身的怪癖和局限性。WASM 框架是像 React 这样的 JavaScript 库的可行竞争对手吗?

    什么是 WebAssembly?

    WebAssembly 或 WASM 是所有 Web 浏览器都可以理解和运行的第二种通用​​编程语言。但是,您不会自己在 WebAssembly 中编写脚本——它是一种低级汇编语言,旨在非常接近已编译的机器代码,并且非常接近本机性能。
    在这里插入图片描述
    WebAssembly 的魔力在于它足够低级,实际上是一个简单的 编译目标。任何相当快的语言都必​​须在某个时候通过编译器,即使是像 JavaScript 这样的 JIT 编译语言,通常这意味着编译成 x86 或 ARM 机器代码才能在现代处理器上运行。

    但是,您也可以编译成不同的格式;通常这最终会成为更接近最终机器代码的“低级”语言。例如,Java 编译为发送到 JVM 运行时的 Java 字节码,而 C# 编译为发送到 .NET 运行时的 Microsoft 中间语言 (MSIL)。您甚至可以将语言从一种高级语言“转换”到另一种语言,最常见的扩展是 TypeScript 到 JavaScript,但也可以是您意想不到的更奇怪的扩展,例如 Python 到 JavaScript,尽管这通常是混乱和漏洞百出的。

    WASM 只是一种易于编译的中间语言。事实上,它与 Java 字节码和 C# MSIL 的概念几乎完全相同——这两种格式都可以轻松地跨平台运行相同的代码,使用为每个平台制作的特定运行时上运行的相同格式。在这里插入图片描述
    这实际上意味着 JavaScript 不再是您可以在 Web 上运行的唯一语言。Web 浏览器现在可以运行任何语言,只要该语言具有 WebAssembly 编译器。

    甚至像 C++ 和 Rust 这样的传统桌面语言也可以相对容易地编译成 WASM;AutoDesk 能够在几个月内将他们拥有 35 年历史的 C/C++ 代码库移植到 WASM ,而 Google 移植了 Google Earth,两者都可以渲染复杂的 3D 场景并以接近原生的性能运行。Unity 游戏引擎也可以在 WASM 中运行。

    WASM 目前在 94% 的用户浏览器中运行,与往常一样,IE、UC 浏览器和 Opera Mini 支持是阻碍它的主要因素。但是,它得到了来自 Mozilla、Microsoft、Google 和 Apple 的开发人员的支持,并且它在现代浏览器中的支持正在快速发展。与大多数 Web 标准一样,它目前由 W3C 标准组织管理。

    JavaScript 不再是唯一的选择

    太好了,那么这对每个人来说意味着什么?好吧,虽然在网络浏览器中运行《毁灭战士 3》当然是一个很酷的演示,但它并不能完全改变游戏规则。

    到目前为止,JavaScript 一直是您使网页具有交互性的唯一选择。无论您喜欢还是讨厌它,它的设计从未像今天这样使用。它是一种脚本语言,旨在完成一些琐碎的任务,例如使下拉菜单动画化,并且已经被破解了 25 多年以运行现代工作负载。只有通过使用最先进的 JS 引擎和 JIT 编译优化,它甚至可以与原生速度进行比较。

    因此,随着网页发展成为完整的 Web 应用程序,React、Vue 和 Angular 等 JavaScript 客户端框架应运而生以满足需求。当然,仍然有服务器端框架——你是从 WordPress 中阅读的,一个 PHP 框架——但是客户端框架提供了巨大的性能提升。使用客户端框架,在按下按钮或与应用程序交互后,DOM 会自动更新。即使是实时服务器渲染的框架也必须发出网络请求来更改任何内容,并且在最坏的情况下,必须刷新整个页面。
    Web 真正需要的创新是像 React 这样用非 JavaScript 语言编写的框架的合适竞争对手。

    虽然所有 Web 的前端代码都是用 JavaScript 编写的,但后端代码通常不是。在高性能数据中心工作负载中,使用适当的桌面语言(如 C#、C++、Rust 和 Go)通常是有益的。毕竟,这些可以通过需要更少的服务器来满足相同的需求,从而为您节省资金。

    但是,这也会花费您的开发时间,因为现在您必须处理 C# 后端和 JavaScript 前端之间的互操作性。简单地无法共享代码、模型和库可能会使您的开发复杂性增加多达 2 倍于使用统一系统的情况。仅这个原因就是 NodeJS 服务器后端如此受欢迎的原因,尽管 20 年前这听起来像是一个糟糕的想法。

    能够编写在服务器 和客户端上运行的 C#、C++、Rust 和 Go 代码将为更多选项打开大门,并且几乎完全不需要 JavaScript 作为一种编程语言。在 WASM 客户端框架 Blazor 中,JavaScript 的使用保留用于与现有客户端包和基本脚本的互操作性。

    WASM 客户端框架如何工作?

    由于 WebAssembly 只是一种在“WebAssembly 环境”中运行代码的方式,因此您可以将其视为运行 Docker 容器。例如,微软的 Blazor 框架(迄今为止最流行的 WASM 客户端框架)有两种操作模式:

    • Blazor 服务器,它在服务器上运行所有处理和呈现,并通过 WebSocket 将更新发送到 HTML DOM,以及
    • Blazor WebAssembly,它做的事情完全相同,只是现在处理和呈现是在客户端上通过为 WASM 编译的 .NET 运行时完成的。

    在后一种情况下,WebSocket 连接被替换为直接链接到 DOM,通过 JavaScript,因为 WebAssembly 目前无法在不调用 JS API 的情况下直接修改 DOM。无论如何,您还需要 JavaScript 来“引导” WASM 应用程序,因此 JS 不会很快消失。在这里插入图片描述
    除此之外,WASM 客户端框架通常像任何其他框架一样工作,具体细节将取决于实现。

    例如,Blazor 保持内部状态并在单击按钮或进行输入时触发应用程序的重新呈现。它使用在 WASM 上运行的 C# 代码构造新的 HTML,然后将该 HTML 发送到 JavaScript API 以应用于 DOM。在 WebAssembly 上执行此操作可以减轻服务器的处理负载,并使客户端快速响应。即使通过 JavaScript 访问 DOM 也慢了一点,但它仍然比通过 Internet 访问 DOM 的替代方案要快很多。

    我们说话的速度有多快?

    “WASM 有多快?”的问题 很难确定。总体而言,它显然更快,这是毫无疑问的,但在某些情况下,它比这更复杂。

    DOM 访问仍然是一个问题,因为它必须通过 JavaScript 完成,所以它会像 JavaScript 一样慢。不过,这很快就会得到解决。有时,JavaScript 在 WASM 编译器可能遇到的特定基准测试中可能会更快,这仅仅是因为 JS 背后有 25 年的编译器迭代。

    对于需要大量处理能力的高性能应用程序,例如游戏和应用程序,WASM 通常快 1.5 倍至 2 倍。但它可能是相同的速度。它也可能比 JavaScript 慢 20%。对于某些功能,它也可能快 10 倍。那里有显示所有这些结果的基准,所以唯一可以肯定的是你的里程会有所不同。

    与本机代码相比,它可能总是比它所编译的语言慢。因此,虽然它可能会很快,但有很多警告,并且您不应该期望在 Web 上获得本机性能而使用 WASM。
    综上所述,WASM 并不需要疯狂的性能才能成为革命性的。它只需要工作,不慢,并支持多种语言。

    现在有哪些框架可以工作?

    迄今为止最重要的一个是 Blazor,由 Microsoft 开发。这是第一个由大公司支持的 WASM 客户端框架,并且可能会成为 WASM 最终获得其应得的主流采用的催化剂。

    Blazor WASM 只有一年的历史,Blazor Server 是在 3 年前发布的,但 Blazor 的伟大之处在于它只是 ASP.NET 的扩展,这是一个 20 年历史的 Web 框架,Microsoft 一直在不断改进。您可以使用许多已经为 ASP.NET 编写的前端库,它很可能是唯一一个由可与 NPM 相媲美的 Web 包管理器支持的框架。

    这也不是什么副业——微软一直在推动 Blazor 不仅仅是一个 Web 框架。这是他们的下一个应用程序编程模型。他们正在开发 Blazor Desktop,将于 2021 年底发布,它的工作原理与 Electron 在桌面上运行相同的 Blazor Web 应用程序非常相似。他们显然非常关心它,这对 WASM 来说总体上是个好消息。

    如果您想了解更多信息,可以阅读我们关于 Blazor 是什么以及如何开始使用它的指南。

    另一个可用于生产的框架是Yew,它建立在 Rust 上,Rust 是一种类似于 C++ 的现代语言,但由于它处理引用的奇怪方式而具有内存安全性。Yew 速度快,支持 React 等基于组件的模型,并且与 JS API 具有互操作性。
    asm-dom是一个为 C++ 编写的库,它除了将 C++ 代码连接到 DOM 之外没有做更多的事情。显然,您需要在这里自带框架,但大多数疯狂到用 C++ 编写 Web 应用程序的开发人员可能还是会这样做。它还支持回退到 asm.js,这是 WebAssembly 试图成为的早期版本。它基本上是 JavaScript 的一个子集,仅限于使用整数(即,仅字节,而不是对象),这使得将 C++ 代码转换为更容易,因为这基本上是所有 C++ 代码在一天结束时使用的。拥有这种支持并不是很有用,因为很少有环境不支持 WASM 但会支持 asm.js。

    Vugu是一个用 Go 编写的框架,支持组件并以 Vue 语法为模型,但仍处于试验阶段。还有Vecty,它也是一个流行的 Go 框架。

    WebAssembly 的未来

    这一切都集中在使用 WASM 操作 DOM 和构建应用程序的客户端 Web 框架上。但是,您也可以将整个桌面应用程序移植到网络上。这就是 Uno 所做的——使用 WASM 直接在 Web 容器中运行通用 Windows 平台 (UWP) 应用程序,这还带来了完全跨平台的额外好处。它的效果实际上有点不可思议,并且真的感觉就像您正在使用本机 Windows 应用程序。您可以在他们的画廊中自己查看。
    在这里插入图片描述
    WASM 生态系统不仅仅是这些。如果你想了解更多,你应该阅读GitHub 上的 awesome-wasm 编译,它列出了一堆流行的项目。

    我们在这里没有提到的最值得注意的是WASI——一种 使用标准化系统接口在任何系统上可移植地运行 WebAssembly 的方法。随着 WASM 变得越来越高性能,WASI 可能被证明是在任何类型的系统上运行任何类型的代码的可行方式,类似于 Docker 的工作方式,但不受操作系统的限制。事实上,Docker 的创造者所罗门·海克斯 (Solomon Hykes) 已经全心全意地为其背书:在这里插入图片描述
    WebAssembly 只有几年的历史。它仍有很大的增长空间,并且仍在加快速度。五年后,Blazor 和 Yew 等框架将与 React、Angular 和 Vue 一样普遍,这并非没有道理。

    这可以说是分散了 Web 生态系统,但 WASM 是跨平台的。 WAPM是一个 WASM 包管理器,它可能成为在不同语言的框架之间共享库的首选方式。

    无论如何,在 WebAssembly 上运行的 Web 框架具有巨大的潜力,并且在 Microsoft 个人的支持下,我们相信它们是 Web 的未来。

    展开全文
  • 测试框架 编译器的公共API参见 二进制格式文件编写器和文本格式文件编写器 支持本机方法 内存管理-当前在JavaScript端具有polyfill 调用静态方法调用 调用实例方法调用 调用接口方法调用 调用动态方法调用...
  • Chat Seed是一个前端Rust框架,用于使用类似Elm的架构创建快速可靠的Web应用程序。 R网站的所有优势| 论坛| Chat Seed是一个前端Rust框架,用于使用类似Elm的架构创建快速可靠的Web应用程序。 Rust和基于宏的语法的...
  • 不要慌,今天的第三位猪脚出现了:Yew 文档在此yew中文文档简介如下Yew 是一个设计先进的 Rust 框架,目的是使用 WebAssembly 来创建多线程的前端 web 应用。 基于组件的框架,可以轻松的创建交互式 UI。拥有 React ...

    但是虽然可以编译,这样书写是绕不过静态类型检查的!!!!!!

    相信大家发现了上面的string类型有些特殊,不是说string是"值类型"吗?为什么他又可以用引用类型来表示呢?string使用了没有所有权的特殊的引用类型slice,slice 允许你引用集合中一段连续的元素序列,而不用引用整个集合。

    let s = String::from(“hello”);

    let slice = &s[0…2];

    let slice = &s[…2];

    对于"值类型"的string

    let s = “Hello, world!”;

    这里 s 的类型是 &str:它是一个指向二进制程序特定位置的 slice。这也就是为什么字符串字面值是不可变的;&str 是一个不可变引用。

    悬垂引用 悬垂指针是其指向的内存可能已经被分配给其它持有者。相比之下,在 Rust 中编译器确保引用永远也不会变成悬垂状态 例如以下代码:

    fn main() {

    let reference_to_nothing = dangle();

    }

    // wrong

    fn dangle() -> &String {

    let s = String::from(“hello”);

    &s

    }

    //safe

    fn safe() -> String {

    let s = String::from(“hello”);

    s

    }

    因为 s 是在 dangle 函数内创建的,当 dangle 的代码执行完毕后,s 将被释放。不过我们尝试返回它的引用。这意味着这个引用会指向一个无效的 String,这可不对!Rust 不会允许我们这么做 总结两条规则

    • 在任意给定时间,要么 只能有一个可变引用,要么 只能有多个不可变引用。

    • 引用必须总是有效的。

    到这里和JavaScript有联系的,并且基础的就分享的差不多了,隐约记得鲁迅说过,如果你对一门语言,了解了其基本的语法,能够编写对应的简单的代码来实现简单的功能,那么你就入门了。后续的包括以下部分,就先按下不表

    • Cargo : Cargo 是 Rust 的构建系统和包管理器。大多数 Rustacean 们使用 Cargo 来管理他们的 Rust 项目,因为它可以为你处理很多任务,比如构建代码、下载依赖库并编译这些库。类似于JS使用的npm/pnpm/yarn

    • 常见集合:Hashmap(类似于js中的map),Vector(类似于js中的数组),String

    • 错误处理:panic(Throw Error 完全阻塞了程序执行) Result(类似于warning 可以报错但是不影响程序的执行)

    最后总结一下rust我认为最令人称道的两点

    1. 丰富而强大的类型系统

    2. 可信赖的所有权模型

    Rust and WebAssembly

    ====================

    上面讲了半天rust,他只是我们今天的猪脚之一,那么今天的猪脚还有哪位呢?没错,就是 WebAssembly。那么WebAssembly到底是什么呢?在说这个之前先康康JavaScript的是怎么进行编译的 这就不得不说到两种编译方式了

    • AOT: Ahead-of-Time compilation

    必须是强类型语言,编译在执行之前,编译直接生成CPU能够执行的二进制文件,执行时CPU不需要做任何编译操作,直接执行,性能最佳,比如C/C++,Rust

    • JIT: Just-in-Time compilation

    没有编译环节。执行时根据上下文生成二进制汇编代码,灌入CPU执行。JIT执行时,可以根据代码编译进行优化,代码运行时,不需要每次都翻译成二进制汇编代码,V8就是这样优化JavaScript性能的。

    举个例子,如果使用var来声明一个变量,不使用Typescript等类型系统来限定,一个变量,在多次编译的时候得到的变量的类型可能会不一样,这就导致了每一次JavaScript在执行的时候可能都会被重新编译,这就是类型系统的重要性,不仅能减少bug的发生也可以让我们的代码跑得更快

    详细的说一下这个过程也就是

    1. 代码文件会被下载下来。

    2. 然后进入Parser,Parser会把代码转化成AST(抽象语法树).

    3. 然后根据抽象语法树,Bytecode Compiler字节码编译器会生成引擎能够直接阅读、执行的字节码。

    4. 字节码进入翻译器,将字节码一行一行的翻译成效率十分高的Machine Code.

    有同学可能会问:JavaScript不是可以使用Typescript进行静态类型检查吗?为什么不能在编译时编译成可执行的二进制文件呢?盲生,你发现了华点!Typescript说白了也只是给JavaScript打上了补丁,但是JavaScript还是那个JavaScript,说不定在有生之年可以看见JavaScript的整个内核被重写呢?Wasm:那我走?

    回到正题,既然JavaScript的内核变化的几率不大,那我们该如何进行优化呢?一个思路就是可以直接把 C、C++、Rust等语言编译成 WebAssembly 并能在浏览器中运行,但是有一点需要注意,使用wasm并不是完全舍弃掉了JavaScript,这两者实际上是相辅相成的关系,在实际的应用场景中Rust和JavaScript往往是互相调用包来开发一个web应用。

    WebAssembly是一份字节码标准,以字节码的形式依赖虚拟机在浏览器中运行。万维网联盟(W3C)2019年12月5日宣布,WebAssembly 核心规范 现在是一种正式的 Web 标准,它为 Web 发布了一种功能强大的新语言。WebAssembly 是一种安全、可移植的低级格式,能够在现代处理器(包括 Web 浏览器)中高效执行并紧凑地表示代码。它也被设计为可以与JavaScript共存,允许两者一起工作。这样说大家可能云里雾里的,那么换个方法 我们每天都在接触各种业务,那大家有没有想过从我们写下JavaScript代码开始,到底发生了什么?就只看JavaScript大致是这样一个过程:

    业务代码 -> v8 解析 -> 得到编译结果(字节码) -> 线程通信 -> 通知GPU绘制 -> 渲染

    那如果我们使用了WebAssembly,那又是一个什么过程呢?

    业务代码 -> 编译 -> 字节码 -> 线程通信 -> 通知GPU绘制 -> 渲染

    可以看出,这两个链路最大的区别就是,在第二种链路中,浏览器(V8)所得到的东西,已经是一份可以执行的字节码了,他只需要执行就完事了,而不需要使用大量的CPU来对可能很复杂的源代码来进行编译。(当然也可以使用worker 这里就不做讨论了) 但是纯纯的字节码指定是不行的,C/C++,Rust可能都有自己的一套规范,所以这就需要一套规范来整合一下,让大家都可以愉快的在浏览器中玩耍,这可以说就是WebAssembly,由他的标准可以生成后缀名为.wasm的文件,可以直接交给浏览器执行 目前主流的浏览器都已经支持了WebAssembly。除此之外 ,依照wasm的特性,个人认为或者wasm未来在多端也能有一定的用处

    实战

    俗话说的好,纸上得来终觉浅,绝知此事要躬行,上面简单学习了rust+wasm,那如果不实践一下那不是浪费了吗,那到底怎么实践rust+wasm呢?自己看着wasm的文档写?那指定是不行的。那怎么办呢?不要慌,今天的第三位猪脚出现了:Yew 文档在此yew中文文档简介如下Yew 是一个设计先进的 Rust 框架,目的是使用 WebAssembly 来创建多线程的前端 web 应用。

    • 基于组件的框架,可以轻松的创建交互式 UI。拥有 React 或 Elm 等框架经验的开发人员在使用 Yew 时会感到得心应手。

    • 高性能 ,前端开发者可以轻易的将工作分流至后端来减少 DOM API 的调用,从而达到异常出色的性能。

    • 支持与 JavaScript 交互 ,允许开发者使用 NPM 包,并与现有的 JavaScript 应用程序结合。

    让一个yew应用跑起来分三步(确信)

    1. 创建一个二进制项目

    cargo new --bin yew-app && cd yew-app

    1. 编写代码,注意要编写index.html

    2. 启动

    cargo install trunk wasm-bindgen-cli

    rustup target add wasm32-unknown-unknown

    trunk serve

    一张图简述一下wasm-bindgen的作用

    组件化

    页面展示的代码

    use yew::prelude:😗;

    enum Msg {

    AddOne,

    }

    struct Model {

    link: ComponentLink,

    value: i64,

    }

    impl Component for Model {

    type Message = Msg;

    type Properties = ();

    fn create(_props: Self::Properties, link: ComponentLink) -> Self {

    Self {

    link,

    value: 0,

    }

    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {

    match msg {

    Msg::AddOne => {

    self.value += 1;

    true

    }

    }

    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {

    false

    }

    fn view(&self) -> Html {

    html! {

    { "tandake is a Vegetable Chicken"  }

    { self.value  }

    }

    }

    }

    fn main() {

    yew::start_app::();

    }

    效果演示

    可以看出,这里的渲染的文件来源已经是wasm了 眼尖的同学可能已经发现了上面的create,update ,change几个函数,那么他们是用来干嘛的呢?简单说一下yew中组件的生命周期:Component 特质定义了六个生命周期函数。

    • create 是一个构造函数,接收道具和ComponentLink

    • view 渲染该组件

    • update 当一个Message 被发送到该组件时被调用,实现消息传递的逻辑

    • change 重新渲染变化,优化渲染速度

    • rendered 在view 之后但在浏览器更新之前被调用一次,以区分第一次渲染和连续渲染。

    • destroy ,当一个组件被卸载并需要进行清理操作时被调用。

    如果把他类比成react的类组件,那么create就是constructor构造函数,update就是相当于注册在组件内部的一些静态方法,change相当于shouldcomponentupdate,其他的生命周期也可同比

    父子组件中通信

    前文说到yew是基于组件的,那么父子组件该怎么进行最简单的数据通信呢?声明父组件

    #[derive(Clone, PartialEq, Properties, Default)]

    struct Properties {

    name: String,

    }

    enum Message {

    ChangeName(String),

    }

    struct Model {

    link: ComponentLink 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ,

    props: Properties,

    }

    impl Model {

    fn change_name(&mut self, name: String) {

    self.props.name = name;

    }

    }

    impl Component for Model {

    type Message = Message;

    type Properties = Properties;

    fn create(_props: Self::Properties, link: ComponentLink) -> Self {

    Self {

    link,

    props: Properties {

    name: “tandake”.to_string(),

    },

    }

    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {

    match msg {

    Message::ChangeName(name) => {

    self.change_name(name);

    }

    };

    true

    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {

    false

    }

    fn view(&self) -> Html {

    html! {

    { "大家好,我是练习时长两天半的rust实习生,谭达科"  }

    {"hello "}{self.props.name.clone()}

    }

    }

    }

    声明子组件

    #[derive(Clone, PartialEq, Properties, Default)]

    struct ButtonProperties {

    onclick: Callback,

    }

    enum ButtonMessage {

    ChangName,

    }

    struct Button {

    props: ButtonProperties,

    link: ComponentLink,

    }

    impl Button {

    fn change_name(&mut self) {

    self.props.onclick.emit(“is a vegetableChicken”.to_string());

    }

    }

    impl Component for Button {

    type Message = ButtonMessage;

    type Properties = ButtonProperties;

    fn create(props: Self::Properties, link: ComponentLink) -> Self {

    Self { props, link }

    }

    fn update(&mut self, msg: Self::Message) -> bool {

    match msg {

    ButtonMessage::ChangName => {

    self.change_name();

    }

    };

    true

    }

    fn change(&mut self, props: Self::Properties) -> bool {

    if self.props != props {

    self.props = props;

    true

    } else {

    false

    }

    }

    fn view(&self) -> Html {

    html! {

    }

    }

    }

    演示效果

    声明一个组件需要一些什么东西呢?从上面这个简单的demo可以看出一个大概

    1. 定义属性结构

    #[derive(Clone, PartialEq, Properties, Default)]

    1. 把属性附加到状态

    struct Button {

    props: ButtonProperties,

    link: ComponentLink,

    }

    1. 初始化组件的状态

    fn create(props: Self::Properties, link: ComponentLink) -> Self {

    Self { props, link }

    }

    1. 初始化生命周期,在update中接受事件,在change中重新渲染

    fn update(&mut self, msg: Self::Message) -> bool {

    match msg {

    ButtonMessage::ChangName => {

    self.change_name();

    }

    };

    true

    }

    fn change(&mut self, props: Self::Properties) -> bool {

    if self.props != props {

    self.props = props;

    true

    } else {

    false

    }

    }

    fn view(&self) -> Html {

    html! {

    }

    }

    1. 需要交互注册自定义事件

    impl Button {

    fn change_name(&mut self) {

    self.props.onclick.emit(“is a vegetableChicken”.to_string());

    }

    }

    这种写法与现在我们使用的react的写法是比较类似的(当然也可以使用vue的emit的方式)

    函数式组件

    上诉yew的组件多多少少和类组件比较像,那么yew可不可以使用一种类似函数式组件的方法?甚至使用hooks呢?当然可以 下面我们来实现一个简单的点击计数器(效果和第一个类似,就不再赘述了)

    #[derive(Properties, Clone, PartialEq)]

    pub struct RenderedAtProps {

    pub time: String,

    }

    #[function_component(App)]

    fn app() -> Html {

    let (counter, set_counter) = use_state(|| 0);

    let onclick = {

    let counter = Rc::clone(&counter);

    Callback::from(move |_| set_counter(*counter + 1))

    };

    html! {

    { “Increment value” }

    { "Current value: " }

    { counter }

    }

    }

    #[function_component(RenderedAt)]

    pub fn rendered_at(props: &RenderedAtProps) -> Html {

    html! {

    { "Rendered at: " }

    { props.time.clone() }

    }

    }

    这样看起来是不是有react的函数式组件那味了,在使用函数组件的时候,我们也可以使用yew中自带的各种hooks,包括了但不限于以下hook钩子

    • use_state

    • use_ref

    • use_reducer

    • use_reducer_with_init

    • use_effect

    • use_effect_with_deps

    Yew虽然说是一款Rust框架,但是在实际使用上与Rust相关,而与我们现在学习的知识无关的地方很少,大多的时候我们都在这里面看到vue和react中的影子,使用的成本其实并不高,就像我们使用JavaScript来开发一样,大家都知道JavaScript是基于V8的,但是我们在编程的时候不是只是关注V8来进行开发吧?这个框架也是一样,虽然基于WebAssembly和Rust,但是使用起来,会比我们想象的顺滑很多。

    WebAssembly 和 Javascript

    ========================

    上面讲了yew这个新框架,但是问题又来了,这不是还是要学习Rust吗?我不会Rust,但是我就是想用WebAssembly!我就是想用JavaScript!那怎么办呢?没事,你能想到的,大家都想到了,那下面又来了一位猪脚。

    AssemblyScript:用Javascript的方式来编写WebAssembly


    还记得上面在介绍rust的时候,提到过的的Rust比Typescript更加丰富的系统吗?是不是看的心痒痒?没事,Rust的类型系统的确很好,但是下一秒就是我的了,那下面再请出一位猪脚 AssemblyScript 看一句官网的描述

    AssemblyScript compiles a variant of TypeScript(a typed superset of JavaScript) to WebAssembly using Binaryen,It generates lean and mean WebAssembly modules while being just an npm install away

    它其实就是Typescript的变种,在Typescript的基础上进一步丰富了类型系统,并且可以编译成wasm文件执行,Typescript你不要再给我打电话啦,我怕AssemblyScript 误会 可以将其视为 TypeScript 的高级语法和 C 的低级功能的混合(没错,你可以使用AssemblyScript 来操作内存!!),上文已经说过了jit是个什么玩意儿,一个完整且严格的类型系统可以让JIT更加的迅速,既然要保证对于Jit编译时的优化,也为了WebAssembly来提供静态保证,所以有意避免JavaScript无法提前_有效_编译的动态_性_。也就是说,无类型状态,是不存在的!

    // ???

    var a = {}

    a.prop = “hello world”

    // ???

    var a = new Map<string,string>()

    a.set(“prop”, “hello world”)

    // ???

    function foo(a?) {

    var b = a + 1

    return b

    }

    // ???

    function foo(a: i32 = 0): i32 {

    var b = a + 1

    return b

    }

    // ???

    function foo(a: i32 | string): void {

    }

    // ???

    function foo(a: T): void {

    }

    当然,目前这门语言还有许多不完善的地方,对应的生态也不成熟,这门语言的目标是想要成为一个对web开发者上手门槛极低的语言,但是同时他又是一门最终需要编译为WebAssembly的语言,这就需要它在支持目前已有的开发语言的特性的基础上,又不能在依然保有某些语言编译效率底下的特性或者是盲目的迷信二进制的路上越走越远,这可以说是这门语言的哲学,也可以说是这门语言前进的方向 具体的用法就不多说了,大家有兴趣的可以去研究一下(手动狗头)AssemblyScript官方英文文档

    整合 WebAssembly+Javascript+Vite+Vue/React+Rust


    其实分享到这里,看了wasm这么多骚操作之后,又想起了我们平时的开发框架Vue/React,自然而然,我就会想到:那我能不能直接在Vue/React中使用WebAssembly呢?再过分一点,我甚至把下一代打包构建工具Vite也用上?答案只有一个:可以 下面我们来实战操作一下,以Vue3为示例 使用到的技术名词

    展开全文
  • cabasa:用于WebAssembly的Haxe框架
  • 本期的每周一库带来的是一个Rust下的WebAssembly多线程前端框架Yew相关链接Yew Github仓库Yew中文文档Yew是一个设计先进的Rust前端框架,目的是使用WebAs...

    本期的每周一库带来的是一个Rust下的WebAssembly多线程前端框架Yew

    相关链接

    • Yew Github仓库

    • Yew中文文档

    Yew是一个设计先进的Rust前端框架,目的是使用WebAssembly来创建多线程前端web应用。

    Yew的主要特性包括

    • 基于组件的框架

    • 高性能

    • 支持与Javascript交互

    下面我们结合Yew官方文档来创建一个简单的Web App并在本地预览。

    为了能够在本地预览通过Yew实现的Web App,我们首先要选择一个Wasm构建工具,构建工具可以方便WebAssembly和JavaScript交互。从而减轻了部署和打包工程的复杂度。

    Yew文档中介绍了三种Wasm构建工具

    • wasm-pack

    • wasm-bindgen

    • cargo-web

    这里我们选择相对简单并且兼容性更好的cargo-web构建工具。

    安装cargo-web

    我们可以使用如下命令来安装cargo-web构建工具,安装时间大约2mins

    cargo install cargo-web
    

    第一个简单的Web App
    这里参考Yew文档中的第一个简单的App章节来进行实验

    首先创建一个rust工程

    cargo new --bin hello-yew
    

    然后在Cargo.toml文件中添加Yew依赖

    [dependencies]
    yew = { version = "0.14.3", features = ["std_web"] }
    

    修改src/main.rs代码

    use yew::prelude::*;
    
    
    struct Model {
        link: ComponentLink<Self>,
        value: i64,
    }
    
    
    enum Msg {
        AddOne,
    }
    
    
    impl Component for Model {
        type Message = Msg;
        type Properties = ();
        fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
            Self {
                link,
                value: 0,
            }
        }
    
    
        fn update(&mut self, msg: Self::Message) -> ShouldRender {
            match msg {
                Msg::AddOne => self.value += 1
            }
            true // 指示组件应该重新渲染
        }
    
    
        fn view(&self) -> Html {
            html! {
                <div>
                    <h1>{"Hello Yew"}</h1>
                    <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                    <p>{ self.value }</p>
                </div>
            }
        }
    }
    
    
    fn main() {
        yew::initialize();
        App::<Model>::new().mount_to_body();
    }
    

    运行程序
    在工程文件夹根目录运行命令

    cargo web start
    

    首次运行会进行compile,然后可以使用浏览器在默认地址localhost:8000访问我们刚才创建的Yew工程

    Yew文档内容十分详细,文档中紧接着就解释了Cargo.toml文件中通过不同的方式来构建应用的讲解,可以点击左下角原文链接查看Yew中文文档来继续深入。

    展开全文
  • 什么是 webassembly 在 2019 年 12 月之前,如果你要编写一个web页面,那一定离不开 html、css、js 这三个好兄弟。在 2019 年 12 月之后 W3C 宣布 webassembly 加入了他们。为什么要在三兄弟后加入 webassembly ?它...
  • C++之WebAssembly入门

    2022-05-14 16:44:36
    cmake之webassembly入门例子
  • 我们在上提供了有关如何使用Wasabi来动态分析WebAssembly的。 尽管会议已经结束,但是所有材料都可以在以下在线获得 。 特别是,并且动手操作的任务在此存储库中的。 从源安装 依赖关系和工具 Git,CMake和GCC或...
  • 依托于WebAssembly,Rust可以运行在浏览器上,在某些场景(如视频直播或需要大量运算)具有卓越的性能,例如我们经常用的figma就有使用到WebAssembly。 掌握至少一门后端语言有助于后续的提升,Node.js也很对,但是...
  • 这篇文章摘自我的书Black Hat Rust 安装工具链 wasm-pack帮助您构建 Rust 生成的 WebAssembly 包并在浏览器或 Node.js 中使用它。 $ cargo install -f wasm-pack 楷模 请注意,在后端使用与前端相同的语言的一大...
  • WebAssembly架构

    2022-04-06 16:29:52
  • 兼容SwiftUI的框架,用于使用WebAssembly构建浏览器应用 目前,Tokakak实现了SwiftUI的一个非常基本的子集。 它的DOM渲染器支持几种视图类型和修饰符(您可以在检查当前列表),以及一个用于构造任意HTML的新HTML...
  • 通过WebAssembly与JavaScript交互的Swift框架。 入门 此JavaScript代码 const alert = window . alert ; const document = window . document ; const divElement = document . createElement ( "div" ) ; div...
  • AssemblyLift是用于构建由WebAssembly(WASM)支持的无服务器应用程序的框架。 精彩片段: 为主机和WASM来宾提供了一个插件接口,使来宾可以安全地拨打外界电话,而无需提升访问权限。 IOmods在之上实现,并且...
  • 值得称赞的是背后的人们,他们在WebAssembly规范方面的出色工作以及在WebAssembly框架,库和工具方面的出色工作。 该项目从下的项目中获得了很多启发。 Web组装 WebAssembly(缩写为Wasm)是基于堆栈的虚拟机的二...
  • awesome-blazor:Blazor的资源,Blazor是一个使用C#Razor和HTML的.NET Web框架,该框架在带有WebAssembly的浏览器中运行
  • Blazor是一个实验性的单页面应用程序框架,用于使用.NET和WebAssembly构建客户端Web应用程序。 在本次研讨会中,我们将构建一个完整的Blazor应用程序,并在此过程中了解各种Blazor框架功能。
  • 蛋黄酱 Aioli是使用和构建快速基因组学Web应用程序的框架。使用Aioli的工具工具网址回购色带对齐沙箱快速生物 巴姆比奥入门如下所示,您可以从我们的biowasm CDN中获得Aioli ,也可以从npm安装它: npm install @...
  • Stimulsoft Reports.Blazor 的 Blazor WebAssembly 示例 此存储库包含 Blazor WebAssembly 应用程序中使用 Stimulsoft Reports.Blazor 报告工具的示例的源代码,使用 C# 代码和 Razor 组件。 此产品和示例与 .NET ...
  • Blazor 实验UI框架通过webassembly在浏览器中运行.NET
  • 它包括以下几部分: “ iwasm” VM内核,支持WebAssembly解释器,提前编译(AoT)和即时编译(JIT) WASM应用程序的应用程序框架和支持的API WASM应用程序的动态管理iwasm VM核心主要特征100%符合W3C WASM MVP 较...
  • Blazor已移至ASP.NET Core库。Blazor的资源和问题已移至ASP.NET Core库。 新问题和PR应该发布在ASP.NET Core存储库中。 请不要在此回购中发布新的问题或PR。 对于i Blazor,已移至ASP.NET Core库。...
  • 通过WebWorker(WebAssembly)或WebSocket(Python / Node)与框架无关的用户界面组件和 Widget,以及一组Datagrid和 Chart插件。 `例子 超市奥运自定义样式 可编辑的流媒体CSV IEX云纽约市市民自行车JupyterLab...
  • Vecty使您可以使用WebAssembly在Go中构建响应式和动态Web前端,与React和VueJS等现代Web框架竞争。好处Go开发人员可以成为有竞争力的前端开发人员。 在您的前端和后端之间共享Go代码。 通过Go包共享组件来实现可重用...
  • Aioli 是一个使用 WebAssembly 在浏览器中运行基因组学命令行工具的库。 更多详情、使用方法,请下载后阅读README.md文件
  • 本地PDF使用Webassembly在浏览器中编辑PDF。 您的文件不会离开系统,也不会发送...将来,我还希望在浏览器中支持其他pdfcpu功能,例如pdf压缩使用以下代码构建:Nextjs Charka-ui作为组件框架Caprover来承载Web应用程序
  • Go-GolangWebAssembly框架

    2019-08-14 02:28:51
    Golang WebAssembly框架

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,027
精华内容 1,610
关键字:

webassembly 框架