前端和后端开发,哪一个更容易上手?我们时常会在各大技术论坛看到类似的提问。话说兴趣是最好的老师,不实践,你可能很难知道自己更喜欢哪一个?

从Java开发再到前端工程师,他在转型路上遇到过哪些困难?本文作者张旭乾分享了他的转型经历,以及他在学习前端开发过程中,遇到的问题和总结出来的一些经验,希望对你有所启发。

在 2008 年的时候,我进入大专学习 Java 开发,HTML 和 CSS 只是专业的附属品。那时,主要还是前后端一体化开发,HTML 和 CSS 只是为了结合 Java 里的 Servlet 生成页面。JavaScript 则完全没有讲。

2010 年快毕业的时候,我参加了五个月的 Java EE 培训,在这期间了解了 HTML、CSS,以及一部分简单的 JavaScript DOM 操作和 jQuery,能够编写一些带交互的页面和 Ajax 异步请求。

在这期间,我没有太重视 HTML/CSS/JS 基础。因为本身刚入门,并不知道哪些重要,哪些不重要。在做项目的时候,页面部分要自己在网上搜索 HTML 标签和 CSS 属性的用法。对于 JS 部分,则只会 jQuery,高级的语法(例如闭包、原型链)完全没有概念,只知道该怎么定义变量,处理事件,做一些基本的逻辑处理。

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

这份工作的主要难点是一开始不了解前后端分离的开发模式。由于是第一次尝试完全在客户端 JS 去请求数据,所以理解起来需要一点时间,当时阅读了 ExtJS 相关的文档,才大体的了解到这种开发模式。基本上是利用 Ajax 请求数据,然后通过它内置的 API 来填充 UI。后面随着开发的功能变多,对这种模式也适应了。

努力学习还是有回报的,过了三个月试用期之后,因为工作比较出色,在拿到正式员工薪资的基础上,又额外加薪了 10%。所以刚进入公司的时候不要怕上不了手,主流的技术遇到不会的地方要善于自行查找资料解决,对于公司内部的技术要勇于向前辈请教。

2010 年底从第一家公司离职,回到家里自己充电,学习了 PHP。因为当时建站非常流行,学了 PHP 既可以做个人站长,也可以通过自由职业,为客户建站来赚取收入。因为部署网站的主机基本上都支持 PHP 和 ASP,而 PHP 更加流行,所以我就自学了 PHP,通过官方文档,加上实战并结合搜索引擎搜索问题来学习。学完了之后就在网上发了个广告,提供个人建站服务,此时的我还是全栈开发。

2011 年底左右,广告发完了我就忘了,没把它太当回事。大年初六突然收到一个客户的电话,需要做一个网站,这让我兴奋不已。我给这位客户一共做了两个网站:

当时 UI 部分选择了和 jQuery 配套的 jQuery UI。jQuery UI 封装了一组常见的 UI 组件,例如拖拽、对话框、按钮等组件,可以少写一些逻辑代码。尽管如此,编写出来的 JavaScript 文件还是乱七八糟,因为页面上有很多表格组件,需要在获取数据后,手动去循环展示表格,并在删除或修改的时候,还要修改 DOM 更新表格;另外还有其它逻辑,例如登录、查询等。

虽然代码分散在了不同的 JS 里,但是有的页面因为业务逻辑比较复杂,加上当时我也不太了解 JS 的复用方式和逻辑,导致了很多重复的代码。我还有当时的源代码,可以感受一下代码的长度(两张图片为同一 JS 文件的不同部分,这里通过缩略图展示):

彼时,浏览器主流的还是 IE,所以还是需要做一些兼容性调整。不过好在 jQuery 主打的就是兼容全部浏览器,所以 JS 方面没有太大问题,剩下的就是 CSS。这个项目在 IE、Chrome、火狐下显示的都不一致,后来查了一下,解决方法可以根据浏览器特定的语法,编写只在特定浏览器能识别的 CSS 属性,或者选择器,也就是所谓的 CSS hacks。另外也可以使用浏览器特殊的 HTML 指令,加载不同的 CSS 文件,最终把页面调成一致就可以了。

因为项目页面部分处理数据比较多,加上开发经验有限,当时也只是在代码效率上进行了优化,例如减少不必要的循环操作等。

这个是开发的软技能了,学会如何拒绝不合理的需求。因为当时我是第一次面对客户,也没有自信,所以客户说改什么,我立刻就开始给他改。这期间客户最常见的话术就是:“这个功能很简单,你做一下”,或者“这个问题很容易解决,花不了你几分钟”。当时我真觉得功能或者问题挺简单的,但是实际操作起来,发现要比想象的难多了。做了几次之后,知道无论多简单的功能或问题,都会涉及很多的细节,所以后面客户再提要求的时候,我就把这些细节先说清楚,给他一个大概的完工时间,再加上新增的功能需要额外收费,客户就会自己斟酌要不要做了。

还有一个意外,让我学了一部分设计知识。在给这个客户做质量保证系统的时候,还要求附带一个产品的官网,客户给我发了产品资料之后,我参考网上同品类的网站,帮他设计了一版,但是客户以不够大气为由,让我重新设计,我又设计了一次,客户还是觉得不够好,反复几次,似乎无法满足他的需求,他就把官网这部分给别人做了。当时我也有点憋气,于是买了本《写给大家看的设计书》,专门学习了一些设计原则,努力提高自己的设计能力。后来等客户的官网上线之后,发现设计的也一般,大概是审美不同吧。

在自由职业后半段时间学习了其它的框架,那个时候 Bootstrap 3、Foundation 之类的 HTML/CSS 框架开始爆火,因为十分喜欢学习新的技术,我就去看了看它们的介绍,看到 Bootstrap 3 内置了很多组件,并且不怎么需要写 CSS,就学了一下 Bootstrap 3。Bootstrap 3 内部使用了 LESS 这个 CSS 预编译工具来生成 CSS,如果要自定义它的样式,还需要会 LESS。我就又看了一下 LESS 的文档,发现它提供了很多实用的功能,例如变量、继承、嵌套等,感觉很有意思也顺便学了。

从这里你就可以知道:前端库是互相依赖的。如果直接看前端需要哪些库,那么零零散散的有一堆,但是当你真的开始下手学习一个框架的时候,你会发现好多框架可以从一条线里牵出来,构成一个完整的开发工具库,这些自然就都掌握了。

前边所有的经历,奠定了我转型前端所需要的技术基础。而在从事自由职业期间,我发现我还是喜欢看做得见的项目,从 0 设计界面,直至实现出来,很有成就感,并且我也享受在设计过程中,灵感迸发的快乐,心底就有了想转前端的火苗。不过第 2 份工作,从 2013 年到 2016 年,我仍然做的是 Java 开发。

真正让我对前端产生兴。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注