Flutter在騰訊在線教育上的實踐之路

隨着大前端技術的不斷髮展，跨平臺框架也在不斷更新中，Flutter將響應式視圖的優點帶到了移動應用程序。但Flutter做爲跨平臺SDK，如何更加高效友好的與Native和Web進行交互，是咱們一直須要思考的問題。

騰訊在線教育團隊是Flutter技術的踐行者之一。咱們在多款產品的手機端，Pad端嘗試Flutter技術。咱們深刻Flutter底層，優化內存首屏等基礎性能，嘗試Flutter For Web、動態更新，致力於將最好的體驗帶給用戶。本次TWeb大會，塗金林老師將介紹騰訊在線教育Flutter的開發實踐經歷，乾貨滿滿。下面咱們收集了部分粉絲比較關注的問題，讓金林老師幫咱們一一解惑，更多幹貨敬請期待TWeb大會《Flutter在騰訊企鵝輔導上的實踐之路》議題。

Q&A

1

Q:

請介紹下Flutter？跟APP原生開發以及其餘hybird方案對比，有什麼優點？

A:

Flutter是谷歌的移動UI框架，能夠快速的在iOS和Android上構建高質量的原生用戶界面。隨着Flutter生態的不斷完善，Flutter已經可以支持Web，Desktop及嵌入式開發。

相比與其餘Hybird方案，Flutter並無使用WebView、JavaScript解釋器或者系統平臺自帶的原生控件，而是有一套本身專屬的Widgets，界面開發使用Dart語言，底層渲染則是使用自身的高性能引擎來繪製。不只能夠保證iOS和Android平臺的UI一致性，並且能夠達到原生應用同樣的性能。

2

Q:

請介紹下騰訊在線教育的Flutter架構？

A:

騰訊在線教育Flutter實踐目前已應用於多個產品，同時包括iPhone、Android和iPad等多個平臺。平臺總體使用MJFlutter SDK快速接入。上層基於Flutter，封裝Toast、RefreshListView等通用組件。爲了增強與Native通訊的獨立和擴展性，中間通道層分爲專有和通用通道。專有通道爲頁面導航、數據請求等基礎功能提供交互支持，通用通道按模塊對業務數據進行分發。底層複用Native已有能網絡請求、存儲等功能，保證Flutter的快速接入和上線。

3

Q:

請分享下在實踐過程當中，遇到什麼樣的坑並如何解決？Flutter web是否能夠應用到生產環境中，效果如何？

A:

騰訊在線教育團隊近期在實現Flutter轉Web的能力，不少場景下使用到dart: io這個與Native交互的庫，這部分頁面的代碼沒法直接轉換成Web側代碼。Flutter For Web最終會將Dart代碼轉換成JavaScript，而後在瀏覽器中運行，網絡請求、Native通訊須要咱們從新實現。終端和Web同窗的通力合做，保證了咱們的實踐高效並且穩定。

目前Flutter For Web，官方並不推薦使用到生產環境中。但實際上，咱們以及公司的一些團隊已經開始部署Flutter For Web的相關技術及配套能力。

4

Q:

對於Flutter將來的展望

A:

Flutter做爲移動跨平臺的UI開發框架，這幾年已經變得煊赫一時。版本迭代快，功能完善全，社區支持高。Google官方每一年都會屢次推廣和宣傳Flutter技術，民間的分享交流也愈來愈多。相信在將來Flutter完善熱更新的能力，全面佈局Web、Desktop等多個平臺後，必將是一場偉大的革命。

TWeb前端大會購票

爲了讓更多前端愛好者參與這場精心準備的開發者大會，大會提供線下票和線上票兩種票型，還能夠關注官網，有更多精彩福利活動等着你們哦，機不可失，失再也不來。

> 線下票（現場）：

購買現場票的觀衆將能夠前往現場，得到與講師近距離接觸以及面對面交流的機會。

購票地址：

https://www.bagevent.com/event/6069372#website_moduleId_757725

• 可現場參加本次會議，得到與各位講師專家交流的機會；

• 全部分會場都可以參加，可自由選擇分會場不一樣的議題；

• 特點茶歇點心，互動小禮品等；