DStack--基於flutter的混合開發框架

時間 2020-05-30

標籤 dstack 基於 flutter 混合開發框架简体版

原文原文鏈接

混合開發這項技術由來已久，目前市面上主流的有Hybird，ReactNative，Weex，Flutter等。其中，Flutter以他獨有的實現方式，優秀的性能，成爲近兩年最火的混合開發方案，咱們學而思網校1v1客戶端團隊也是比較早的開始了Flutter技術的研究，在學而思網校1v1家長端和學而思網校1v1教師端兩個App進行了大規模的實踐嘗試，由此也沉澱出了一套本身的混合方案DStack。android

爲何要有混合方案？git

學而思網校1v1家長端是個純Flutter工程，雖然用Flutter開發App能大幅度的提升人效，可是純Flutter工程仍是有些頁面須要用native來實現比較合適，好比說webView，視頻頁面等；
學而思網校1v1教師端是個有必定規模的原生App，只是部分模塊接入了Flutter來實現。

上述兩種狀況都存在native頁面和flutter頁面進行交互的行爲，當兩種頁面進行交互，好比，混合頁面之間隨意跳轉、頁面間數據傳遞、手勢滑動、內存資源控制、路由管理，這些都是須要解決的問題，基於此，咱們參考了官方的解決方案，和阿里閒魚團隊的flutter_boost框架等，針對咱們的業務和工程的具體狀況進行了DStack的方案選型和具體實現。github

1、DStack定義

DStack是什麼？web

學而思網校1V1客戶端團隊自研的，基於節點進行管理的，使用簡單，易於集成，性能優秀的混合開發框架。
目前框架已經在學而思網校家長端和教師端App上線，內存性能明顯提高，穩定性表現良好。DStack也給Flutter社區提供了混合棧管理的新思路，改變了固有的移動研發模式。api

2、DStack的實現和特色

什麼是混合棧？微信

當進行混合開發時，native頁面和flutter頁面依次打開時造成的棧結構，存在多種頁面類型，如下圖爲例

藍色方塊NA表明native頁面，橘色方塊F表明flutter頁面
DStack對標flutter_boost數據結構

咱們能夠看到，頁面棧結構存在native頁面和flutter頁面交替的狀況，關於如何處理這種不一樣頁面間打開關閉的場景，目前flutter社區開源的此類框架只有flutter_boost，flutter_boost是阿里閒魚團隊自研的Flutter混合開發棧管理框架，該項目在github有3.9k的star。架構

那看到這兒可能會有疑問，既然社區有成熟的解決方案，咱們爲何不用？主要有如下幾點緣由，一是flutter_boost的實現原理不適用於咱們的純Flutter工程，二是爲了咱們團隊後續的mac，ipad，pc端進行混合開發作準備，三是咱們對性能有很高要求，flutter_boost的實現方式決定了它沒有利用flutter技術的特性，性能方面不夠好。綜上所述，咱們須要自研適用性更強的混合開發框架DStack。框架

怎麼作？運維

1.基於「節點」進行混合棧管理

在DStack框架實現中，咱們把每一個native頁面和flutter頁面抽象成了「節點」數據結構，每一個頁面對應一個節點，節點有頁面的若干信息，經過節點這種數據結構，咱們就在實現底層屏蔽掉了頁面的具體類型差別。

基於節點有什麼好處？

抽象了具體的頁面實現，便於管理；
提供了更強大的擴展性。

NA表明native頁面，F表明flutter頁面，H表明Hybird頁面。

由於咱們已經把不一樣類型的頁面抽象成了「節點」，因此後續若是除了flutter頁面和native頁面，咱們甚至還能夠接入ReactNative頁面或者Hybird頁面。

2.肯定節點與頁面行爲的關係

圖片中的pop表示返回上一個頁面，popTo表示返回指定頁面，popToRoot表示返回根頁面，popSkip表示返回指定的模塊，如圖就是把「登陸」模塊的全部頁面都返回。

每一個頁面返回和打開，都對應一次的節點記錄，用戶的行爲觸發節點管理，節點管理驅動頁面跳轉(即棧管理)，考慮到Android和 iOS實現的差別性，節點管理放在了native側處理。