大家好，我是卡頌。

創(chuàng)新互聯(lián)專(zhuān)注于平川企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。平川網(wǎng)站建設(shè)公司,為平川等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

前端領(lǐng)域發(fā)展多年，不僅沒(méi)有式微，反而勢(shì)力逐漸擴(kuò)大。

一個(gè)直觀的現(xiàn)象：市場(chǎng)上「前端」、「后端」崗位需求一直居高不下，與「前端」同樣偏「前」的原生開(kāi)發(fā)(IOS、安卓)則逐漸式微。

雖然「前端」發(fā)展迅猛，但是太陽(yáng)底下沒(méi)有新鮮事，web前端終將走過(guò)「原生應(yīng)用程序」曾經(jīng)走過(guò)的路。

如果以史為鑒，那么一個(gè)趨勢(shì)是不可阻擋的 —— 前端會(huì)越來(lái)越「左」。

本文內(nèi)容參考Language Servers are the New Frameworks[1]以及Compilers are the New Frameworks[2]

什么是“左”?

IBM曾發(fā)明一個(gè)計(jì)算機(jī)術(shù)語(yǔ)Shift Left[3](左移)。

對(duì)開(kāi)發(fā)者來(lái)說(shuō)，「開(kāi)發(fā)」這一行為可以分為不同階段：

Read(肉眼看到我們編寫(xiě)的代碼出現(xiàn)在屏幕上時(shí))

• Save(保存代碼時(shí))
• Commit(提交代碼時(shí))
• Build(編譯代碼時(shí))
• Run(運(yùn)行代碼時(shí))

當(dāng)開(kāi)發(fā)者的注意力越向左，越能盡早發(fā)現(xiàn)bug(即「左移」)。舉兩個(gè)極端例子：

• 對(duì)于Read，依賴(lài)于TS的靜態(tài)分析，在編寫(xiě)代碼的同時(shí)就能知道類(lèi)型推導(dǎo)相關(guān)的錯(cuò)誤
• 對(duì)于Run，某些bug可能要運(yùn)行好幾天，用戶反饋過(guò)來(lái)才知道

所以，對(duì)于成熟的開(kāi)發(fā)體系，開(kāi)發(fā)者的注意力肯定會(huì)更多放在「左邊」。

為了賦予開(kāi)發(fā)者更多支持，前端「基建」會(huì)越來(lái)越偏左。

從Run到Build

「前端框架」的發(fā)展是個(gè)明顯的例子：

中世紀(jì)

作為前端領(lǐng)域第一大框架，jQuery是絕對(duì)的運(yùn)行時(shí)方案，他幫助開(kāi)發(fā)者在代碼運(yùn)行時(shí)抹平瀏覽器的差異。

[[416400]]

jQuery yyds

近代

到了React、Vue，都需要引入編譯能力。

React需要編譯JSX，Vue需要編譯模版語(yǔ)法。

現(xiàn)代

前段時(shí)間StackOverflow公布的《2021年開(kāi)發(fā)者報(bào)告》中最受歡迎的前端框架Svelte更是打出了「零運(yùn)行時(shí)」的口號(hào)。

從Build到Read

但是，Build畢竟不是最偏左的，有沒(méi)有從Build直接往Read(最左邊)發(fā)展的呢?

有，這就是LSP(Language Server Protocol，即語(yǔ)言服務(wù)協(xié)議)。

當(dāng)然，不是這個(gè)LSP

LSP是編輯器和語(yǔ)言工具(例如linter、靜態(tài)類(lèi)型檢查、代碼風(fēng)格檢查)之間進(jìn)行通信的標(biāo)準(zhǔn)協(xié)議。

沒(méi)有LSP，不同語(yǔ)言需要實(shí)現(xiàn)這些工具與不同編輯器的通信。

有了LSP，他就能作為語(yǔ)言與編輯器之間溝通的橋梁。

對(duì)于前端領(lǐng)域，不同前端框架都在積極探索LSP方面的可行性，比如：

• Vetur[4]作為Vue針對(duì)VSCode的工具集，是Vue開(kāi)發(fā)者的標(biāo)配
• 相比Vue的模版語(yǔ)法，React直接寫(xiě)JS可以獲得更好的靜態(tài)類(lèi)型分析。

雖然Hooks在書(shū)寫(xiě)上有些規(guī)則限制，但是React通過(guò)Hooks相關(guān)lint很好規(guī)避了開(kāi)發(fā)者書(shū)寫(xiě)錯(cuò)誤Hooks的可能性。

同時(shí)，所有Hooks有統(tǒng)一useXXX的前綴也為未來(lái)進(jìn)一步的編譯時(shí)分析提供可能。

• Angular也提供了Angular Language Service[5]
• TailwindCSS提供了Tailwind CSS IntelliSense

總結(jié)

這些趨勢(shì)對(duì)于普通業(yè)務(wù)開(kāi)發(fā)同學(xué)來(lái)說(shuō)，意味著：未來(lái)會(huì)有越來(lái)越多前端工具提供「編譯工具」、「IDE插件」，現(xiàn)在有「webpack配置工程師」，未來(lái)可能需要團(tuán)隊(duì)專(zhuān)屬「IDE配置工程師」。

對(duì)于想錯(cuò)位競(jìng)爭(zhēng)的前端同學(xué)，可以學(xué)習(xí)LSP相關(guān)知識(shí)，未來(lái)走大廠基建崗位。

參考資料

[1]Language Servers are the New Frameworks:

https://dev.to/dx/language-servers-are-the-new-frameworks-1lbm

[2]Compilers are the New Frameworks:

https://tomdale.net/2017/09/compilers-are-the-new-frameworks/

[3]Shift Left:

Shift Left: Can you be left out?

[4]Vetur:

https://github.com/vuejs/vetur

[5]Angular Language Service:

https://github.com/angular/vscode-ng-language-service

名稱(chēng)欄目：前端LSP真是越來(lái)越多了
網(wǎng)頁(yè)URL：http://uogjgqi.cn/article/codjphh.html