关于单页面应用一些随想

前面不短期持续投入了时间在作 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 个视频, 怎么可能看完!

---

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