cljs virtual dom

前端狗

2018/09/03 发布于 技术 分类

reactjs 

文字内容
1. About Me: 题叶( ) jiyinyiyong 前端⼯工程师, 函数式语⾔言爱好者 TypeScript, 单⻚页⾯面, 管理理系统/报表. 2014 年年开始接触 React, ⽤用 CoffeeScript 写 React, 接触到 Webpack, Redux, Immutable 2016 年年主要在 Vue, ⼿手机端, 挖掘 ClojureScript 2017 上海海徐汇, 积梦智能, 创业公司, React 开发, MobX, Immer.
2. Virtual DOM 展开的 ⼀一些有意思的探索
3. Virtual DOM 展开的… (⼀一些 ClojureScript 的探索 (Lisp ⽅方⾔言))
4. React China 2014-10 跟参加 WiredCraft @fraser 的活动, 搭建论坛, 开微信群 2015 公司参与组织过⼀一些 React 相关的活动 2016 论坛托付给 Strikingly 运⾏行行 2017 中⽂文⽂文档上线, 印记中⽂文 2017-11 跟上海海的朋友组织了了 React Meetup 上海海 拆分全国的微信群
5. react-china.org
7. Wishes 希望⼤大家有更更多的交流, 线下活动. 函数式编程能更更多传播开来.
8. Goals 压缩开发成本. Very quick feedback Loop 减少重复劳动. 发挥社区的规模效应…
9. § ClojureScript
10. React patterns if Expression Immutability pure function ...algebra effects?
12. ClojureScript Features Everything is expression Persistent data structure Emphasis on functional programming styles React bindings: Om, Reagent, Rum...
15. 3 year exploring ClojureScript 2015 年年底开始写 Clojure(Script), 2016 开发 Respo 类库(模仿 deku 开发的 Virtual DOM) …增加 Cumulo, calcit-editor 代码 2017 帮助 shadow-cljs 推⼴广, …⽤用来开发各种⼯工具类的⻚页⾯面
16. It's a Lisp ??????
17. calcit-editor (括号编辑器器)
18. Clojure: a totally different world Clojure, Lein, Google Closure Compiler, externs/shim, npm-deps, classpath, JVM, Lisp, Macro, Maven, Clojars, …
19. thheller/shadow-cljs ClojureScript compilation made easy!
20. Real benefits Everything is an expression, Very natural immutable data and built-in functions, Functional programming and macros, Friendly English community.
21. Respo: Virtual DOM Library 模仿 Deku 和 virtual-dom 设计, 基于 ClojureScript, 整个使⽤用不不可变数据. 只实现了了渲染, 没有⽣生命周期, 副作⽤用很少, ⾃自⼰己控制渲染的细节和代码⻛风格, 做试验. http://respo.site
23. Other ideas 在服务端进⾏行行 DOM Diff
26. Drawbacks/Benefits 反应缓慢, 体验不不好. 服务端性能开销⾮非常⼤大. 客户端没有逻辑, 更更加安全. 瘦客户端.
27. § Respo States Tree
28. Local states lost after HMR 可以通过 react-hot-loader 解决 热替换前强⾏行行复制存储状态, 热替换后恢复,
29. Component states in a tree ClojureScript 社区有全局状态的传统. 把状态存储成⼀一棵树, 存放在全局, 这样组件状态在热替换中不不丢弃. 需要在代码当中做⼀一些处理理, 借助 macro 来进⾏行行达成.
37. Drawbacks 状态和组件独⽴立, 不不会随着组件重建⽽而重置, 需要⼿手动维护. 需要额外的代码标记状态树. 引⼊入了了 Macros.
38. Benefits 全局的状态, 跟热替换配合得很好. 状态树可以打印出来, ⽅方便便调试. ⼀一些可以做某些跨组件的状态操作.
39. § Realtime Apps(Cumulo)
40. Cumulo 在服务端渲染客户端需要的数据 在服务端做数据的 Diff, 针对每个连接 客户端接收到 Patch 更更新本地数据
46. Cumulo Workflow Wood.topix.im repo.topix.im/copyboard table-two.topix.im
47. Drawbacks 性能很差, 不不⽅方便便多机器器扩展. 数据在内存⾥里里存放, 体积控制不不好, 也不不⽅方便便持久化.
48. Benefits 开发⽅方便便, 不不⽤用在服务端和客户端有很多重复⼯工作. 能在后端开发完成热替换, 简化⼯工作量量. 类似于单⻚页⾯面的开发⽅方式, 可以快速作出原型.
49. Don’t be too slow 对数据封装, 做类似 shouldComponentUpdate 的缓存优化. 通过不不可变数据减少冗余的计算. 但是这⽤用同时限制了了多机器器的扩展…
50. What I got 基于 ClojureScript 的开发环境, 结合 Respo 和 Cumulo ⽀支持前端热替换, 后端热替换
51. DEMO of Cumulo
52. Other ideas 在 Virtual DOM Diff 的基础上⽣生成补间动画. 在线编辑器器开发⽹网⻚页.
53. any-questions?))))))))