2022 年,學(xué)完 JS 高級后前端怎樣規(guī)劃學(xué)習(xí)路線?
作者：Hugo
原文：https://www.zhihu.com/question/522573129/answer/2404496578
2022 年，如果你學(xué)完了 JS 高級，意味著，對于 JS，你有了初步的概念。
那下一步呢？
JS 之所以能成為全世界開發(fā)者人數(shù)最多的語言，原因也簡單，最龐大的泛用性。軟件開發(fā)，偏向應(yīng)用測，主要是前端開發(fā)和服務(wù)端開發(fā)。
前端開發(fā)
對于 JS 的世界，前端開發(fā)在 2022 年，主要指：vue、react、svelte(angular 去年獲得的星星少于 svelte)。如果你更喜歡以 js 的思路解決問題，那就比較推薦你用 vue 和 react。vue 3 剛剛成為 vue 的主要版本，其能力在很多方面都有非常大的進(jìn)步。react 馬上要發(fā) 18 版本，也是及其推薦的一個(gè)庫。
無論你準(zhǔn)備學(xué) vue 還是 react，你都不能錯(cuò)過 vite。這是目前最流行的前端開發(fā)工具，支持幾乎所有的流行庫的開發(fā)。
所以，無論你是哪個(gè)方向，下面這行命令，都是你的起點(diǎn)。
npm?create?vite@latest
vue的官方教程：
Examples | Vue.js vuejs.org/examples/#hello-world[1]
react 的官方教程：
React – A JavaScript library for building user interfaces reactjs.org/
這倆常見的那些功能，需要幾個(gè)項(xiàng)目，就能弄的差不多。比較難的是響應(yīng)式狀態(tài)。
響應(yīng)式狀態(tài)：
vue 是：
Reactivity Fundamentals | Vue.js vuejs.org/guide/essentials/reactivity-fundamentals.html[2]
主要是 ref、reactive、computed、watch、watcheffect
react 是：
https://reactjs.org/docs/hooks-intro.html reactjs.org/docs/hooks-intro.html[3]
這塊有了概念，你就可以寫一寫自己的 hook，先從社區(qū)的項(xiàng)目開始：
vue 是：
VueUse vueuse.org/
react 是：
https://github.com/streamich/react-use github.com/streamich/react-use[4]
然后，你總會(huì)用到的兩大組件路由和狀態(tài)管理
路由
vue 是：
Vue Router router.vuejs.org/
react 是：
https://github.com/remix-run/react-router github.com/remix-run/react-router[5]
狀態(tài)管理：
vue 是（vuex 已經(jīng)廢棄，直接學(xué) pinia 就好了）：
Pinia ?pinia.vuejs.org/
react 是：
GitHub - pmndrs/zustand: Bear necessities for state management in React github.com/pmndrs/zustand
及其推薦 zustand，邏輯和 pinia 差不多，這倆一起學(xué)其實(shí)都沒啥問題。
學(xué)完這些，基本上，前端的框架就入門了。因?yàn)槟銓W(xué)了前端三劍客，我就不推薦你學(xué) dom 了。實(shí)際上，很多新手直接上框架，實(shí)際還是應(yīng)該學(xué)學(xué)原生的接口和關(guān)系的，這對于打包工具的理解有很多幫助，而且現(xiàn)在的原生接口，比 vue 和 react 簡單很多。
CSS 框架
2022 年了，冰天雪地推薦 tailwind。
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com/
同時(shí)推薦在它上面長出來的 daisyui
daisyUI — Tailwind CSS Components daisyui.com/
順便說，我為大家翻譯了 daisyui 的文檔（其實(shí)也沒多少字），這為你使用它能簡單不少。
理論上，到這個(gè)時(shí)候，你會(huì) react 和 vue 的其中一個(gè)，對 vite 有了初步的了解，對于 router 和 狀態(tài)管理也有了基本的認(rèn)識(shí)。你還有了現(xiàn)代的 css 框架。接下來，你就可以去選自己感興趣的話題了：
- web worker，來點(diǎn)多進(jìn)程編程？https://github.com/GoogleChromeLabs/comlink[6]
- SSR？vite-plugin-ssr[7] 強(qiáng)烈推薦這個(gè)，比 next 和 nuxt 不知道輕了多少。當(dāng)然學(xué) SSR 你必須有一定的 nodejs 的基礎(chǔ)
- 混合 vue 和 react，做個(gè)簡單的微前端？https://github.com/MinJieLiu/micro-app[8] （順便說，我最近貢獻(xiàn)了 vue 版本的實(shí)現(xiàn)給這個(gè)項(xiàng)目，當(dāng)然，思路還是MinJieLiu - Overview[9] 同學(xué)的。）這個(gè)項(xiàng)目的實(shí)現(xiàn)已經(jīng)很成熟了，但是仍然可以有很多工作，感興趣的同學(xué)歡迎來看看。這個(gè)應(yīng)該是全網(wǎng)最簡單的微前端視圖層結(jié)合的解決方案了。
后端開發(fā)
api server
這個(gè)范疇可供選擇的很多，我個(gè)人用的比較多的是：
GitHub - fastify/fastify: Fast and low overhead web framework, for Node.js github.com/fastify/fastify
因?yàn)槲冶旧肀容^喜歡輕的框架，重的就不推薦了。
orm
這個(gè)不用猶豫，搞這個(gè)：
https://www.prisma.io/ www.prisma.io/[10]
TypeScript
實(shí)際上，上述所有內(nèi)容，你只會(huì) JavaScript，都是可以使用的。但是，我還是建議，在你對 JavaScript 有了初步的概念以后，最好開始你的 TypeScript 之旅。TypeScript 給 JavaScript 的某一些方面，是質(zhì)的改變。
The starting point for learning TypeScript www.typescriptlang.org/docs/[11]
Monorepo
這幾年，另一個(gè)質(zhì)的改變的技術(shù)，就是 monorepo。
https://pnpm.io/zh/ pnpm.io/zh/[12]
但是不建議一開始就用 monorepo，我認(rèn)為，最好能用幾十個(gè) single repo 的項(xiàng)目，慢慢來先感受 npm 的問題是啥，single repo 和 multi repo 的問題是啥，在上 monorepo，你就能明白，為啥 pnpm 要那么設(shè)計(jì)了。
打包工具
我感覺 JS 世界，一半的時(shí)間都在搞打包工具。。。可能是我的問題。
但是，當(dāng)你使用了 monorepo，還使用了 typescript，打包變成了一個(gè)問題。最終項(xiàng)目的打包，vite 幫你做了，但是中間呢？
中間建議用：
tsup tsup.egoist.sh/#what-can-it-bundle[13]
其實(shí) tsup 和 vite 思路差不多，都是 rollup 和 esbuild 的封裝。
所以這一塊，最后歸根結(jié)底，是研究
esbuild - An extremely fast JavaScript bundler[14]
rollup.js[15]
rollup 和 esbuild，歸根結(jié)底，是 esm 的實(shí)現(xiàn)，所以，你要去研究
Modules: ECMAScript modules[16]
runtime
上述的所有事情，都發(fā)生在 nodejs、瀏覽器、deno 里。所以，你沒事就去研究研究這些東西
About this documentation nodejs.org/dist/latest-v17.x/docs/api/documentation.html[17]
MDN Web Docs developer.mozilla.org/zh-CN/
想必這時(shí)候，你要管理一大堆 runtime。所以，你需要：
Volta docs.volta.sh/guide/getting-started[18]
參考資料
[1]Examples | Vue.js vuejs.org/examples/#hello-world: http://link.zhihu.com/?target=https%3A//vuejs.org/examples/%23hello-world
[2]Reactivity Fundamentals | Vue.js vuejs.org/guide/essentials/reactivity-fundamentals.html: http://link.zhihu.com/?target=https%3A//vuejs.org/guide/essentials/reactivity-fundamentals.html
[3]https://reactjs.org/docs/hooks-intro.html reactjs.org/docs/hooks-intro.html: http://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-intro.html
[4]https://github.com/streamich/react-use github.com/streamich/react-use: http://link.zhihu.com/?target=https%3A//github.com/streamich/react-use
[5]https://github.com/remix-run/react-router github.com/remix-run/react-router: http://link.zhihu.com/?target=https%3A//github.com/remix-run/react-router
[6]https://github.com/GoogleChromeLabs/comlink: http://link.zhihu.com/?target=https%3A//github.com/GoogleChromeLabs/comlink
[7]vite-plugin-ssr: http://link.zhihu.com/?target=https%3A//vite-plugin-ssr.com/
[8]https://github.com/MinJieLiu/micro-app: http://link.zhihu.com/?target=https%3A//github.com/MinJieLiu/micro-app
[9]MinJieLiu - Overview: http://link.zhihu.com/?target=https%3A//github.com/MinJieLiu
[10]https://www.prisma.io/ www.prisma.io/: http://link.zhihu.com/?target=https%3A//www.prisma.io/
[11]The starting point for learning TypeScript www.typescriptlang.org/docs/: http://link.zhihu.com/?target=https%3A//www.typescriptlang.org/docs/
[12]https://pnpm.io/zh/ pnpm.io/zh/: http://link.zhihu.com/?target=https%3A//pnpm.io/zh/
[13]tsup tsup.egoist.sh/#what-can-it-bundle: http://link.zhihu.com/?target=https%3A//tsup.egoist.sh/%23what-can-it-bundle
[14]esbuild - An extremely fast JavaScript bundler: http://link.zhihu.com/?target=https%3A//esbuild.github.io/
[15]rollup.js: http://link.zhihu.com/?target=https%3A//rollupjs.org/guide/en/
[16]Modules: ECMAScript modules: http://link.zhihu.com/?target=https%3A//nodejs.org/dist/latest-v17.x/docs/api/esm.html
[17]About this documentation nodejs.org/dist/latest-v17.x/docs/api/documentation.html: http://link.zhihu.com/?target=https%3A//nodejs.org/dist/latest-v17.x/docs/api/documentation.html
[18]Volta docs.volta.sh/guide/getting-started: http://link.zhihu.com/?target=https%3A//docs.volta.sh/guide/getting-started