先說明這邊指的MVC概念，如果是Web開發者，View的部分是獨立出來的html然後再由javascript這邊自己去劃分Model跟Controller，而Android這邊也是有將View獨立出一個xml的概念。
這樣個區分方式最大的優點就是可以讓UI設計跟程式開發分工合作，UI設計將定案的設計稿寫成html跟css，後續再交給程式設計師串資料或加動畫，也是很美好的願景。
但現實上我看到的狀況，大部分的UI設計師都只是平面設計，甚至對Web跟App沒什麼概念，他們只負責聽PM的規劃做設計稿，然後幫程式設計師切圖，UI的layout到資料串接、業務邏輯...等，都是程式設計師一手包辦，只有少部分有sense的公司會把UI的責任真正交還給UI設計，當然這很大的部分還是跟人才訓練有關。
另一方面在Android的好處還有透過xml去layout可以透過Perview看到靜態的畫面，加快調整的速度(跟用程式碼組View相比)，再來xml就像是UI模板，在其他的功能如果遇到一樣的layout就可以重複使用。
Flutter這邊，因為靈感是來自於React，所以也是放棄MVC模式用程式碼的方式去組UI(也有人說這是DSL[Domain-specific language])，但如果React覺得這種方式好為什麼又有JSX呢?如果覺得用程式碼組UI方式不好那為何又採用那種方式呢?這邊我就不太懂了。
當時覺得React跟React Native的抽象UI層的概念很棒，但遲遲不進去玩的點就是因為是使用JavaScript這個語言，跟有一些感覺是為了新潮而新潮的東西ex:Flux(我還無法體會單向資料流的美好)，當然這些有可能是因為使用JavaScript的關係所以需要用這樣的東西來做專案會比較好維護。
記得之前看過網友說，web界花了十幾年的時間才讓view跟程式分開，而React只花了一年就把它打回原形了，為什麼採用這樣的模式？我會覺得以框架開發者的角度，這樣做一開始的時候會輕鬆很多，但實際上的原因可能就只有作者才知道了，看到一些資訊是因為React是移植Facebook內部的另外一套框架而來，所以可能是那套框架就是這樣設計的吧。
而Flutter是使用Dart所以就感受得到優點了，不需要為了第二套，用在UI上的語言再去維護另外一套工具。印象中很久以前Android的layout既沒有靜態分析也沒有autocomplete，是後來才慢慢補上，讓開發愈來愈方便，而Dart本身就有強大的靜態分析與autocomplete，所以直接採用Dart來組UI，就能直接享受Dart累積下來的甜美果實，而hot reload不但可以取代Android Perview這種先看靜態畫面的能力，甚至更強大，保留View原先的狀態，並在很短的時間改變build到機器上app的畫面(比Android Instant Run更快更強大)，就算沒有Perview也沒關係，本來是這麼想，但後來flutter還是推出了 Perview，一樣是可以讓你透過一些設定，看到元件的靜態排版，這邊這樣搞，猜想應該還是做給UI設計師用的，可以讓他們自己有簡單的工具看到元件的排版。
最後，也許這樣的架構是觀念上的改變，從MVC這種相對大的概念轉變為widget(component)這樣相對小的概念也不一定，也有人說這樣子的模式，用起來更簡單、更靈活，可以簡化開發所花的時間，觀念上從見山是山，見山不是山，見山還是山，有的時候好與不好，端看個人的見解與應用了。
這樣個區分方式最大的優點就是可以讓UI設計跟程式開發分工合作，UI設計將定案的設計稿寫成html跟css，後續再交給程式設計師串資料或加動畫，也是很美好的願景。
但現實上我看到的狀況，大部分的UI設計師都只是平面設計，甚至對Web跟App沒什麼概念，他們只負責聽PM的規劃做設計稿，然後幫程式設計師切圖，UI的layout到資料串接、業務邏輯...等，都是程式設計師一手包辦，只有少部分有sense的公司會把UI的責任真正交還給UI設計，當然這很大的部分還是跟人才訓練有關。
另一方面在Android的好處還有透過xml去layout可以透過Perview看到靜態的畫面，加快調整的速度(跟用程式碼組View相比)，再來xml就像是UI模板，在其他的功能如果遇到一樣的layout就可以重複使用。
 |
| Android layout的方式 |
Flutter這邊，因為靈感是來自於React，所以也是放棄MVC模式用程式碼的方式去組UI(也有人說這是DSL[Domain-specific language])，但如果React覺得這種方式好為什麼又有JSX呢?如果覺得用程式碼組UI方式不好那為何又採用那種方式呢?這邊我就不太懂了。
當時覺得React跟React Native的抽象UI層的概念很棒，但遲遲不進去玩的點就是因為是使用JavaScript這個語言，跟有一些感覺是為了新潮而新潮的東西ex:Flux(我還無法體會單向資料流的美好)，當然這些有可能是因為使用JavaScript的關係所以需要用這樣的東西來做專案會比較好維護。
記得之前看過網友說，web界花了十幾年的時間才讓view跟程式分開，而React只花了一年就把它打回原形了，為什麼採用這樣的模式？我會覺得以框架開發者的角度，這樣做一開始的時候會輕鬆很多，但實際上的原因可能就只有作者才知道了，看到一些資訊是因為React是移植Facebook內部的另外一套框架而來，所以可能是那套框架就是這樣設計的吧。
 |
| flutter layout的方式 |
而Flutter是使用Dart所以就感受得到優點了，不需要為了第二套，用在UI上的語言再去維護另外一套工具。印象中很久以前Android的layout既沒有靜態分析也沒有autocomplete，是後來才慢慢補上，讓開發愈來愈方便，而Dart本身就有強大的靜態分析與autocomplete，所以直接採用Dart來組UI，就能直接享受Dart累積下來的甜美果實，而hot reload不但可以取代Android Perview這種先看靜態畫面的能力，甚至更強大，保留View原先的狀態，並在很短的時間改變build到機器上app的畫面(比Android Instant Run更快更強大)，就算沒有Perview也沒關係，本來是這麼想，但後來flutter還是推出了 Perview，一樣是可以讓你透過一些設定，看到元件的靜態排版，這邊這樣搞，猜想應該還是做給UI設計師用的，可以讓他們自己有簡單的工具看到元件的排版。
最後，也許這樣的架構是觀念上的改變，從MVC這種相對大的概念轉變為widget(component)這樣相對小的概念也不一定，也有人說這樣子的模式，用起來更簡單、更靈活，可以簡化開發所花的時間，觀念上從見山是山，見山不是山，見山還是山，有的時候好與不好，端看個人的見解與應用了。
最後希望你帶走知識的同時，也能留下短短一兩句的心得與我們分享或是幫我們按下+1並分享到FB
留言
張貼留言
有什麼想法歡迎跟我們分享