多端統一開發解決方案Taro的架構設計

多端統一開發解決方案Taro的架構設計

隨着小程序開發的熱度上升，小程序開發框架也層出不窮。但目前每一個小程序開發框架都會綁定一個專屬 DSL，如類 React 或者類 Vue。在一個框架內，開發者沒法根據團隊技術棧自由選擇 DSL，同時也沒法共享框架自己的生態與工具。

Taro 框架將各類語法的前端框架運行在小程序上，一個框架支持多 DSL 的實現探索，使得開發者可使用任意熱門框架 / 語法 / DSL 來編寫小程序應用，同時複用相關生態。

在即將於 12 月 20～21 日舉行的 GMTC 全球大前端技術大會（深圳站）上，京東高級前端開發工程師程帥老師將分享《小程序跨框架開發的探索與實踐》。InfoQ 在會前採訪了程帥老師，帶你們瞭解了凹凸實驗室開源的多端統一開發框架（Taro）的研發背景、業務類型以及解決方案。

 InfoQ：請您簡單介紹下本身與所負責的工做。

程帥：你們好，我是程帥，來自凹凸實驗室，主要負責部門研發工具的開發以及一些開源項目建設。

 InfoQ：多端統一開發解決方案（Taro）自開源以來，用戶愈來愈多，該框架的研發背景是？

程帥：Taro 的誕生，實際上是由於當時咱們支持的業務有小程序、H5 以及 APP，得同時維護三套代碼，所以咱們萌生一個想法「能不能就用一套代碼去實現各個端」。並且當時咱們正好在作類 React 的框架，整個部門的技術選型就轉向了 React 的陣營。後來，咱們就思考怎麼寫一套代碼編譯到各個端，因而就有了 Taro。

 InfoQ：Taro 在內部業務落地的過程當中遇到的最大的技術難點是什麼？又是怎麼解決的？

程帥：Taro 在內部落地的業務類型主要有兩種，一種是舊的業務，一種是新的業務。

舊的業務的核心在於穩定迭代，因此 Taro 應用到舊的業務中時，會先評估適合的場景和頁面，優先選擇多端差距小、迭代頻繁的頁面，而後將這些合適的場景或頁面剝離成獨立的 Taro 項目，再使用 Taro 對這部分頁面進行重構，這樣既保證了重構後的收益，又不會對整個項目的正常迭代形成影響。同時，咱們還針對剝離後的 Taro 項目定製了整套的自動化工做流程，從開發調試到 CI/CD 工具，儘量將 Taro 對原有項目的侵入性減小到最低，這樣在下降研發成本、提高研發效率的同時，還保證了項目的持續穩定迭代。

另外，針對舊的小程序項目想全面改形成 Taro 的，Taro 還提供了原生微信小程序轉 Taro 的功能。經過 taro convert 命令，能夠一鍵將原生微信小程序應用轉換爲 Taro 代碼，而後再對轉換後的 Taro 代碼用 React 的方式進行二次開發，或直接轉換爲多端應用。

而對於新的項目，最重要的是團隊的快速上手。Taro 的 DSL 選擇的是 JSX 語法，支持 TypeScript 、Redux/Mobx 、Sass/Less/Styleus 等生態，還有 ESlint 代碼校驗、語法提示、Taro Doctor 環境檢查等輔助開發的功能，所以熟悉 React 的開發人員上手基本毫無壓力。在後期持續迭代的過程當中，咱們完善了一系列複雜的 JSX 語法的支持，在 1.3 的版本中又支持了最新的 React Hooks 特性，這些努力都有效地保證了新項目的無縫接入。

而 Taro 跨框架開發特性的發佈，又將進一步擴大 Taro 框架的受衆羣體，保障 Taro 在更多業務的順利落地。

 InfoQ：Taro 如何將各類語法的前端框架運行在小程序上？

程帥：將各類語法的前端框架運行在小程序上，也就是經過 Taro 實現跨框架開發小程序，這是咱們即將發佈的重要特性。這個特性涉及到整個 Taro 的架構升級和項目大部分代碼的重構。

要想實現小程序的跨框架開發，咱們得先回到前端開發框架的本質。當前全部流行的前端框架，拋開使用和實現層面的差別，以及一系列兼容性和性能優化層面的考慮，最終都要回歸到 DOM 的操做上。也就是說，只要你可以在小程序實現框架所需的 DOM/BOM 的 API ，那就可以將這些前端框架運行在小程序上。而各端小程序處於安全等層面的考慮，都沒有把 DOM/BOM API 暴露出來，從而致使各類前端框架沒法直接在小程序上運行。

Taro 就是給基於小程序的運行時實現了一套 DOM/BOM 的 API，並將這一套 API 和小程序的渲染機制結合起來，從而實現了將各類語法的前端框架運行在小程序上。

固然，小程序的正常運行不只僅是 DOM 的渲染，還包括生命週期、路由、事件等一系列運行時的環境，這些都在 Taro 運行時進行了一一適配。

 InfoQ：您以爲 Taro 能幫助使用者解決什麼問題？Taro 接下來有沒有大的規劃？

程帥：Taro 能夠幫助開發者快速開發小程序，也能夠快速開發多端適配的應用。更重要的是，咱們有活躍的社區，遇到問題都能獲得及時解決。同時，Taro 還提供了龐大的研發生態，如 Taro 物料市場，它擁有豐富的開箱即用的物料，幫助開發人員快速構建多端應用。

如今小程序的開發狀況是，即便使用了 Taro，在實際工做中，咱們還須要接觸衆多不一樣的工具、系統，單純的 CLI 工具難以實現複雜流程的聚合，不利於項目的多人協做，項目交付標準也良莠不齊。爲此，咱們開發了一個可視化移動端研發解決方案，在下降使用門檻的同時，它也做爲一個載體，將開發調試、測試、打包 / 發佈、監控統計等一整套標準的工做流整合進來，下降門檻，提高人效。

 嘉賓介紹

程帥，京東高級前端開發工程師，曾做爲核心開發參與京東購物小程序開發，現做爲多端統一開發解決方案 Taro 的核心成員，主要負責小程序及 RN 端的適配開發。熱愛開源和分享，在前端工程化、性能優化以及跨端解決方案等方面有豐富的研究和積累。

 活動推薦

在即將到來的 GMTC 全球大前端技術大會（深圳站）上，程帥老師還會具體分享，Taro 在小程序跨框架開發的探索、新架構的適配與實現，帶你瞭解小程序開發框架的發展歷程、各類熱門框架的基本運行原理以及 Taro 的新架構設計，迅速掌握利用任意熱門框架 / 語法 / DSL 來編寫小程序的技能，同時複用相關生態。

除了程帥老師的分享，本次 GMTC 咱們還設置了小程序挑戰與應對、音視頻技術、Serverless 實踐、前端測試與安全、大前端工程化、Flutter 實戰、新興編程語言、團隊建設與管理等熱門技術專場。目前大會 9 折購票，點擊「閱讀原文」瞭解大會日程。有任何問題歡迎聯繫票務魚丸：13269078023（微信同號）