迅速發(fā)展的前端開發(fā)赞咙，在每?年，都為開發(fā)者帶來了新的關(guān)鍵詞糟港。2019 年已步?尾聲攀操，2020 年前端發(fā)展的關(guān)鍵詞?將有哪些呢？發(fā)展的方向又會(huì)是什么呢秸抚？參考2019年大前端的發(fā)展速和，不出意外，前端依舊會(huì)圍繞?程序剥汤、超級(jí)APP颠放、跨端開發(fā)、前端?程化以及新技術(shù)運(yùn)用等幾個(gè)方面進(jìn)行展開（可以參考2019年大前端技術(shù)趨勢(shì)深度解讀）吭敢。

1碰凶、小程序

在?程序??，今年仍然是?程序突?猛進(jìn)的?年，各?主流的 App 都上線了?程序能?的?持欲低，各前端團(tuán)隊(duì)也都有了專?的?程序開發(fā)團(tuán)隊(duì)辕宏，以適應(yīng)更快的?程序開發(fā)需求。同時(shí)App 中很多關(guān)鍵的功能都被?程序所替代砾莱，甚?有些 App 已經(jīng)變成 Native ?程序殼匾效，上層的應(yīng)?實(shí)現(xiàn)全部是?程序。

在微信小程序出現(xiàn)以前恤磷，大家在談 Hybird面哼、ReactNative，但終歸只是技術(shù)層面的狂歡扫步，始終沒有業(yè)務(wù)屬性的注入魔策。小程序的出現(xiàn)，一方面告訴業(yè)界在當(dāng)前設(shè)備上 Webview 也沒差到哪去河胎，另外一方面告訴業(yè)界如何讓有能力的商家在超級(jí) APP上進(jìn)行私域運(yùn)營(yíng)闯袒。

另一方面，從技術(shù)角度說游岳，在上層 DSL 的嚴(yán)格限制下政敢，超級(jí) APP 就可定義符合自己訴求的 Web 標(biāo)準(zhǔn)，彌補(bǔ)當(dāng)前 Web 標(biāo)準(zhǔn)的不足胚迫，最后和客戶端配合喷户，結(jié)合離線、預(yù)加載访锻、定制Webview 能產(chǎn)出類似于 NSR 等各種酷炫的技術(shù)模型褪尝，讓 Web 在端內(nèi)低成本達(dá)到 Native 版的體驗(yàn)，端外也不會(huì)像 Weex 一樣有點(diǎn)小別扭期犬。

不過由于需要依賴超級(jí)APP（微信河哑、支付寶、百度龟虎、美團(tuán)璃谨、頭條等），由于各家平臺(tái)采用的具體方案的差異鲤妥，造成目前小程序的落地方案也不一樣佳吞，有時(shí)候需要開發(fā)多套代碼。

2旭斥、跨端開發(fā)

跨端開發(fā)??容达，RN ?態(tài)已經(jīng)?常成熟古涧，或者說看不到太多發(fā)展前景垂券，因?yàn)槟壳斑€停留在0.61版本，似乎1.0版本仍然遙遙無期。因此菇爪，今年很多團(tuán)隊(duì)轉(zhuǎn)戰(zhàn)?歌?態(tài)的 Flutter算芯，特別是 Flutter for Web 的第?個(gè) Release，?讓 Web 前端重燃希望凳宙、躍躍欲試熙揍。

同時(shí)，蘋果公司也發(fā)布了全新的 UI 系統(tǒng)——SwiftUI氏涩，同時(shí)届囚，開源社區(qū)中 SwiftUI for Web已經(jīng)在路上了，SwiftUI for Android 還會(huì)遠(yuǎn)嗎是尖？

跨端開發(fā)??意系，F(xiàn)lutter 仍會(huì)快速發(fā)展，并且會(huì)有更多的開發(fā)者饺汹，F(xiàn)lutter on JS蛔添、SwiftUIfor Web&Android 也將是開源?態(tài)值得期待的事情，畢竟跨端仍沒有?個(gè)完美的解決?案兜辞。

3迎瞧、前端工程化

在前端?程化??，開發(fā)者最重要的基本素養(yǎng)就是通過?具提升效率逸吵，?前端開發(fā)者在這??會(huì)持續(xù)迭代和優(yōu)化凶硅。

曾經(jīng)我們談 Yoman，談 CLI 等系列構(gòu)建工具扫皱，但在團(tuán)隊(duì)大了之后始終覺得差點(diǎn)什么咏尝。反觀 Java 同學(xué)，從沒聽說過 Spring Boot 配置工程師啸罢。今年很多團(tuán)隊(duì)都在建設(shè)完整的前端 DevOps 流程?具集编检，?些團(tuán)隊(duì)之間也開始協(xié)作共建，不管是 Web 還是?程序項(xiàng)?扰才，從新建項(xiàng)?允懂、開發(fā)、聯(lián)調(diào)（tiao）衩匣、部署蕾总、測(cè)試、發(fā)布琅捏、運(yùn)維到監(jiān)控統(tǒng)計(jì)生百，都有完善的?具做保障和提效，今后前端?程也會(huì)越?越標(biāo)準(zhǔn)化柄延。

展望2020年前端的發(fā)展蚀浆，前端工程體系一定會(huì)更加閉環(huán)，不再是一個(gè)腳手架這么簡(jiǎn)單，而是會(huì)結(jié)合 IDE市俊，打通業(yè)務(wù)屬性杨凑，從項(xiàng)目初始化、到編寫代碼摆昧、到 CI撩满、到灰度、到發(fā)布 形成一個(gè)完成的閉環(huán)绅你。

4伺帘、Serverless

Serverless 的?爆?乎可以歸因于前端。因?yàn)?Serverless 能夠較完美的?持Node.js忌锯，使? Serverless 幫助前端開發(fā)者解決了使?Node.js 過程中的諸多問題曼追。

當(dāng)前的前端工程師大多都是科班出身，雖不能和正宗的服務(wù)端開發(fā)同學(xué)比汉规，但也可寫很多服務(wù)端層的業(yè)務(wù)邏輯礼殊。當(dāng)前已經(jīng)有很多公司在做 BFF 層，來滿足這部分訴求针史，但依舊擺脫不掉運(yùn)維晶伦、機(jī)器分配 這條攔路虎。隨著 Serverless 的逐步落地啄枕，BFF 這層的代碼會(huì)擺脫運(yùn)維婚陪、機(jī)器分配等復(fù)雜的問題，同時(shí)大概率會(huì)由前端同學(xué)寫這部分代碼频祝，服務(wù)端同學(xué)專注中臺(tái)系統(tǒng)的實(shí)現(xiàn)泌参。從業(yè)務(wù)上說，業(yè)務(wù)的試錯(cuò)成本也會(huì)大幅度降低常空。

隨著 Node.js 成為前端開發(fā)者必備技能之后沽一，云計(jì)算的不斷普及會(huì)讓Serverless 觸?可及。當(dāng)越來越多的開發(fā)者嘗到研發(fā)?效的甜頭之后漓糙，Serverless 必將對(duì)前端的研發(fā)模式產(chǎn)?變?铣缠。

同時(shí)，使用Serverless的同學(xué)一定會(huì)使用 TS昆禽。這也意味著蝗蛙，2020 不寫 TS 可能真的就 Out 了。

5醉鳖、WebAssembly

WebAssembly 是一種新的字節(jié)碼格式捡硅，目前主流瀏覽器都已經(jīng)支WebAssembly。和 JS 需要解釋執(zhí)行不同的是盗棵，WebAssembly 字節(jié)碼和底層機(jī)器碼很相似壮韭，可以快速裝載運(yùn)行北发，因此性能相對(duì)于 JS 解釋執(zhí)行而言有了極大的提升。也就是說WebAssembly 并不是一門編程語言泰涂，而是一份字節(jié)碼標(biāo)準(zhǔn)，需要用高級(jí)編程語言編譯出字節(jié)碼放到 WebAssembly 虛擬機(jī)中才能運(yùn)行辐怕， 瀏覽器廠商需要做的就是根據(jù) WebAssembly 規(guī)范實(shí)現(xiàn)虛擬機(jī)逼蒙。

有了 WebAssembly，在瀏覽器上可以跑任何語言寄疏。從 Coffee 到 TypeScript是牢，到 Babel，這些都是需要轉(zhuǎn)譯為 js 才能被執(zhí)行的陕截，而 WebAssembly 是在瀏覽器里嵌入 vm驳棱，直接執(zhí)行，不需要轉(zhuǎn)譯农曲，執(zhí)行效率自然高得多社搅。

舉個(gè)例子，AutoCAD 軟件是由美國(guó)歐特克有限公司（Autodesk）出品的一款自動(dòng)計(jì)算機(jī)輔助設(shè)計(jì)軟件乳规，可以用于繪制二維制圖和基本三維設(shè)計(jì)形葬。使用它時(shí)，無需懂得編程暮的，即可自動(dòng)制圖笙以，因此它在全球被廣泛應(yīng)用于土木建筑、裝飾裝潢冻辩、工業(yè)制圖猖腕、工程制圖、電子工業(yè)恨闪、服裝加工等諸多領(lǐng)域倘感。

AutoCAD 是由大量 C++ 代碼編寫的軟件，經(jīng)歷了非常多的技術(shù)變革咙咽，從桌面到移動(dòng)端再到 web侠仇。之前，InfoQ 上有一個(gè)演講犁珠，題目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》逻炊，即通過 WebAssembly，讓很多年代久遠(yuǎn)的 C++ 代碼在 Web 上可以運(yùn)行犁享，并且保證了執(zhí)行效率余素。

hrome 的核心 JavaScript 引擎 V8 目前已包含了 Liftoff 這一新款 WebAssembly baseline 編譯器。Liftoff 簡(jiǎn)單快速的代碼生成器極大地提升了 WebAssembly 應(yīng)用的啟動(dòng)速度炊昆。2019年桨吊，很多的公司都開始投入人力進(jìn)行WebAssembly的學(xué)習(xí)個(gè)改造威根，相信2020年WebAssembly會(huì)經(jīng)歷爆發(fā)式期。

6视乐、5G

2019年一個(gè)繞不開的話題就是5G洛搀。?先，5G 帶寬的?幅提升帶來傳統(tǒng) Web ??復(fù)雜度的進(jìn)?步提升佑淀，如同 2G 到 4G 變?過程中??從 WAP 的純?本超鏈接時(shí)代變?到 4G 全圖?視頻時(shí)代留美。5G 對(duì)于??的變?必將是巨?的，但肯定不會(huì)?蹴?就伸刃。因?yàn)橄鄳?yīng)的配套設(shè)施也需要逐步完善谎砾，如硬件性能和瀏覽器的處理速度。?服務(wù)端渲染（SSR）肯定是其中?個(gè)捷徑捧颅，輕前端重后臺(tái)景图，5G 是橋梁，把渲染放后臺(tái)碉哑，不像同構(gòu)那么簡(jiǎn)單挚币，需要關(guān)注和優(yōu)化渲染性能。WebAssembly 或許會(huì)在這個(gè)機(jī)遇下得到快速發(fā)展扣典，因?yàn)樗梢?縫對(duì)接后臺(tái)多種語?忘晤，?后臺(tái)渲染的優(yōu)化也會(huì)帶來前端??研發(fā)模式和技術(shù)架構(gòu)的變?。

其次激捏，5G 帶來的萬物互聯(lián)设塔，?將帶來有別于智能?機(jī)和普通 PC 的多樣化的應(yīng)?場(chǎng)景，VR远舅、可穿戴設(shè)備闰蛔、?載系統(tǒng)、智能投影图柏、智能交互等?會(huì)把 Web 帶?各種各樣的垂直領(lǐng)域序六，這也意味著前端將有更多?闊的空間。相信隨著5G的大規(guī)模商業(yè)蚤吹，會(huì)誕生一批新的互聯(lián)網(wǎng)巨頭例诀。