单页面应用越来越像游戏, 我们是否有好的架构来对待?

大三有次看室友玩游戏, 3D 游戏, 我忘了名称, 还好这里不打紧
当时我想, 明明现在计算机能处理如此复杂的 3D 场景了, 动画非常棒
可是我们每天浏览的网页, 却如此简陋, 甚至在设计上都存在那样多的问题
假如, 人们把做游戏的技术用在网页制作上, 那效果也应该如此初中才对
3D 效果, 那么大的运算量, 丰富的交互, 无缝的场景切换等等
而且, 曾经游戏也只有 2D, 切换场景也仅仅是屏幕一黑, 界面刷新掉的吗..

富应用和游戏架构的相似之处

最近用着 React 想到一些东西, 也有开始考虑更实时的应用的问题
Teambition 目前主要的应用也算个例子, 试想一下所有的内容都是实时同步的
我在考虑的是用 React 是否能有个很清晰的方案可以做实时的应用
就好像, 所有的页面都像是每当数据库有更新都自动同步更新似的
从技术方面思考, 似乎是可行的, 也做了介绍, 但是想不清楚怎样实现
关于 Cumulo 想法的视频: http://www.tudou.com/programs/view/EoKUKOXe1eo/

后来想起来, 每一时刻更新整个场景, 不就是游戏当中渲染的方案吗
游戏当中界面实时更新, 动画效果卓越, 交互非常频繁, 不就是 Web 一直改变的方向吗?
特别是实时的渲染, 模型不像是单纯 RESTful 再渲染页面那么简单,
更像是每个时刻根据用户当前状态, 渲染对应场景, 再重绘用户的视野
我没有游戏开发的经验, 不知道怎样更深入对比, 但是这让我很有兴趣了

想象一下未来人们浏览网页, 就像是打开了一个游戏客户端, 场景开始渲染
点击一个市场的入口, 进入一个店铺, 各种商品被罗列出来, 点击可以查看信息
对应比如打开一个视频网站, 视频在场景当中罗列, 点击以后聚焦视频
以及, 其他用户的信息, 有点模拟游戏实时更新状态, 实时更新消息等等
这样一些应用, 我们怎样用极为清晰的架构, 设计和实现出来呢?

DOM 的问题

前边文章提到, 为了实现一个漂亮的动画效果, 我尝试了一个有趣的方案

图上每个节点都有子节点, 通常我们认为是子元素, 但在实现当中其实是平级的
从位置关系上我依然保留了从属关系, 然而为方便做动画, 就要破除层级关系才行
每当状态更新, 设置在节点上的位置就比较容易应用渐变, 形成漂亮的动画

用了这样的方案, 我突然想到 Material Design 当中的动画实现起来也有希望了
之前我非常担心一个跨 View 的动画的问题, 但现在可以换一个角度去思考
DOM 当中元素在父节点删除时子节点会删除, 但是动画完全可以子节点滑动出去
那么实现当中, 所有的节点都应该是平级的, 能够在不同的关系当中很灵活切换
反过来说, 我觉得这是 DOM 结构的限制, 而不应该是开发应用的限制

不过, 去掉了 DOM 结构, 布局的问题随之而来, Box Model 丰富的布局模型没有了
结果就会是, 就像绘制动画似的, 所有元素的位置都需要人工计算设定
试想能否有这样的框架, 所有的节点都是独立的, 不会因为移动而打断平台提供的渐变
节点之间依然保留弱的从属关系, 以便子节点能按照父节点的信息来计算布局
那么这样一个框架, 是否可以比 DOM 更适合写交互丰富的应用?
而且, 从前或者目前图形开发技术当中, 是否已有类似的方案被尝试或使用过了呢?

MVC

在学习 MVVM 的时候, 我曾有着这样的幻想, 有一天我们不用复杂的 DOM 操作了
只有我们定义好数据集合, 定义好模版, 那么事后的界面能一直根据数据更新
包括 MVVM 当中精彩的对于渐入渐出动画的实现, 以及其他状态的切换,
我幻想着有那样强大的框架, 能自动处理好所有视图层面的变化
React 对我而言是相比 MVVM 更加简洁清晰的一个思路重新实现

但是随着摸索, 前边提到的问题浮现出来, 我做个总结
* 数据库服务器和大量的客户端之间存在着状态同步的难题, 不容易抽象成清晰的代码
* 界面自动渲染, 动画需要写复杂的逻辑, 而 Model Driven View 对待动画显得不够强大
当我们研究 MVC 的架构, 三个部件, 相互关系算是非常清晰的
而放到了实践当中, 却显得现实场景当中奇怪的需求层出不穷..
不知道什么是否能解决这些问题, 或者是否有人已经解决过这些问题
这样看下来, 我现在用的这套工具还是可能不够强大啊