HSCMS - Article前端FRP框架深度踩坑

前端FRP框架深度踩坑

## 传统的UI结构
之前的UI领域都是`MV*`结构,做的最好的是以微软`WPF`为代表的`MVVM`框架.关于数据和View元素的映射其首次提出了双向数据绑定这个概念.可以说是第一次实现了View与逻辑和数据的完全分离. 
## 什么是FRP
简单的说FRP是基于离散的事件和连续的行为的.管理着随着时间变化的值的结构.
事件只在特定时间点有值可以类比成一个`Event t a`的数据,而行为是一个值随着时间变化的函数可以把它想象成一个 `Behavior (t -> a)`的函数.
要想操作行为必须使用事件,可以利用事件对行为的值进行替换.
这个概念是起源于纯函数语言`Haskell`的.<del>因为Haskell和变量有仇</del>,他的提出是为了解决纯函数语言如何制作UI游戏等这些遍地都是状态的应用的.

## 我试用和了解了哪些FRP框架
<br />
<table class="table table-bordered">
  <tr><th>名字</th><th>语言</th></tr>
  <tr><td>elm</td><td>elm</td></tr>
  <tr><td>purescript-halogen</td><td>purescript</td></tr>
  <tr><td>miso</td><td>Haskell</td></tr>
  <tr><td>reflex</td><td>Haskell</td></tr>
  <tr><td>Reagent + re-frame</td><td>Clojure</td></tr>
</table>

### 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
<del>号称自己是</del>最纯粹的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版本,但是他的组件机制完全是个画蛇添足的东西,难用至极.

最热文章

链接

github
gitee