關於單頁面應用一些隨想

前面不短期持續投入了時間在作 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 個視頻, 怎麼可能看完!

---

全文完. 隨想帶了很多吐槽, 也不嚴謹, 考慮涉及那麼多術語也很難寫清楚了有興趣的糾錯的同窗只求不要寫得像我這麼粗略