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