Mayu 框架使用教程

Mayu 框架使用教程

framework Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby 项目地址: https://gitcode.com/gh_mirrors/framework40/framework

1. 项目介绍

Mayu 是一个基于 Ruby 的服务器端组件化虚拟 DOM 渲染框架。它支持实时更新，所有渲染都在服务器端完成，客户端只需处理与服务器的连接和 DOM 更新。Mayu 的设计目标是简化开发流程，同时保持高效和灵活性。

核心特性

• 100% Ruby: 完全使用 Ruby 编写。
• 100% 服务器端: 所有渲染都在服务器端完成。
• 100% 异步: 使用 socketry/async 实现非阻塞操作。
• 组件化: 基于组件的开发模式，类似于 ReactJS。
• 热重载: 开发环境中支持热重载。
• 自动资源处理: 自动处理静态资源。
• 基于文件系统的路由: 受 Next.js 启发。
• 边缘部署设计: 适用于边缘计算环境。
• 强大的模板引擎: 使用 Haml 进行模板渲染。

2. 项目快速启动

安装依赖

确保你已经安装了 Ruby 和 Node.js。项目所需的版本在项目根目录的 .tool-versions 文件中指定。此外，还需要安装 ImageMagick 和 libwebp 用于图像处理。

# 安装 Ruby 依赖
bundle install

# 安装 Node.js 依赖
npm install

# 构建浏览器运行时
npm run build

启动示例应用

cd example
bundle install
bin/mayu dev

启动后，打开浏览器访问 https://localhost:9292/。

HTTPS 配置

由于 HTTP/2 需要 HTTPS，Mayu 在开发模式下会使用 localhost gem 生成自签名证书。根据你的系统和浏览器，可能需要进行以下配置：

• MacOS: 将证书添加到钥匙串，并设置为“始终信任”。
• Chrome: 启用 chrome://flags/#allow-insecure-localhost 设置。
• Firefox: 添加证书异常。

3. 应用案例和最佳实践

示例应用

Mayu 提供了一个示例应用，展示了如何使用框架构建实时更新的 Web 应用。示例应用部署在 https://mayu.live/，可以作为参考。

最佳实践

• 组件化开发: 将应用拆分为多个组件，每个组件负责特定的功能。
• 状态管理: 使用 Mayu 提供的基本状态管理功能，类似于 Redux Toolkit。
• 异步加载: 通过异步加载内容，提升用户体验。
• 优化数据传输: 使用 Streams API 优化数据传输，减少延迟。

4. 典型生态项目

相关项目

• Mayu Starter Kit: 提供了一个快速启动的项目模板，地址为 https://github.com/mayu-live/starter。
• Haml: Mayu 使用的模板引擎，地址为 https://haml.info/。
• socketry/async: 用于实现异步操作的 Ruby 库，地址为 https://github.com/socketry/async。

通过这些项目，开发者可以更好地理解和使用 Mayu 框架，构建高效、灵活的 Web 应用。

framework Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby 项目地址: https://gitcode.com/gh_mirrors/framework40/framework