PureScript Deku 项目教程

最新推荐文章于 2025-01-08 12:36:57 发布

颜殉瑶Nydia

最新推荐文章于 2025-01-08 12:36:57 发布

阅读量709

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00046/article/details/139877185

PureScript Deku 项目教程

purescript-deku A PureScript web UI framework 项目地址: https://gitcode.com/gh_mirrors/pu/purescript-deku

1. 项目介绍

PureScript Deku 是一个用于构建快速 Web 应用的 PureScript 框架。它旨在提供高性能、简洁的代码和友好的服务器端渲染（SSR）支持。Deku 的核心理念是通过简单的 API 和模块化的设计，帮助开发者快速构建高效的 Web 应用。

Deku 的名称来源于“DOMs Emitted as Kan-extended Universals”，同时也与《塞尔达传说》系列中的“德库树”有关，象征着简单和力量。

2. 项目快速启动

环境准备

在开始之前，请确保你已经安装了以下工具：

创建新项目

使用 Spago 初始化一个新的 PureScript 项目：
```
spago init
```

添加 Deku 依赖到 spago.dhall 文件中：

{ dependencies =
    [ "console"
    , "effect"
    , "prelude"
    , "deku"
    ]
, sources = [ "src/**/*.purs", "test/**/*.purs" ]
}

安装依赖：
```
spago install
```

编写第一个 Deku 应用

在 src/Main.purs 文件中编写以下代码：

module Main where

import Prelude
import Effect (Effect)
import Deku.Toplevel (runInBody)
import Deku.Core (Nut)
import Deku.Do (Deku, do)
import Deku.Hooks (useState)
import Deku.DOM as D
import Deku.Listeners (click)
import Deku.Attributes (klass_)
import Deku.Control (text)

main :: Effect Unit
main = runInBody myNut
  where
    myNut :: Nut
    myNut = Deku do
      setCounter /\ counter <- useState 0
      D.div
        [ click $ counter <#> add 1 >>> setCounter
        , klass_ "color: crimson"
        ]
        [ text (show <$> counter) ]

运行应用

使用以下命令编译并运行你的应用：

spago build
spago run

3. 应用案例和最佳实践

案例1：简单的计数器应用

上述快速启动部分已经展示了如何创建一个简单的计数器应用。通过 Deku 的 useState 钩子，我们可以轻松管理应用的状态，并通过 click 监听器响应用户的点击事件。

案例2：动态内容渲染

Deku 支持动态内容的渲染，通过 useMemoized 钩子可以缓存计算结果，避免不必要的重新计算。

import Deku.Hooks (useMemoized)

myNut :: Nut
myNut = Deku do
  setCounter /\ counter <- useState 0
  memoizedValue <- useMemoized (\c -> "Counter value: " <> show c) counter
  D.div
    [ click $ counter <#> add 1 >>> setCounter
    , klass_ "color: crimson"
    ]
    [ text memoizedValue ]

最佳实践

模块化设计：Deku 的模块化设计使得代码更易于维护和扩展。建议将复杂的 UI 组件拆分为多个小模块。
性能优化：使用 useMemoized 和 useDyn 钩子来优化性能，避免不必要的计算和渲染。
SSR 支持：Deku 内置了对服务器端渲染的支持，可以轻松实现 SEO 友好的应用。

4. 典型生态项目

PureScript CSS

PureScript CSS 是一个用于生成 CSS 的库，与 Deku 结合使用可以轻松管理应用的样式。

import CSS (CSS, color, rgb, fontWeight)
import Deku.CSS (render)

myNut :: Nut
myNut = Deku do
  setCounter /\ counter <- useState 0
  D.div
    [ click $ counter <#> add 1 >>> setCounter
    , klass_ "color: crimson"
    , style_ $ render do
        color (rgb 42 142 242)
        fontWeight bold
    ]
    [ text (show <$> counter) ]