不安分、愛挑戰(zhàn)的“折騰”之旅
我是李焱， 來自成都漫極客科技有限公司。 我于 2010 年從北京大學畢業(yè)，獲得信息管理系學士學位以及計算機軟件學士學位。畢業(yè)之后，我在酷我音樂商務組從事 web 開發(fā)，主要負責公司廣告系統(tǒng)、VIP 會員等級體系、音樂盒內(nèi)彈窗等業(yè)務。
兩年之后，我覺得前端開發(fā)技術難度比較小，而且瀏覽器兼容性問題很大，大部分時間都是糾結(jié)于一些莫名其妙的 bug，不值得繼續(xù)做下去，選擇在后端深入下去。然后，我跳槽去了人人游戲，加入鋼鐵元帥項目組，做游戲后端開發(fā)，用到的技術主要包括網(wǎng)絡協(xié)議、服務器緩存、并發(fā)、數(shù)據(jù)庫優(yōu)化等。北京天氣很差，我常年犯鼻炎，于是一年之后選擇南下回成都。當時覺得成都的互聯(lián)網(wǎng)環(huán)境還不太好，所以我在 2014 年去了深圳騰訊，在 MIG 無線合作開發(fā)部門，做應用寶相關開發(fā)工作，對大廠的產(chǎn)品設計、需求評審、開發(fā)、提測、部署上線等整個研發(fā)流程以及敏捷開發(fā)有了深入認識。
2015 年，成都創(chuàng)業(yè)公司的朋友聯(lián)系我，希望由我?guī)ьI大前端技術團隊，我就回成都了。在公司，我主要推進公司前后端分離，逐漸用 React、Redux、React Native 等技術架構(gòu)統(tǒng)一 Web 前端、Android、iOS 三端，以及微信平臺開發(fā)。一年之后，公司的原 CTO 離職，工作交接給我， 我繼續(xù)帶領后端團隊做微服務，推動 CI / CD 相關工作，把服務遷移到阿里云等。
2017 年 5 月底，我離職創(chuàng)業(yè)，成立漫極客科技有限公司。公司口號是“用科技優(yōu)化生活”，致力于用技術提高人們工作效率、改善人們生活質(zhì)量。公司英文名是 MagicFun.AI，其中 fun 既是有趣的意思，又是編程里面 function （函數(shù)）的縮寫。我們希望自己扮演的角色是“由 AI 技術等賦能的神奇有趣的函數(shù)”，幫助用戶快速成長發(fā)展。公司目前業(yè)務主要包括在線IT教育、IT咨詢，以及企業(yè)定制開發(fā)包括 Web 、APP、微信公眾號、小程序、數(shù)據(jù)分析和可視化等。此外，我們目前在準備開發(fā)一個深度增強學習和游戲相結(jié)合的項目。
多重因素，開啟大前端之路
剛畢業(yè)的時候，其實不太懂什么叫前端。有師兄建議從前端做起，理由很實在：做后端的全是男生，前端有女生，還有 UI 設計師基本都是女生。
同時，現(xiàn)在的前端已經(jīng)遠非用用 jQuery 和寫個頁面，然后解決一堆坑爹的瀏覽器兼容性問題了——而這些是我當時剛接觸的時候的常態(tài)。前端技術越來越復雜，有不低的技術門檻。同時，前端越來越重要，能做的事情越來越多，比如微信開發(fā)、APP、Desktop、AR / VR 等。
更重要的是，我認為，前端更接近產(chǎn)品本身，能直接跟用戶、產(chǎn)品經(jīng)理、UI 設計師、市場等溝通，有利于自己全方面發(fā)展。后端發(fā)展會越來越“云化”，我的判斷是，以后后端程序員會分兩大類，一類是做云的， 一類是用云的。尤其是隨著 Serverless 等技術的發(fā)展，在產(chǎn)品規(guī)模比較小的情況下，可能都不需要專門的后端程序員——或者依賴很小。
“大前端”，以何為大
說到前端，一般大家還都是指的 Web 開發(fā)。其實現(xiàn)在 Web 能做的事情已經(jīng)非常多了。
WebRTC 語音視頻通話
WebRTC 其實是一個開放標準，在瀏覽器里面可以直接做視頻聊天或語音聊天。目前的瀏覽器支持情況也是十分好的，包括較新的 iOS 11，下圖是 WebRTC 的瀏覽器支持情況。
（點擊放大圖像）
圖片來自 https://caniuse.com/#search=webrtc
P2P CDN
WebRTC 能夠做端到端的通信，也就能實現(xiàn)P2P技術。 目前已經(jīng)有人基于這個實現(xiàn)了 P2P CDN，這可以節(jié)省很大的成本，比如 Serverless CDN 。
AR/VR
瀏覽器里也是可以實現(xiàn)AR/VR 效果的。WebGL 支持3D ，在此基礎上有ar.js 的開發(fā)庫， 可以比較高效的寫出 3D 程序。剛剛說過，WebRTC 可以調(diào)取攝像頭，攝像頭結(jié)合3D就能做出AR和VR效果。 https://aframe.io 是火狐開發(fā)的專門做 AR/ VR 的框架。
這里有一些其他的 AR / VR 方面的參考資源：
- https://github.com/jeromeetienne/ar.js
- https://webxr.io/webar-playground/app/
- https://webvr.info/
大型3D游戲
瀏覽器一直有個很重要的問題，就是性能問題?，F(xiàn)在，Web 技術已經(jīng)可以在瀏覽器里面做大型 3D 游戲，下面是一些鏈接 demo，大家可以查看一下。
- https://www.awwwards.com/22-experimental-webgl-demo-examples.html
它主要用的技術，
- 一是WebGL，通過 GPU 加速，能快速渲染 3D 圖形；
- 二是 asm.js 和 WebAssembly ，通過 Emscripten 編譯器，把普通的 C++ 代碼編譯成 JS 的子集 asm.js，性能能夠達到 C++ 原生代碼本地速度的 50% ，后來Google、Mozilla、Apple、Microsoft等幾家大公司又一起制定了 WebAssembly 標準，更進一步提升了性能，也得到更多瀏覽器的支持。
關于 asm.js 和 webassembly 的更多細節(jié), 可以參考我最近撰寫的一篇博客， https://magicly.me/fe-hpc/asmjs-and-webassembly/
webassembly的瀏覽器支持程度也是非常高的了，新版的火狐、Chrome、iOS、IE、Opera等都支持，如下圖。
（點擊放大圖像）
機器學習
前端也可以做機器學習方面的內(nèi)容，這里我提供兩個參考鏈接給大家。先進個是李飛飛的高徒 Andrej Karpathy 開發(fā)的 ConvNetJS 。第二個是谷歌剛剛開源不久的 deeplearn.js 庫。兩個庫都可以直接在瀏覽器里訓練深度神經(jīng)網(wǎng)絡。
- http://cs.stanford.edu/people/karpathy/convnetjs/
- https://deeplearnjs.org/
前面提到的Web技術都是運行在標準的瀏覽器里面的，現(xiàn)在還有很多Web技術是運行在封裝之后的瀏覽器內(nèi)核里比如 Electron 和 NW.js ，比如桌面端的微信開發(fā)工具、Slack的桌面版本、桌面版Github等，還有一些已經(jīng)不完全是運行在瀏覽器里的了，比如微信小程序、React Native、阿里去年開源的Weex等。
Web 技術一統(tǒng)三端開發(fā)實踐
我認為的大前端應當包括以下內(nèi)容：
- Web/H5
- APP（Android、iOS）
- 微信開發(fā)
- Desktop 端
- 數(shù)據(jù)可視化
- 視覺設計
- 新的人機交互技術，包括語音識別、計算機視覺、AR/VR 等
Web 是現(xiàn)在最流行的真正做到跨平臺運行的技術平臺：PC、Web、手機、手表、TV、Kindle、電冰箱……
Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood’s Law
下面介紹一下我們用 Web 技術統(tǒng)一三端的技術。
Web/H5
我從 2011 年開始關注 HTML5，HTML5 的功能越來越強大，新特性一直在涌現(xiàn)，包括原生支持 video、audio、WebRTC、WebGL, push notification、離線存儲、service worker、webworkers、webassembly、PWA以及 Chrome、FF 等 addon 技術，增強 Web 能力。
Node.js
我認為 Web 的繁榮起源于 V8 引擎的出現(xiàn)，大大提高了 JS 的運行效率，然后 Node.js 的出現(xiàn)，使 JS 擺脫了只能寫寫頁面動畫的局面，然后各種構(gòu)建工具、腳手架、開發(fā)框架等紛紛出現(xiàn)。比如現(xiàn)在的Ng、React、Vue等框架。
APP
RN 出現(xiàn)的時候，我們跟進了很長一段時間，覺得可以用在生產(chǎn)環(huán)境，我們先讓 iOS 團隊試用。當時的問題是，iOS 開發(fā)人員覺得這種技術性能有問題，同時跟平時開發(fā)習慣完全不一樣，包括一開始寫標簽寫 JS 很痛苦，之前都是在 Xcode 直接拖拽就能快速生成界面，用 CSS 和 JS 效率還太低。強行推下去一個月左右，大家就熟悉了，覺得用起來很方便，動態(tài)更新能讓改動之后立馬看到效果也很方便，大家就都接受了。三個月后，iOS 做得差不多了，也踩過坑了，我們就讓安卓同學用 RN 重構(gòu)代碼。最后我們實現(xiàn)的效果是，安卓跟 iOS 基本上 50% 代碼是公用的。
要用web技術做app開發(fā)，除了RN還有幾個其他的選擇，比如 PhoneGap/Cordova、Ionic、Weex。
- http://ionicframework.com/
- https://facebook.github.io/react-native/
- https://weex-project.io/cn/guide/
微信開發(fā)
然后出現(xiàn)了微信小程序。我們是先進批拿到微信小程序體驗碼的，看了之后發(fā)現(xiàn)它跟 RN 的思想很像。我們在原生的小程序接口上面做一層封裝，得接口更接近于React，然后把之前的 HTML5 頁面以很低的成本遷移到微信小程序。
PC 端
我之前沒怎么做過PC端，最近剛好有個項目需要做 PC 軟件，我先進想到的還是用 Web 技術去做。我做了調(diào)研，了解到一個是 NW.js ，一個是 Electron 。分析之后，我覺得 Electron 比較新，并且在它基礎上已經(jīng)有幾個比較重量級的項目成功了，比如 Atom 編輯器、微軟的 VSCode、Slack 桌面端、GitHub 桌面端等。
所以我們選擇用 Electron 實現(xiàn)。
數(shù)據(jù)可視化
后端管理系統(tǒng)，包括統(tǒng)計報表、指標曲線等等，我們用的是百度開源的可視化框架 Echarts 。
另外我們也用過 D3 ，它是一個更靈活功能更強大的開源框架，專門做數(shù)據(jù)可視化。
AR/VR
去年VR特別火，我們也做過 360 度全景視頻等，主要用到了 WebGL。 WebGL 是比較復雜的，我們是基于別人封裝的庫 Three.js 做的，一句話，很好很強大。
前面所說的，基本覆蓋了我用Web技術開發(fā)過的東西，包括HTML5、APP、微信開發(fā)、PC 端開發(fā)、數(shù)據(jù)可視化、AR / VR等。
js性能的問題
很多人會懷疑 JS 的性能問題，比如它是單線程的、它是動態(tài)語言。怎么解決這些問題呢？
首先，JS 的性能已經(jīng)很好了，大部分情況下，如果是簡單的 Web 開發(fā)，已經(jīng)沒有什么瓶頸了。
另外一方面，像 webwokers 并發(fā)技術、WebAssembly 將原生代碼編譯成 JS 執(zhí)行的技術以及利用 WebGL 做 GPU 加速技術的出現(xiàn)，基本上已經(jīng)解決了 JS 的性能問題。
部署架構(gòu)
最后說一下我們的部署架構(gòu)。
如果是 SPA 這種單頁面，基本就是把 index.html 部署到 nginx 后，其他打包部署到 CDN，包括JSS、CSS、圖片、字體等。打包內(nèi)容會用 WebPack 自動加上文件內(nèi)容哈希碼，然后把Cache-Control的max-age設置成很大，這樣能夠充分利用瀏覽器和 HTTP 協(xié)議的緩存，又能保證及時更新。
為什么 index.html 不放到 CDN ？因為如果CDN 緩存清除不好的話，入口文件沒有更新就會導致所有的資源都更新不了，這是個很嚴重的問題。
如果覺得上面的方式首頁白屏時間比較長的話，我們會選擇 nginx 后端部署 Node.js 做服務端渲染，解決首頁白屏時間過長的問題?；蛘咭部梢杂? Gatsby 、 next.js 之類靜態(tài)生成工具提前生成靜態(tài)頁面，等待首頁加載完成之后，再去動態(tài)加載其他頁面。
最近我看到幾個項目，是把所有的項目全部部署到 CDN 的，他們提出了一個叫 JamStack 的架構(gòu)，感興趣的可以了解一下。
最后就是前后端分離。前端只負責頁面和前端效果的實現(xiàn)，開發(fā)之前先制定好API接口，接口我們用 RAP 來管理，前端自己用 JSONServer 模擬數(shù)據(jù)，所有發(fā)布都是打包傳到 CDN 上去。這樣的話就會有跨域問題，我們用 CORS 解決。CORS 的瀏覽器兼容也做得挺好了。
