SegmentFault 專訪 | AlloyTeam 2015 前端技術大會講師圓桌

導讀

繼採訪 AC 2015 講師高工曉思以後，咱們又訪問了 AC 2015 的另外三位講師：來自 AlloyTeam 的工程師郭碧青、潘佳韓和王斌，整理成這篇講師訪談圓桌。

下面是三位講師的簡單介紹。

郭碧青：我是 2011 年加入騰訊 AlloyTeam，前後開發過 WebQQ，Q+，QQ 互聯，興趣部落。曾參與春節興趣部落紅包項目，成功應對每秒 50 萬的併發。如今主要的精力仍是在業務產品上，最近應用 React 的方案實踐興趣部落 PC 版 web 的優化。

潘佳韓：我是 2012 年加入的 AlloyTeam，這以前也參與過興趣部落、羣活動等項目的開發。目前是手機 QQ 家校羣項目的前端主要負責人，包括制定家校羣移動端詳情頁功能、題庫功能、PC 家校羣功能的交互及技術方案，保證家校羣功能的穩定上線，以及對內推廣 React + Redux 技術等。

王斌：我也是 2012 年加入騰訊 AlloyTeam 的，前後開發過 Q+ 互聯，興趣部落，基於我的興趣，也開發過定位於專業圖像處理的前端引擎 AlloyImage，前端輔助工具 AlloyDesigner, AlloyImage, AlloyPhoto 等有趣的設計、圖像處理開源項目。重點仍是放在 Abstract 框架上，開發 Abstract 框架並將其應用到興趣部落、羣活動和羣通知等項目中，同時開發 SodaRender 模板引擎，替換了部落中老舊的 ejs 模板語法形式。

下面的訪談主要內容是圍繞他們我的的經歷及本次 AlloyTeam 2015 前端技術大會上他們所要講的主題的簡單分享。

AC 2015 劇透

AC 2015 是 AlloyTeam 首屆技術分享大會，大家圍繞性能、框架、交互三大前端領域進行分享，能分別劇透一下大家的分享嗎？

郭碧青：我在 AC 2015 主要的着墨點是性能的一個關注重點——首屏時間的優化。應編者邀請，我會結合一下知乎上有關 QQ 空間性能的熱點談談本身的見解。Web 性能一直是個人關注焦點，由於本身平時對瀏覽頁面的要求很是高，糟糕的 Web 性能對用戶和產品都是一種傷害，我不但願這種事情會發生本身負責的產品上。

Web 性能主要集中體如今兩個環節：加載過程和運行時間。然而一個網頁給用戶的印象，每每在加載過程當中就能得出優劣的判斷，緣由是通常狀況下，網頁運行時並無明顯的瓶頸，只有加載時的白屏等待時間、頁面各個模塊逐漸呈現的過程，是有明顯感知的。所以，BAT 的前端工程師們，都會在加載性能上作不少監控和優化。

QQ 空間的性能討論我也看了一些，不少 QQ 空間的開發者們都已經分析總結了很多內容，我就簡單分享幾個見解好了。

1. 萬變不離其宗。其實 Web 加載性能的優化，講來說去，並無比 Yahoo 總結 n 條優化軍規超越多少，由於不少耗時環節在於 Web 頁面賴以生存的 HTTP 協議與瀏覽器。因此在緩存利用、請求合併上，只要作到合理，你們就沒有太多可挑戰的地方。

2. 項目迭代之殤。任何單一的技術點講起來都很簡單，然而在瞬息萬變的 Web 世界，一切都變化的太快：需求在變、人員在變、技術在變，頗有可能你的代碼明天就被其餘人改了，也有可能你接手了某個已離職人員的代碼，因此優化的工做會週期性進行，只要產品還在發展，這項工做就永遠不會結束。

3. 系統方案思考。QQ 空間是有着近 10 年曆史的產品，過程當中雖有過幾回大的重構，但畢竟是有歷史包袱的。若是一個新的產品，沒有那些歷史包袱，若能存活 10 年，是否在 10 年後，也能順應期間的變化，保持性能無人能挑剔呢？我想這也是不少團隊可能正在總結的內容，而咱們團隊也但願在這個方向，能利用組件模塊化、工程化等框架／工具，整合出一套解決方案來。

王斌：我會在 AC 2015 中重點介紹 Abstract 框架。這是興趣部落移動端推行的一套開發框架。我會和你們講一講他的定位，發展方向，以及對比如今流行的 React、Angular 的優點。

Abstract 專一效率的提高，它定位在對邏輯層的抽象與封裝，因此你的業務邏輯必然被它輕鬆抽象和封裝（Abstract 抽象出了模型間關係，而且能夠完備表述全部具象邏輯，而且是數學可證的），簡單的幾行代碼就能完成具象的業務邏輯，這是Abstract的理念，也是他將來的發展方向。

可能你們第一眼看 Abstract，以爲沒有太多的新鮮感在裏面，不像 React 同樣，會給你眼睛戳上一下。也沒有像 Angular 同樣，給你一種動態十足，很酷的感受。但 Abstract 就像公司一向的風格同樣，低調、實在、踏實作事。Abstract 是興趣部落的選擇，支撐了興趣部落億萬次的訪問量，通過了千萬客戶端的檢驗，是一款方便、快速、穩定的前端框架。相比 React、AngularJS，最直白的不一樣點就在於 React、AngularJS 不會幫你寫業務邏輯，而 Abstract 會，它能夠處在 React、AngularJS 的上層，由於 Abstract 就是定位在邏輯層的抽象與提取。更詳細的分析，React 和 Abstract 同樣，都是基於狀態管理的，React 的狀態有多種，Abstract 的狀態只有兩種：激活態與非激活態（像2進制同樣）。與 AngularJS 的相同點，就是借用了 AngularJS 的模板語法。

Abstract 的優點有不少，對比 React，它更加輕量；對比 Angular，它擁有更好的移動性能；對比使用單一的 Javascript 庫，它能在幾分鐘內搞定一個需求或者頁面，總之，使用 Abstract 會讓你更好更快地完成你的開發任務。

潘佳韓：此次個人講題是關於移動的交互。交互跟用戶體驗密切相聯。工程師要作到極致的前端用戶體驗，實際上是有訣竅的。

首先，我以爲最好在交互設計師把效果作出來以前，先跟他們作好溝通，看看他們的想法是否能很好地還原效果，這樣能有效節約雙方的時間。舉個例子，以前在作手 Q 羣活動的詳情頁的時候，有這麼一個交互設計：頂部有一個大圖背景，上面會有一些活動的地點、時間等基本介紹。當用戶滾動的時候，這個大圖背景高度隨着滾動相應變小，活動的資料也會相應調整其位置。有經驗的前端工程師一看，就會知道，因爲某些設備的性能問題，沒有可能 100% 還原這樣的效果，當時交互竟然還把交互動畫作出來了。我看交互作得這麼辛苦，把這個效果的實現分配給了新人，讓他認真調研一下。最後只能用一個替代的方案，當滾動條到必定的位置的時候再觸發大圖背景的變化，而不是逐幀變化。相似的事情其實還發生過很多，交互設計總喜歡追求酷炫，而無視具體實現的效果。

其次，想作好交互，我以爲核心不是頁面真的快，而是用戶感受快看起來快，有些事咱們就躲在幕後默默幫用戶作。作過前端項目的人都知道，不少時候，交互設計師只會給你一個設計圖，雖然那樣已是很是仔細了，但老是會有不少交互並無仔細規定，須要前端去拿捏，咱們姑且稱之爲交互設計的灰色地帶。最多見的就是加載狀態，交互設計師並不會規定你何時須要加載，由於這涉及具體技術上的具體實現。

舉個例子，家校羣須要業務作一個叫作先鋒教師的運營頁面，用來吸引老師使用，頁面包含加入頁和成功頁。若是你將兩個功能放在拆成兩頁面，跳轉的時候就須要加載，若是作成同一個頁，但另外一個頁面的資源是按需拉取的，這也須要加載，只有一次加載好的技術實現，能夠略去加載這一步。讓頁面加載，便是讓用戶等待，咱們是但願儘可能避免的，但有時候咱們無可避免須要取捨，由於若是咱們但願用一次加載完這種方案，可能會傷害首屏加載的體驗。有時候用戶抱怨頁面加載太多，其實他們並不知道咱們在實施這種方案後面的種種考量。

框架應用方面，聽說家校羣 PC 功能頁面是手 Q 第一個實踐 React + Redux 這套框架組合的業務，能不能和咱們講一講用這套新組合的時候大家有什麼考量？這套框架有什麼優點呢？

潘佳韓：這個業務目前由我來負責，儘管我並不會在 AC 2015 大會上分享，但私下能夠跟我或者個人徒弟郭林爍一塊兒交流。

首先，咱們一直用着的那些框架在業務迅速擴張的狀況下問題會愈來愈明顯，好比擴展性變差、模塊化的設計存在缺陷等。其次，這些框架用得過久了，咱們想試用一些新的技術，來帶動家校羣項目組的技術提高。此外，由於咱們的頁面會嵌在 PCQQ 的頁面框裏，這個框自帶 webkit 內核，這樣咱們徹底能夠忽略 IE8 或如下的瀏覽器，技術選型能夠更大膽一些。

當時 Redux 已經誕生大半年了，技術也逾趨成熟，所以咱們跳過了 Flux，Reflux 這些框架直接使用 Redux。因爲家校羣功能頁面是一箇中等規模的單面應用，所以用 React + Redux 的的優點會比較明顯。功能頁面分紅做業列表、佈置做業、做業詳情、回答做業、做業分析等幾大模塊，咱們主要使用 webpack 進行開發和編譯，將不一樣模塊分拆成不一樣大組件，大組件下面再細分小組件，組件在複用的時候大大減小了舊有模式的代碼量和維護成本。在不一樣的模塊進行交互、切換的時候，只須要發起一個動做 action 就能夠進行，比舊的模式更能進行代碼解藕和排查錯誤。

AlloyImage 的誕生及前端將來

下面，咱們來聊聊天 AlloyTeam 的開源項目吧。AlloyTeam 成立以來貢獻了許多優質的開源項目，其中王斌你主導開發的 AlloyImage 誕生以後反響很好，臺灣的開源組織還想邀請你過去作分享。請問你是從哪裏得到這個項目的靈感的？在開發過程當中遇到哪些難題，又是怎麼一一解決的？

王斌：AlloyTeam 能誕生很多優質開源項目，主要仍是由於團隊文化吧。AlloyTeam 很是鼓勵成員除了完成產品需求以外，再開展一至兩個自由項目。若是項目達到比較好的水準，就能夠將它對外開源。儘管會很是忙碌，但痛苦並快着，在 AlloyTeam 工做的前兩年我技術日新月異。

談到 AlloyImage 的誕生，是由於接觸 canvas 以後以爲 canvas 很好玩，能夠作之前前端作不到的東西，因而有一些想法，能夠嘗試作一個圖像處理應用，以後獲得了濤哥，咱們帥帥的 AlloyTeam 團隊負責人的大力支持，就花幾個月開發完成了 AlloyImage。

AlloyImage 在業界受到如此的關注，我以爲有三個緣由。在個人調研裏，使用 JS 寫的前端圖像處理引擎中，AlloyImage 是第一個使用圖層來進行圖像處理的 JS 庫，這是第一個緣由。AlloyImage 擁有 17 種完善的、與 PS 相對應圖層混合模式，這爲 AlloyImage 定位於專業級的圖像處理奠基了很好的基礎。PS 中圖層與圖層混合模式是很是基本的功能。AlloyImage 中的全部操做，都是依賴多圖層的概念上展開的。看似一個很簡單的複合圖像處理效果，好比 LOMO 效果，實際上通過複製多個圖層混合獲得的效果。這也爲獲得更多的高級效果提供了很好的支持。第二個緣由就是 AlloyImage 功能確實很強大、性能很好，是成熟的產品，能夠應用到實際的產品中去。國內不少人會嘗試寫一些圖像處理引擎，但不少都是用來練一練技術，應用到實際的項目時會發現缺更多的功能與操做能力，而 AlloyImage 中包含的亮度、飽和度和色相的調節，都是在圖像處理中最基本的功能。另外，曲線這個鋒利的調節工具，AlloyImage 是具備的。甚至在專業調節裏面用到的可選顏色功能，在 AlloyImage 1.2 的開發版本中已經實現，爲調出專業色調的照片作好的充分的準備。第三個緣由是 AlloyImage 的 API 設計的很友好，很方便使用。

接下來講一下開發項目遇到的一些難題，首先是理論知識，要去學習圖像處理的基本知識，這些知識都是晦澀、難懂的，與應用結合的數學與傳統的理論數學仍是有一些區別，並且離散數學體系與連續數學體系仍是有一些差異的。但這些都不是問題，只要多看幾遍就能學會，畢竟都是熟悉的符號和變換。

再一個比較頭疼的問題是怎麼去設計 API。解決這個問題就是你作第一個使用者。不少人在設計庫或框架的時候，只是單純設計庫或框架，並無實際的產品。爲了使 AlloyImage 庫的 API 設計的更合理，我開發了 AlloyPhoto 來作爲 AlloyImage 第一個使用者產品，不斷調整 AlloyImage 的接口，使得它更符合實際應用的接口設計。

早前，前端工程師徐飛在 GitHub 上面對前端的十年發展變化發表了一家之言，請問 AlloyTeam 內部有對前端技術的發展有過討論麼，有沒有什麼結論能夠分享給你們。

郭碧青：我簡單談談吧。前端這幾年真的發展很是快，偶爾會聽到同事開玩笑，戲稱已經跟不上時代節奏了。確實有些爆發性的發展，從早前的瀏覽器兼容、jQuery、雅虎十四條，到工程化思想、ES 201五、Node.js，能夠說在短短几年時間，前端領域迅速地補齊了不少早期缺失的能力。

至於前端的變化，我以爲大概能夠歸類到三個層面：

1. 平臺延伸

Node.js 的出現，不但讓前端在服務端有所做爲，還在構建、工具、甚至桌面客戶端，都有不俗的表現；同時，隨着移動大潮的興起，移動設備的普及，Web 頁面也在社交網絡中承擔着重要角色。也就是說，前端開發能夠觸及的領域更多了，能夠在瀏覽器以外作更多提高用戶體驗，以及開發效率的事情。

2. 語言加強

HTML五、CSS3，這些語言層面的標準規範升級，也給前端帶來更多的生機。除了以往的 DOM 操做、簡單樣式，咱們能夠利用 Canvas 作遊戲、骨骼動畫，用 Websocket 更優雅地實現實時場景需求，用 CSS 實現圓角、漸變、陰影等效果，還有 Web worker、LocalStorage、WebGL、離線緩存等豐富的 API 可使用。不久前，ES 2015 也定稿了，JS 這門腳本語言自己，也在緊隨發展加強，彌補以前所缺失的一些語言特性，同時提高代碼的書寫效率。

3. 理念更新

首先是開發理念，早期的頁面邏輯相對簡單，對 DOM 的操做也相對粗暴，致使的結果就是維護性不好。在改進的過程當中，涌現了很多 MVC 庫，在此之上又出現了以 AngularJS 爲表明的 MVVM 框架，近期開始流行組件化開發的 React.js 等，這些開發框架/庫只是結果，其背後都有着明確的開發理念做爲動機，本質上都是維護性與開發效率之間的平衡，而性能對比則是其次的事情（你們一般會過於糾結性能的論）。

其次是工程理念，因爲前端代碼是不經編譯就能運行的，因此之前並不受你們關注。隨着 Node.js 的出現，涌現了一批模塊化、預處理的工具，又是讓你們眼前一亮，不少性能、維護性的問題迎刃而解。同時，隨着頁面複雜度的提高，人們對真正意義的組件化開發模式呼聲更高了，而這些都是須要優良的工程方案做爲其中的粘合劑的。

除了技術方向的變化，整個業界環境也在改變。隨着 GitHub 的流行，程序員之間的交流早已消除了國籍界限，新技術、新名詞傳播的特別快，你們也更樂於開源項目代碼，或者是貢獻代碼。總之，如今一名合格的前端開發人員，已經再也不是那個被困在瀏覽器的頁面仔，而是一個被賦予了更多能力和工具，給用戶帶來更好體驗的工程師。

AlloyTeam 2015 前端技術大會

首屆 AC 2015 大會即將於 2015 年 12 月 12 日在深圳騰訊大廈總部舉行。這是 AlloyTeam 沉寂一年來首次對外舉行的一次技術分享。AlloyTeam 前身是負責 WebQQ、Q+ 互聯的騰訊前端團隊，最近又歷經了興趣部落、羣開外、家校羣等一連串 QQ 拳頭項目的洗禮，積澱了很多技術知識，但願藉着一年一度的技術分享會對外展現咱們一年以來的技術成果。屆時，亦會有神祕 web 遊戲項目對外公佈。

AlloyTeam 2015 前端技術大會：http://segmentfault.com/e/1160000004119995