Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?

ClojureScript, 前端开发, Respo


关于我

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

关于我

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

关于 Respo

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

提纲

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

ClojureScript


如果不熟悉 Clojure...

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

ClojureScript 的区别

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

ClojureScript 优势劣势

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

Self-hosted ClojureScript

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

其他 FP->js 语言

  • 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...

React

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

React 带来的改变

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

改变: JSX, CSS in js


JSX

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

CSS in js

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

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

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


改变: 状态管理


Stateless Component

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

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

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


Flux

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

单向数据流!!!

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


Redux

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

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


改变: 性能优化策略


Persistent Data Structure

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

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

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

缓存. 引用透明!!!


改变: 同构渲染


跨平台渲染

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

纯函数, 最小化依赖.


改变: 热替换, Time traveling debugger


热替换

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

Time traveling debugger

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

Respo


来由

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

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

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

JavaScript is a chaos.


Demo

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

结尾


没有能讨论概念

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

引用: Elm


引用: React ClojureScript bindings


Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment