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/d93297b407f00064540f0512bc35b2bb.webp

这俩常见的那些功能,需要几个项目,就能弄的差不多。比较难的是响应式状态。

响应式状态:

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/b57f2588127fe6f4692d58d44e573a96.webp

react 是:

https://github.com/streamich/react-use github.com/streamich/react-use[4]

然后,你总会用到的两大组件路由和状态管理

路由

vue 是:

Vue Router router.vuejs.org/4d39b4c3bf9cec95b41937131e4f8a76.webp

react 是:

https://github.com/remix-run/react-router github.com/remix-run/react-router[5]

状态管理:

vue 是(vuex 已经废弃,直接学 pinia 就好了):

Pinia  pinia.vuejs.org/6375461ce9900c377a8fb4734087b6b2.webp

react 是:

GitHub - pmndrs/zustand: Bear necessities for state management in React github.com/pmndrs/zustand8052f8395ff34bf53dcb49ecde5e13c2.webp

及其推荐 zustand,逻辑和 pinia 差不多,这俩一起学其实都没啥问题。

学完这些,基本上,前端的框架就入门了。因为你学了前端三剑客,我就不推荐你学 dom 了。实际上,很多新手直接上框架,实际还是应该学学原生的接口和关系的,这对于打包工具的理解有很多帮助,而且现在的原生接口,比 vue 和 react 简单很多。

CSS 框架

2022 年了,冰天雪地推荐 tailwind。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com/62cd1a8e476da23ebbb49ae28a69b7d5.webp

同时推荐在它上面长出来的 daisyui

daisyUI — Tailwind CSS Components daisyui.com/7721a2f552cd2bf3f887d66e057a2db3.webp

顺便说,我为大家翻译了 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/fastify49542f0f4fe71efc0762c6416143d1f0.webp

因为我本身比较喜欢轻的框架,重的就不推荐了。

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/0eefc916c6aabc7fe57c72d9f4d24d2c.webp

想必这时候,你要管理一大堆 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

浏览 92
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报