关于单页面应用一些随想

摘要：前面不短时间持续投入了时间在做应用架构方面的考量一个是冒险进行了一次应用架构的调整另一个是跟进了的进展当然实际上是同一个事情也许错过的比收获的还多一些不过能走到现在也算幸运了毕竟单页面应用还面临很多不成熟之处国庆长假过去不少现在的想法估计会

前面不短时间持续投入了时间在做 React 应用架构方面的考量
一个是冒险进行了一次应用架构的调整, 另一个是跟进了 Redux 的进展
当然, 实际上是同一个事情. 也许错过的比收获的还多一些
不过能走到现在也算幸运了, 毕竟单页面应用还面临很多不成熟之处
国庆长假过去不少现在的想法估计会淡忘了, 所以好歹留点笔记

我昨晚因为要修 Todolist 特意看了下 Wunderlist 里的拖拽效果
iPad 上搜 Todo 的时候还看见了上家公司 Appest 的应用
当时大概就是被 Backbone 折腾得身心俱疲, 也算挺无助的啦
还有老板 Facebook 的朋友来分享, 可惜跟 React 团队关系不大
想想 Todolist 依然是单页面的标志性的应用, 各种 TodoMVC 层出不穷

大致两年的时间, 社区的变化很不小了, 现在到处都是 React
除了 React Angular 其他的框架很少说, 特别 Backbone 几乎没影了
Vue 的作者分享的也都是 Meteor, 总之很多的概念都已深入人心
不过不变的大概是每年都会冒出大量的框架出来, 都不想去听了
我参与社区的热情也降低了, 也就论坛微博 QQ 群看人扯扯淡而已
时间也都放到公司产品还有自己的技术探索当中, 也没从前那种激情

一方面是工作久了, 接触多了, 自己独特的想法越来越少
无论想到什么, 都能想到说哪个新闻有提过, 而且已经很成型的想法
而且也来越认识到底层原理的重要性, 渐渐苦恼算法跟编译原理没学好
虽然我也不指望学校能教好. 然而随着框架规模扩展, 少不了这些技能
或者仅仅是工作多了, 创意少了, 人变得圆滑, 或者成熟, 之类的

最初学习 Backbone 的时候看到 MVC 和 MVVM 这些词觉得高大上
后面翻多了资料, 发现存在 N 个版本的实现, 概念都开始变混淆了
结果我又不肯花大工夫研究一遍每一种实现, 最终看起来依然挺模糊
只是当初 MVC 常常说的是数据和模板引擎分离, HTML 和 CSS 分离
有了 Virtual DOM 以后整个似乎变了, 是数据和 DOM 分离

原本是 Backbone 和 Handlebars 纠结着的组件复用问题
本来, Web Components 规范已经让人欢欣鼓舞了
谁知道了 Polymer 折腾了好久, 只是围着 Google 自家搞得火热
社区里迟迟没进展, 很快风头被 Facebook 搞出了 JSX 抢光了
Twitter 上 Polymer Summit 好像还蛮热闹, 但我们好像就没动静

不过 React 软肋还蛮明显, 白天还听同事说 Angular 的 Service 怎么完善
反观 React, Flux 基本上被否了, 单项数据流的 Redux 成了热门
然后呢, 开始对付网络问题, 立马分裂了, Relay 跟 Falcor 都不知道怎么跟
虽然单向数据流的原则已经明确, 但是这种流中间各种异步怎么整
而且一下子连数据库的奶酪都要去碰, 甚至牵涉到 N 种语言的开发实现
说实话我真不知道我们的数据层代码怎么写才是对的, 两个方案都不能直接用

我在围观 Clojure 社区稀奇古怪的发明的时候, 总有种张牙舞爪的感觉
晚上看 Om 作者演讲, 就说着 Relay 怎样, Falcor 怎样, Datomic 怎样
然后前面两个方案都否掉, 或者只是觉得不好, 开始大肆介绍 Datomic
然后就是 PHP 社区跟 Node.js 社区接受 Clojure 社区背后调戏的感觉
我也分辨不出来怎么才是对的, 然而总是觉得什么方案可肯定是存在问题的
无论 Relay 介绍自己的时候说自己怎么好, 换个社区就挑出很多刺了

从大体上说, 单页面应用演进的方向还是明确的, 客户端缓存同步数据
这个数据会越来越大, 需要在客户端有数据库管理, 当然客户端已经这么做了
单页面应用能上不着天下不着地吊了好多年, 终于浏览器性能开始跟上
所以一个方向是整个客户端方案在浏览器当中重新用 JavaScript 造一遍
另一个是服务端渲染跟客户端渲染无缝衔接, 一边打开应用一边下载数据和代码
对于二十年前设计的的语言来说, 硬件升级都变天了, 真够呛的

Web 这个奇葩的平台. 像 React 的代码热替换横扫三个平台的事情, 谁都想不到
本来还是编译半天, 连前端开发应用刷个很多秒, 前端建构分钟算的
突然一下子代码热替换又起来了, 还助推了一个很难上手的建构工具
现在说 Webpack 已经能搜到很多教程了, 连移动端开发都沾上了边
我还很短的代码山寨完 Redux 和 redux-router, 自己都惊讶了
这些东西放在两年前完全不会这么想, 也就当苹果设计师膜拜膜拜就完事的

因为开发的需要, 所以一直在追 Chrome 开发者工具新功能
相信每天看几百遍的同学看到里边多个奇怪功能心情跟我类似
每年 Addy Osmani 都放幻灯片和演讲出来介绍, 晚上刚看新的幻灯片
能看出来前端开发对细节的要求已经越来越精细了, 以及性能上关注
我在这方面大概刚起步, 只是开始初步对付过 React 组件优化的坑
做了一轮以后对 Chrome 开发工具的感想又上层了一个台阶, 功能太多

在最初学前端的时候动画是给我提供动力的主要的因素, 因为好看嘛
然而说回到和游戏比起来, 应用当中的动画是小儿科了
我也看 Dribbble 上闷骚的人做的很多吓坏程序员的 motion
或者看看 Mathbox 作者甩一堆的不知道超前几年的动画
还有特别震撼的有人在 VR 当中用 ClojureScript 和 Unity 搞的 live coding
应用里的动画真是小儿科了, 而且偏偏已经很小儿科还那么难写
然后是各种兼容性问题, 或者奇葩的组件化问题, 我都不知道在干些什么

跟动画同样郁闷的还有拖拽这种无比自然的交互方案
当然, 更自然的是 Hololens 或者更早的第六感科技的手势捕捉技术
总之, 在桌面浏览器上一般是没有的事(这个也许是工作范围的原因)
我到昨天细看了 Touch Events API 才了解两者差别究竟怎样
我已经完全觉得鼠标是个技术不足的时代的替代品了, 或者行业专用
有笔刻画细节, 有手势快速交互, 为什么要用带线的盒子在桌上摩擦

我回头以短暂散乱的经验揣度, 开发单页面应用需要投入研究些什么?
(1 怎样管理大量的数据, 浏览器中主要是缓存怎样管理?
(2 怎样处理异步的数据, 浏览器中主要是请求和推送怎样设计?
(3 怎样做界面组件的抽象, 浏览器对应 Virtual DOM 和 CSS 怎样拆分跟组合?
(4 怎样丰富交互方式, 浏览器有点击, 输入, 文件拖放, 拖拽等等?
(5 怎样设计好动画, 现在这样 DOM 动画依靠各种类库的情况下?
(6 上面的事情都做了, 然后性能跟兼容性怎么办?

考虑到目前前端生态的混乱, 我认为开发新工具来对付问题很重要
然而不管是跟进他人的开发工具, 或者自己创建新的工具, 都非常困难
前面微博盛传, 前端建构工具两三年已经换的第三茬了
不过看看现在这茬, 被人吐槽配置太复杂啊, 很奇怪啊, 估计还得换
社区呼声最高的编程语言了, 版本都刷到 2015 了, 语法很多认不出来的
而未来的方向呢, WebAssembly, 我记得 ASM.js 才不久前的事情对吧
听说 LLVM 后端已经能生成了, 也有 C# 和 OCaml 的初步实现了

我大致觉得新技术有三个来源, 搞研究的, 为了团队里方便搞特殊的
还有明摆着是搞山寨的. 第三种主要是学习目的, 点个赞鼓励下就算了
前两种会是重要的模块的来源, 只是前者容易理想化, 后者容易特殊化
实实在在开发出来, 同时自己团队能复用的, 比最初估计的少太多了
操作系统的代码, 还算能广泛使用, 然而开发成本一降 N 个 Ubuntu 就冒出来了
对于前端的组件, 各种角色的人都能挑挑拣拣, 重用代码的情况更需要考虑

我主要想说, 到后边自己开发新东西, 新技术, 必不可少的
当然, 从理论层面说, 或者仅仅技术层面, 也不是真的崭新的技术
世界上排除掉山寨语言的几百种编程语言, 就是各种不同场景的取舍导致的
需要 A 语言的 b 特性, 需要 C 语言的 d 特性, 大量的取舍和权衡
所以单页面的浑水, 几个巨头好像全掺合进来了, 每个的方案还都不一样
当业务中需要一个功能, 跑到 React 的 Issue 列表去跪求, 不如自己做一个

我说这些的重点是, 并不是要用自己开发的技术, 而是要有那个能力
就像美苏冷战要极力避免使用核武器, 然而没有能力开发核武器就败了
在这种时候才突然想起来算法不好, 编译原理不行, 各种被大神耍着玩
社区一下开发新的数据结构, 一些给编译器加语法, 过天换种编程模型
两年时间从 Backbone 到 React, 以及语言, 模块化, 改了一大片
更郁闷的是自己的能力远远不如那些朝三暮四改方案的框架开发者们
Angular 已经改一大片, 如果 React 有一天也改了, 我没办法只能乖乖的

太年轻了, 看未来还是很迷茫的, 而且 VR 一出, 开发平台也能改一大片
今年 Google IO 上有个分享也介绍过了, 连 Design Guidelines 都出了
我印象比较深说 VR 跟屏幕不一样, 用户可以随意转动移动的, 很难控制视野焦点
而且还要避免各种物体或者运动造成不适感, 还不能把人初始化在物体内部
我记得 Mozilla 已经有技术试验 VR 了, 似乎相关标准有在推进?
这样的发展速度作为用户蛮开心, 作为程序员我觉得压力恐怕不会小

我个人观点, 在界面组件化方面 React 的 Virtual DOM 算是打赢这仗了
而它不擅长的数据加载, 还有动画, 依然存在巨大的想象空间
换个说法, 存在巨大的坑... 所有人走到这里, 要么绕不过去, 要么找别人搭的桥
至少对于单页面应用来说是这样, 而且 Meteor 跟 Famo.us 两座大桥
想想排列组合 famous-react, react-meteor, meteor-famous 挺滑稽了
然而谁知道我得在这个坑中间晃荡多久呢, 到处是所谓新技术

短期想的还是跟进技术, 同时加强一下基础吧, 特别是觉得 JavaScript 摇摇欲坠了
重要的是单页面背后的数据库原理, 数据界面方案, 编程语言底层, 总不至于松动
偏偏这些东西好像是在张牙舞爪的 Clojure 社区的人手里攥着, 而且不够实用
David Nolen 每个演讲我都有兴趣听, Rich Hickey 的更加是必须听
对了 StrangeLoop 2015 大会总共超过 70 个视频, 怎么可能看完!

全文完. 随想带了不少吐槽, 也不严谨, 考虑涉及那么多术语也很难写清楚了
有兴趣的纠错的同学只求不要写得像我这么粗略