Fre：又一个小而美的前端MVVM框架

halo，你们好，很久不贱呢！

最近由于看了一些 be 的小说，整我的都比较致郁::>_<::

就在昨天，我用了一天的时间写了 fre，又一个小而美的前端MVMM框架

可能你以为，有了 vue 和 react，不必再写一个了::>_<::我以为我仍是想一想办法寻找一下它的存在感吧

先看 API：

import { useState, html, mount } from 'fre'

function counter() {
  const state = useState({
    count: 0
  })

  return html`
    <div>
      <p>${state.count}</p>
      <button onclick=${() => {state.count++}}>+</button>
      <button onclick=${() => {state.count--}}>-</button>
    </div> 
  `
}

mount(html`<${counter}/>`, document.body)

hooks style 的组件化方案

最早看到的应该是 hooks。

虽然和 react 的 hooks 并不同，fre 的 hooks 是经过 Proxy 劫持实现的，react 是经过两个数组对应实现的。

没错，fre 就是由于有了 hooks 才写的，hooks 使得 function 具备了状态，实际上是另外一种组件化方案。

市面上常见的组件化方案：

react 的方案，class + extend + hoc + render props，依靠 JSX
vue 的方案，模板引擎，依靠 vue-loader
angular 的方案，（我也不知道是啥，没研究，可是应该能够将 web-components 归类到这里）
以上，能够说，各大框架实现组件化的方式各不相同，react 和 vue 都须要 babel，而 web-components 虽然浏览器原生支持，可是它自带的局限也不少（如 scoped css，直接剥夺了 css 复用的能力）

因此 fre 吸收长处，使用了新的方案：

fre 的方案，function + tagged template +JSX（可选）

没错，虽然换了个英文名，可是它就是 ES6 原生支持的 模板字符串 (⊙o⊙)…

tagged template 的模板方案

我一直在寻找可以运行于浏览器的某种写法，web-components 已经否了，tagged template 是最好的选择

没想到，tagged template 不只仅可以接近 JSX 的开发体验，还有不少惊喜：

html 标准，如<div class=container>这种简写，总之各类的 html5 的写法都是能够的
隔离 js，经过两个反引号，就不再用担忧 calss 和 className
固然，它最重要的仍是，无需编译

浏览器直接运行会有什么好处呢？

它可让后端语言和jq同样来使用 fre，却具有了组件化、响应式数据驱动dom
我曾经说过，你们都在写前端框架，各类的 react-like、vue-like，迷你化、先进化……

可是没法解决痛点。

前端框架的痛点其实不少，好比SSR

SSR 不少限制，并非 webpack 配置多麻烦，而是它的限制丧失了不少可能。

首当其冲就是使得除 node 之外的语言仅凭自身的能力没法同构。

因此我写 fre，从某个角度上，也是为了其余后端语言。

Proxy 和 vdom diff 的数据更新方案

这个议题也被讨论好久啦，也就是数据更新的方案，一般也有不少种

angular ，脏检查（没研究，不晓获得底是 ng1 仍是 ng2）
vue ，对象劫持+vdom diff，vue2 Object.defineproperty
react，vdom diff
san，set（xxx，xxx）
我我的，由于就比较专一 vue 和 react，因此也比较推荐对象劫持+vdom diff 的

因此 fre 也是如此，经过 Proxy 实现的劫持，劫持会触发 rerender，进行 vdom diff

这块内容，只能说我的喜欢，各类方案均可以，看做者我的吧

这里顺便一提 diff

其实 diff 算法实现蛮多的，大体有两种：

react 主导的，两套 vdom 进行比对，生成 patches，打到真实 dom 上
preact 主导的，一套 vdom 直接和 真实dom 比对，直接操做 真实 dom
fre 选择的是前者，由于 有了 proxy，其实 vdom 无关紧要，充其量只是一层抽象而已，那既然抽象它，就应该和 react 同样抽的完全点，以后对 diff 的优化，就只是两个对象的事儿了

呼~望天，写了这么多::>_<::

最后放上 github 地址，欢迎试用 与 star！

https://github.com/132yse/fre