Flutter自從誕生之日起就一直光環(huán)加身，發(fā)展的也是如火如荼。Web前端號今天就來盤一盤Flutter。大家都知道除了蘋果和安卓系統(tǒng)，F(xiàn)lutter Web的出現(xiàn)直接染指前端，也顯示Flutter對整個移動互聯(lián)網(wǎng)的野心。下面讓我們一步一步來認識Flutter以及Flutter Web，也讓前端工程師知己知彼，打打預(yù)防針，別哪天人家跑過來搶飯碗，都不知道對方是誰，這就尷尬了。
前端Flutter
什么是Flutter?
在回答問題之前，首先確保大家都知道，目前市面上的手機操作系統(tǒng)主要谷歌的安卓和蘋果的IOS，如果一個公司要開發(fā)一個手機APP，為了覆蓋全部的用戶，就必須招各自的開發(fā)團隊分別敲代碼開發(fā)一個功能一樣的APP，再分別投放到各自的應(yīng)用市場進行推廣，當然蘋果的只有一個市場。
很明顯，這對大部分中小企業(yè)來說，這個成本就高了。可以說天下小老板苦雙系統(tǒng)久矣。于是乎能快速寫一次代碼整出個東西，放并且到兩個系統(tǒng)都可以運行成為本能追求。
Flutter For Web
這不，谷歌來了，推出了Flutter。
Flutter是谷歌針對移動端推出的移動UI框架，通過它可以快速在安卓和IOS上構(gòu)建高質(zhì)量的原生用戶界面，既然是UI框架，就說明Flutter的領(lǐng)地不在服務(wù)端，也是在客戶端。其特點是：
能快速開發(fā)強大的UI，使用自己的高性能渲染引擎來繪制widget。Flutter能達到原生應(yīng)用一樣的性能完全免費、開源一言以蔽之，F(xiàn)lutter是一款移動應(yīng)用程序SDK，包含豐富的框架、控件和一些工具，一次編碼可以同時構(gòu)建Android和iOS應(yīng)用，并且可以達到和原生應(yīng)用一樣的性能。Flutter用Dart語言開發(fā)，即使之前沒有移動開發(fā)經(jīng)驗，也能很快上手。
由于以上特點，現(xiàn)在越來越多的開發(fā)者和組織使用Flutter進行開發(fā)，F(xiàn)lutter正變得越來越流行。
但是，F(xiàn)lutter的野心可不只是IOS和Android這些移動端，默默在一邊的Web首先被瞄上了，而其后還有桌面應(yīng)用，以及物聯(lián)網(wǎng)時代的嵌入式開發(fā)。遠的不說，先說和前端工程師最相關(guān)的Flutter For Web。
那什么是Flutter For Web?
在2019年5月7日舉辦的Google IO 2019 開發(fā)者大會正式上，F(xiàn)lutter 發(fā)布了 1.5 版，新加入對 Web 端的支持，即 Flutter for Web。
Fltter for web其實是一種代碼兼容的實現(xiàn)，它使用的仍然是基于標準的Web技術(shù)（HTML、CSS和JavaScript三件套）。對于Web， Flutter For Web直接將 Dart 代碼編譯為 JavaScript，在底層則用 HTML、CSS、Canvas 等實現(xiàn)一個新的引擎，這使得 Flutter 項目可以輸出為 Web 應(yīng)用（注意底層Dom實現(xiàn)不了的部分用Canvas來代替）。而且Flutter本身的所有特點都可以被使用起來，并且是不需要安裝任何瀏覽器插件。
就框架來說，F(xiàn)lutter For Web就是在Flutter的基礎(chǔ)上，添加了對Web的支持。這里面的關(guān)鍵是在標準瀏覽器API之上實現(xiàn)Flutter的核心繪圖層。Flutter For Web在Dart中完全實現(xiàn)了這個核心繪圖層，并使用Dart編寫的的JavaScript優(yōu)化編譯器將Flutter核心和框架與應(yīng)用程序一起編譯成一個可以部署到任何Web服務(wù)器上的單一的、小型化的源文件。Flutter For Web使用DOM、Canvas和CSS的組合，提供跨現(xiàn)代瀏覽器的可移植、高質(zhì)量和高性能的用戶體驗。
Flutter For Web 框架
從框架來看，如果你已經(jīng)用Flutter開發(fā)了IOS和安卓應(yīng)用，甚至不用變動Flutter API就可以完全可以將UI代碼從該應(yīng)用中移植到Web，而這只需要重新實現(xiàn)一下引擎和嵌入層。
這就幾乎實現(xiàn)了一邊編寫，到處運行，不論是封閉的IOS，還是開源的安卓，甚至是無處不在的Web，這也驗證了Flutter 的發(fā)展目標：從移動端擴展到 Web 端、桌面端以及嵌入式設(shè)備，并希望它最終成為最好的“全平臺” UI 框架。
Flutter與前端開發(fā)
前端工程師的挑戰(zhàn)
上面提過了，F(xiàn)lutter是一種“客戶端”技術(shù)，而客戶端聽起來不就是前端的陣地嗎？
雖然目前Flutter For Web項目本身還處于技術(shù)預(yù)覽狀態(tài)，但隨著更多限制的接觸和問題的持續(xù)解決，F(xiàn)lutter的優(yōu)勢將會越來越明顯。Flutter 已逐漸成為知名技術(shù)社區(qū) Linkdein 和 StackOverflow 上的熱門話題。
但對于前端的來說，F(xiàn)lutter對目前現(xiàn)有的前端技術(shù)不是通過顛覆或者淘汰，有點像降維打擊，直接把前端的位置往“后端”給擠了擠。
首先Flutter可不是前端工程師熟悉的技術(shù)，并且在學(xué)習(xí)這門新武器的時候，前端毫無優(yōu)勢可言，F(xiàn)lutter Web的推出，真有些讓前端工程師擔心會丟了工作，因為失去競爭力而失業(yè)。
怎么辦？
學(xué)起來。
既然Flutter可以做這么多事情，就把他當作一門前端技術(shù)學(xué)起來唄，誰讓你在入了互聯(lián)網(wǎng)這個行當呢！
其實如果前端學(xué)的還可以的話（主要是指JS那塊一定要強），學(xué)習(xí)Dart語言還是有一定有優(yōu)勢的，而且因為仍然在“客戶端”這個陣地，其實還可以把前端工作中積累的一些經(jīng)驗繼續(xù)發(fā)揮出來，這也是前端的優(yōu)勢所在。
總之，面對挑戰(zhàn)，唯有樹立信心，沉下心來學(xué)習(xí)，并最終把它拿下，才是王道。
參考：### Web前端號：前端們又要失業(yè)了？Google重磅發(fā)布Flutter For Web，劍指前端
