移動開發漫談
移動開發在IT開發行業算是一個比較年輕的門類，2008年蘋果公司才發布了iOS SDK，2009年谷歌發布了Android SDK，分別基于Objective-C和Java兩門比較古老的語言開發，后來雙方陸續推出了swift和kotlin兩門現代語言來普及自己的優勢。在原生開發的領域之外，也有各種各樣的跨平臺開發技術層出不窮。下面我們簡單聊一下各自的特點。
webview
第一種解決方案是基于JavaScript and WebViews來實現的，其中的代表為PhoneGap, Apache Cordova，他們將項目內需要動態展示的頁面（新聞、商品之類）通過原生的webview控件來加載出來，這樣一來，這個模塊不需要經過發版，審核一個比較漫長的過程也可以實現一次代碼，兩個平臺運行。
在iOS?SDK和Android SDK的幫助下，我們可以訪問該平臺下的所有功能。但是webview不同，本質上仍然是運行在一個受限的沙盒環境，對于藍牙，通訊等必須由該平臺才能完成的功能，通常我們需要借助bridge來實現，webview 通過 jsbridge 這個橋梁來實現js和原生之間的通訊，開放相應的接口，實現上下文的切換。參照下圖
但是由于多了一層通訊和本身的問題，webview的解決方案在性能方面并沒有太出色。對于復雜的界面和動畫，都不是很理想。
RN 和 Weex
webview的解決方案將業務和繪制都交給了自己來解決再加上有限的環境，所以很多場景不堪重任，于是出現了js開發+原生渲染的解決方案。
React Native 是Facebook于2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，支持iOS和Android兩個平臺。RN利用js構建在iOS和安卓上運行的應用，它使用與React相同的設計，以數據變化驅動ui變化，通過js core 將虛擬DOM映射為安卓和iOS上原生的控件，相對于webview來說，RN是原生控件渲染，所以在性能上的表現要好很多（rn是react在原生平臺的衍生產物，同樣的flutter也借鑒了react很多東西，在很多思想上有很多相似的地方）。
weex是國內阿里巴巴退出的跨平臺開發解決方案，也是用js開發+原生渲染，但是生態環境和rn比還有些差距，和rn最大的地方在于語法層面上的不同。
這部分的通訊流參照下圖
總的來說，這種方式已經很成熟了，采用web開發技術棧，前端人員好上手。原生渲染，性能上明顯提升。有熱更新動態化技術解決方案。但是渲染上需要和原生通信不斷拖動的場景下仍然有時候會出現卡頓等不好的體驗，
Flutter
Flutter采用了自繪UI+原生的方式來解決了跨平臺開發方案，它沒有用腳本語言而是采用了不同的方案，通過編譯語言Dart加上自繪引擎來避免了繪制UI時候的頻繁通信（解決了UI的通信，如果需要平臺下的其他能力仍然需要通信）Dart編譯成本平臺代碼，無需頻繁切換上下文，避免了性能消耗，縮短了啟動時間。我們下面著重說明一下Flutter。
Flutter簡介
flutter是什么？Flutter是Google發布的一個用于創建跨平臺、高性能的移動應用程序SDK。他包括了一個現代的響應式框架、一個2D渲染引擎、現成的widget和開發工具，通過這些我們可以快速的實現構建，調試，還原一個精致的應用。我們可以書寫一份精簡的代碼，同時開發iOS和Android，通過大量的多是多樣的widget組合構建Material Design和Cupertino風格的APP。
跨平臺自繪
我們上面提到過，flutterUI繪制方面沒有采用原生的控件，而是通過了自家的跨平臺2D渲染引擎skia來繪制UI，直接調用的系統界別的api，避免了大量的上下文切換通信帶來的性能損耗問題，也可以避免對原生控件的依賴。
開發語言Dart
Dart也是谷歌自家的語言，Flutter采用了Dart來開發而不是用js。Dart是一門現代語言，你可以看到很多現代語言擁有的優點，簡單易學，易于上手。更重要的是Dart支持開發階段的的JIT和發包時候的AOT，在開發周期時候的熱重載特點可以大量提高你在開發時候的效率，而發包時候，可以通過AOT生成高效的ARM代碼以保證應用性能，想對應的js就不能實現。
Dart語法就參考官網了，例如可選類型、閉包、庫、詞法作用域、頂層函數、命名參數、async/await等等。一些優秀的設計都有，話說你從swift1學到了swift4還有什么不易學呢哈哈，開個玩笑。
widget
這個概念在flutter里很重要很重要！可以說理解了widget對于你書寫flutter有著至關重要的作用。在flutter的世界里，萬物皆widget。
與其他將視圖、控制器、布局和其他屬性分離的框架不同，Flutter具有一致的統一對象模型：widget。widget本身就分很多種，有布局類的，基礎控件類的，功能性的，手勢，幫助類的等等等等，可以說凡是你看到的都是widget。
Widget根據布局形成一個層次結構。每個widget嵌入其中，并繼承其父項的屬性。沒有單獨的“應用程序”對象，相反，根widget扮演著這個角色。你可以想著整個應用，每一個頁面都是一個widget套著一個widget。在flutter中，自定義widget的時候相比原生開發來講并不多，更多時候我們是將不同的widget組合起來來拼成我們想要的模樣。
Flutter結構
我們可以看到分為Framework 和Engine兩層。
Engine層面是有c++寫的，其中包括了 Skia引擎、Dart運行時、文字排版引擎等。在代碼調用?dart:ui庫時，調用最終會走到Engine層，然后實現真正的繪制邏輯。
通常我們用的更多的是Framework層面的東西，這是由Dart實現的。從高到底，依次深入，我們可以用更少的代碼來實現更多的事情，也可以深入到下面自繪view。
這篇文章就聊到這里，接下來簡單對比下flutter和iOS里面一些概念的對比。
