跳到主要内容位置

我是如何从 Java 工程师转型成为前端工程师的

张旭乾

前端作为比较新的技术岗位,涉及范围广泛,市面上也没有成体系的、适用于所有人的学习方法。这篇文章,将分享一下我转型成为前端工程师的经历,以及我在学习前端开发过程中,遇到的问题和总结出来的一些经验,希望对你有所启发。

前端工程师的技能要求

先看一下前端工程师需要掌握哪些技能。 综合大、中、小企业的前端工程师技能需求,实际上前端工程师的职能包含以下职业中的 1 种或多种:

  • 网页开发工程师
  • 网页设计师(UI)
  • 用户体验工程师(UE)

最重要的职能是网页开发,包括小程序、APP 等跨端应用界面的开发,虽然它们实现的技术不同,但本质上还是做页面。

前端工程师必备的技能有

  • 使用 HTML + CSS,精准的还原设计稿,制作符合要求的页面。
  • 使用 JavaScript 给页面添加交互,懂得 DOM 操作和 ajax 请求。
  • 掌握 React 或 Vue 等主流框架的一种或几种,并了解随着这些框架的工程化,所牵涉的一系列工具(不同工程需要不同的工具,这里列出常见的), 例如:
    • Node.js 与 npm。
    • Webpack、SnowPack、Vite 等打包工具。
    • Create React App、Vue CLI、Vite 等脚手架。(Vite 既包含脚手架,也包含打包工具)
    • Gulp、Grunt 等自动化工具。
    • SASS/LESS 等 CSS 预编译工具。
    • styled-components、emotion 等 CSS-In-JS 库。
    • ESLint 语法检查工具。
    • Jest、mocha 等测试库。
  • 兼容性调整,利用 CSS hacks,或 JS Polyfill,实现跨浏览器页面表现一致。
  • 性能优化,减少文件体积,减少请求次数,延迟加载图片和脚本等。
  • SEO 搜索引擎优化,提高网站在搜索引擎的排名。

其他的一些框架或技能,如果工作要求,也需要掌握:

  • SSR 服务端渲染框架,例如 Next.js(React)、Remix.js (React)、Nuxt.js(Vue)。
  • SSG 静态网站生成器,例如 Next.js、Gatsby、VuePress 等。
  • TypeScript。
  • GraphQL。
  • PS/Sketch/Figma,能根据需要进行切图,或者自行设计页面。

下面这些技能不是必须的,但是如果能掌握,可以提高工作效率、跟后端或设计师沟通的能力,以及求职升职的竞争力:

  • 网页设计,了解设计基本原则。
  • 用户体验设计,了解网页的动效、辅助功能对用户体验的影响。辅助功能(可访问性)在国外比较重视,目的是方便有阅读障碍的人士,使用屏幕阅读器进行网站浏览。如果你想去外企,这些技能是必须要掌握的。
  • Docker,了解如何把前端项目构建为 docker image,会编写简单的 docker file。
  • 后端语言、框架、数据库,任选一套,例如 Java + Spring + PostgreSQL,Express + Node.js + MongoDB 等,了解 RESTful API 开发过程。

乍一看要掌握的有很多, 但很多库都是随着 React、Vue 等最重要的前端库自然而然的引入进来的,大部分的用法都很简单,并且我们还会在工作中持续学习,一开始只需要入门就行。下图展示了 React 前端开发工程师,根据 React 框架所衍生的技术栈(示意):

img

接下来谈谈我自己是怎么学习这些技能的,过程比较曲折和分散,我尽量按时间顺序来介绍。

img

学习基础

在 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,高级的语法(例如闭包、原型链)完全没有概念,只知道该怎么定义变量,处理事件,做一些基本的逻辑处理。

第一份工作

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

这份工作的主要难点是一开始不了解前后端分离的开发模式。由于是第一次尝试完全在客户端 JS 去请求数据,所以理解起来需要一点时间,当时阅读了 ExtJS 相关的文档,才大体的了解到了它这种开发模式,基本上就是利用 ajax 请求数据,然后通过它内置的 API 来填充 UI。后面随着开发的功能变多,对这种模式也适应了。 努力学习还是有回报的,过了三个月试用期之后,因为工作比较出色,在拿到正式员工薪资的基础上,又额外加薪了 10%。所以刚进入公司的时候不要怕上不了手,主流的技术遇到不会的地方要善于自行查找资料解决,对于公司内部的技术要勇于向前辈请教。

自由职业:实践与进阶

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

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

  • 一个是论坛,直接二次开发的,修改了一下样式。
  • 一个是质量保证查询系统,从零使用 PHP + MySQL + jQuery + jQuery UI 进行开发。

真正有挑战的是第 2 个项目,页面部分几乎遇到了前端开发中全部常见的难题: JS 代码管理 当时 UI 部分选择了和 jQuery 配套的 jQuery UI。jQuery UI 封装了一组常见的 UI 组件,例如拖拽、对话框、按钮等组件,可以少写一些逻辑代码。尽管如此,编写出来的 JavaScript 文件还是乱七八糟,因为页面上有很多表格组件,需要在获取数据后,手动去循环展示表格,并在删除或修改的时候,还要修改 DOM 更新表格;另外还有其它逻辑,例如登录、查询等。 虽然代码分散在了不同的 js 里,但是有的页面因为业务逻辑比较复杂,加上当时我也不太了解 JS 的复用方式和逻辑,导致了很多重复的代码。我还有当时的源代码,可以感受一下代码的长度(两张图片为同一 js 文件的不同部分,这里通过缩略图展示):

img

兼容性调整 这个时期,浏览器主流的还是 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 的文档,发现它提供了很多实用的功能,例如变量、继承、嵌套等,感觉很有意思也顺便学了。

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

img

留学,对前端产生兴趣

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

真正让我对前端产生兴趣,是 2016 年去留学之后。在 2017 年第一个学期,有同学问我 React 的问题,我不太会,于是就上网帮同学查,查着查着,就发现前端已经独立作为一个职业了,再接着从 React 文档找问题的解决方案时,发现之前我用 jQuery 的问题在 React 中全部都解决了,可以不用手动维护数据和 UI 之间的同步了,这让我感到很欣慰,发誓等这学期放暑假,就深入学习一下。

暑假,初识 Vue

很快,暑假就到了,要兑现承诺开始学前端。当时室友学了高级 web 编程,主要讲的是 React,React 在那个时候还非常难用,应该还是 React 15,需要手动配置好多东西:Babel、Bower.js 之类的。看着室友遇到一个组件显示不出来,经过一天的搜索解决方案,才发现是组件名大小写不一致导致的,这个让我有点对 React 好感度降低,不想学了。

后来我就研究了一下 Vue,发现普遍的说法是:功能和 React 类似,但是国内用 Vue 的多,国外用 React 的多。看了下 Vue 是华人尤雨溪开发的,很佩服,又听说上手比较容易,于是就决定先看看 Vue。

在把 Vue 官方文档基础部分看完之后,结合 YouTube 的一些视频所教授的开发方法,大概一周的时间,觉得可以上手了,就想了一下练习项目。当时了解到 Vue 适合开发单页应用,看了一下单页应用的特点,发现似乎就是网页版 App 的概念。 于是,我就想着把当时我用的最多的网易云音乐模仿一下。花了一周多的时间,实现了首页 UI、添加歌曲,播放、暂停、快进、快退等功能,期间学会了 CSS flex 布局。

img

后来发现网页版的功能局限性比较大,想着能不能做成桌面端的。当时室友在学校的课里学 Electron,一个跨平台的桌面开发框架,只用编写 HTML、 CSS 和 JavaScript ,就可以生成在 Mac、Windows、Linux 操作系统都能运行的应用。于是我又把应用迁到了 Electron 上面。

从 Electron 这里也了解到了,Node.js 到底和浏览器 JS 运行时到底有什么不同:在 Node.js 的环境下,可以访问更底层的操作系统级 API,例如访问本地文件,这样可以方便用户自行添加音乐。

做这个项目的时候,也遇到了很多问题:

  • 不知道什么时候需要定义成组件。刚刚接受这种组件化开发的方式之后,最大的难题就是怎么才知道该不该把一部分 UI 定义成组件。当时的思路就是,我先把所有的页面代码都写在入口组件里,后面再根据页面的布局,把这个组件拆分成各个部分,例如侧边栏、播放列表、播放控制器等,这样的分法似乎很合乎逻辑,不过这也带来了一个问题。
  • 组件和数据杂糅到了一起。项目当时使用了 Vuex,应用的数据全部交给了它去管理,对于项目的功能逻辑,都是直接在相关的 UI 中实现的,并绑定了 vuex 的数据。例如播放进度条,它和歌曲的播放时间数据绑定了,后面要实现音量进度条的时候,发现这个组件无法复用。因此,我又把 UI 和数据分离了出来,这样的组件,可以在各处复用,之后再实现对应的逻辑就好了。
  • CSS Flex 布局遇到坑。这个项目使用了当时开始流行的 CSS Flex 布局,本着学习的态度使用它,遇到了很多问题,例如父容器对 flex 缩放的影响,如何让 flex 元素占满容器,又或是如何让 flex 不占满容器等等,这些在看了 MDN 文档的介绍,了解了 flex、align-items 和 justify-content 各个属性值的作用和含义之后,就清楚了元素的缩放逻辑。

通过这个小项目的开发,对 VUE 算是入门了,还得出了结论:

学前端,或者任何编程知识,一定要结合实践才能快速入门并掌握它们。

受挫转型前端,尝试 React

学完 Vue 之后暑假差不多也快结束了,后面最后一个学期都在努力学专业课,没有再看前端相关的东西。2018 年回国之后,开始找工作。因为留学的主要方向是分布式和云计算,所以我还是想以 Java 开发为主。面试的时候遭到了很多不屑,大多是看我刚研究生毕业,而以前的开发经历也没什么出彩的地方,就都草草了事了。这些经历让我很受打击,但是让我清楚的知道了,纵使有一肚子墨水,但是拿不出实际的产品,或者满足不了面试官的喜好,就不可能面试成功。

当然我不会否定自己,最后一次面试失败之后,突然就想要不要改行做一下前端,毕竟留学的时候钻研了不少,又在自由职业的时候做过一些产品,更是有浓厚的兴趣,于是我立刻下了决心转前端。

下定决心之后,我一刻也没闲着,开始看前端的工作要求。在某招聘 App 上搜了一圈,发现 React 在大厂用的多、工资也高一点,我就又开始自学 React,花了一周看了看官方文档,写了一个特别小的、只有一个页面的小例子,之后就开始投简历了。期间还看了看 React Router、Redux,以及 ES6 的新特性。

在阅读 React 官方文档的时候,发现有一节是《Thinking in React》,里边详细的介绍了 React 组件化开发的步骤,并且解释了什么时候需要定义组件,文档提供了一个表格 UI 作为示例,把它拆解成了表格整体、搜索框、表格内容、类别行和产品行组件,说明了为什么这么拆解,有没有其它拆解的方法,以及拆解过程的方案折中,建议看一看。

img

图片来源:https://reactjs.org/docs/thinking-in-react.html

正式成为前端工程师

觉得准备的差不多了之后,就开始投简历了,大约 1 个月的时间,收到 3 家面试,只通过了 1 家。没过的那两家同样也是见我刚毕业,连前端开发经验都没有,就草草了事了。通过的这家,面试官是我工作时的技术总监和组长,在面试的时候没有刻意刁难,只是问了些框架方面的基础问题,还问了一下我平时是怎么解决问题的。后来,我在工作的时候,问他们为何决定让我入职,他们告诉我,看中了我的学习能力。

所以面试如果没经验的话,就努力说明自己的学习能力,总会有面试官欣赏你的。我到现在还非常感谢两位,让我正式进入了前端开发的行列。

进了公司就开始了日常做项目,大大小小一共做了 3 个,这期间经历了逻辑混乱期、尝到甜头期和精进技术期,积累了大量的开发经验。

逻辑混乱期

第 1 个项目,是改造一个传统的项目,按技术总监的建议,使用 React + dva.js 框架。UI 方面,项目之前用的是 Bootstrap,我用了 React Bootstrap 把项目迁移了过来。

这个项目里遇到的问题是:代码混乱。这个时期因为刚刚上手 React 开发,对于代码的管理也没有太大的概念,加上 dva.js 的项目结构也不同于普通的 React 项目,所以这个项目开发起来有点麻烦,再加上项目的逻辑比较多,导致组件的代码很长很长,复用起来也很困难(俗称面条式代码),不过因为这个项目也不是完全对外公开的,并且使用频率较低,所以就没在优化。

尝到甜头期

第 2 个项目,是做一个公司内部用的运营管理后台,时间大约是 2018 年底,当时 React alpha 测试版出了 hooks。看了一下官方文档,感觉很神奇,能够清晰的分离组件 UI 和逻辑,应该能给代码管理提供不小的帮助。虽然是测试版,但这个项目是完全对内的后台项目,所以果断的用上了。

这个项目的后端比较特殊,一位大佬同事搭建了 GraphQL 服务,之前在留学的时候就已经听同学提到过很多遍了,现在有机会体验体验了。在看 GraphQL 官方文档学习、以及使用搜素引擎搜索的时候发现,使用 GraphQL 后可以不用 Redux,于是这个项目我只用了 React、 React Router 和 Apollo-GraphQL 这几个主要的库。

这套技术加上 React hooks,让我真正感受到了前端开发的乐趣。组件从类的形式转换成了函数形式,代码量减少了很多,公共的逻辑也能抽离成 Hooks,在各个组件使用,组件自身的逻辑也能抽离成 hooks,来让功能和 UI 展示代码分开,让代码更易读。这样,整体的开发效率提高了不少。

UI 方面则尝试了 Ant Design,因为纯后台的,没有设计稿,只有产品原型。

另外这个项目是用 Create-React-App 脚手架创建的,了解到脚手架提供的功能非常全面,像静态资源(图片、字体)管理、插件、打包构建等都包括了,省了很多手工配置。

精进前端技术期

第 3 个项目,是一个从 0 开始的、面向客户的应用,UI 是由设计师专门设计的,有很多自定义的样式。这是我积累最多前端开发经验的项目,从技术选型,到组件规划,再到代码复用,对前端开发的架构有了全新的认识。

样式管理

为了研究怎么在 React 项目中管理样式最方便,我开始研究大型项目中的 CSS 样式管理,了解到有普通 CSS 和 CSS-in-JS 两种方案之后,再查资料发现 CSS-in-JS 方案更灵活,能够在 CSS 里访问 JS 变量,让组件样式可以随着组件状态的变化而变化。 决定用 CSS-in-JS 方案之后,我找到了 Github star 数比较高的 styled-components 库,它支持 CSS 嵌套、主题等功能,并且能够访问组件的属性,而且它定义的样式,本身也是一个 React 组件,可以直接在 JSX 中使用。 UI 库继续使用了 Ant Design,不过也就是利用一下它的组件功能逻辑,样式几乎全部都修改了。

全局状态的取舍

项目后端这次没有用 GraphQL,我又发现不用 GraphQL 也没必要使用 Redux,所以就没有再添加 Redux,结果也证明我的选择是对的:项目本身没太多全局状态,舍弃 Redux 大概让开发效率提升了 1 倍,之前像表单这样的组件大概需要一天才能完成,现在只需要半天。不过项目里有个内嵌的聊天系统,需要用一点全局状态,我就从网上查找了一些解决方案,发现使用 React Context + useReducer Hooks 的方式实现全局状态管理就够了。

提升学习能力

这个项目使用的新框架都是一边看官方文档一边学习的,有不好解决的问题,就结合搜索引擎和 Github Issues 解决。

改良前端项目结构

对于项目的结构,这次使用了就近原则来组织代码,每个组件放到单独的文件夹中,组件相关的 styles、图片、hooks 等都放在同一个文件夹,对于公用的部分,则放到项目顶级的 src 目录下。api 和其它库的配置项也都放到单独的文件夹里,同样遵循就近原则,这样管理项目就方便多了。

锻炼沟通能力

这个项目的图表也比较多,为了和 App 端保持一致,选择了 Echarts。在使用 Echarts 的时候,虽然能够实现大部分设计稿中的样式,但是还是有小部分不能精准还原,在拿着实际效果跟设计师沟通之后,有些样式就做了些调整,或直接舍弃了。 项目最后验收的时候,还需要跟 UI 设计师核对样式,这期间我和设计师找了单独的工位,每天都是在沟通哪里的设计需要修改,哪里的设计不好实现,怎样取一个大家都满意的折中方案。这些在了解设计基础原则之后,你也会明白设计师设计的意图和用意,这样用理解的心态来沟通,再辅以技术上的难度展示和时间需求,就能够更好的避免不必要的 UI 改动和代码重构。

目前在做的事

2019 年从公司再次离职,不想再打工了,借鉴在国外留学时所学到的经验,转型开始做视频和线上教学,运营着“峰华前端工程师”账号,同时也在 CSDN 发表博客。在这期间还撰写了《JavaScript 基础语法详解》一书。

img

编写书籍的时候,又是一次学习的过程,在查阅各种资料之后,对 JavaScript 有了更完全的认识。同时也明白了,人只有存在目标的情况下,才会有动力去完成看似不可能的事,避免浑浑噩噩度日。

如果你像我一样,也算比较大龄的程序员,有年龄焦虑,可以适当的想想还要不要在公司里继续工作下去,是不是该拿出勇气来尝试做自己真正想做的事,之后利用兴趣养活自己。这不是一条容易的路,所以在决定之前一定要做好两年之内没有起色的打算,这些如果我能总结出一套经验之后,再来分享。

学习建议

这些大体就是我学习、掌握前端开发的过程,总结了下面这些重点:

  1. 学会独立学习。前端的框架太多了,并且经常出现新奇特框架,必须要能自己独立通过官方文档和搜索引擎进行学习,因为前端框架多数比较小众,不会有很多相关的教程。如果连文档都没有,就要学会读源码学习用法。
  2. 基础打牢。前端库虽然多,但万变不离其宗,总是要回归到 HTML、CSS 和 JavaScript 上面,所以基础一定要打牢,尤其是在 ES6 以后出现的新特性,在前端用途非常广泛。
  3. 实战练习。学完前端库之后,一定要找个小项目做,把学到的东西真正的掌握。Github 上有很多前端项目灵感的库,可以搜索 “front-end project ideas" 找到 ,或者你也可以改造模仿市面上的网站、App 等。
  4. 保持前端的兴趣。对于新出来的特性,语法,框架要乐于去了解并尝试,说不定你会喜欢上,还能提高你的开发效率,或者正好碰到你学过的框架火了,直接提高你的职业竞争力。
  5. 不要把前端只局限在技术层面。向上往设计和产品扩一下,向下从后端和运维钻一下,你会更能从整体角度观望整个项目,从而在前端技术选型、开发过程以及和同事沟通的时候,懂得取舍和折衷。

对于学习资料的选择:

  1. 线上文档。对于 HTML、CSS 和 JavaScript 最权威的文档就是 MDN。其它的像 React、Vue 等框架,就是官方文档。如果遇到了问题,就去搜索引擎搜索,看其它人写的解决方案。
  2. 书籍。对于体系化的教程,可以购买相关的书籍看,重点看专业、经典的书籍,这些网上有很多推荐。书籍可以帮助你快速入门并深入,不用在网上东找西找了。
  3. 视频。现在视频平台正火爆,不要只用来消遣,上边也会有很多编程相关的视频,空余时间可以刷一刷,可能会获得一些开发灵感、技巧,以及未来工作可能用到的新技能。
  4. 在线课程或培训。在线课程或者培训能帮你直接学到和就业相关的技能,积累项目实战经验,但是要注意鉴别课程和机构的质量。
  5. 向有经验的人学习。如果你看到有高级工程师发布的博客、微博、视频等内容,可以尝试和他们建立联系,拿出你学习的诚意,让他们帮你指点迷津,或许能少走一些弯路。

好了,这些就是我个人的前端学习过程,以及总结出来的一点经验,希望对你有帮助。你是如何学前端的?有什么心得总结?欢迎分享给大家!