簡單來說，大前端就是所有前端的統(tǒng)稱，比如Android、iOS、web、Watch等，最接近用戶的那一層也就是UI層，然后將其統(tǒng)一起來，就是大前端。大前端最大的特點在于一次開發(fā)，同時適用于所有平臺，開發(fā)者不用為一個APP需要做Android和iOS兩種模式而擔心。大前端是web統(tǒng)一的時代，利用web不僅能開發(fā)出網(wǎng)站，更可以開發(fā)手機端web應用和移動端應用程序。
創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價，主機托管價格性價比高，為金融證券行業(yè)成都天府聯(lián)通服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。
為什么出現(xiàn)大前端的概念?
由于node的出現(xiàn)，前端工程師不需要依賴于后端程序而直接運行，從而前后端分離起來。所以當開發(fā)一個新產(chǎn)品的時候服務(wù)只需要寫一次，但是面向用戶的產(chǎn)品可能有很多，例如網(wǎng)站、Android客戶端、iOS客戶端和微信小程序等。由于各個平臺使用的技術(shù)棧都不一樣，代碼無法復用，非常浪費人力、物力。那么有沒有什么技術(shù)能夠前端的學習都是需要不斷的學習，學一天停一停相當于白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最后是127 都是零基礎(chǔ)的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!解決這一痛點呢?大前端應運而生，其實大前端的主要核心就是跨平臺技術(shù)，有了跨平臺技術(shù)，各個平臺的差異性就抹平了，開發(fā)者只需要一套技術(shù)棧就可以開發(fā)出適用于多個平臺的客戶端。
現(xiàn)在的前端都需要有多重開發(fā)技能，隨著微信公眾號、小程序的火熱發(fā)展，這兩個領(lǐng)域成為了前端開發(fā)的必備技能，更多的還有配合著打包技術(shù)的混合應用開發(fā)技術(shù)、一些桌面APP、甚至有些人認為基于node.js的后臺開發(fā)都屬于大前端的范圍。
就如之前說到的，大前端沒有什么準確的說明，所以這些提到的技術(shù)不是每一個技能都是必備的，但毫無疑問，擁有這些技術(shù)可讓開發(fā)擁有更多的機遇。
技術(shù)在互聯(lián)公司就是需要不斷的成長，剛開始的時候其實都一樣。一個前端程序員用的技能基本都是HTML+CSS+JavaScript+jQuuery，但是隨著工作的開展我們不得不接受新的項目，就比如說前端經(jīng)常會協(xié)同后端一起開發(fā)，這時候需要用到一些Vue.js技術(shù)。
剛開始的時候可以寫出簡單的erp系統(tǒng)，慢慢的Vue.js基礎(chǔ)功能都可以實現(xiàn)。接觸到自己不擅長的工作是經(jīng)常會發(fā)生的，經(jīng)手了幾個項目之后的我們基本都能學會一項技能，不能說精通，正常運用還是可以的。
大前端的發(fā)展趨勢
大前端不僅會成為移動開發(fā)與Web前端的發(fā)展趨勢，也將會是未來的顯示設(shè)備終端的開發(fā)技術(shù)趨勢。大前端將做更多的終端開發(fā)、工程化等工作，而不僅僅只是開發(fā)Web頁面。大前端工程師將能搞定所有端上的開發(fā)。與充滿爭議的全棧工程師相比，它更具可操作性。
但同時對開發(fā)者而言，要會更多的技術(shù)棧，比如原生開發(fā)者要學習html、css、js等前端知識，前端開發(fā)人員也要學習Android或iOS的原生開發(fā)技術(shù)，然后了解一下常見的跨平臺技術(shù)，只有這樣才能更好的融入到大前端的這個大家庭中。
（*注：以下僅個人配置過程參考，系統(tǒng)win7-64）
所需軟件
vsCode，Android Studio， MuMu模擬器 （直連手機調(diào)試的話就不需要了）
配置過程
1、Flutter安裝
安裝時忘記截圖，具體可參考鏈接 flutter中文網(wǎng) 相關(guān)教程+ 百度 ，現(xiàn)在網(wǎng)上教程很多，多踩點坑總會成功的。
2、MuMu模擬器調(diào)試時需進行相關(guān)配置
（*注：直連手機調(diào)試可忽略以下；執(zhí)行以下操作需要在執(zhí)行flutter doctor成功后，flutter run執(zhí)行前）
（1）mumu模擬器端口監(jiān)聽，需要執(zhí)行
（2）mumu模擬器調(diào)試flutter run可能會報錯，可以改成，具體原因可直接百度“--enable-software-rendering”
3、如需調(diào)試ios端可嘗試虛擬機+macOS+xCode
vmware+macOs可參考鏈接 VMware15安裝MacOS系統(tǒng) ，筆者按照該步驟已安裝成功
我認為的2020年前端開發(fā)者最應該掌握的一些比較火爆的技術(shù)與知識點。
1，前端框架和語言層面
9月份 Vue3.0 發(fā)布，聲稱對 TypeScript 有著更好的開發(fā)體驗，通過從不同框架級別 TS 支持上，我們可以看出社區(qū)的整個風向從2019年的大家都去學習應用 TS，變成了大家如何把 TS 用的更好這個方向上來了。
所以我認為今年 TypeScript 的火熱程度還是應該排名很靠前的，我今年也使用 TypeScript 重構(gòu)了 Daruk 的服務(wù)框架推出了2.0版本，讓 TS 開發(fā)者擁有更好的 TS 開發(fā)體驗。
接下來就是兩大重磅框架的更新歷程對比，Vue3 前面說了一句。而 React 也在十月也發(fā)布了 React 17 的 release 版本。這兩大主流框架的頻繁更新，也說明了社區(qū)和作者都在一同演化。
在 Vue 3中除了更好的支持 TS 外，還更新了Composition API。而 React 17 主要是集中精力在升級體驗上，雖然沒有新的 Feature 但是提升了和解決了很多之前版本潛在的問題。
要說哪個最火還是要看個人實際的使用場景和喜好，但是2020年來看還沒有別的框架可以與之一戰(zhàn)。
? ?
2，大前端相關(guān)技術(shù)棧
今年基于Chromium的微軟edge瀏覽器也已經(jīng)推出。google 在 web 端的發(fā)展產(chǎn)生了對開發(fā)者深刻的影響。Chrome 80+ 也已經(jīng)發(fā)布多個版本，提供了一系列的新特性，比如Core Web Vitals標準，Desktop PWA等都值得我們?nèi)リP(guān)注。
? ?
我們說完了瀏覽器相關(guān)的那點技術(shù)之后，再聊聊大前端相關(guān)的一些技術(shù)實踐，比如 Flutter。
很多前端在今年已經(jīng)從 web 開發(fā)轉(zhuǎn)型為 Flutter 開發(fā)，學習和使用 Dart 技術(shù)來構(gòu)建 UI，這是很多大廠的前端工程師正在經(jīng)歷的事情（包括我的部門也在嘗試這個事情），這個趨勢應該在未來幾年還會持續(xù)。
客戶端 electron 在今年也有著長足的進展，一年內(nèi)多次更新版本一路到了10.1.5。隨著疫情影響，國內(nèi)在線教育的又一波興起。很多桌面軟件，網(wǎng)課軟件都在采用這個技術(shù)來進行開發(fā)，市場上的崗位也開始變多，electron 技術(shù)可以說在今年也有火的趨勢。
?
然后我們再看看BFF 層，nestjs依然堅挺，越來越多的人開始跳過學習 express 和 koa 開始學習更豐富的 web 框架了，比如 egg 或者我的 daruk，開發(fā)者已經(jīng)在慢慢形成共識，在 web framework 的路上開始越走越遠，裸寫 nodejs web 服務(wù)的時代已經(jīng)開始慢慢褪去。
? ?
不得不提的還有 serverless 在前端的普及，在2020年到達了一個新的高潮。阿里云，騰訊云，頭條云等等國內(nèi)的互聯(lián)網(wǎng)廠商也都開始大玩 serverless 概念。從對內(nèi)服務(wù)開始轉(zhuǎn)向?qū)ν夥?wù)，普及的勢頭很猛，也有落地的趨勢和場景。今年的 D2同樣也有 serverless 的專場，可見受重視程度非比尋常。
3，工程化提效和個人素質(zhì)提升
再離我們近一些的推動生產(chǎn)力的技術(shù)，比如據(jù)我所知在用 CI/CD 和 pipeline 管理上線流程的公司越來越多，這種去年還可以出去吹一吹的東西，今年也逐步變成了業(yè)界標配基礎(chǔ)能力，如果不會的同學可要抓緊學習了。
? ?
2019年前大家都瘋狂吐槽面試刷 medium 題目沒用，而2020年后大家開始默認面試某些公司都至少要刷到medium程度的題目。這對很多前端來說是一個心智和素質(zhì)的提升與轉(zhuǎn)變，大家在接觸新技術(shù)的同時，也慢慢發(fā)現(xiàn)，前端整個職業(yè)環(huán)境的變化，越來越多的公司對人的整體綜合素質(zhì)要求變高了。
Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計算機編程語言，語法類似C，是編譯型語言：
hello world例子，打印字符串“Hello World!”：
1、沒有橋接層
React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：
React Native、Weex等技術(shù)多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在：
Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。
2、編譯執(zhí)行
JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。
3、Flutter Engine虛擬機
Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。
窗口小部件根據(jù)其當前配置和狀態(tài)描述了它們的視圖。 當窗口小部件的狀態(tài)發(fā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改?？梢灾苯釉贠S平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調(diào)用起來更快。
從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術(shù)，會在APP安裝時就編譯成機器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運行的性能。
4、自帶渲染引擎
Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。
綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架，未來也會是構(gòu)建谷歌Fuchsia應用的主要方式，前途不可限量，唯一的問題就是需要學習一門新的語言：Dart，而有Java或者C#語言基礎(chǔ)的程序員會比較容易學習。
重慶分公司
重慶分公司
