• 题叶, ChenYong
• 前端
• 2013 CoffeeScript, Backbone
• 2014~ React
• 2016~ ClojureScript

• React 中文社区
• Clojure 微信群, 等..
• FP 闲聊群, FP China Discord 群

• 我写的...
• Virtual DOM library
• 基于 ClojureScript
• 模仿 React

• ClojureScript 近况
• React 简介
• 前端跟随 FP 的改变
• Respo 的 Demo

• Lisp 方言, modern Lisp, 2007
• JVM bytecode
• 方括号, 花括号
• 多线程编程, Atom
• Persistent Data Structure
• 异步编程 core.async

• 编译到 JavaScript
• 依赖 Google Closure Compiler 控制体积, 坑
• 语义和 js 不同, 代码可读性差

• Lisp + Static Checking -> Good
• Persistent Data Structure -> Good
• Closure Compiler 依赖 -> Bad
• 难以和 npm 生态配合 -> Bad

• 把编译器编译到 js, 秒开!!!
• REPL: Planck -> JavaScriptCore
• REPL: Lumo -> V8, npm
• Lumo: 无 JVM 编译 ClojureScript

• Elm
• BuckleScript/ReasonML
• PureScript
• ElixirScript
• GHCjs, Scalajs...?

ClojureScript 比较成熟. 期待 ReasonML.

• jQuery, Backbone, Angular, React, Vue...
• CSS, LESS, SASS, CSS in js...
• Makefile, Grunt, Gulp, Webpack...
• JavaScript, CoffeeScript, Babel, TypeScript...

• Jordan Walke, 2013
• JSX / XHP
• Virtual DOM
• 函数式编程(混合了 OOP)
• React render to everything

• Deku, Preact, react-lite...
• Pure function, pure rendering
• One-way data flow
• Immutable Data Structure
• ClojureScript Bindings
• Elm, PureScript 都实现了 Virtual DOM

• 声明式界面, 组件化
• 替代模板引擎, 表述逻辑
• 一切皆是表达式, if, switch, for

以往复用样式通过 CSS 选择器, 基于优先级, 复杂应用当中较难维护.

现在可以借助 (merge base-styles extend-styles) 函数进行抽象, 生成 inline styles. 不能覆盖伪类.

更加激进的方案, 通过编译器直接将 inline styles 编译成基于 CSS 选择器的 HTML 代码.

需要复用的组件尽量将状态存储在组件外部.

组件不包含状态, 可预测性更好, 更加可靠.

对立面: 面向对象, 拷贝的状态, 通过事件同步.

遵循 MVC, 将共享的数据和状态从组件抽离出来.

单向数据流!!!

分离成 Action 和 Dispatcher 的概念. (解耦?)

• Single store
• Time travelling debugger
• Middlewares(不确定是好是坏...)

整个模型和 Elm 相似, 我认为 Elm 提供的方案更为清晰一致.

渲染 virtual DOM tree 的巨大开销. 引入 shouldComponentUpdate 方法用于优化.

对比 data tree 的开销. 引入 Immutable data 类型用于优化.

Clojure Persistent Data Strucure: 结构复用, 通过引用预判是否一致.

缓存. 引用透明!!!

• React.js
• Server Side Rendering
• React Native
• React VR
• ReactSketch...

纯函数, 最小化依赖.

• Elm 最早实现
• 数据界面分离, 纯函数
• 配合类型检查
• Webpack
• 提升开发效率

• Elm 最早实现
• 数据界面分离, 纯函数
• initial-store, actions-record 推导出 Store
• Single Source of Truth -> More truth
• 调试复杂功能 Store 变化的细节

React 对 Immutable Data 的使用很蹩脚, 门槛不低, 方案来源于 ClojureScript 而且更纯粹. ReasonML 佐证.

React 对副作用限制不够严格, 基于 ClojureScript 设定更严格的限制.

React 对于 Component Local State 的抽象不足, 打算自行设计更为清晰的方案用于管理状态, 以便更好地服务于热替换.

JavaScript is a chaos.

• 新增组件, 热替换
• Reel: time travelling debugger

• Om: Cursor, Queries
• Elm: ADT, FRP

• Elm’s Time Traveling Debugger http://debug.elm-lang.org/
• Time Travel made Easy http://elm-lang.org/blog/time-travel-made-easy
• The Elm Architecture https://guide.elm-lang.org/architecture/

• Reagent: Minimalistic React for ClojureScript http://reagent-project.github.io/
• Om: ClojureScript interface to Facebook's React https://github.com/omcljs/om
• Rum: Simple, decomplected, isomorphic HTML UI library https://github.com/tonsky/rum