Purescript-Concur-React 项目教程

Purescript-Concur-React 项目教程

purescript-concur-react Concur UI Framework for Purescript 项目地址: https://gitcode.com/gh_mirrors/pu/purescript-concur-react

1. 项目介绍

Purescript-Concur-React 是一个全新的客户端 Web UI 框架，旨在探索一种全新的范式。它不遵循 FRP（如 Reflex 或 Reactive Banana）或 Elm 架构，而是结合了两者的最佳部分。该项目是 Concur UI 框架的 Purescript 实现，使用 React 作为后端。

主要特点

• 全新范式：不遵循传统的 FRP 或 Elm 架构，而是结合了两者的优点。
• 轻量级：整个未压缩的 JS 包，包括 React 和所有库，大小约为 180KB。
• 高性能：通过 Chrome 审计，初始加载时间非常快。

2. 项目快速启动

安装

你可以通过克隆 Purescript Concur Starter 快速启动一个生产环境设置（使用 Spago 和 Parcel）：

git clone https://github.com/purescript-concur/purescript-concur-react.git
cd purescript-concur-react
npm install

构建库源码

npm run build

构建示例

npm run examples

启动本地服务器

npm run examples-start

查看示例

在浏览器中打开 localhost:1234 查看示例。

3. 应用案例和最佳实践

示例应用

• Hello World：展示简单的带有状态的 effectful 小部件。
• 计数器：一个不使用 StateT 的简单计数器小部件。
• 虚拟键盘：展示 FFI 以及在嵌套小部件中处理文档级事件。
• 登录小部件：一个简单的登录小部件。
• TodoMVC：一个全功能的 TodoMVC 实现，带有 LocalStorage 持久化。

最佳实践

• 使用 Signals：Concur 支持 Signals，可以用于实现复杂的 UI 逻辑。
• 性能优化：通过使用较低级别的接口，可以显著提高性能。
• 模块化设计：将复杂的 UI 分解为多个小部件，每个小部件负责特定的功能。

4. 典型生态项目

Purescript-Concur-Core

Purescript-Concur-Core 是 Concur UI 框架的核心组件，不包含 UI 后端。你可以使用 Purescript-Concur-React 来使用 React 后端。

Purescript-Concur-React

Purescript-Concur-React 是 Concur UI 框架的 Purescript 实现，使用 React 作为后端。它提供了丰富的示例和文档，帮助你快速上手。

Purescript-Concur-Starter

Purescript-Concur-Starter 是一个快速启动项目，使用 Spago 和 Parcel 进行开发和构建。它包含了基本的配置和示例，帮助你快速启动一个生产环境。

通过这些模块化的项目，你可以根据自己的需求选择合适的组件，构建高性能的 Web 应用。

purescript-concur-react Concur UI Framework for Purescript 项目地址: https://gitcode.com/gh_mirrors/pu/purescript-concur-react