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

大三有次看室友玩游戏, 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 的架构, 三个部件, 相互关系算是很是清晰的
而放到了实践当中, 却显得现实场景当中奇怪的需求层出不穷..
不知道什么是否能解决这些问题, 或者是否有人已经解决过这些问题
这样看下来, 我如今用的这套工具仍是可能不够强大啊