跨平臺APP開發框架flutter

flutter實踐

數加產品線完整的閉環有一個面向用戶的APP端，因爲公司沒有native app開發，因此選用了跨平臺技術開發，任務也天然交給了前端。

技術選型

因爲你們都沒有APP開發的經驗，技術選型顯得尤其重要。本着用新不用舊的原則，技術團隊對flutter這個極其新的東西產生了濃厚的興趣。通過一系列調研，對比react native，如下即是差別之處。

基礎特性	RN	flutter
語言	JS	Dart
渲染機制	經過JS代碼調用原生UI渲染界面，效率要慢一些，UI統一性也並不能作到徹底統一，只能犧牲部分設計	框架自帶UI體系，直接與更底層的skia交互，理論上效率要更高，而且能保證在不一樣平臺上的一致表現
生態	有大量的開源組件以及成熟的解決辦法	剛開始興起，有一些高質量的開源組件，但數量很少
上手難度	簡單	對於前端工程師須要另學一門語言，佈局方式也和CSS大相徑庭，上手偏難

經過上述分析能夠得知flutter做爲一個新興框架，其底層機制比RN更爲優秀，可是因爲處於起步階段，生態上來講是比不上RN的，再次本着程序員對未知事物充滿好奇的心，你們一致選擇flutter。

項目搭建

有對新事物的熱情就必然要有采坑的準備，搭建項目時問題就層出不窮，iOS端cocoapods下了一天都沒下下來，最終解決辦法居然是多試幾回...接下來使用安卓模擬器控制檯報錯不斷，緣由是不能使用最新的安卓Q版本，原來flutter在GitHub上幾千個issue是有道理的。雖然困難重重，可是花了一週時間終於把項目建好了，谷歌仍是給了開發者一條活路。

編碼體驗

在通讀了一遍Dart文檔加上flutter教程的基礎上，本覺得按照知乎大神們倆小時上手開發的速度應該能夠立刻高效的進行編碼了，然而對着UI設計圖，腦子空空如也，徹底不知道該如何下手，無奈的又邊翻閱文檔邊看技術博客一點一點把頁面磊出來了，開始的開發速度簡直不忍直視。

1. 首先的難點在於flutter整個的佈局規則已經大改了，須要理解不少新的概念，溢出，堆疊，邊界約束所有都和CSS不同。就拿溢出舉例，CSS溢出是天然溢出，父元素樣式決定子元素溢出表現，到flutter那是直接報錯！是的，你沒看錯，徹底不容許溢出，要先考慮內容是否過長來使用不同的盒子。更別說還有一堆的概念好比長寬自動伸縮方式，對齊方式，堆疊狀況下佔滿寬度的盒子等等，如今想起來都是一頭的包。
2. 還有一個比較典型的就是flutter也是組件化理念，狀態控制視圖，可是組件之間經過類來進行蹩腳的通訊實在是感受麻煩，遠沒有react或者Vue簡單直觀。
3. 各類基礎widget的設計紛繁雜亂，有的使用難度極高，到如今我還不明白ListView的builder模式是怎麼工做的。

打包部署

本覺得在構建項目時遇到的問題在部署時應該會重現，但實際打包過程出奇的流暢，只有在打IOS包的時候因爲其平臺的安全性而顯得有點步驟冗長以外，基本沒有別的問題，成功的能在雙端真機上運行release包，項目開發到最後也是終於鬆了口氣。

flutter的優勢

雖然對於前端程序員來講編碼體驗很糟糕，可是不得不說這個糟糕體驗是在快速上手的前提下，深刻理解加上大量的代碼經驗我相信一樣能讓flutter工程師高效的進行開發。flutter也有不少不能否認的閃光點的，在release環境下，速度和流暢度都有着很是優良的體驗，而且整個項目作下來，幾乎沒有遇到過雙端UI表現不一致的狀況，谷歌這個承諾是達到了，不用爲平臺作特殊兼容對於以前受IE荼毒的前端工程師來講無疑是幸福愉悅的。

---

以上就是flutter開發的實踐體驗，總得來講flutter是一個優秀的框架，性能以及UI表現值得確定，可是仍是但願谷歌可以多照顧照顧開發者，你們時間都很寶貴，對於一個框架來講易用性也是一個很重要的因素。