認識Flutter

更新

Flutter中文論壇 上線啦，包含你們各類踩坑心得，是學習交友的必備網站，歡迎你們註冊加入！

Flutter框架

Flutter框架，一言以蔽之就是可以使用一套相同的Dart語言代碼同時實現android和ios跨平臺應用的框架，同時兼備高性能和快速開發。

跨平臺框架

跨平臺應用的框架，眼下類似的輪子也有不少例如：Phonegap，Xamarin，大熱的react native，還有weex等等，這裏有一篇好文就比較詳盡的介紹了目前各類技術優缺點，包括這裏安利的Flutter框架（這貨以前叫Sky）傳送門。
目前比較流行的跨平臺技術主要有HTML5和react native（歡迎補充），雖然HTML5足夠靈活，可是移動端網頁的性能始終不如人意，用戶體驗不高，在不一樣瀏覽器下也有不一樣程度細微的差別；而react native恰好在性能和靈活性上達到了一個平衡，但對於只擼前端的同窗，要靈活運用這個框架，也有至關的難度。
假設你已經閱讀過上面的文章，Flutter有一個特色就是UI是自繪的並不依賴系統提供的控件，那跟瀏覽器有啥區別尼，沒錯你確實能夠把它當成一個簡化版的瀏覽器，剛纔文章也提到代碼組織有Chromium風格，我的粗略學習後分析，在某些概念上都跟Chromium一模一樣。
請看圖，來自官網的視頻：

來自Chromium,傳送門

上圖的Element能夠和下圖的div,p等對應起來，因此Element左邊Rectangle green就是咱們日常基於div＋css構建的組件，右邊Render Rectangle green 能夠和下圖 Render Object對應起來。Render Layer層上圖雖然沒有體現，但在框架代碼裏確實也有這樣的存在。

繼續深刻

好繼續接着說，自繪UI有好處也有弊端，好處就是可以最大限度在android和ios上統一UI，這樣就不單止在業務代碼上統一，用戶體驗也能統一（什麼？產品說要顯示出不一樣平臺的差別性，框架的開發者早就想到了，因此demo裏面也提供一鍵切換android和ios的示例）；弊端，沒有利用系統提供的組件，基本只能自力更生了，幸虧框架也提供了一套基礎組件，可以知足一些簡單的頁面需求，這些組件固然也是有坑的啦，畢竟沒有至關嚴謹的測試。
再說說框架的其餘方面，主要的開發語言就是Dart，Dart曾經有一個宏偉的目標就是取代JS，可是很惋惜失敗了，也漸漸消失在人們的記憶中，可是爲啥要挖出這樣非主流的語言做爲這個框架開發的主力語言，其實我也不知道爲啥，可能那羣大神不死心吧，明明那麼好的語言。不過尼，做爲目標替代JS的語言，Dart設計更加嚴謹（JS好像是十天就造出來的），從一開始時就考慮不少使用場景（瀏覽器，服務端，移動端），基本就像java同樣的泛用型語言（JS是後天不停加buff），因此能構建更爲穩定可靠的應用。對於前端和android的同窗，這門語言的學習成本其實並不高，大概一兩週就能掌握。
框架的開發體驗，框架是受到react的啓發，構建組件的代碼方式也有react的風格（前端的同窗看看），但這並非重點，重點是開發時支持hot reload（足矣），不過也有不足，並不支持jsx，UI比較複雜的話，代碼就太難看了，之後應該會有改進。

性能與兼容性

目前框架的性能，已經無限接近原生，這是我的的使用感覺，以後再補上視頻和體驗的demo。
兼容性方面，官網提到是android 4.1以上 和 ios8以上，這還須要進一步驗證

框架之外

再說說項目自己，是至關有節操的，應該並非玩票性質，我的觀察這項目有一段時間，開發者幾乎在不停持續的commit，每次跑demo都能看到比較明顯的改進（這也是讓我一直觀察的動力），提出的問題通常當天就有回覆（好像項目上還有1000多的問題仍是打開着，哈哈）可是這個項目真的關注度至關低，對比RN低的可憐。
好吧，爲啥今天才發文章安利，由於看到它終於支持Windows了（其實我也不知道他們啥時候搞出來），以前只能在mac，linux下體驗，如今也提供idea的插件，很是方便調試和開發（以前是atom，真的卡的不行）。

再水一下

我的認爲，若是你是前端，尚未接觸react native或者已經接觸過，都不妨體驗一下這個框架，另外研究這個框架的代碼也是頗有價值，框架已經把layout，paint，composite，事件如何傳遞的過程都呈現給咱們，這是咱們前端不多接觸到。So，最後固然還有一個安利，若是你對框架有興趣，請務必加入咱們的一個小羣qq:482462550。
若有錯漏，歡迎指正。