單頁面應用愈來愈像遊戲, 咱們是否有好的架構來對待?

大三有次看室友玩遊戲, 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 的架構, 三個部件, 相互關係算是很是清晰的
而放到了實踐當中, 卻顯得現實場景當中奇怪的需求層出不窮..
不知道什麼是否能解決這些問題, 或者是否有人已經解決過這些問題
這樣看下來, 我如今用的這套工具仍是可能不夠強大啊