2022 年,学完 JS 高级后前端怎样规划学习路线?
共 5628字,需浏览 12分钟
·
2022-03-28 08:13
作者:Hugo
原文:https://www.zhihu.com/question/522573129/answer/2404496578
2022 年,如果你学完了 JS 高级,意味着,对于 JS,你有了初步的概念。
那下一步呢?
JS 之所以能成为全世界开发者人数最多的语言,原因也简单,最庞大的泛用性。软件开发,偏向应用测,主要是前端开发和服务端开发。
前端开发
对于 JS 的世界,前端开发在 2022 年,主要指:vue、react、svelte(angular 去年获得的星星少于 svelte)。如果你更喜欢以 js 的思路解决问题,那就比较推荐你用 vue 和 react。vue 3 刚刚成为 vue 的主要版本,其能力在很多方面都有非常大的进步。react 马上要发 18 版本,也是及其推荐的一个库。
无论你准备学 vue 还是 react,你都不能错过 vite。这是目前最流行的前端开发工具,支持几乎所有的流行库的开发。
所以,无论你是哪个方向,下面这行命令,都是你的起点。
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/
这俩常见的那些功能,需要几个项目,就能弄的差不多。比较难的是响应式状态。
响应式状态:
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,先从社区的项目开始:
vue 是:
VueUse vueuse.org/
react 是:
https://github.com/streamich/react-use github.com/streamich/react-use[4]
然后,你总会用到的两大组件路由和状态管理
路由
vue 是:
Vue Router router.vuejs.org/
react 是:
https://github.com/remix-run/react-router github.com/remix-run/react-router[5]
状态管理:
vue 是(vuex 已经废弃,直接学 pinia 就好了):
Pinia pinia.vuejs.org/
react 是:
GitHub - pmndrs/zustand: Bear necessities for state management in React github.com/pmndrs/zustand
及其推荐 zustand,逻辑和 pinia 差不多,这俩一起学其实都没啥问题。
学完这些,基本上,前端的框架就入门了。因为你学了前端三剑客,我就不推荐你学 dom 了。实际上,很多新手直接上框架,实际还是应该学学原生的接口和关系的,这对于打包工具的理解有很多帮助,而且现在的原生接口,比 vue 和 react 简单很多。
CSS 框架
2022 年了,冰天雪地推荐 tailwind。
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com/
同时推荐在它上面长出来的 daisyui
daisyUI — Tailwind CSS Components daisyui.com/
顺便说,我为大家翻译了 daisyui 的文档(其实也没多少字),这为你使用它能简单不少。
理论上,到这个时候,你会 react 和 vue 的其中一个,对 vite 有了初步的了解,对于 router 和 状态管理也有了基本的认识。你还有了现代的 css 框架。接下来,你就可以去选自己感兴趣的话题了:
- web worker,来点多进程编程?https://github.com/GoogleChromeLabs/comlink[6]
- SSR?vite-plugin-ssr[7] 强烈推荐这个,比 next 和 nuxt 不知道轻了多少。当然学 SSR 你必须有一定的 nodejs 的基础
- 混合 vue 和 react,做个简单的微前端?https://github.com/MinJieLiu/micro-app[8] (顺便说,我最近贡献了 vue 版本的实现给这个项目,当然,思路还是MinJieLiu - Overview[9] 同学的。)这个项目的实现已经很成熟了,但是仍然可以有很多工作,感兴趣的同学欢迎来看看。这个应该是全网最简单的微前端视图层结合的解决方案了。
后端开发
api server
这个范畴可供选择的很多,我个人用的比较多的是:
GitHub - fastify/fastify: Fast and low overhead web framework, for Node.js github.com/fastify/fastify
因为我本身比较喜欢轻的框架,重的就不推荐了。
orm
这个不用犹豫,搞这个:
https://www.prisma.io/ www.prisma.io/[10]
TypeScript
实际上,上述所有内容,你只会 JavaScript,都是可以使用的。但是,我还是建议,在你对 JavaScript 有了初步的概念以后,最好开始你的 TypeScript 之旅。TypeScript 给 JavaScript 的某一些方面,是质的改变。
The starting point for learning TypeScript www.typescriptlang.org/docs/[11]
Monorepo
这几年,另一个质的改变的技术,就是 monorepo。
https://pnpm.io/zh/ pnpm.io/zh/[12]
但是不建议一开始就用 monorepo,我认为,最好能用几十个 single repo 的项目,慢慢来先感受 npm 的问题是啥,single repo 和 multi repo 的问题是啥,在上 monorepo,你就能明白,为啥 pnpm 要那么设计了。
打包工具
我感觉 JS 世界,一半的时间都在搞打包工具。。。可能是我的问题。
但是,当你使用了 monorepo,还使用了 typescript,打包变成了一个问题。最终项目的打包,vite 帮你做了,但是中间呢?
中间建议用:
tsup tsup.egoist.sh/#what-can-it-bundle[13]
其实 tsup 和 vite 思路差不多,都是 rollup 和 esbuild 的封装。
所以这一块,最后归根结底,是研究
esbuild - An extremely fast JavaScript bundler[14]
rollup.js[15]
rollup 和 esbuild,归根结底,是 esm 的实现,所以,你要去研究
Modules: ECMAScript modules[16]
runtime
上述的所有事情,都发生在 nodejs、浏览器、deno 里。所以,你没事就去研究研究这些东西
About this documentation nodejs.org/dist/latest-v17.x/docs/api/documentation.html[17]
MDN Web Docs developer.mozilla.org/zh-CN/
想必这时候,你要管理一大堆 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