后端工程师如何学习前端知识

今天会从自身的经历来聊聊我是如何把后端开发经验来过渡到前端开发的学习中的。

随着计算机技术发展的迭代，技术工具也越来越成熟，现如今从0到1构建一个软件程序就如同搭积木一样，很多时候写程序其实更像是在拼积木，我们需要的功能组件、材料都是现成的，程序员需要将其组装起来，快速构建想要的功能。

对于不管是前端还是后端工程师来讲，都是如此，但这并不意味着我们对一个技术的学习曲线会因此缩短，作为在开发经验方面后端多于前端的我来说，我认为只有把技术的学习方法做到可移植、举一反三才能尽量保证自己遇到新技术的时候可以快速去掌握。

一个写Java语言出身的程序员，在过渡到前端React框架的学习时，如何去快速适应呢？我以自己个人的历程来做一个复现：

在初学React前端项目的时候，会遇到一大堆比单纯开发语言的语法更陌生的问题，比如：

问题1: package.json文件是什么？

问题2: package-lock.json、yarn.lock都是什么，有什么区别？

问题3: yarn、npm都是什么，有什么区别？

问题4: package.json中的dependency和devDependency有什么区别？

………

问题N: …………………

上面的这些问题我相信大部分的初学者在面对一门新的开发框架时候，都会遇到，这里面包含的是对于框架编译工具、框架的构建工具，框架的组织模式等多种概念的理解，不光是语言方面的熟悉。

经过总结，我提炼出一些共性的学习方法，就是把Recat中的知识点试图去在Java中找一一对应的概念和模型，以上面的几个问题来看：

问题1: package.json文件是什么？

React中的package.json文件是存放React项目的第三方依赖库的，就如同Java中的jar一样，Java中的pom.xml文件就相当于React中的package.json文件，专门用来管理Java的依赖；

问题2: package-lock.json、yarn.lock都是什么，有什么区别？

package-lock.json文件中存放的是React中详细的依赖库以及版本信息，成树状结构来显示出完整的依赖嵌套的信息，比如A依赖于B，B依赖于C，那就会显示出A(version)->B(version)->C(version)这个完整的依赖路径，这个就相当于是Java中的dependency tree结构，用maven工具可以类似打印出这样一棵依赖树的结构，yarn.lock跟package-lock.json是一样的性质，只不过根据编译打包工具的选择，如果选择npm工具，就生辰package-lock.json文件，如果选择yarn工具，则生成yarn.lock工具

问题3: yarn、npm都是什么，有什么区别？

yarn、npm都是React中用来对项目进行编译、打包的工具，类似于Java中的Javac、Jar等工具，yarn跟npm可以任选一个来对项目进行使用，区别在于yarn是并行执行，而npm是串行执行。

问题4: package.json中的dependency和devDependency有什么区别？

package.json中的dependency下是存放实际执行环境中用到的依赖包，而devDependency是存放测试开发环境下用到的依赖包，这个在Java中就类似maven工具中的作用域，制定这个作用域用来表示哪些是在测试时需要，哪些是在实际运行时需要。

………

问题N: …………………

通过跟Java对比式地去学习React的项目结构，就会发现不同技术栈的项目间、不同框架之间所运用的原理其实是惊人得相似，而且也降低了学习成本，不用特意去理解和区分是前端开发还是后端开发，而是掌握其相同点和不同点来加以学习，这时候再通过对比来看一个React中的package.json文件，如下：

{
“name”: “my-app”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“react”: “^18.1.0”,
“react-dom”: “^18.1.0”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”
},
“devDependencies”: {
“@testing-library/jest-dom”: “^5.16.4”,
“@testing-library/react”: “^13.3.0”,
“@testing-library/user-event”: “^13.5.0”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
}
}

如果是纯后端开发的同学，可以用Maven中的pom.xml来类比理解。

通过对比式地去学习，还有一个好处就是可以抓住一些差异处来加强对两种技术的理解，比如：
为什么Java中的Maven工具不会生成一个类似于package-lock.json或yarn.lock的文件，而在React中会有？

在Java中Maven工具可以很容易去除一个版本的依赖，在React中有这种方式吗？

为什么在React中package-lock.json（或yarn.lock）中会允许同一个包的多种版本共存，而在Java中为何只能存在一个包的一个唯一的版本？
…………..

类似这样的问题会被引申出来好多，非常有趣。

以上主要以自己实践的过程中，从后端开发角度来去过渡学习前端知识的过程，来引出一种迁移式学习方法，让学习方法可移植，能够事半功倍。