作者|张旭前编|孟一丹

出品| CSDN（id：csdnnews）

后端开发和前端开发，哪个更容易上手？ 我们经常在重大技术峰会上看到类似的问题。 都说兴趣是最好的老师，没有实践，你可能很难知道自己更喜欢哪一个？

从Java开发到后端工程师，他在转变的路上遇到了哪些困难？ 本文作者张旭前分享了自己在学习后端开发过程中的变革经历、遇到的问题以及一些心得，希望对大家有所启发。

我的学习经历

编程入门

2008年，我进入本科学习Java开发，HTML和CSS只是专业的附属品。 当时主要是前后端集成开发，HTML和CSS只是与Java中的Servlet结合生成页面。 JavaScript 根本没有被涵盖。

2010年我即将毕业的时候，参加了五个月的JavaEE培训。 在此期间，我学习了HTML、CSS以及一些简单的JavaScript DOM操作和jQuery，这样我就可以编写一些交互式页面和Ajax异步请求。

这段时间我并没有太关注HTML/CSS/JS基础知识。 因为我刚刚开始，不知道什么是重要的，什么是不重要的。 在做项目的时候，页面部分要在网上搜索HTML标签和CSS属性的使用情况。 对于JS部分，只有jQuery可用，中间句型（例如闭包和原型链）完全没有概念。 他们只知道如何定义变量、处理扰动、做一些基本的逻辑处理。

成功转正，加薪10%

我的第一份工作是 Java 开发。 当时公司采用的技术非常新潮，是前后端分离的雏形。 页面部分完全使用了ExtJS库，它提供了一套现成的UI组件。 所有数据都是通过Ajax从前端获取，前端使用Java Servlet提供JSON数据。

这份工作的主要难点是一开始不了解前后端分离的开发模式。 因为是第一次尝试完全在客户端JS中请求数据，所以需要一点时间来理解。 当时我阅读了ExtJS相关的文档，大致了解了这些开发模式。 基本上，它借助 Ajax 请求数据，然后通过其外部 API 填充 UI。 随着前面更多功能的开发，我已经适应了这些模式。

努力还是有回报的。 三个月试用期结束后，由于工作表现出色，我在即将入职员工工资的基础上额外加薪10%。 所以当你第一次踏入公司的时候，不要害怕你无法上手。 当遇到自己不了解的主流技术时，要善于查找资料自行解决。 对于公司内部的技术，一定要敢于向大师请教。

自由职业：实践和高级

2010年底，我从第一家公司辞职，回家充电，学习PHP。 由于当时建网站非常流行，学习PHP后，他可以成为一名个人站长，或者通过自由职业为客户建网站来赚取收入。 由于部署网站的主机基本都支持PHP和ASP，而且PHP越来越流行，所以我自学PHP，通过官方文档，加上实战并结合搜索引擎搜索问题来学习。 完成学业后，我在互联网上发布了提供个人网站建设服务的广告。 这个时候我还是全栈开发。

2011年底左右，广告发布后我就忘记了，也没有太在意。 大年初四，突然接到一个客户的电话，需要建一个网站，这让我很兴奋。 我总共为该客户制作了两个网站：

真正的挑战是第二个项目。 页面部分几乎遇到了后端开发中所有常见的难点：

JS代码管理

当时UI部分选择了与jQuery相匹配的jQueryUI。 jQueryUI 封装了一组常见的 UI 组件，例如拖放、对话框、按钮等组件，因此您可以编写更少的逻辑代码。 即便如此，编译出来的JavaScript文件仍然是一团乱麻，因为页面上有很多表格组件，需要在获取数据后自动循环显示表格，并在获取数据时改变DOM来更新表格被删除或更改； 另外还有其他逻辑，比如登录、查询等。

虽然代码分散在不同的JS中，而且有些页面的业务逻辑比较复杂，而我当时对JS的复用方法和逻辑不太了解，所以造成了大量的重复代码。 我还留着当时的源代码，所以大家可以体会一下代码的宽度（两张图是同一个JS文件的不同部分，这里以缩略图的形式展示）：

JS文件中的代码

兼容性调整

当时主流浏览器还是IE，所以还需要做一些兼容性调整。 好在jQuery主要兼容所有浏览器，所以JS没有太大问题，剩下的就是CSS了。 本项目在IE、Chrome、Firefox下显示不一致。 查了一下，解决方案可以根据浏览器的具体句型来编译，或者只能是特定浏览器识别的选择器，也就是所谓的CSShacks。 另外，还可以利用浏览器特殊的HTML指令加载不同的CSS文件，最终调整页面一致。

性能调优

由于项目页面处理的数据量较大，且开发经验有限，当时只是在代码效率方面进行了优化，比如减少不必要的循环操作。

与客户沟通需求

这是一项发达的软技能，学会如何拒绝无理要求。 由于当时我是第一次面对客户，所以我没有信心，所以我立即着手改变客户所说的改变。 在此期间，客户最常说的一句话是：“这个功能很简单，你会做的”，或者“这个问题很容易解决，不会花你几分钟的时间”。 当时我确实觉得这个功能或者问题挺简单的，实践中我发现比想象的要困难很多。 做了几次后，我知道，无论多么简单的功能或问题，都会涉及到很多细节，所以当客户再次询问时，我会先把细节弄清楚，并给他一个大概的完成时间。 另外，新功能需要额外收费，由客户决定是否做。

网页设计水平

还有一次意外，让我学到了部分设计知识。 在为这个客户建立质量保证体系时，我还要求提供该产品的官方网站。 客户把产品信息发给我后，我参考了网上的同类网站，帮他设计了一个版本。 因为，让我重新设计，我又设计了一遍，客户还是觉得不够好，重复了好几次，虽然不能满足他的需求，但是他把官网的部分给了别人。 当时我也有点喘不过气来，就买了《为你设计书》，专门学习了一些设计原理，努力提高自己的设计能力。 后来客户的官网上线后，发现设计也很正常，可能是审美观不同吧。

我在自由职业的后半段学习了其他框架。 那时Bootstrap3、Foundation等HTML/CSS框架开始爆发。 由于我很喜欢学习新技术，所以就去看了他们的介绍。 看到Bootstrap3中有很多外部组件，但是没有太多需要写CSS的地方，所以就了解了Bootstrap3。 Bootstrap3内部使用了LESS这个CSS预编译工具来生成CSS。 如果你想定制它的风格，你还需要了解LESS。 我又看了一下LESS的文档，发现它提供了很多实用的功能，比如变量、继承、嵌套等，觉得很有趣，顺便学了一下。

从这里可以知道：后端库是相互依赖的。 如果直接看后端需要哪些库，都是零散的一堆，而当你真正开始学习一个框架的时候，你会发现很多框架都可以从一行画出来，组成一个完整的开发工具库，这个自然是掌握了。

第一次接触Vue

以下这些经历都为我改造后端奠定了技术基础。 作为一名自由职业者，我发现我仍然喜欢可见的项目。 从从0设计界面到实现，我很有成就感，也享受设计过程中灵感的喜悦。 我想把火焰转到后端。 但是第二份工作，从2013年到2016年，我一直在做Java开发。

真正让我对后端感兴趣是在2016年出国留学之后。2017年第一学期，有朋友问我关于React的事情。 我不太擅长，所以我在网上帮朋友查了一下。 查了一下，发现后端已经成为一个独立的职业了。 当我在寻找问题的解决方案时，我发现我以前使用jQuery的所有问题都在React中解决了，而且不需要自动维护数据和UI之间的同步。 了解更多相关信息。

很快，假期就到了，我们必须兑现承诺，开始学习前端。 当时同事学的是中级Web编程，主要是React。 当React特别难用的时候，应该是React15，它需要自动配置很多东西：Babel、Bower.js等等。 我看到一个同事遇到了一个组件无法显示的情况。 经过三天的寻找解决方案，发现是组件名称大小写不一致造成的。 这让我对React有点好感了，就不想再学了。

后来研究了Vue，发现笼统的说法是：功能和React差不多，国外用Vue多，美国用React多。 我看到Vue是由中国人尤玉溪开发的。 我非常佩服。 听说比较容易上手，所以决定先看一下Vue。

看完Vue官方文档的基础部分，结合YouTube视频研究所一些院士的开发方法，大概花了一周的时间。 我以为我可以开始了，所以我就想到了实践项目。 当时我了解到Vue适合开发单页面应用程序。 看了单页应用的特点后，我发现虽然是网页版App的概念。 于是，我就想到模仿我当时用得最多的网易云音乐。 用了一个多星期的时间，实现了主页UI，添加了歌曲、播放、暂停、快进、快退等功能web前端开发 简历，期间学习了CSSflex布局。

使用Vue模仿网易云音乐（左）的最终界面（右）

后来发现网页版的功能限制比较大，就想能不能做成桌面版。 当时我的同事正在中学学习Electron，这是一个跨平台的桌面开发框架，只需编译HTML、CSS和JavaScript就可以生成可以在Mac、Windows和Linux操作系统上运行的应用程序。 所以我再次将应用程序移至Electron。

这里我也从Electron了解到，Node.js和浏览器JS运行时有什么区别：在Node.js环境中，可以访问更底层的操作系统级别的API，比如访问本地文件web前端开发 简历，这样用户就可以轻松地添加音乐。

在做这个项目的时候，我也遇到了很多问题：

通过这个小项目的开发，也算是对VUE做了一个介绍，得出了这样的推论：

学习前端，或者任何编程知识，都必须与实践相结合，才能快速入门、掌握。

更改后端失败，尝试React

学习完Vue，假期也快结束了。 上个学期，我一直在努力学习专业课，没有看过后端相关的东西。 2018年回国后，我开始找工作。 由于出国留学的主要方向是分布式和云计算，所以我还是想以Java开发为主。 笔试的时候，受到了很多嘲笑，大部分是因为我刚研究生毕业，本来的开发经验并不突出，所以都是草草完成的。 这样的经历对我打击很大，让我清楚地认识到，即使我有再多的笔墨，也无法生产出实际的产品，或者无法满足笔试官的喜好，那是不可能成功的。在笔试中。

其实我不会否定自己。 上次笔试没通过之后，我突然想转行去做后端。 兴趣，所以我立刻下定决心转后端。

打定主意后，我一刻也没有闲着，开始看后端的岗位需求。 在一个急聘app上搜了一下，发现大厂用React的多，工资也低一些，于是我开始自学React，花了一周的时间看官方文档，写了一个很小的页面上只有一个小反例，然后开始提交简历。 期间还看了ReactRouter、Redux、以及ES6的新特性。

在阅读React的官方文档时，我发现有一个名为“Thinking in React”的章节，详细介绍了React组件开发的步骤，但是解释了何时需要定义组件。 文档提供了一个表格 UI 为例，把它拆解为表格整体、搜索框、表格内容、类别行和产品行组件。 解释了为什么要这样拆解，有没有其他的拆解方式，以及拆解过程的妥协。 建议看一下。