3
月4日凌晨
，Flut
terEngage活動以在線的方式舉行。整場活動內容豐富，精彩不斷，下面淘系技術專家就帶您回顧下這場年度Flutter技術的盛宴。
▐ Flutter2.0
整場活動中 ，最使人激動的就是 Flutter2.0 的發佈了。 那麼 Flutter2.0 主要帶來了哪些 新的特性呢？ javascript
一句話總結，Flutter2.0最大的變化是除了以前已經處於stable渠道的移動設備支持外，桌面和Web支持也正式宣佈進入stable渠道。 html
▐ Dart2.12
Dart 的高效編譯器能夠生成針對 x86&ARM 的機器碼，以及針對 Web 優化過的 JS 。 其普遍支持了各類目標 : 移動設備、桌面 PC 、後端應用以及更多。 web
Dart 提供的 HotReload 特性，支持快速的，可交互的開發體驗，不管是原生設備仍是 Web 應用均如此。 Dart 也提供豐富的對象用於應用開發，包括 Isolate 模型， async/await 併發處理，以及事件驅動的開發模式。 sql
Dart 的健全空安全類型系統能夠在編譯期捕獲錯誤，這一切高度可伸縮可信賴，並被用於支持大量的應用，如高度重要的 Google Ads ， Google Assistant ，運行長達長達十年以上 編程
健全的空安全是自從Dart2.0引入健全類型系統後，Dart語言的一大改進。空安全進一步加強了類型系統，使得開發者能夠去捕獲空錯誤，這也是應用崩潰的一大常見緣由。經過引入空安全機制，開發者能夠在開發期捕獲空錯誤，避免線上崩潰。 canvas
如下是健全空安全的幾大原則 後端
默認非空: 對於類型系統的根本性變化 瀏覽器
默認使用non-nullable
增量遷移到空安全
針對如下代碼，空安全將帶來顯著的機器碼減少 :
class Animal { int age = 0 ; } int getAge (Animal a ) return a.age; }
GooglePay包大小經過針對Flutter的優化大小下降了14%
針對不一樣的輸入，UTF8Decoder最快能夠加速20x
Dart FFI使得你能夠利用已有的C庫代碼，這樣不只提升了可移植性，也能夠在性能敏感的場景下充分利用高度調優的C代碼。Dart2.12中，FFI已經脫離beta階段，被認爲是stable，可線上使用。並新增瞭如下特性。
類型別名
三相移位操做符
通用元信息註解
靜態元編程
▐ Web
FlutterWeb正式進入stable渠道。隨着這一初始stable的發佈，已有Flutter代碼Web平臺支持將進入一個新的階段，換句話說，當你使用Flutter2.0建立App時，Web只是一個新增的設備目標。
藉助Web平臺的諸多能力，Flutter構建了可用於富交互Web應用的基礎。Flutter For Web(FFW)主要聚焦於高性能及高保真的渲染性能。除過HTML渲染後端外，FFW也新增了一個CanvasKit的渲染後端。以及諸多針對Web的特性，好比Link Widget,使得你的應用在瀏覽器中的運行能夠真的感受是一個Web應用。
在這一階段，FFW主要聚焦如下應用場景：
Progressive Web Apps(PWA)
整個框架使用Dart編寫，總計約70w行的Flutter框架核心代碼針對全部平臺是一致的，不管是mobile，desktop仍是如今的web.你既可使用dartdevc或者dart2js將代碼編譯成javascript，進而運行在服務器上。
鑑於Dart自己能夠將整個Flutter框架編譯成JS，將Flutter運行在Web上的核心問題就是將移動應用的底層C++渲染引擎替換成對應的Web平臺API。Flutter並非簡單地將Widget編譯成對應的HTML元素。相反，其Web引擎提供了兩種渲染後端選擇，HTML後端用於下降包大小，並提供普遍的兼容度。
CanvasKit後端使用了WebAssembly和WebGL來在瀏覽器Canvas上渲染Skia繪圖指令， 具備更高的性能和組件密度，但增長了大約2M的下載包大小。你能夠經過如下命令來指定渲染後端。
--web-renderer html
--web-render canvaskit
Showcase
Rive
Rive, 是一個用於建立自定義動畫的工具，使用Flutter For Web來重構其代碼，並已經beta可用。
Flutter Plasma
Flutter Plasma展現了一個運行在Safari, Firefox, Edge和Chrome上的Flutter Demo。
iRobot
iRobot教育使用Flutter開發了iRobot Coding App，經過將其在Web可用，提供了隨處可用的針對任何人的代碼學習體驗。
https://code.irobot.com/#/
Mobi
Moi Mobiili, 一個現代移動虛擬網絡運營商，近期使用Flutter發佈了他們的Web應用。
自定義URL策略
新的Link Widget
基於Canvas的文本度量和渲染
文本交互(選擇，拷貝，粘貼等)
CanvasKit的進一步支持，好比CORS圖片
PWA的全離線支持
文本渲染以及功能
插件生態系統的完善
▐ 桌面支持
Flutter Desktop也正式進入stable渠道，即初始發佈狀態。
Canonical正在同Flutter合做以將Flutter引入桌面，工程師們正在開發代碼而且將其部署到Linux上。對其而言，各類各樣的硬件配置下提供穩定可靠而且優美的體驗是相當重要的。再日後看，Flutter將是後續Canonical桌面以及移動應用開發的默認選擇。
* 文本編輯體驗
▐ 摺疊設備支持
微軟在持續擴大其對於Flutter的支持。除了在Flutter Engine中持續貢獻高質量的Windows支持外，微軟正在增長對於新的可摺疊Android設備的引擎支持。這些設備引入了新的設計模型，App既可擴展其內容，也可充分利用多屏特性提供side-by-side的體驗。
https://flutter.gskinner.com
此外，gskinner開發的Folio App，很好地詮釋了Flutter在多平臺上的運行。 經過一套代碼，不管是在小，中等仍是大的屏幕上，Flutter都可處理好觸摸，鍵盤和鼠標輸入，並同平臺的特性適應良好(好比Web上的連接以及桌面上的菜單)。
▐ 嵌入式設備支持
豐田公司，宣佈了他們計劃提供市場上最好的機動車上的數字體驗，經過使用Flutter來構建娛樂信息系統。使用Flutter標誌着同之前車載軟件徹底不一樣的開發體驗。Toyota之因此使用Flutter，是由於如下的緣由:
高性能和AOT一致性
智能手機層的觸摸機制
人類工程學
從客戶反饋中快速迭代
▐ 工具鏈
現在有超過50w的Flutter開發者，咱們所面臨的的設備平臺也愈來愈多。當框架變得成熟，愈來愈大的時候，咱們愈來愈須要去避免對於框架的修改，不要去破壞愈發龐大的代碼庫。然而，爲了持續改善Flutter，咱們也須要可以去對API作Breaking修改，問題來了，如何去持續改善FlutterAPI而不阻斷開發者體驗呢？咱們提供了FlutterFix。
Flutter Fix包含了如下特性:
dart fix ——新提供的命令行選項dart fix可用於查找哪些API已經被廢棄，如何去更新這些API。
IDE插件可幫助開發者清零問題，即使是DevTools還未啓動。
經過 點擊按鈕，便可快速找到引起問題的Widget。 目前僅支持Layout Overflow異常，但DevTools團隊計劃去涵蓋全部的常見類型異常。
輕易發現高分辨率的圖片，跟蹤下降過分的包大小與內存使用
Inspector新增對於固定Layout的展現能力
內存視圖更快，小，易於使用
日誌Tab增長搜索與過濾功能
在DevTools啓動前便可跟蹤日誌
▐ 社區與生態數據
Flutter1.0發佈至今已經兩年有餘，Flutter共計關閉了24541個Issue，合併了來自 765個貢獻者的17039個PR。 目前共計有50w+的Flutter開發者，超過15w的Flutter應用。
目前有15k的針對Flutter和Dart的Package，這其中包括了亞馬遜，微軟，Adobe，阿里巴巴，eBay，Square等公司，也要報關鍵包諸如Lottie, Sentry, SVG,以及Flutter Favorite推薦的sign_in_with_apple, google_fonts, geolocator和sqlite.
▐ 其餘
▐ AskFlutter圓桌
參與這場圓桌的成員有：Andrew Brogdon(主持人)、Eric Seidel(Flutter負責人)、Ian Hickson(Flutter技術負責人)、 Mariam Hasnany(FlutterForWeb PM)、Frank van Puffelen(開發者項目工程師)。 如下針對一些重要的問題作了摘錄:
好消息是，今天Flutter Web正式在stable渠道可用。你無需enable任何flags，便可將Web做爲Flutter應用的目標設備。也就意味着，對於任何已經有Flutter Web App的開發者，你如今能夠用stable渠道來構建你的應用，若是你是要新開發Flutter Web Apps,快來檢出把。
這真的是一個好問題，隨着此次標誌性的發佈，咱們已經聚焦在構建富交互Web應用的基礎。若是你已經有一個Flutter移動應用，你如今可使用一樣的代碼來構建其Web版本，而後把你的用戶羣基礎擴展到整個Web應用。不只如此，這對於構建PWA或者SPAde應用來講也是一個額外的優點。這些應用一般使用大量的動態內容，交互UI，咱們一般認爲這三種是最適合的。固然爲了支持文檔爲中心的頁面咱們還須要不少工做去作。好比，傳統的HTML頁面有不少的文本，靜態的內容。因此我想如今咱們的確已經很適合來開發Web應用。
目前在Github上有超過8200個Open Issues、Flutter彷佛有些人手不足，有沒有計劃加以改善這種問題或者大家的優先級是什麼？
是的，咱們的確有這麼多，正如Netlinx(提問者)問道的，咱們有8000多處於Open狀態的Issues, 但重要的是咱們正在盡力去解決他們，好比去年咱們在Github上收到了15000多Issues，咱們也關閉了15000issues。咱們對修復和解決bug的比例仍是很高興的。這一數字表徵了咱們有多少用戶。越多人使用，就有越多的bug提出。咱們解決issue的數字是一個貢獻者多少的指標，咱們不少貢獻者。在Github的Flutter Hacker組裏，咱們有超過200人。一半以上是谷歌員工，大部分貢獻者並非。事實上，部分Flutter Team的人是來自開源項目的，他們多是微軟或者Canonical，或者是使用本身時間的志願者。不一樣的人投入的時間不一樣，他們都給這個項目作出了共享，但願咱們能夠解決更多的問題，讓Netlinx高興。
這是一個很好的問題。讓咱們從爲何它的存在開始，今天咱們有時候要使用hash URL策略，這是當咱們初始這個Web引擎的時候決定的。也就是說當你有Flutter具名路由的時候，咱們基本上是初始化這些路由做爲hash的一部分，添加到URL上。隨着今天Stable的發佈，咱們有了新的辦法來自定義URL，從URL中丟棄hash。這樣你就能夠按照本身的方式來構建URL，配置其他的子URL，實現deep link或者說同朋友來一塊兒分享。社區中也有一個叫作URL Strategy的插件，它實現了咱們在文檔中的指南，以一種很簡單的方式。
Flutter依然有不少Mac M1上的兼容性問題，大家是否在加以解決仍是說我須要買一箇舊的Intel Mac?
我想說你不須要買一個新電腦，我建議你今天再試試。Flutter2.0上有不少針對M1的優化。其實咱們也是同社區同一時間知道M1新發布的這類信息的。當天咱們就訂購了一個M1的開發機並用它開始工做。咱們將其分爲了三個桶，用來運行App, 工具鏈以及開發工具。據我所知，前兩個桶其運行都是良好的。固然隨着Flutter2.0的正式發佈，若是你遇到了M1或者其餘的問題，咱們想聽到你的反饋。正如Ian所說，咱們天天有不少Issues,咱們想去儘快去解決他們。所以，快去試試Flutter2.0吧，我想它應該會工做良好的，並且也會持續工做很好，由於咱們會作更多代碼修改。
M1有意思的是它幾乎是一個全新的平臺，由於咱們之前歷來沒有用ARM做爲host。今天咱們發佈Web和Desktop，可是，實際上，Apple Silicon是蘋果本身的平臺，咱們要去支持。雖然咱們如今已經支持當前release的macOS,可是依然有大量的工做要去作。
Flutter Dart團隊是否計劃去提供針對App開發的官方指南？相似Android的Jetpack？
我要笑了，由於你把這個問題丟給我彷佛你不知道這個答案同樣。咱們已經討論了好幾個禮拜了，是的，咱們有，實際上，我想或者是今天或者是很快，咱們會發一個新的模板到Flutter master分支，這個模板基本上就是這個問題的答案。如何去使用最佳實踐來建立和應用，狀態復原等等？不只是這個問題的答案。編程的核心在於針對這些問題有不少的差異，不一樣的App有不一樣的須要，咱們但願這樣特定的模板能夠真的幫助到你們，咱們也但願後續能夠有針對不一樣架構類型的模板。可能你更喜歡redux而不是咱們在模板中使用的。這個今天不會隨着Flutter2.0發佈，可是我想會在將來幾個月的stable版本中發出。
空安全是否會破壞已有App? 是否有一些內容須要被遷移？
這個問題是你可以去遷移。甚至有個工具可使用。我想應該叫作dart fix,你能夠在你的代碼庫上運行它，將會幫助你去將代碼改爲Null aware.
若是你關注了更早的Keynote，咱們有一章是關於他如何工做的。這並不會產生破壞性，你首先要確保你的依賴都已經順利遷移。若是你的依賴沒有遷移，對你來講遷移本身的代碼將很困難。這是可能的，但會變的低效。因此，如你所知，若是你有一個包尚未遷移，去讓這個包的開發者完成遷移。即使不遷移，也不會有特別的破壞性。正如Keynote提到的，這是爲何咱們不把此次發佈叫作Dart3.它是向後兼容的。同其餘語言同樣，Dart空安全裏，你能夠決定使用哪一個版本，Dart2.0或者更高。咱們在Flutter Sample倉庫裏經歷過這些，咱們觀察例子，看看有多少依賴。對他們進行排序，隨着Flutter2.0，咱們事實上已經處理完了Sample倉庫。另外一個咱們部署空安全方式的好處是，你能夠同時編譯空安全和非空安全，編譯器本身會使用空安全優化。他能夠在編譯空安全代碼的時候知道類型。當到了非空安全代碼邊界的時候，他會添加判空邏輯。咱們稱之爲非健全空安全。若是我沒記錯的話，於是你的代碼能夠在混合模式下執行，也是能夠的。
我來回答吧。咱們是把Flutter做爲2D系統構建的。其實也有不少人用它來作3D工做。咱們提供的API能夠用來在一個屏幕上繪製2D對象。要支持3D，人們能夠自行建立2.5D或者3D對象，而後經過紋理這樣的方式嵌入Flutter.有不少人就這麼作。
事實上Keynote中，我想就提到了Wallace & Gromit app。
它裏面就有2D和3D內容。將兩者混在一塊兒是可行的，可是再說一遍，Flutter是針對2D體驗設計的。
是的，Flutter Desktop現在已經在stable渠道可用，儘管咱們不認爲它是徹底stable了，咱們支持macOS, Windows和Linux如今。還有什麼呢？咱們尚未提供你可能須要的全部必須特性，例如，咱們目前尚未支持多窗口，儘管這已經在開發了。咱們還有不少努力。支持基本的單窗口App是很是穩定的。我本身就寫了一個數獨應用，運行在Mac上，工做很棒。
是的，我想多說一些，我喜歡Flutter Desktop，而且他已經在stable渠道可用，他的開發體驗很棒。你只須要打開它，Flutter本身就正常運行了，這種工做體驗很棒。試試吧，給咱們寫反饋，我想說，對於我，Flutter Web和Desktop公共的部分很棒。
這是一個廣泛的問題，特別是最近幾周，我在Reddit上寫了很長的帖子，我也正在寫一個更長的博客。我想說的是性能一直是Flutter最基礎的一個衡量，當咱們五六年前討論這個項目的時候，咱們就在說先談論性能。在咱們的任務列表中，性能是排名第一的。這不只僅是文字，咱們經過各類方式去保證這一點。全部的提交都要首先經過各類各樣的性能測試，包括全部平臺。咱們一直在追求性能優化，天天都是如此。尤爲當面對首次啓動的動畫卡頓的問題，咱們意識到這個問題已經有一段時間了，尤爲是iOS上。過去的一年這個問題在某些場景下越發惡化。當從OpenGL遷移到Metal的時候，咱們不可以在去緩存Shaders，你必須使用GPU去產生這些像素。不論如何，咱們已經充分意識到有這樣的問題，正在努力去解決，不少人力投入其中。Ian就在攻堅這些問題。
是的，我一直在關注這些卡頓的issues，這是我如今很是關注的問題。你能夠看看Github Probject188, 我心裏裏一直記着這個數字由於我常常打開它。那裏有全部相關的問題。你能作到最好的事情就是，如同咱們以前討論的，若是你遇到應用卡頓，請提一個bug，帶上覆現代碼，包括顯示卡頓的視頻，以及時間線的trace以說明你的應用在視頻中具體在幹什麼。這是目前對於咱們來講最有幫助的了，咱們能夠去研究特定的Case，他們並不都是由於一樣的緣由形成的。即使是Shaders的緣由，也不必定是由於一樣的Shaders。全部這些不一樣的bug將會被以不一樣的問題加以解決。
我不能，你知道的，談論其餘團隊的計劃，我能說的是有不少團隊正常嘗試使用Flutter Web. Flutter Web今天剛剛來到stable渠道，咱們也正在給內部團隊相似的指引，知道的，咱們依然在解決各類問題。因此今天並無什麼能宣佈的，可是我能夠期待有更多的對於Flutter Web的使用。我致力於這個工程技術，認爲這是一種更好的方式來寫一次代碼，能夠運行在各個平臺上。咱們已經看到不少谷歌團隊接受了Flutter的這一策略，我想Flutter會繼續來到更多的應用場景的。
咱們已經看到內部的不少工具使用Flutter For Web.當這些工具背後沒有一個大的團隊的時候，他們須要一些有用且能夠高效開發的工具。好比，在Flutter團隊裏，咱們使用Flutter Web來開發一些內部工具，用於把公共的Flutter代碼遷移到如GooglePay這樣的內部倉庫中，以及供其餘團隊使用。這些工具都是使用Flutter寫的。
這意味着不少問題，咱們實際上已經在Flutter For Web中使用WebAssembly了。Mariam可能能夠談更多，簡單來講，咱們有其餘兩部分WebAssembly和Dart相關。一個是是否直接把Dart編譯成WebAssembly，另外一個是，是否可以使用已經編譯成WebAssembly的代碼而且將其同Dart連接。對於第二問題而言，把WebAssembly鏈接到Dart，我想有一個包已經能夠作到這一點。雖然不是最方便的方式，可是是可行的。至於將Dart編譯成WebAssembly，目前仍是不可行的。這須要WebAssembly去實現一些尚不成熟的特性，WebAssembly GC，多線程等等。咱們對此很感興趣，我想WebAssembly有潛力在將來幾年真的成爲一種統一的互操做語言。
Flutter Web目前有兩個渲染後端，咱們默認使用HTML。HTML+DOM+CSS後端這種方式來渲染應用，但咱們也在嘗試使用CanvasKit來進行渲染。今天咱們已經穩定下來，你可使用CanvasKit，它採用了WebAssembly和WebGLS來渲染App，以在瀏覽器中替代Skia.針對這兩個不一樣的渲染後端，咱們也有一些叫作auto的內容。他能夠針對不一樣的環境來選擇渲染器，在桌面中使用CanvasKit,在移動瀏覽器中使用HTML，以便充分採用二者的優勢。
同React,Angular相比你怎麼看Flutter Web？
我首先想到的是，Flutter Web,咱們只是在Canvas中繪製，咱們認爲是直通GPU/CPU,我想這是同React和Angular很大的不一樣。
我老是很猶豫去把Flutter同別的技術去作對比，由於每個都有有效的用戶場景。我不想去提React說，React這裏好，那裏很差。這徹底取決於React，咱們很高興能溝通這些其餘技術並存，咱們也但願整個社區做爲一個總體能夠寫出指南說，你知道什麼樣的場景下Flutter很適合，什麼場景下Flutter For Web很適合，什麼樣的場景下React很適合等等。
Stage主要的區別是，stable同其餘渠道的差異，咱們會把fix pick到stable channel。所以你能夠看到stable channel每次更新變化都很小。這一點不會發生在dev分支上。咱們不會檢查dev渠道，若是dev出了問題，他會被在trunk上修掉，而後咱們從新會在將來幾天生成一次dev.這也不會發生在主線上由於咱們一直在主線開發。這裏就有風險，越近的代碼，越容易有咱們沒有捕獲i的問題。固然，他們最終都會被修復，這是一個權衡。
▐ 結論
這是個使人振奮的發佈，至此咱們能夠說Flutter真正作到了以應用爲中心，全平臺的支持。不管是面向移動，仍是面向桌面，或者是Web，Flutter都作到了產品級可用。面對日趨激烈的業務競爭，其可顯著下降開發成本與人員不足/不均衡的問題，提供更穩定一致的用戶體驗。
但從另外一個方面講，國內市場廣泛面臨的Legacy System的問題，目前看從官方渠道並無一個解決方案。尤爲是對於桌面端的問題，Windows XP，Win32這樣的應用場景下，以及FlutterWeb性能體驗兼容度的問題，業務方仍是須要必定的備選方案。其餘的諸如移動設備性能，包大小，動態性，瀏覽器兼容度，目前原理上自己已經不是問題，只是爲了性能，大小，體驗考慮，仍是須要作更多的深刻細緻的優化工做。
▐ 結論 參考資料
What’s New in Flutter 2.0
Announcing Dart 2.12
Flutter web support hits the stable milestone
Language design funnel
Flutter design doc
Flutter Engage Youtube
Flutter Folio
Announcing Flutter support for foldable devices
Flutter2.0 發佈了，你有什麼想法，一塊兒到留言區交流呀~
做者 |正物
編輯| 橙子君
出品| 阿里巴巴新零售淘系技術
