9 月 28 日，EGO 北京分會會員、漫極客 CTO 李焱作為線上分享第一季嘉賓，與超過 400 位 EGO 會員交流了《 如何用 Web 技術一統三端（ Web、Desktop 、Mobile ）開發 》。本文根據當天口述內容整理。
我是李焱， 來自成都漫極客科技有限公司。 我於 2010 年從北京大學畢業，獲得信息管理系學士學位以及計算機軟體學士學位。畢業之後，我在酷我音樂商務組從事 web 開發，主要負責公司廣告系統、VIP 會員等級體系、音樂盒內彈窗等業務。
兩年之後，我覺得前端開發技術難度比較小，而且瀏覽器兼容性問題很大，大部分時間都是糾結於一些莫名其妙的 bug ，不值得繼續做下去，選擇在後端深入下去。然後，我跳槽去了人人遊戲，加入鋼鐵元帥項目組，做遊戲後端開發，用到的技術主要包括網絡協議、伺服器緩存、並發、資料庫優化等。
北京天氣很差，我常年犯鼻炎，於是一年之後選擇南下回成都。當時覺得成都的網際網路環境還不太好，所以我在 2014 年去了深圳騰訊，在 MIG 無線合作開發部門，做應用寶相關開發工作，對大廠的產品設計、需求評審、開發、提測、部署上線等整個研發流程以及敏捷開發有了深入認識。
2015 年，成都創業公司的朋友聯繫我，希望由我帶領大前端技術團隊，我就回成都了。在公司，我主要推進公司前後端分離，逐漸用 React 、Redux 、React Native 等技術架構統一 Web 前端、Android 、iOS 三端，以及微信平臺開發。一年之後，公司的原 CTO 離職，工作交接給我， 我繼續帶領後端團隊做微服務，推動 CI / CD 相關工作，把服務遷移到阿里雲等。
2017 年 5 月底，我離職創業，成立漫極客科技有限公司。公司口號是「用科技優化生活」，致力於用技術提高人們工作效率、改善人們生活質量。公司英文名是 MagicFun.AI ，其中 fun 既是有趣的意思，又是編程裡面 function （ 函數 ）的縮寫。
我們希望自己扮演的角色是「由 AI 技術等賦能的神奇有趣的函數」，幫助用戶快速成長發展。公司目前業務主要包括在線 IT 教育、IT 諮詢，以及企業定製開發包括 Web 、APP 、微信公眾號、小程序、數據分析和可視化等。此外，我們目前在準備開發一個深度增強學習和遊戲相結合的項目。
剛畢業的時候，其實不太懂什麼叫前端。有師兄建議從前端做起，理由很實在：做後端的全是男生，前端有女生，還有 UI 設計師基本都是女生。
同時，現在的前端已經遠非用用 jQuery 和寫個頁面，然後解決一堆坑爹的瀏覽器兼容性問題了 —— 而這些是我當時剛接觸的時候的常態。前端技術越來越複雜，有不低的技術門檻。同時，前端越來越重要，能做的事情越來越多，比如微信開發、APP 、Desktop 、AR / VR 等。
更重要的是，我認為，前端更接近產品本身，能直接跟用戶、產品經理、UI 設計師、市場等溝通，有利於自己全方面發展。後端發展會越來越「雲化」，我的判斷是，以後後端程式設計師會分兩大類，一類是做雲的， 一類是用雲的。尤其是隨著 Serverless 等技術的發展，在產品規模比較小的情況下，可能都不需要專門的後端程式設計師 —— 或者依賴很小。
說到前端，一般大家還都是指的 Web 開發。其實現在 Web 能做的事情已經非常多了。
WebRTC 其實是一個開放標準，在瀏覽器裡面可以直接做視頻聊天或語音聊天。目前的瀏覽器支持情況也是十分好的，包括最新的 iOS 11 ，下圖是 WebRTC 的瀏覽器支持情況。
圖片來自 https://caniuse.com/#search=webrtc
WebRTC 能夠做端到端的通信，也就能實現 P2P 技術。 目前已經有人基於這個實現了 P2P CDN ，這可以節省很大的成本，如 Serverless CDN 。
瀏覽器裡也是可以實現 AR/VR 效果的。WebGL 支持 3D ，在此基礎上有 ar.js 的開發庫， 可以比較高效的寫出 3D 程序。剛剛說過，WebRTC 可以調取攝像頭，攝像頭結合 3D 就能做出 AR 和 VR 效果。https://aframe.io 是火狐開發的專門做 AR/ VR 的框架。
這裡有一些其他的 AR / VR 方面的參考資源：
• https://github.com/jeromeetienne/ar.js
• https://webxr.io/webar-playground/app
• https://webvr.info/
瀏覽器一直有個很重要的問題，就是性能問題。現在，Web 技術已經可以在瀏覽器裡面做大型 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 的更多細節, 可以參考我最近撰寫的一篇博客：
https://magicly.me/fe-hpc/asmjs-and-webassembly/webassembly 的瀏覽器支持程度也是非常高的了，新版的火狐、Chrome 、iOS 、IE 、Opera 等都支持，如下圖：
前端也可以做機器學習方面的內容，這裡我提供兩個參考連結給大家。第一個是李飛飛的高徒 Andrej Karpathy 開發的 ConvNetJS 。第二個是谷歌剛剛開源不久的 deeplearn.js 庫。兩個庫都可以直接在瀏覽器裡訓練深度神經網絡。
前面提到的 Web 技術都是運行在標準的瀏覽器裡面的，現在還有很多 Web 技術是運行在封裝之後的瀏覽器內核裡比如 Electron和NW.js ，比如桌面端的微信開發工具、Slack 的桌面版本、桌面版 Github 等，還有一些已經不完全是運行在瀏覽器裡的了，比如微信小程序、React Native 、阿里去年開源的 Weex 等。
我認為的大前端應當包括以下內容：
Web 是現在最流行的真正做到跨平臺運行的技術平臺：PC 、Web 、手機、手錶、TV 、Kindle 、電冰箱……
Any application that can be written in JavaScript, will eventually be written in JavaScript.
—— Atwood’s Law
下面介紹一下我們用 Web 技術統一三端的技術。
我從 2011 年開始關注 HTML 5 ，HTML 5 的功能越來越強大，新特性一直在湧現，包括原生支持：
video 、audio 、WebRTC 、WebGL 、push notification 、離線存儲、service worker 、webworkers 、webassembly 、PWA 以及 Chrome 、FF 等 addon 技術，增強 Web 能力。
我認為 Web 的繁榮起源於 V8 引擎的出現，大大提高了 JS 的運行效率，然後 Node.js 的出現，使 JS 擺脫了只能寫寫頁面動畫的局面，然後各種構建工具、腳手架、開發框架等紛紛出現。比如現在的Ng 、React 、Vue 等框架。
RN 出現的時候，我們跟進了很長一段時間，覺得可以用在生產環境，我們先讓 iOS 團隊試用。當時的問題是，iOS 開發人員覺得這種技術性能有問題，同時跟平時開發習慣完全不一樣，包括一開始寫標籤寫 JS 很痛苦，之前都是在 Xcode 直接拖拽就能快速生成界面，用 CSS 和 JS 效率還太低。
強行推下去一個月左右，大家就熟悉了，覺得用起來很方便，動態更新能讓改動之後立馬看到效果也很方便，大家就都接受了。三個月後，iOS 做得差不多了，也踩過坑了，我們就讓安卓同學用 RN 重構代碼。最後我們實現的效果是，安卓跟 iOS 基本上 50% 代碼是公用的。
要用 web 技術做 app 開發，除了 RN 還有幾個其他的選擇，比如：PhoneGap／Cordova 、Ionic 、Weex 。
http://ionicframework.com
https://facebook.github.io/react-native
https://weex-project.io/cn/guide
然後出現了微信小程序。我們是第一批拿到微信小程序體驗碼的，看了之後發現它跟 RN 的思想很像。我們在原生的小程序接口上面做一層封裝，得接口更接近於React ，然後把之前的 HTML 5 頁面以很低的成本遷移到微信小程序。
我之前沒怎麼做過 PC 端，最近剛好有個項目需要做 PC 軟體，我第一想到的還是用 Web 技術去做。我做了調研，了解到一個是 NW.js ，一個是 Electron 。分析之後，我覺得 Electron 比較新，並且在它基礎上已經有幾個比較重量級的項目成功了，比如 Atom 編輯器、微軟的 VSCode 、Slack 桌面端、GitHub 桌面端等。所以我們選擇用 Electron 實現。
後端管理系統，包括統計報表、指標曲線等等，我們用的是百度開源的可視化框架Echarts 。另外我們也用過 D3 ，它是一個更靈活功能更強大的開源框架，專門做數據可視化。
AR／VR
去年 VR 特別火，我們也做過 360 度全景視頻等，主要用到了 WebGL 。 WebGL 是比較複雜的，我們是基於別人封裝的庫 Three.js 做的，一句話，很好很強大。前面所說的，基本覆蓋了我用 Web 技術開發過的東西，包括 HTML 5 、APP 、微信開發、PC 端開發、數據可視化、AR / VR 等。
很多人會懷疑 JS 的性能問題，比如它是單線程的、它是動態語言。怎麼解決這些問題呢？
首先，JS 的性能已經很好了，大部分情況下，如果是簡單的 Web 開發，已經沒有什麼瓶頸了。
另外一方面，像 webwokers 並發技術、WebAssembly 將原生代碼編譯成 JS 執行的技術以及利用 WebGL 做 GPU 加速技術的出現，基本上已經解決了 JS 的性能問題。
最後說一下我們的部署架構。
如果是 SPA 這種單頁面，基本就是把 index.html 部署到 nginx 後，其他打包部署到 CDN ，包括 JSS 、CSS 、圖片、字體等。打包內容會用 WebPack 自動加上文件內容哈希碼，然後把 Cache - Control 的 max - age 設置成很大，這樣能夠充分利用瀏覽器和 HTTP 協議的緩存，又能保證及時更新。
為什麼 index.html 不放到 CDN ？因為如果 CDN 緩存清除不好的話，入口文件沒有更新就會導致所有的資源都更新不了，這是個很嚴重的問題。
如果覺得上面的方式首頁白屏時間比較長的話，我們會選擇 nginx 後端部署 Node.js 做服務端渲染，解決首頁白屏時間過長的問題。或者也可以用 Gatsby 、next.js 之類靜態生成工具提前生成靜態頁面，等待首頁加載完成之後，再去動態加載其他頁面。
最近我看到幾個項目，是把所有的項目全部部署到 CDN 的，他們提出了一個叫JamStack 的架構，感興趣的可以了解一下。
最後就是前後端分離。前端只負責頁面和前端效果的實現，開發之前先制定好 API 接口，接口我們用 RAP 來管理，前端自己用 JSONServer 模擬數據，所有發布都是打包傳到 CDN 上去。這樣的話就會有跨域問題，我們用 CORS 解決。CORS 的瀏覽器兼容也做得挺好了。
成都應該是休閒安逸的吧，為什麼「折騰」頻繁換公司和後來的創業？
我在北京和深圳也呆過，相比而言成都確實安逸很多。之前我在 EGO 小組分享也說過，剛來的時候下午六點發現人都走光了，覺得很不可思議。
為什麼頻繁折騰、換公司、創業？我自己本身也不是特別安分，自己還年輕，不想過安逸的生活，覺得應該趁著年輕多折騰多闖闖，多去嘗試一些新東西。
咱們現在業務是包括 APP 、web 、小程序外包嗎？現在規模多大？
現在我們接一些 Web 開發、APP 和小程序的外包。這個不是我創建公司的初衷，而是為了在現階段養活自己，基本上都是朋友推薦的。現在公司沒招太多人，不到十個。
我覺得外包不是長久之路，基本都是一個一個項目做，重複性不高。
現在會做對其他公司技術人員的前端培訓授課嗎？
暫時還沒有呢，當然如果有公司需要的話可以聯繫我們。目前我自己在錄製一套 React 的課程，全部放在線上免費公開。大家有興趣的話，歡迎查看和提建議。網址是 https://react-course.magicfun.ai 。
做這個課程是因為之前在成都招前端工程師的時候，可能面試 30 個，只能招到一兩個比較不錯的。目前絕大多數大學計算機專業是沒有前端相關課程的，前端工程師很大一部分是從培訓機構出來的，我發現，他們的課程和內容很多都是比較落後的，或者說跟實際工作不太匹配的。所以我想自己做一個「實用」的課程，希望能夠對大家有所幫助，也算是對這兩年使用React的一些總結吧。 另外一直以來用開源項目都比較多，也從很多大牛的博客等受益良多，也算是回饋開源社區吧。
非常感謝 EGO 提供這樣的平臺，我也是第一次在這麼多大牛面前做分享。我們公司剛剛起步，以後不斷會向各位請教。
加入 EGO 收穫蠻多的，包括結識了很多志同道合的朋友，以及各方面的技術大牛。 每次看到有人在群裡問個問題，很快就有各個公司的技術大牛出來分享經驗，就覺得加入 EGO ，超值！希望 EGO 越辦越好。
< 完 >
推薦閱讀
關於 EGO極客邦科技旗下的高端技術領導者社群，匯聚全國超過 400 位技術大牛，其中不乏「餓了麼」、「知乎」、「同程旅遊」、「得到」、「喜馬拉雅」、「新浪微博」等著名企業的 CTO 及技術 VP 。EGO 致力於組建全球最具影響力的技術領導者社交網絡，聯結傑出的技術領導者學習和成長。