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)用市場(chǎng)進(jìn)行推廣碉哑，當(dāng)然蘋果的只有一個(gè)市場(chǎng)挚币。
很明顯亮蒋，這對(duì)大部分中小企業(yè)來說，這個(gè)成本就高了忘晤⊥痱荆可以說天下小老板苦雙系統(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)槭ジ?jìng)爭(zhēng)力而失業(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对竣，劍指前端
