Yew框架(一) 概念和一个小demo

1,762 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

简介

Yew 是个啥香蕉棒棒锤

Yew是 Rust 语言生态中最为成熟的前端应用框架。目的是使用 WebAssembly 来创建多线程的前端 web 应用。

  • 基于组件,假如你跟我一样也是一个前端程序员,会很容易上手.设计理念跟React不能说一模一样,兼职一模一样
  • 高性能 前端可以把很多工作转移到Rust处理,从而保证有益性能
  • 与js 交互,可以使用NPM,与现有的前端程序结合

WebAssembly 又是个什么香蕉棒棒锤

1995 年,布伦丹·艾希(Brendan Eich)用了不到 10 天就创建了 JavaScript。那时,JavaScript 的设计并非以速度见长。它基本上是用于表单验证的,同时速度非常缓慢。随着时间的流逝,它也在一天天变好。

WebAssembly  (Wasm)  是一种可移植的底层语言,并且可以由 Rust 编译而来。它在浏览器中可以以原生速度运行,还同时支持和 JavaScript 交互。这些在所有的主流浏览器中都已经提供。

在 2015 年,WebAssembly首次发布,并提供了一个运行在 Unity 下的游戏的小型演示。这款游戏是直接在浏览器中运行的。

在 2019 年,W3C 使 WebAssembly成为了新的 Web 标准。就像 V8 引擎一样,WebAssembly即将带来全新的性能革命。它的身影已经出现在了 Web 的赛道上,枪声一响便遥遥领先。

WebAssembly不能替代 Javascript,相反,这两种技术是相辅相成的。通过 JavaScript API,你可以将 WebAssembly模块加载到你的页面中。也就是说,你可以通过 WebAssembly来充分利用编译代码的性能,同时保持 JavaScript 的灵活性。 想了解更多 可以查看官方用例.

那为什么选用 Rust 呢?

Rust 是一门运行速度超快,并且以他丰富的类型系统和可信赖的所有权模型而闻名的语言。尽管它的学习曲线非常的陡峭(本人从入门到放弃了好几次),但是带来的回报完全成正比!

小demo

为了接下来咱们的小demo 跑起来顺利,咱们启用大杀器--脚手架

npx create-yew-app my-app
cd my-app
npm start

没有问题的话会出现下面步骤

image.png

浏览器打开 http://localhost:8000/

image.png

源码地址