開發(fā)者和工作

現(xiàn)在在哪里辦公？

遠(yuǎn)程辦公絕對(duì)稱得上是開發(fā)行業(yè)最大的變化了，過去一年一直在遠(yuǎn)程辦公的受訪者居然高達(dá) 59%（可能跟海外的受訪者占比較高有關(guān)，據(jù)我了解國(guó)內(nèi)沒有這么多），只有 5% 的受訪者表示只在辦公室辦公。

相信大部分前端同學(xué)還是更喜歡遠(yuǎn)程辦公的，沒有通勤的壓力，也更自由。

做前端多久了？

相對(duì)其他行業(yè)來(lái)說(shuō)，前端還是個(gè)年輕的行業(yè)。

現(xiàn)在的職級(jí)？

中高級(jí)的前端工程師占比超過了 50%。

在受訪者的調(diào)查里還有個(gè)有意思的事情，很多非職業(yè)前端工程師也開始寫前端了，包括 學(xué)生、產(chǎn)品經(jīng)理、設(shè)計(jì)師 ...

公司有多大？

在大公司里打工的前端還是挺多的，各有利弊吧，你更喜歡在大公司當(dāng)螺絲釘還是在小公司獨(dú)當(dāng)一面呢？

框架

使用過也很喜歡的框架

大多數(shù)的前端還是喜歡組件式驅(qū)動(dòng)的開發(fā)方式，所以 React、Vue、Svelte 甚至 Web Component 這些框架都越來(lái)越受歡迎了。

未來(lái)更想學(xué)習(xí)哪些框架？

ESR（Edge Side Rendering，邊緣渲染）是最近的一大熱門趨勢(shì)，可以直接在 CDN 級(jí)別實(shí)現(xiàn)按需渲染。Nuxt 3、Remix 以及 Sveltekit 等框架都在朝著這個(gè)方向發(fā)展，目測(cè)會(huì)在未來(lái)的一到兩年會(huì)成為一大焦點(diǎn)。

庫(kù)

使用過也很喜歡的庫(kù)

Axios 還是挺成功的，它穩(wěn)定支持前端請(qǐng)求已經(jīng)有很長(zhǎng)時(shí)間了，它現(xiàn)在更像一個(gè)標(biāo)準(zhǔn)，而不是一個(gè)趨勢(shì)。

使用過但是不喜歡的庫(kù)

Redux 占據(jù)了榜首，我也覺得它是 React 狀態(tài)管理里面最難用的，學(xué)習(xí)門檻高，而且會(huì)寫出大量的模版代碼。

另外，大家在日期管理方面，似乎正在從 moment 切到 Date-FNS，這是個(gè)好兆頭！但是令人震驚的是還有大概 40% 的人在用 moment ，這個(gè)庫(kù)已經(jīng)停止維護(hù)了呀 ...

未來(lái)最想學(xué)習(xí)的庫(kù)

GraphQL 生態(tài)正在逐漸走向繁榮，40% 的前端同學(xué)希望在未來(lái)學(xué)習(xí) Apollo。

組件庫(kù)/設(shè)計(jì)系統(tǒng)

果然組件庫(kù)還是最卷的，30% 的前端同學(xué)希望自己設(shè)計(jì)組件庫(kù) ...

Typescript

在過去一年中有用過 Typescript 嗎？

Typescript 的發(fā)展突飛猛進(jìn)！在過去一年有 84% 的受訪者表示用過 Typescript！

還有個(gè)更有意思的事情，過去一年里沒接觸過 Typescript 的人更多在非科技公司或政府工作。

Typescript 的未來(lái)

有 43% 的受訪者表示，TypeScript 將超越 Javascript 成為新的前端標(biāo)準(zhǔn)，最近這一點(diǎn)也越來(lái)越明顯了，以原生 TypeScript 編寫的庫(kù)明顯增加，并且大多數(shù)新的開發(fā)工具都提供了開箱即用的 TypeScript 支持。

不過，就在今年 3 月份，微軟宣布了在 Javascript 中引入 TypeScript 的類型語(yǔ)法的提案，引起了前端社區(qū)的劇烈討論。這項(xiàng)投票的第三條（ JavaScript 會(huì)變成 Typescript 之類的東西）似乎有有了那么些可能了。

微前端

過去一年內(nèi)有沒有用過微前端？

如今，微前端已逐步被各種公司所接受。其中，Netflix、PayPal 和 Amex 等大型科技公司已經(jīng)在他們的一些系統(tǒng)中實(shí)施了這種架構(gòu)。不過去年使用過微前端的開發(fā)者仍占少數(shù)，只有 24%。

微前端常用的解決方案

瀏覽器技術(shù)

過去一年用過的瀏覽器技術(shù)

有 42% 的開發(fā)者使用過 WebSockets，這個(gè)結(jié)果還是讓我比較驚訝的，真的有這么多實(shí)際的開發(fā)需求里用到長(zhǎng)鏈接嗎？

代碼管理

最喜歡的桌面編輯器

在前端開發(fā)方面，Visual Studio Code 還是編輯器的王者，尤其是它的擴(kuò)展系統(tǒng)，讓 WebStorm 之類的其他編輯器都稍顯遜色。

在線代碼編輯

CodeSandbox 多年來(lái)都在在線代碼編輯上占據(jù)霸者地位。但是 StackBlitz 最近做出的一些改變也非常棒，尤其是引入了 Web Containers，讓我們可以在瀏覽器環(huán)境運(yùn)行 Node.js。

在線代碼編輯應(yīng)該在后續(xù)還會(huì)得到很大的提升，尤其是現(xiàn)在遠(yuǎn)程辦公這么盛行，在線代碼編輯是一個(gè)降低成本很好的方法。你不用再去花大價(jià)錢去買一些高端配置的電腦，CodeSandbox 或 StackBlitz 在幾分鐘之內(nèi)就可以幫你配好開發(fā)環(huán)境。

最喜歡的版本控制提供商

對(duì)于版本控制，毫無(wú)疑問 GitHub 還是最多人的選擇，近年來(lái)推出的 GitHub Action、CodeSpaces、VS Code Online、新的 GitHub 代碼搜索等都是非常好用的功能，是開源愛好者的最佳選擇。而 Gitlab 和 Bitbucket 的優(yōu)勢(shì)在于它們?yōu)槠髽I(yè)提供的私有部署能力。

測(cè)試

誰(shuí)在負(fù)責(zé)團(tuán)隊(duì)中的測(cè)試？

看 2022 和 2020 年的對(duì)比，開發(fā)者參與測(cè)試要比 QA 測(cè)試占比要多了，這是啥情況～

你寫過什么樣的測(cè)試？

過去一年中用過的測(cè)試工具？

良好的實(shí)踐

對(duì)程序進(jìn)行過哪方面的優(yōu)化？

響應(yīng)式和用戶體驗(yàn)是前端開發(fā)者最關(guān)注的優(yōu)化點(diǎn)。

在你的前端項(xiàng)目中有哪些良好的實(shí)踐？

Code Review 應(yīng)該是保障項(xiàng)目質(zhì)量最基礎(chǔ)的一項(xiàng)工作，團(tuán)隊(duì)人員越多，Code Review 帶來(lái)的價(jià)值越大，不僅可以發(fā)現(xiàn)問題，還可以讓團(tuán)隊(duì)成員學(xué)到一些經(jīng)驗(yàn)。

CI/CD 應(yīng)該也很普遍才對(duì)，看到還有四分之一的開發(fā)者沒用這個(gè)很奇怪。

多久處理一次 SEO？

只有 10% 的前端開發(fā)者會(huì)經(jīng)常關(guān)注 SEO，這個(gè)也比較正常，因?yàn)橐恍┛窗搴秃笈_(tái)關(guān)系系統(tǒng)是不用關(guān)注這些的。

但是，其實(shí)我們?cè)谔嵘绦虻捻憫?yīng)式、用戶體驗(yàn)、性能時(shí)也不經(jīng)意間提升了 SEO。

多久處理一次可訪問性？

比關(guān)注 SEO 的開發(fā)者要多一點(diǎn)，但是依然很少！可能很多小伙伴還不知道可訪問性是啥：

• 可訪問性是一種讓盡可能多的用戶可以使用你的網(wǎng)站的做法。傳統(tǒng)上我們認(rèn)為這只與殘疾人士有關(guān)，但提升網(wǎng)站的可訪問性也可以讓其他用戶群體受益。比如使用移動(dòng)設(shè)備的人群，那些使用低速網(wǎng)絡(luò)連接的人群。你也可以把可訪問性看成是同等地對(duì)待每一個(gè)人，給他們平等的機(jī)會(huì)，無(wú)論他們的能力或所處的環(huán)境如何。就像不能讓坐輪椅的人可以進(jìn)入大樓是錯(cuò)誤的(現(xiàn)代公共建筑通常有輪椅坡道或電梯)；不能讓視覺有障礙的人士可以瀏覽我們的網(wǎng)站同樣不正確。我們都是不同的，但我們都是人，因此享有同等的人權(quán)。

雖然可訪問性不像響應(yīng)式、用戶體驗(yàn)、性能那么重要，但是它現(xiàn)在似乎成了一種“政治正確”（尤其是在國(guó)外）有些公司甚至出臺(tái)了相關(guān)的法律來(lái)要求網(wǎng)站必須進(jìn)行可訪問性的優(yōu)化。

多久處理一次響應(yīng)式問題？

多久關(guān)注一次程序性能？

多久關(guān)注一次用戶體驗(yàn)？

這三項(xiàng)沒啥好說(shuō)的，是大多數(shù)前端喜歡關(guān)注的方面。

前端的未來(lái)

你覺得未來(lái)哪些方案會(huì)更受歡迎？哪些方案會(huì)消失？

前端似乎進(jìn)入了一個(gè)更加穩(wěn)定的階段，你認(rèn)為呢？

閱讀完整報(bào)告：https://tsh.io/state-of-frontend/