凹凸實驗室：支撐數千萬消費者的小程序開發實踐

時間 2019-11-16

標籤凹凸實驗室支撐千萬消費者程序開發實踐简体版

原文原文鏈接

做爲第一批發布的小程序、同時也是你們最熟悉的微信小程序之一，京東購物小程序天天須要支持數千萬的消費者。掘金特地邀請到京東購物小程序背後的一支開發團隊 —— 凹凸實驗室進行專訪，與你們聊聊京東購物小程序的開發實踐，以及對小程序將來發展的見解。前端

團隊介紹

掘金：先簡單介紹一下凹凸實驗室的團隊狀況？

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

掘金：微信小程序開發在團隊內是如何分工的？

凹凸實驗室： 團隊在設置分工的時候，考慮到微信小程序是一個較新的開發平臺，因此小程序開發附屬於前端業務團隊之下。長期來看，是否須要獨立的小程序團隊，基於小程序自己的業務複雜度來判斷相關團隊的獨立性。小程序

其實，在小程序出現以前，京東微信入口已有一個獨立的團隊來負責這個購物平臺的運營工做。後來有了小程序，業務團隊但願基於小程序提供更好的體驗，於是相關團隊就進行了一次「小程序化」。在小程序發佈之初，團隊及時捕獲到小程序的體驗價值，並進行一系列技術預研。同時，咱們也迅速彙集 10 人的項目小組，經過一個多月的封閉開發，京東購物小程序趕在第一批小程序發佈。後端

開發實踐與挑戰

掘金：京東商城業務的技術架構是怎樣的？

凹凸實驗室： 京東商城的總體業務十分複雜，爲了代碼解耦、提升系統魯棒性和開發效率，咱們分別開發了一個頁面基類和一個組件基類。在組件化開發方面，早期基於 template 的組件化方案開發體驗較差，組件的引用略顯囉嗦，組件間嵌套還可能引發問題。而在微信團隊提供了新的組件化規範後，各類痛點都獲得改善。微信小程序

另外在工程化方面，咱們配置了一套 Gulp 流程，爲開發時的各個階段提供快速有效的自動化服務。微信

掘金：開發小程序時遇到過哪些挑戰？

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

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

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

自動化測試：每一次代碼的 commit ，都會運行爲小程序定製的 lint 來檢測代碼是否符合規範
人工測試：具體到業務邏輯則須要測試同窗逐步進行驗證

但願微信小程序能夠繼續優化測試部分的開發體驗，早日能有一套完整的自動化測試工具。app

微信小程序開發生態

掘金：微信小程序是否會在微信生態裏取代 Web 端呢？

凹凸實驗室： 目前來看還很差說，主要看企業對於微信內應用的定位。首先，從體驗上來看，微信小程序的體驗明顯優於網頁。其次，小程序具有完整的開放能力，加上微信社交關係鏈和生態的巨大優點，必然會成爲市場追捧的方向。隨着更多框架性能層面和開發效率、體驗的優化，開放能力不斷完善，業務迭代成本不斷下降，使得企業及開發者對此平臺愈來愈有信心。

掘金：如何比較微信小程序與 App、Web、PWA、快應用的優劣？

凹凸實驗室：

App vs. 小程序： App有多端平臺的適配問題，而小程序只須要開發一套便可天然跨平臺，並且只有一個應用發佈平臺，發版效率也快於 App。

Web vs. 小程序： 小程序從功能、體驗上皆優於 Web 體驗。

PWA vs. 小程序： PWA 須要對基礎業務作比較大的調整，並且中國的移動生態以 App 爲主，而國外的生態還以網頁信息爲基礎，這使得 PWA 更適用於國外市場。

快應用 vs. 小程序： 目前快應用的開發門檻較高，發佈流程繁瑣，且沒法實現跨系統。而小程序的持續更新，讓開發者更加信任這個開發平臺的後續發展。

掘金：如何看待微信小程序的將來？

凹凸實驗室： 目前百度、阿里都在推出相似的小程序解決方案，整個業界都在重視各個細分場景的產品體驗。但小程序仍然沒法替代 app，小程序有更好的開發體驗和使用體驗，而 app 則是支持比較複雜的業務功能的載體。

期待微信小程序整個平臺更加開放，融入社區更多已有的能力，讓開發者能作的更多。

Taro 的故事

「Taro - 爲提高多端開發效率而生」

掘金：最初爲何要開發 Taro？

凹凸實驗室： 一開始的目標是解決小程序開發中的一些痛點，後來在業務開發中，發現會同時開發 React Native、網站、微信小程序多個終端的切實需求。爲了提高多端開發效率，Taro 遵循了 React 的語法規範，已經完整支持了小程序和 Web 端體驗，即將發佈對 React Native 的支持，快應用的支持正在開發中，而其餘小程序，諸如百度智能小程序、支付寶小程序等也都在計劃之中。

掘金：開發 Taro 中有什麼有趣的故事？

凹凸實驗室： 近期，Taro 進行了一次比較大的重構，一開始的 Taro 組件化是使用 Template 來實現的，有不少坑和問題。現在，從新基於小程序原生方案來實現組件化功能，得力於新的組件化方案，目前 Taro 的問題已經大幅減小，Taro 在小程序開發上也更加穩定了。而在此次大型的重構同時，咱們還須要不斷解決社區裏提出的問題和反饋，於是就要不斷加班加點地去完成。如今 Taro 的核心有 8 名開發者在維護，還有一些同事會幫忙完善功能。

掘金：Taro 下一步的規劃是怎樣的？

凹凸實驗室： 團隊會繼續以 Taro 爲中心完善整個 Taro 生態的建設，例如兼容小程序第三方組件庫，支持整個小程序生態、完善 Taro 多端 UI 庫，輸出業務組件庫及電商黃金流程，並不斷支持更多的終端。

Taro 的核心開發者李偉濤會在掘金開發者大會 · 微信小程序專場，分享「用 React 開發小程序的探索之路」。

「我會在本次大會上圍繞小程序原生開發中的問題和痛點，與你分享 Taro 是如何基於 React 思想、編譯原理、社區既存方案去解決這些問題和通點。 Taro 又是如何從社區中汲取意見和反饋，不斷迭代、從頭重構以適應更多、更復雜的特性需求和業務需求的。聽完本次分享，你會從設計者的角度，更深刻的理解 Taro 的設計理念與實現方式。」