我最终是如何用 Elm 构建应用程序的

2025-06-04

我最终是如何用 Elm 构建应用程序的

两年前,我所在的一家公司要求我学习 Elm——一种函数式前端编程语言。我发现它的语法很奇怪,函数式编程范式也很难理解。我们最终转向了其他前端框架,几乎把 Elm 忘得一干二净。

我最近教了一堂关于 Redux 的课,学生们问了我一些关于 Elm 的问题。这促使我思考 Elm,看看在我编程生涯又过了两年之后,我是否能把所有问题都弄清楚,并最终找到答案。

学习过程

我决定从文档开始。Elm 以其文档而闻名,许多门槛较高的技术也必须提供文档,以便人们使用他们的工具。我从他们网站上的教程开始,很快就掌握了该语言的一些标准部分。它有一些有趣的语法选择——比如用于更改记录属性的管道。我还发现,他们的标准集合是一个链表,而不是数组,这很有意思。对于一门前端语言来说,这多少有些道理;然而,这也让我的最终项目变得更加棘手!

Elm 你好世界

module Hello exposing (..)

import Html exposing (text)


main = 
    text "Hello"
Enter fullscreen mode Exit fullscreen mode

从那里我进入了教程的“Elm 架构”部分。感觉这部分内容从 0 到 100 的跳跃非常快。我确实有点迷失了方向。不过总的来说,模型、更新、视图、订阅的设计模式还是很合理的。我喜欢这种能够知道所有东西在哪里的感觉。

在整个学习过程中,我不断回顾elm-architecture-tutorial中的示例代码。

其他非常棒的功能包括错误消息和时间旅行。Elm 的编译过程确保不会出现任何运行时错误。这意味着在代码运行之前,你就能获得清晰明了的错误消息。我还非常喜欢“时间旅行”功能,它能让你在不同时间点查看应用程序的状态。这些开发体验非常棒,我也能理解为什么其他工具(例如 Redux)会借鉴这些理念。

在看完教程的“Elm 架构”部分后,我能够一步一步地自己理解代码,但从头开始编写自己的 Elm 代码仍然很困难。最终,我参考了 Github 上找到的其他一些项目,比如FlatrisElm Hanoi

在那里,我找到了Tensor 编程的 Elm 教程,它帮了我大忙。我非常喜欢这种跟着学习的模式,所以这个教程真的帮了我大忙。

最终项目

我原本想用 Elm 开发《汉诺塔》,因为它是一款相当容易编写的 JavaScript 游戏;然而,我发现 Elm 对我来说还是有点力不从心。于是我缩减规模,写了一个益智问答应用,但这仍然相当棘手。

我最终使用了create-elm-app,它与 create-react-app 非常相似。它对开发和部署都非常有帮助。但我的代码中还有一些问题需要解决。首先是链表与数组的问题。我最终使用了链表并对其进行迭代来检索不同的问题。在其他语言中,我会保留一个索引值,并用它来从一个问题移动到另一个问题。Elm 中的程序架构略有不同。

我还发现使用“maybe”很困难。Maybe 是 Elm 中的一种数据类型,类似于字符串、整数或列表,可以是“Nothing”(类似于其他语言中的 null 或 None),也可以有值。为了使用该值(如果存在),你必须将其从 Maybe 中取出。从严格类型和函数式的角度来看,这很合理,但它会使代码显得有些笨重。

示例 Maybe 处理

currentQuestion : Maybe Question -> Question
currentQuestion question = 
    case question of
        Just question ->
            question
        Nothing ->
            { question = ""
            , answers = []
            , correctAnswer = ""
            }
Enter fullscreen mode Exit fullscreen mode

最终,我终于想出了一个 MVP 的趣味问答应用,它会提问,让用户点击带有不同答案的按钮,然后记录答对了多少个问题。部署这个应用非常简单——我只需要运行elm-make并将 build 子目录推送到远程仓库的 gh-pages 分支即可。代码在这里,应用部署在这里

接下来会发生什么

事实证明,Elm 在过去几年里并没有变得更容易——Elm 仍然是一种完全不同的思维方式。即使我制作了一个 MVP,但实现它比用我更熟悉的语言构建它要难 100 倍。设计模式仍然很复杂,数据处理似乎比它应该的要棘手得多。我仍然不会选择使用 Elm,尽管我确实看到了它的一些好处——比如静态类型和强大的错误捕获。如果我要在前端使用函数式编程,我更愿意使用 React 和 Redux,因为它们仍然基于 JavaScript。总的来说,我认为 Elm 是个好主意,但一些语法和实现仍然有点棘手。

我的“学习新事物”系列的一部分

文章来源:https://dev.to/aspittel/how-i-finally-built-an-app-in-elm-a80
PREV
尽管如此,阿里还是编码了,我在网上写了代码。2020 版本 2019 版本
NEXT
使用 Tracking.js 在 JavaScript 中进行面部检测