Seija
首页
Travellings
登录
注册
首页
文章
前端FRP框架深度踩坑
## 传统的UI结构 之前的UI领域都是`MV*`结构,做的最好的是以微软`WPF`为代表的`MVVM`框架.关于数据和View元素的映射其首次提出了双向数据绑定这个概念.可以说是第一次实现了View与逻辑和数据的完全分离. ## 什么是FRP 简单的说FRP是基于离散的事件和连续的行为的.管理着随着时间变化的值的结构. 事件只在特定时间点有值可以类比成一个`Event t a`的数据,而行为是一个值随着时间变化的函数可以把它想象成一个 `Behavior (t -> a)`的函数. 要想操作行为必须使用事件,可以利用事件对行为的值进行替换. 这个概念是起源于纯函数语言`Haskell`的.
因为Haskell和变量有仇
,他的提出是为了解决纯函数语言如何制作UI游戏等这些遍地都是状态的应用的. ## 我试用和了解了哪些FRP框架
名字
语言
elm
elm
purescript-halogen
purescript
miso
Haskell
reflex
Haskell
Reagent + re-frame
Clojure
### elm 这是一个很经典的结构,很多框架都是参考的它. ``` main = Browser.sandbox { init = init, update = update, view = view } ``` 它由这些东西组成: 1.一个全局的Model : type Model = {...} 2.一组事件 : type Msg = None | ... 3.一个update函数 : update : Msg -> Model -> Model 4.一个view函数 : view : Model -> Html Msg 5.一个init函数提供Model的初始值 : init:Model view函数接收Model返回创建好的Html和一个事件,当Html发送的事件不为空时,会触发update函数 update函数根据事件和当前的Model返回新的Model.新的Model又通过View显示达成页面的刷新. 所以这是一个循环 init -> view -> update -> view -> update... 但是elm问题就是elm这个语言本事,它是Haskell阉割版本,缺失很多重要的功能. ### reflex
号称自己是
最纯粹的FRP框架.并且也的确向他描述的一样它只提供了最底层的FRP功能. `Event t a`,`Behavior t a`和这两个的组合版本`Dynamic t a`. 举个例子: ``` mainWidget = do eb <- button $ text "OK" dText <- holdDyn "def" (eb $> "Click Button!") dynText dText ``` 可以看到button函数创建按钮的同时会返回一个`Event t String`,然后我们用这个`Event t String`创建了一个`Dynamic t String`他的默认值是"def",当`eb`事件触发的时候`dText`里的值就会被"Click Button!"替换掉,同时`dynText`这个函数会实时显示`Dynamic`里的值. reflex提供了最底层的FRP功能,但是他的问题是根本没有提供通用的结构,我发现最后还是会写成elm那个样子.一个函数收一个`Dynamic`回一个Event.其实就是对应elm里的view函数. ### Reagent + re-frame Reagent是react的简单包装,主要的思想在re-frame上.re-frame是少有的几个和elm不那么像的框架. 先看一个例子(并不一定能编译,只是举个例子): ```Clojure ;查询函数 (re-frame.core/reg-sub :get-text (fn [db v] db ) ) ;事件响应函数 (re-frame.core/reg-event-db :change-text (fn [db [_ v] v ) ) (defn demo [] [:div [:div @(subscribe [:get-text])] [:button {:on-click #(dispatch [:change-text "Click Button"])} "确定"] ] ) ``` 默认的全局值是`nil`,这个div显示的是查询函数返回的全局值,当这个Button点击的时候会触发`:change-text `事件,事件响应函数返回的值就是新的全局值.当事件响应函数触发结束后.demo就会重新渲染,这个时候查询函数查询到的就是新的值"Click Button"了. 这个结构实现了比较纯净的view函数,并且把其他逻辑都通过事件隔离了出去. 不好的地方就是它是`Clojure`的Clojure这种弱类型的语言写起来真的费劲. ### miso elm结构的Haskell版本 ### purescript-halogen elm结构的purescript版本,但是他的组件机制完全是个画蛇添足的东西,难用至极.
登录
登录
注册
最热文章
引擎中Template DSL的设计思考总结
10-19
ReaderT 设计模式
04-23
非主流引擎开发不出来 (n+1) : purescript侧结构设计
04-04
FRP系统的设计
03-17
非主流引擎开发不出来 (1) : 轻骨架
02-11
非主流引擎开发不出来 (0) : 引擎定位
12-09
Rust的ECS库specs
11-20
Haskell类型类高级扩展详细说明
05-31
CMake 速览
05-29
尼采导读:超人与永恒轮回
02-24
为什么elm的结构并不是最合理的?
02-20
React速览
02-20
尼采命运之爱
02-18
AspNetCore 速览
02-17
由Haskell和面向对象引出的关于抽象的思考
12-26
二进制文件压缩工具upx
12-24
Reflex介绍
12-17
Web的前端渲染和WebApi
12-16
前端FRP框架深度踩坑
12-16
Yesod - RESTful (11)
12-16
链接
github
gitee