[QCon】Flutter+Dart 三端一體化開發
作者：閒魚技術-新新
QCon2018上海全球軟體開發大會上，來自阿里巴巴閒魚的新新給大家做了主題是“Flutter & Dart三端一體化開發”的精彩演講，以三端一體化的“佈道者”，展示在後移動網際網路時代的一種新開發模式，給聽眾帶來進一步提高移動應用開發效率的思路。
本次分享從“懶”和“效率”引入，分析Flutter的特點，簡單介紹閒魚通過Flutter統一iOS和Android兩端的移動應用開發的經歷。然後提出Dart Server“膠水層”的概念，“膠水層”是由客戶端開發做簡單資料拼裝的一個“薄”服務端，用Dart統一語言，再通過開發All-in-IDE（建立介面框架、快速隔離部署、本地測試、無衝突排程等）統一開發模式，讓寫服務端“膠水層”的體驗和寫客戶端基本一致，並嘗試通過服務集合和程式碼生成等方式，不斷降低“膠水層”的學習成本，最後實現三端一體化開發的思考和實踐經歷。
現場聽眾非常踴躍熱情，有不少同學對Flutter的運用前景比較樂觀，並表示引入Flutter開發的強烈慾望。有同學興奮的說，他們之前8個月的開發時間，選擇Flutter以後降成1.5個月，效率不僅僅是成倍的提升。另外有不少同學對Dart“膠水層”服務端和三端一體化開發這個新模式表示興趣。觀眾提問主要圍繞以下幾個點：
（1）閒魚在Flutter的經驗：包括混合開發的問題；包大小優化；複用現有的Native基礎元件；複雜的動畫；怎樣連線OpenGL；資料流怎麼管理等等。
（2）Dart Server的一些疑問：和NodeJS的方案比較、Dart Server開發階段用Hot Reload快速部署，上線後代碼怎麼管理。
（3）閒魚一些技術的開源計劃：Dart Server Framework和工具集開源是否有具體日程，UI2Code是否有開源的計劃。
從提問反饋情況我們也獲得下一步思考方向：
Flutter再進一步深入要做什麼？
膠水層是否從微服務到Serverless化？
Dart Server Framework開源什麼，哪一些是適合閒魚自己的業務，哪一些是通用的？
分享一些內容摘要：
在閒魚APP中，我們通過Flutter混合開發，實現商品詳情頁和釋出頁，從體驗來看，Flutter表現出非常接近Native的流暢性和互動效果。
在通過Flutter統一iOS和Android的兩端開發後，我們想嘗試進一步提高開發效率，提出一個人寫三端的想法，但是客戶端寫服務端會有一些問題：
（1）客戶端的開發方式和思維方式和服務端開發有很多不同點。客戶端是本地程式，服務端是分散式系統；客戶端開發注重細節和檢驗，服務端關注效能和容災。
（2）服務端的部署很麻煩，機器很多，運維也很麻煩，客戶端同學很難掌握。
（3）這種做法純粹給客戶端同學加工作量，影響需求進度。
我們想讓客戶端同學簡單的實現服務介面，像搭樂高積木一樣方便。
由此提出“膠水層”的概念，在客戶端和服務端中間加一層“膠水層”，它主要做的事情是呼叫後端服務，拼裝客戶端所需要的資料。
客戶端是Flutter，用的是Dart語言，為了讓客戶端同學快速上手，“膠水層”優先考慮Dart。
Dart Server實現“膠水層”業務邏輯，框架提供了高效能的HTTP服務、服務路由、程式碼隔離、動態部署等基礎服務。通過C++擴充套件或Service Mesh接入原有的JAVA中介軟體。而原有的後端服務下沉為領域服務，每個具體的領域由固定的服務端同學維護。
需要注意“膠水層多變、領域層少變”的原則，才能真正的提高開發效率。
我們選用閒魚流量最大的商品詳情介面在線上實驗，執行三個多月，沒任何線上問題，記憶體佔用穩定。RT和最大QPS基本和原有JAVA服務持平。
只是統一前後端語言是不夠的，怎麼讓Flutter開發同學快速上手。
（1）能否像寫客戶端程式一樣寫服務端膠水層？做到本地開發、執行、除錯。
All-IN-IDE,通過IDE Plugins，支援一鍵建立介面框架，快速部署原生代碼到服務端，在開發機器直接呼叫遠端服務並把結果和日誌同步回來……
（2）怎樣才能快速的找到所需要的服務？能否像呼叫本地方法一樣呼叫後端服務？
在服務介面和方法加註解，通過註解生成文件，可以在文件平臺上搜索查詢。
通過自己實現的JAVA2Dart的程式碼轉換工具，可以把一個定義了介面和資料結構的Jar包轉成Dart程式碼，同步也生成服務註冊和發現的程式碼。
（3）在寫程式碼的時候基本能否不考慮埋運維資料？
在程式碼生成中預埋了日誌和降級開關。
移級部署是通過Dart Isolate來實現。
通過不同技術棧的同學實驗。
沒有任何Dart基礎的Java後端開發和有Flutter基礎的移動應用開發同學，基本都可以在1小時內搭好環境並把Hello World寫好部署，最多半天可以寫一個帶有真正業務涵義的介面上線。
因為Dart Server是單執行緒非同步開發模型，很容易寫出高效能的併發請求程式碼。
客戶端同學對後端服務理解要一定的過程，所以介面設計清晰很重要。
三端一體化開發的模式，一個人寫了iOS、Android和它們所依賴的服務介面。
（1）以前在客戶端拿到後端實現協議資料後，一般還要做從資料模型到檢視模型的轉換，現在不需要了，可以定義符合客戶端展示需求的資料結構，在膠水層實現資料填充。由於前後端都是Dart語言，定義的資料結構程式碼是通用的，不存在相容問題，不需要引入第三方協議定義語言。
（2）原來在客戶端寫的一些業務邏輯，可以根據需要轉移到膠水層。
（3）Flutter實現iOS和Android兩端UI。可以通過動態Widget管理框架，配合膠水層下發模板資料，讓Flutter有一定的UI動態性。
三端一體化開發的一些好處：
（1）減少前後端溝通成本，減少因協同引起的時間等待成本。
（2）開發更加靈活，部分邏輯在服務端實現讓客戶端擴充套件性更好。
（3）一體化開發、全鏈路日誌、無衝突除錯，讓錯誤排查成本降低。
（4）可以更關注領域服務的效能、通用性等問題。
未來可以通過機器學習做到UI2Flutter，客戶端開發只需要寫互動邏輯和膠水層資料拼裝，做到開發半自動化。
加入閒魚，一起玩些“酷”的
閒魚技術團隊是一隻短小精悍的工程技術團隊。我們不僅關注於業務問題的有效解決，同時我們在推動打破技術棧分工限制（android/iOS/Html5/Server 程式設計模型和語言的統一）、計算機視覺技術在移動終端上的前沿實踐工作。作為閒魚技術團隊的軟體工程師，您有機會去展示您所有的才能和勇氣，在整個產品的演進和使用者問題解決中證明技術發展是改變生活方式的動力。
**簡歷投遞：[email protected]