设计与产品rauchg.com
纯粹的 UI
Pure UI
2015 — 2017，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
Guillermo Rauch 在这篇短文中提出“纯 UI”的理念：把 UI 视为应用状态的纯函数 f(state) = view，即给定相同的状态，渲染结果永远相同。这一思想与 React 等声明式框架一脉相承，作者认为它能让 UI 更可预测、更易测试和调试。
为什么经久不衰：它用简洁的函数式视角概括了现代前端框架的核心思想，多年后仍是理解 React、Elm 等声明式 UI 的经典入门读物。
HN 评论精选
以 ClojureScript 生态的实践佐证纯函数式 UI 的实际好处
自从 Om 和 Reagent 出现以来，f(data) = view 的范式就主导了 ClojureScript 生态。用纯函数组合 UI、把所有数据集中在一处，给我们的项目带来了巨大收益：调试 handler 只需看它对数据库的影响；状态可以序列化到 localStorage 再恢复；还能用 REPL 在运行时检查应用状态。
escherize查看英文原文
I've noticed the f(data) = view paradigm dominate the clojurescript landscape ever since om and reagent[1]. There's also a library that literally uses function calls and parameters for every piece of UI called re-frame[2] (which also has a badass readme). Using pure functions to compose a UI along with keeping all the data in one place have been a huge win for our project for a few reasons. 1. All it takes to debug what a handler is doing is what effect it has on the DB. Our handler functions are also mostly pure functions which take the current-db as a parameter. 2. We can serialize the state to local storage (or a string) and reload it from local storage (or a string). 3. Using the repl, we can investigate the state of the application while it's running. [1] http://reagent-project.github.io [2] https://github.com/Day8/re-frame/
Elm 架构正是这一理念的完整实现
这正是 Elm 采用的方法。推荐的架构是让视图成为 Model（应用状态）的纯函数，而且状态变更本身也是纯的：一个纯函数接收事件和旧模型，返回新模型。
ilyagr查看英文原文
This is exactly the approach Elm takes. The recommended way to structure the application is so that the view is a pure function of the Model (application state). Moreover, the change to application state is also pure: there is a pure function that takes an event and an old model, and then returns the new model. http://elm-lang.org/guide/architecture
质疑这一理念是否只是模板引擎的重新包装
除了用 React/FRP 的语言来包装，这和模板引擎有本质区别吗？模板就是从参数到标记/UI 的函数，只是用（通常是自定义的）标记语言而非 JavaScript 编写。如果模板不是参数的纯函数，那多半是你做错了。
chriswarbo查看英文原文
Other than framing it in the language of React/FRP, is this substantially different from template engines? Templates are functions from parameters to markup/UI; they're just written in (usually custom) markup languages instead of Javascript. If a template isn't a pure function of its parameters, then surely you're doing it wrong? PS: I've used several template engines which have an "inheritance" feature, which might refute my point. I never used such features, as they seemed to be shoehorning cargo cult OOP into situations where it's not appropriate. On the other hand, having one template include another for some sub-component acts exactly like one function calling another.
指出纯渲染模型之外，组件生态同样重要
我还在等一个能比肩 Delphi VCL 的组件生态。现在要么是庞大的 UI 框架，要么是难以集成的库。纯渲染模型（即与数据解耦）本身并不够。
mhd查看英文原文
I'm still waiting for a component economy that could keep up with e.g. Delphi's VCL. Right now, it's either big UI frameworks or stuff you've got a hard time integrating (e.g. they download half the internet, require 28 properties to connect/style). Pure rendering model (i.e. independence from data) alone doesn't cut it.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com