值得收藏!基于 Rust 的10个优秀热门前端框架!
大家好,很高兴又见面了,我是\”高级前端进阶\”,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
Rust 由前 Mozilla 开发人员 Graydon Hoare 于 2006 年创建,作为 C++ 语言的替代品。 可用于创建网络软件、嵌入式计算机和分布式服务、命令行工具等等。
在 Stack overflow 2020 的调查中,Rust 被选为最受欢迎的编程语言第一名,这是因为 86% 的开发人员表示会继续在开发项目中使用它。 其实,自 2016 年以来,Rust 一直在调查中获胜。在 Tiobe 指数上,Rust 的受欢迎程度也在逐步上升。
根据2023年的最新数据,Rust在所有语言的排名中处于第20位,小于 Go(11)< PHP(10)< JavaScript(7)< Java(4)< C++(3) < C(2)< Python(1)。但是从整体数据来看,Rust的使用量已经在逐步增加(+0.16),而PHP(-0.49)、Go(-0.12)都处于下降阶段。
同时从下图就能看出,2012年到2023年的 tiobe 指数表明,Rust几乎处于明显的上升趋势,而且非常亮眼。从Rust的企业覆盖来说已经算是火的不能再火了。比如:微软打算将部分基建从C++过渡到Rust,谷歌宣布支持使用 Rust 开发 Chromium,Dropbox、Sentry、Amazon 和 Mozilla等也在积极布局Rust,甚至Linux内核都已经支持Rust开发等。
既然 Rust 如此受欢迎,今天就带着大家一起看看10个基于Rust的前端框架,当然也只是所有Rust框架中的典型代表。针对每一个项目都不会过多的展开,如果比较感兴趣可以继续在我的主页阅读。话不多说,直接开始!
Tauri 是一个流行的框架,用于为所有流行的桌面操作系统创建体积小、运行快的二进制文件。 为了创建UI界面,开发人员可以合并任何编译为 HTML、JavaScript 和 CSS 的前端框架。 该应用程序的后端是一个 rust-sourced 二进制文件,带有一个 API,前端可以使用该 API 进行通信。
Tauri 团队孵化和维护 WRY,以创建一个统一的系统 webview 界面(以及菜单和任务栏等其他好东西),利用 macOS 上的 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK。 Tauri 应用目前在 macOS 和 Windows 上使用 tao 作为窗口处理库,在 Linux 上使用 gtk。
Yew 是一个优秀的 Rust 框架,用于构建 WebAssembly 多线程前端 Web 应用程序。 它包括一个使用 Rust 表达式定义交互式 HTML 的宏。 在 React 中使用过 JSX 的开发人员应该非常熟悉 Yew。
Yew最大限度地减少了每个页面呈现的 DOM API 调用以实现高效率,并且Yew充分利用Web Worker的能力。 它使开发人员能够通过支持 JavaScript 互操作性来使用 NPM 包并与现有的 JavaScript 应用程序交互。Yew具有以下明显特征:
- 基于组件的框架
- 可移植的底层语言
- 支持所有主要的现代浏览器
- 使用自己的虚拟 DOM 表示
stdweb前端标准库使 Rust 能够直接与 JavaScript Web API 交互。 它旨在通过促进两种语言之间的简单 API 绑定以提高速度和性能,使开发人员能够在 Rust 中生成功能齐全的 JavaScript 应用程序。
stdweb 支持闭包、任意结构和常见的 Web API 元素,如 DOM、事件和窗口。stdweb具有以下明显特征:
- 允许高度的互操作性
- 也支持闭包
- 为 Web API 提供 Rust 绑定
- 支持实验性 Parcel 插件
stdweb 可以直接将 JavaScript 代码嵌入到 Rust 中:
可以通过如下方式使用闭包:
Percy 是一组 Rust 库,用于创建由 WebMeeting 驱动的前端 Web 应用程序。 Percy 支持服务器端渲染,擅长创建对搜索引擎友好的单页应用程序 (SPA)。
为了创建 DOM,Percy 提供了一个 html! 宏。 这些可用于实用程序后端中的操作或呈现为前端的 DOM 组件。
可以使用 Percy 构建仅支持服务器端渲染、仅支持客户端渲染或同时支持服务器端和客户端渲染的应用程序。Percy 出现时间比较晚,但该项目在 Github 上有超过 2.1K星。Percy具有以下明显特征:
- 允许构建搜索引擎友好的浏览器应用程序
- Rust 中的 CSS
- 支持服务端渲染
Percy 在稳定的 Rust 上编译,但有一个警告: 在 nightly Rust 上,您可以创建不带引号的文本节点。
在稳定的 Rust 上,引号是必需的。
Seed 是一个前端框架,用于创建性能驱动且可靠的 Web 应用程序,它也具有类似 Elm 的架构,具有最少的配置和样板文件,并具有清晰的文档,使任何人都可以轻松上手。
使用 Seed,开发者可以创建具有 Rust 应用的所有优点,包括速度、安全性等等。Seed具有以下明显的特点:
- 开箱即用的方法
- 清晰而广泛的文档
- 完全用 Rust
- 编写 WebAssembly
可以使用如下命令快速开始:
如果抛出有关 wasm 链接到不同版本的 wasm-bindgen 的错误,只需按照建议运行 cargo update -p wasm-bindgen即修复链接。此时可以在 localhost:8080 看到一个正在运行的计数器应用程序。
Sauron 是一个多功能的 Web 框架和库,用于构建客户端和/或服务器端 Web 应用程序,非常注重简单性。它适用于开发使用渐进式渲染的 Web 应用程序。
构建src/lib.rs文件:
HTML内容如下:
Dioxus 是一个可移植、高性能且符合人体工程学(Ergonomic Framework)的框架,用于在 Rust 中构建跨平台用户界面。
Dioxus 可用于开发网络应用程序、桌面应用程序、静态站点、移动应用程序、TUI 应用程序、实时视图应用程序等。 Dioxus 完全与渲染器无关,可以用作任何渲染器的平台。 如果熟悉 React,那么可以轻松上手Dioxus。
Dioxu具有以下明显特点:
- 不到 10 行代码即可原生运行的桌面应用程序(没有 Electron)
- 令人难以置信的人体工程学和强大的状态管理
- 全面的内联文档 – 所有 HTML 元素、侦听器和事件上手指南。
- 极快 和极高的内存效率
- 集成热重载以实现快速迭代
- 一流的异步支持协程
目前Dioxus在Github上已经有7.4K的star,在超过500+项目中使用。
Rust 的跨平台 GUI 库,专注于简单性和类型安全,灵感来自Elm。
Iced具有以下明显特点:
- 简单易用的内置 API
- 类型安全的反应式编程模型
- 跨平台支持(Windows、macOS、Linux 和 Web)
- 响应式布局、优秀性能
- 支持内置小部件(包括文本输入、滚动条等!),同时支持自定义小部件
- 对异步操作的一流支持、生态系统模块化
- 与渲染器无关的本机运行时,支持与现有系统集成
- 两个利用 wgpu 和 glow 的内置渲染器,iced_wgpu 支持 Vulkan、Metal 和 DX12
- iced_glow 支持 OpenGL 2.1+ 和 OpenGL ES 2.0+
目前Dioxus在Github上已经有18.3K的star,fork数超过800+,在超过2K+项目中使用。
Gloo 是一个模块化的工具包。 它是一组库,为浏览器 API 提供方便的 Rust 包装器。 由于直接使用 web-sys/js-sys 非常具有挑战性且不方便,gloo 提供了原始绑定的包装器,以简化这些 API 的使用。
因此,Gloo被称为“工具包”而不是“库”或“框架”。 Gloo 应该是一组灵活的实用工具箱,可以单独或一起使用。Gloo具有以下特征:
- 充分利用 Rust 和 Wasm 库生态系统
- 速度快
- 模块化工具包
- 体积小
- 支持小型、有针对性的库和 Web 应用程序
下面示例使用 gloo::events 来添加事件侦听器,并使用 gloo::timers 来创建超时设置。 Gloo创建一个 <button> 元素并向其添加一个“click”事件侦听器。 每当单击按钮时,它都会启动一秒超时,将按钮的文本内容设置为“Hello from one second ago!”。
目前Gloo在Github上已经有1.4K的star,fork数超过100+,在超过5.6K+项目中使用。
Actix Web 是一个强大、实用且速度极快的 Rust 网络框架。
Actix Web具有以下明显特点:
- 支持 HTTP/1.x 和 HTTP/2
- 支持Streaming and pipelining
- 带有可选宏的强大请求路由
- 完全兼容 Tokio,保持活动和缓慢的请求处理
- 客户端/服务器 WebSockets 支持,透明内容压缩/解压缩(br、gzip、deflate、zstd)
- Multipart streams和静态资产
- 支持 OpenSSL 或 Rustls 的 SSL ,中间件(Logger、Session、CORS 等)
- 与 awc HTTP 客户端集成,在稳定的 Rust 1.59+ 上运行
目前Actix Web在Github上已经有16.8K的star,fork数超过1.5K+,在超过40.7K+项目中使用。
本文主要和大家介绍Rust 生态的10个优秀前端框架。因为篇幅有限,文章并没有过多展开,如果有兴趣,可以直接在我主页继续阅读单框架介绍,但是文末的参考资料提供了大量优秀文档以供学习。
https://github.com/yewstack/yew
https://github.com/koute/stdweb
https://github.com/chinedufn/percy
https://github.com/seed-rs/seed
https://github.com/DioxusLabs/dioxus
https://github.com/actix/actix-web
宇宙最强语言PHP的“全栈”框架——Laravel来了
在动态网页发展前期,编写一个Web应用程序的方法和今天有很大不同。
开发人员不仅负责编写应用程序中独特的业务逻辑代码,还负责编写跨站点的各个公共组件的代码,包括用户认证、输入验证、数据库访问和模板等内容。
当今已经有数十个应用程序开发框架可供程序员选择,并且可以轻松获取数千个组件和库。程序员通常面临的一个问题是 :在学习一款框架的时候,一些新的框架(而且据说是更好的框架)已经出现,并且在未来可能会取代正学习的这款框架。
“因为山在那里”,也许是攀登一座山峰的理由,但是选择使用一个特定的框架可以有更好的理由。值得思考的是 :为什么使用框架?更准确地说,为什么使用Laravel这个框架?
从PHP开发人员可以使用的一些组件及软件包(也简称为包)来看,其实很容易得知为什么使用这些组件以及包会有很多好处。使用包,可以让其他人负责开发和维护一个独立的、具有特定功能的代码块,从理论上说,开发人员可以有更多的时间对这些单个的组件进行深入的了解与研究。
像Laravel、Symfony、Lumen 和 Slim 等框架会将第三方组件和自定义框架预先安装好,如配置文件、服务提供者、规定的目录结构,以及应用程序引导等。
所以,一般来说,使用框架的好处是,不仅为开发人员选择了好的单独组件,而且能帮助开发人员决定如何组合这些组件。
▊ “自己动手做”
让我们来分析一下没有框架时的不便之处。假如你要创建一个 Web 应用,会从哪里开始呢?
也许会从 HTTP 请求开始,所以现在需要评估所有可用的 HTTP 请求库和 HTTP 响应库并在其中选择一个。接下来需要建立路由,可能需要设置好某种形式的路由配置文件。
应该使用什么语法?怎么做好控制器?应该把它们放在哪里,以及如何加载它们?可能需要一个依赖注入容器来解决控制器及其依赖问题,但是具体选择哪一个呢?
此外,如果花时间解决了以上所有问题并成功创建了应用程序,会对下一个开发人员产生什么影响?并且,当有多个这样基于自定义框架的应用程序时,你还必须记住每个应用程序中控制器的位置,以及路由的语法等。
▊ 一致性和灵活性
“我们应该在这里使用哪个组件?”框架解决了这个问题。
它提供了一个经深思熟虑后得到的答案,并确保你所选择的特定组件能够很好地协同工作。
此外,框架提供了一些约定,可以减少开发人员在创建新项目时必须理解的代码量。例如,如果你了解一个 Laravel项目中的路由是如何工作的,那么也就了解了路由在所有 Laravel 项目中的工作原理。
当有人为每一个新项目制定自己的框架时,他们真正在意的是在不改变应用程序基础部分内容的前提下,还可以去控制什么。这意味着好的框架不仅可以提供稳定的基础部分内容,而且还可以对核心部分的内容进行个性化定制。正如本书其余部分所展示的一样,这也是 Laravel 框架如此特别的原因之一。
PART.
02
是什么让 Laravel 与众不同的呢?为什么任何时候都要有一个以上的 PHP 框架?它们都使用 Symfony 的组件,对吧?让我们来谈谈是什么让 Laravel 变得特别的。
▊ Laravel的哲学
只需要阅读 Laravel 的营销材料和自述文件(README),就能看到它的价值。
Taylor 使用了一些与光相关的词汇,如照明(Illuminate)、火花(Spark),然后还有词汇 :工匠(Artisan)、优雅(Elegant)。除此之外,还有一些短语 :呼吸新鲜空气(Breath of fresh air)、新的开始(Fresh start)。最后还有词语 :快速(Rapid)、异乎寻常的速度(Warp speed)。
这个框架传递出两个强烈的价值感 :提高开发人员的开发速度和开发人员的幸福感。
Taylor将“工匠(Artisan)”语言描述为一种更具有实用价值的语言。
在2011年提出的StackExchange 问题上,就可以看到这种想法的起源,Taylor说:“有时候我花了大量的时间,只是为了让代码看起来更漂亮,这是比较令人苦恼的事情。而且这只是为了更好地阅读代码。”他经常谈到要让开发人员更容易、更快地实现他们的想法,消除不必要的、创建优秀产品的障碍。
Laravel的核心是为开发人员提供装备和支持。它的目标是提供清晰、简单、漂亮的代码和特性,帮助开发人员快速学习和开发,并编写出简单、清晰和持久的代码。
针对开发者的概念,在 Laravel 材料中写得很清楚,该文档中明确写道 :快乐的开发者创造最好的代码。同时,“让开发人员从下载到部署都感到快乐”亦是一段非正式的口号。
当然,任何工具或框架都会说它想让开发人员感到快乐。但是,把开发人员的快乐作为首要关注对象而不是次要的问题,这一点对 Laravel的风格和决策过程产生了巨大的影响。
在其他框架中,可能会把保持架构的纯净程度作为首要目标,抑或需要符合企业开发团队的目标和价值观,而 Laravel 的主要目标则是为开发人员服务。这并不意味着你不能用 Laravel 编写出具有良好架构的应用程序或企业级应用程序,而意味着使用 Laravel 编写应用程序可以不牺牲代码库的可读性与可理解性。
▊ Laravel如何让开发者感到快乐
只是说想让开发人员感到快乐是一回事,真正做到则是另一回事,这需要你猜测框架中什么地方最有可能让开发人员感到不开心,什么地方又最有可能让他们感到开心。
Laravel 试图通过几种方法让开发人员的生活变得更加轻松。
首先,Laravel 是一个快速的应用程序开发框架。这意味着它关注简单的学习过程,并尽量减少一个新的应用程序从启动到发布的步骤。所有在构建 Web 应用程序时最常见的任务,从数据库交互到身份验证、从队列到电子邮件再到缓存,都通过 Laravel 提供的组件简化了。但是,Laravel 组件的功能并不仅仅局限于此,它们在整个框架中提供了统一的 API 和稳定的结构。这意味着,在 Laravel 中做新的尝试时,开发人员很可能做出肯定的评价:“就是这么好用!”
Laravel 的好处也不仅于此,其还提供了一个完整的、用于构建和发布应用程序的工具生态系统。可以使用 Laravel 的 Homestead 以及 Valet 工具进行本地开发,使用 Forge 工具进行服务器管理,以及使用 Envoyer 工具进行高级部署。此外,还有一套附加组件:Cashier(用于支付和订购)、Echo(用于 WebSocket 编程)、Scout(用于实现搜索功能)、Passport(用于 API 认证)、Dusk(用于前端测试)、Socialite(用于社交登录)、Horizon(用于监控队列)、 Nova(用于构建管理员面板)及 Spark(用于 SaaS 引导)等。Laravel 正试图从开发人员的工作中提取出重复性的工作,这样开发人员就可以做一些独特的事情了。
接下来要说的是,Laravel 关注的是“约定优于配置”,这意味着,如果你愿意使用Laravel 的默认设置,那么相比于其他框架,可以减少很多工作。在其他框架中,即使使用了推荐的配置,也需要对所有的设置进行声明。因此,使用 Laravel 构建的项目比其他大多数 PHP 框架花费的时间少。
Laravel 还专注于简约性。如果需要,可以使用依赖注入(injection)、模拟(mocking)、数据映射模式(Data Mapper pattern)、仓库(repositories)模式、命令查询责任分离(Command Query Responsibility Segregation),以及其他更复杂的架构模式。
虽然其他框架可能会建议在每个项目中使用这些工具和结构,但是 Laravel 及其文档和社区更倾向于从最简单的开始,比如从一个全局函数、外观(facade)、ActiveRecord 开始。这使得开发人员可以创建最简单的应用程序来解决他们的需求,并且不限制其在复杂环境中的使用。
有趣的是,Laravel 的创造者以及它的社区与 Ruby、Rails 和函数式编程语言有较多的联系,而与 Java 的联系较少。在现代 PHP 中,有一个强大的趋势,那就是框架倾向于变得更加复杂,它囊括了更多的 Java 风格的 PHP 代码。但 Laravel 则不同,它会追求更富有表现力的、动态的、简单的编码实践和语言特性。
▊ Laravel 社区
如果你是第一次接触 Laravel 社区,那么会有一些事情令你期待。Laravel 有一个显著的特点,它的成长和成功与它受欢迎的教学社区是密不可分的。
Laravel 拥有一个丰富而充满活力的社区,这里汇聚了从第一天开始就一直在这里的人和那些第一次到来的人。一个成功的开源项目需要良好的文档和受欢迎的社区,它们现在都是Laravel 的标志。
PART.
03
到目前为止,我在这里所分享的一切都是抽象的。你可能会问,Laravel 的代码是怎样的呢?让我们深入了解一个简单的应用程序(见示例1),这样你就可以看到在日常工作中,Laravel 实际上是什么样的了。
示例1:在routes/web.php中实现“Hello, World”
在 Laravel 应用程序中,最简单的操作可能就是定义一个路径,并在访问该路径的任何时间返回结果。如果在计算机上初始化一个全新的 Laravel 应用程序,在示例 1-1 中定义好路由,然后从公共目录中使用该站点,那么你将拥有一个功能齐全的“Hello, World”示例程序(参见图 1)。
图1 通过Laravel返回“Hello, World!”
PART.
04
那么,为什么使用Laravel?
因为 Laravel 可以帮助你将想法变成现实,并且不会浪费代码(即以极精简的代码实现强大的功能),使用现代编码标准,并拥有一个充满活力的社区,还拥有一个强大的工具生态系统。
更因为你,亲爱的开发者,使用 Laravel 会让你感到快乐!
▼
本文节选自博文视点新书《Laravel入门与实战》(第2版),本书第1版收获了许多读者的好评,第2版迎来Laravel版本升级,覆盖更多前沿内容!
第2版完全涵盖Laravel 5.8版本的内容。对Laravel框架进行了系统的介绍,包括Laravel的背景,Laravel开发环境的搭建,路由与控制器,Blade模板,数据库和Eloquent,前端组件,收集和处理用户数据,Artisan和Tinker,用户认证和授权,请求、响应和中间件,容器,测试等知识。
通过阅读这本书,读者可以比较全面地学习并掌握Laravel开发的相关理论知识。另外,书中涵盖大量实例,有利于读者在学习理论知识的过程中同步进行实践。
▊《Laravel入门与实战(第2版):构建主流PHP应用开发框架》
[美] Matt,Stauffer(马特 斯托弗) 著
韦玮 译
- 宇宙至强语言PHP的“全栈”框架Lavaral迎来升级版
- 前沿、主流、高效、全面!包含新版本的全面知识点
这是一本实用的Laravel 技术指南,第2 版完全涵盖Laravel 5.8 版本的内容。本书对Laravel 框架进行了系统的介绍,包括Laravel 的背景,Laravel开发环境的搭建,路由与控制器,Blade 模板,数据库和Eloquent,前端组件,收集和处理用户数据,Artisan 和Tinker,用户认证和授权,请求、响应和中间件,容器,测试等知识。通过阅读本书,读者可以比较全面地学习并掌握Laravel 开发的相关理论知识。另外,书中涵盖大量实例,有利于读者在学习理论知识的过程中同步进行实践。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。