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 2015、Node.js，可以說在短短幾年時間，前端領域迅速地補齊了很多早期缺失的能力。

至于前端的變化，我覺得大概可以歸類到三個層面：

1. 平台延伸

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

2. 語言增強

HTML5、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 遊戲項目對外公布。