WeGeek Talk | 凹凸實驗室

今天前來專欄分享的極客，是 60 人左右的團隊京東「JDC-多終端研發部」。

做爲中國最大的自營式電商企業，京東購物小程序須要支持每日數千萬的消費者。做爲首批發布的小程序，團隊在早期開發小程序和後續提升開發體驗的過程當中，有着哪些體驗？

一塊兒來看這個極客團隊的開發故事。

正文

電商網站京東天天服務着數千萬的用戶，而京東購物小程序天天也服務着數千萬的消費者。

這些直達千萬消費者的服務背後，其中一個團隊是 「JDC-多終端研發部」。

JDC-多終端研發部

「JDC-多終端研發部」於 14 年年中成立，他們在 15 年 10 月份推出了「凹凸實驗室」品牌，旨在對外輸出京東的前端能力及技術理念。如今團隊 60 人左右，主要負責京東商城主戰、微信 / 手 Q 購物兩大業務，提供 Web 前端開發、動畫開發、小程序開發、小遊戲開發等前端開發能力，同時具備 app 開發、後端服務開發等全棧開發能力。

2017 年 1 月 9 日，微信小程序正式上線。在沒有小程序出現以前，京東的微信入口已有一個獨立的團隊來負責這個購物平臺的運營工做。後來有了小程序功能，這個業務團隊但願基於小程序提供更好的體驗，於是相關團隊就進行了一次小程序化。

在小程序發佈之初，團隊及時捕獲到小程序的體驗價值，並進行一系列技術預研。同時，咱們也迅速彙集10餘人的項目小組，經過一個多月的封閉開發，京東購物小程序趕在第一批小程序發佈。

項目初期的開發體驗是不夠完善的，很多問題須要克服。經過上線初版本後，咱們發現小程序用戶體驗極大的優於傳統的 Web 頁面，在響應速度、轉場體驗、交互組件，都很相似原生APP體驗。由於用戶體驗的極大提高，讓團隊更加堅決地選擇小程序來迭代產品。

基於微信小程序的大型應用發佈流程

「JDC-多終端研發部」有兩個業務團隊，兩個基礎服務團隊。目前兩個業務團隊內都有小程序團隊，分別來服務相關業務的小程序體驗。微信內的九宮格入口就算是京東的「大號」，是服務京東集團全平臺業務的微信小程序。

微信小程序做爲一個較新的一個開發平臺，團隊在設置團隊分工的時候，小程序團隊附屬於一個前端業務團隊之下。長期來判斷，是否須要獨立的小程序團隊，基於小程序自己的業務複雜度來判斷相關團隊的獨立性。

微信小程序的開發不難，能夠較輕鬆地上手。可是京東商城的總體業務十分複雜，爲了代碼解耦、提升系統魯棒性和開發效率，咱們分別開發了一個頁面基類和一個組件基類。在組件化開發方面，早期基於 template 的組件化方案開發體驗較差，組件的引用略顯囉嗦，組件間嵌套還可能引發問題。而在微信團隊提供了新的組件化規範後，各類痛點都獲得改善。另外在工程化方面，咱們配置了一套 Gulp 流程，爲開發時的各個階段提供快速有效的自動化服務。

需求 ⇒ 開發 ⇒ 測試 ⇒ 部署

京東購物小程序的發版流程已經很是接近 App 的發版流程，而審覈發佈的流程依賴着微信小程序團隊的反饋速度，從 1-2 小時到半天不等。

在測試這一環節，目前微信小程序還沒有給出完善的測試工具，沒法編寫UI層面的測試用例。因此每次版本迭代，都須要人工介入測試。

自動化測試:每一次代碼的 commit ，都會運行爲小程序定製的 lint 來檢測代碼是否符合規範。

人工測試：具體到業務邏輯則須要測試同窗逐步進行驗證。

而在預部署環節當中，有 Gulp 流程專門用於生成預覽版及預覽二維碼，和對代碼進行打包壓縮並上傳等工做。

商城的業務邏輯在移動 Web 端已經十分完善，所以業務層面的開發難度不大，更多的問題在於平滑遷移到小程序的平臺上，繞開小程序的限制和問題。其中比較大的幾個挑戰包括：包大小的限制、跳轉層級限制以及請求併發數不可超過 10 個請求的限制。

爲了突破請求限制，咱們專門開發了一套網關，使用一套經過websocket標準的數據流來支持數據傳輸。網關主要的功能是對請求進行轉發，使用與原 web 端共用的後臺接口來提供數據服務。

當遇到長列表場景時，小程序渲染性能會出現瓶頸，滾動時出現明顯的卡頓。最近微信針對這個問題專門開發了一套解決方案，但願可以有所改善。

另外，目前的組件化方案依然未能提供最早進、最舒暢的開發體驗，因此咱們開發了Taro框架來進行改進。而微信小程序推出的插件化方案各方面的限制仍是比較多，通過開發、測試以後未達預期，尚不能大規模使用。

而在基於 618 的服務中，各業務側會對多個小程序頁面進行氛圍改造，而對於和Web端共用的營銷賣場頁面，則是使用H5開發。此外，咱們還準備了諸如接口容災、數據兜底等工做，避免出現頁面不可用的狀況。

京東購物小程序迎合 618 開發了各類推廣活動，例如這是團隊開發的一個禮包功能，經過讓用戶分享轉發到微信羣來傳播，達到讓消費者領取禮券和推廣 618 大促活動的效果。

小程序業務的統一開發框架「Taro」

Taro 是由凹凸實驗室打造的一套遵循React語法規範的多端統一開發框架。李偉濤，餘澈、陳攀、陳嘉健等都是主導推動Taro這個開源項目的主力成員。

他們的初期目標實際上是解決小程序開發中的一些痛點，但在後來的業務開發中，逐漸發現了同個業務同時開發微信小程序、網站、 React Native 等多個終端的切實需求，因此 Taro 就演變成了一個多端統一開發框架。

Taro 在編碼語法上遵循了 React 的語法規範，同時提供了現代化的前端工程化支持，這讓項目的開發效率與開發體驗有了極大的提高。目前Taro已經完整支持了小程序和 Web 端的開發轉換，即將發佈支持React Native端的轉換，而快應用、其餘小程序等的轉換支持也在後續的開發規劃中。

Taro 曾經進行了一次比較大的重構，一開始的 Taro 是使用小程序端組件化使用 Template 來實現的，可是有不少坑和問題。最後，Taro 團隊基於小程序原生方案來從新實現組件化功能，得力於新的組件化方案，目前 Taro 的問題已經大幅減小，Taro 在小程序開發上也更加穩定了。

而在大型的重構同時，咱們還須要不斷跟進社區裏提出的問題和反饋，於是就要不斷加班加點地去完成，雖然有時會以爲很累，可是技術上的成就感以及能幫助到更多開發者時的知足感仍是不斷地激勵着咱們前進。如今 Taro 的核心有 8 名開發者在維護，還有一些同事會抽空幫忙完善功能。

目前 Taro 已開源了近兩個月，在 GitHub 上有 6600 多個 Star，同時已經處理近 300 個 Issue ，還有 100 多個在等待反饋與優化。公司內、外都有十多個項目已經在使用 Taro 了。

接下來，團隊會繼續以 Taro 爲中心完善整個 Taro 生態的建設，例如兼容小程序第三方組件庫，支持整個小程序生態，以及即將發佈的 Taro 多端 UI 庫來助力 Taro 的多端開發。

文檔極其優秀的微信小程序 期待更加開放

除了微信，百度、阿里都在推出相似的小程序解決方案，整個業界都在重視各個細分場景的產品體驗。目前來看，小程序更適用於一些簡單應用的業務場景， 經過較低的開發成本換取較好的產品體驗，而 app 則更適用於複雜業務功能的載體。

微信的優點是社交關係，於是一切依賴着社交關係的應用場景及傳播需求，微信小程序的體驗和效果都更佳。

另一方面，微信普及了掃碼體驗，經過這個交互模式打通線下線上的體驗。可是，微信小程序爲了保證極致的體驗和速度，它同時限制了業務複雜性，能夠支持的服務較爲單一，缺少持續吸引力。

JDC-多終端研發部甚至表示，指望微信小程序整個平臺更加開放，融入社區更多成熟的能力，讓開發者能作的更多。

團隊的成員還表示，「微信小程序的文檔很是優秀，它是咱們心目中中文文檔寫的最好的那一個。」他們表示微信小程序文檔的基礎知識與 Web 開發相近，一個合格的開發者大概學習 2 周左右的時間便可上手，經過文檔就能夠快速進行小程序開發。

其實微信小程序與 Web 在業務需求上很類似，都以用戶需求爲主，但業務團隊相對獨立。從開發速度上，微信小程序和以前 Web 開發最大的差別是，須要增長版本的規劃和發版流程。目前，團隊每週固定有 2 次的發版流程，經過微信小程序平臺發佈。

固然從體驗上來講，微信小程序的體驗明顯優於網頁。其次，小程序具有完整的開放能力，加上微信社交關係鏈和生態的巨大優點，必然會成爲市場追捧的方向。

微信團隊的持續更新和發力，也讓企業及開發者對這個開發平臺更有信心。隨着更多框架性能層面和開發效率、用戶體驗的優化，開放能力的不斷完善，平臺對比 Web 端的優點愈發明顯，而且抹平多終端適配及碎片化的開發成本。

咱們團隊還在不一樣層面上比較了小程序和快應用、app、網頁、PWA 的優劣性。

不過微信小程序在開發體驗上仍能夠提升，好比工具、語言，還有提高自動化測試工做的支持以及更好的組件化支持。

目前咱們的每一次發佈都「心驚膽戰」，測試用例都是手動完成的，讓版本發佈有必定的風險。咱們但願出現一套完整的自動化測試工具，免去人工驗證的流程。

固然，微信小程序常常發佈的新能力，也讓咱們對其充滿了信心。

瞭解更多微信小程序開發者內容，歡迎掃碼關注微信公衆號——微信極客WeGeek