前端高手进阶 - 前中兴软创主任工程师 - 拉勾教育

你好,我是朱德龙,网名 “亚里士朱德”,一直深耕在前端领域。

我于 2011 年毕业后进入了中兴旗下子公司成为 JSP 全栈工程师,负责开发 B/S 架构的软件系统,参与过亿级数据量的复杂系统开发;后又加入创业公司作为核心骨干开发网上预约平台,作为资深前端工程师从 0 到 1 搭建并开发过云服务平台的前端项目。现在,我作为一家创业公司的前端负责人,带领团队完成大数据、重型计算、深度学习等业务场景的项目前端开发工作。

前端工程师的困惑与挑战

工作期间我发现,前端工程师自身容易形成一些误解,常见的有两个:

  • 工作年限 = 级别(能力)
  • 框架 / 工具使用得越多越好

持有第一种误解的前端工程师认为,只要在前端这个领域工作的年限久了,就自然而然成为了高级工程师。具体表现是被动工作、被动学习,沉浸在自己的舒适区,直到工作数年后突然发现日子不好混了,自身学习能力又不够,遭遇所谓的中年危机

要避免工作年限成为劣势,我的建议是每年定期回顾自己所做的工作,以此来判断你是在舒适圈内做熟悉、重复的事情,还是在不断地挑战提升自己。

第二种误解比较可怕,一般持有这种误解的工程师表现为使用过多种技术,但都只停留在表面,会调用 API 而已,杂而不精。一方面这种工程师所掌握的知识太浅,任何一个初级工程师,给予一定的时间和练习机会都能达到他的水平;另一方面也暴露了他没有深入学习的能力和精神,而这也是成为高级工程师的重要阻力。

时间对于软件工程师来说是一把双刃剑,如果利用好时间进行有效的知识积累,那么时间会是朋友,否则时间终将成为敌人。

举个例子,下面是某人的工作经验简述:

  • 使用 zepto.js 和 CSS3 动效开发过一些移动端活动页面;
  • 使用 React 和 Ant Design 开发过一个医药商城 Web App 的核心模块及后台管理页面;
  • 熟悉 Git 工具和代码管理流程;
  • 熟悉 webpack、Gulp.js 等工具的使用;
  • 自学了 Node.js、Docker、MongoDB,能编写一些小项目。

如果他是工作 1 年的工程师,那么会让面试官有些小惊喜;如果工作了 3 年,应该也还算不错。但如果已经工作 5 年了,面试官可能要好好考察他一下了。

因为对于工作 5 年的工程师,面试官最看重的是工作能力,而这里面并没有很好地体现出来。虽然简历中表明他使用过主流框架和工具开发过项目,但从描述上看,项目本身并不复杂,且看不出其熟练程度。(这里值得一提的是,“熟练”这种主观性的自我描述建议少用,很容易适得其反,技艺越是精深的工程师对 “熟练”、“精通” 这种描述越谨慎,因为他们知道的越多,发现未知的也更多,同样也知道 “人外有人” 的道理。)

另外,前端工程师之间的能力和薪资存在着 “贫富分化” 的现象,而且随着时间的推进在不断加剧。

这也很好理解,薪资越高的工程师往往学习能力越强,从事着公司的重要岗位和工作,其成长速度也越快;而薪资低的工程师则往往学习能力有限,从事着低价值、重复性高的工作,也更容易困于瓶颈难以突破。

综合来看,前端工程师在职业发展和技能提升上,主要是被下面三个问题所困扰。

1. 前端知识点太多

相对于其他开发岗位而言,前端需要掌握三门语言。

最简单的 HTML 语言有上百个用法各异的标签,每个标签还有属性,还有 DOM 提供的 API;CSS 的知识点也不少,选择器有十几类,属性有上百种,常用的枚举属性 display 都有十几种值;至于 JavaScript 的知识点,看看六七百页的犀牛书就可见一斑了。

2. 前端技术更新速度快

  • 前端框架有好几种,主流就有 2~3 种,这还不算每个框架的版本;
  • 构建工具不断更新,有些框架还封装了自己的命令行工具;
  • 不断出现新技术名词,如 SSR、PWA、Serverless、Flutter 等;
  • ……

面对前端技术浪潮,有人开始抱怨 “别更新了”、“学不动了”…… 当然,消极抱怨并不能阻止技术的进步,同时对自己的技能提升也起不到任何帮助,不应效仿。但过于积极学习的人,也并不十分可取。

记得有一次参加线下技术分享会,有工程师发言说自己要在两年内成为前端架构师,然后还说出了自己的计划,就是把各种所知的前端技术名词像报菜名一样说了一遍,随后再补充一句 “看懂其源码”。

抱着类似想法的初级 / 中级工程师其实并不少见,以为拿到了一份技能图谱,或者背一背面试题就能一跃成为高级 / 资深前端工程师。

这种企图通过量变引起质变的方式并不可取,时间精力是一方面,更重要的是,囫囵吞枣的学习方式缺乏对前端知识系统的认知,只是把知识点堆砌在一起而没有形成自己的认知框架。就像沙子、钢筋、水泥堆在一起顶多只是原材料,只有经过建筑师之手,它们才能成为高楼大厦。

3. 前端应用场景越来越复杂

当 Node.js 出现的时候,前端工程师已经可以涉足后端了,甚至独立开发整个 B/S 架构的系统;而当混合应用、小程序等技术出现时,则意味着前端工程师可以开发多个终端系统。

不同开发场景下的实现目标、API 及调试工具又各有差异,比如微信小程序和钉钉小程序就提供了各自独立的开发工具,浏览器环境下为 JavaScript 提供了 BOM 和 DOM,而 Node.js 环境下提供的是 fs、net 等模块。

如何破局?

为了帮助前端工程师解决上述问题,我特意设计了这门课程,来帮助你建立合理的知识结构,并培养可复用的工作能力。

1. 建立合理的知识结构

合理的知识结构既指知识框架的可扩展性,同时也指每个知识点的完备性。

知识框架的可扩展性是指,在尽量少的调整自身已有知识结构的情况下,就可以不断将新的技术知识吸纳进来。就像架构师搭建的项目框架一样,能帮助开发工程师方便快速地完成新功能的开发。而差的知识框架就如糟糕的项目,会随着功能增加而变得复杂臃肿,最终不得不将代码推翻重构。

知识点的完备性是指,每个知识点不应停留在只会调用接口函数的程度,而是深入其实现原理,然后能加以运用,从而构建更复杂更具通用性的项目。

2. 培养可复用的工作能力

除了最基本的能看懂文档、调用接口的编程能力之外,还着重帮助你提升以下 3 方面的能力:

  • 探究能力,深度探究技术背后的原理,并且能结合实践灵活运用;
  • 解构能力,能够分析和分解复杂问题,并一步步解决;
  • 归纳能力,建立知识点之间的联系,并找到其共性,从而达到举一反三的目的。

不管你是大厂螺丝钉,还是小厂顶梁柱,这些能力都将帮助你在晋升的道路上快步前行。

课程设计

本课程划分为 4 个模块,共 33 篇,主要深入讲解前端核心知识点的底层原理以及相关实战经验,希望借此帮助你建立起系统的知识框架,提升综合技术能力

  • 模块一,前端核心基础知识:带你深入理解前端工程师的必备技能 HTML、CSS、JavaScript 及网络协议,掌握它们的高级用法,比如 DOM 事件应用、CSS 管理、JavaScript 异步处理方案,以及 API 设计。同时深入浏览器内核的工作机制,让你成为一个懂页面样式,更懂浏览器的前端工程师。
  • 模块二,实际应用场景解析:解析热门前端框架,理解其设计原理,让你不再只停留会用框架的程度。深入分析前端工程化中的重要工具 webpack,建立工程化、工具化思维,带你向高级前端工程师迈进。
  • 模块三,综合能力提升:前端知识扩展部分,通过理解 Node.js 核心原理与应用场景,扩大你的开发能力边界,不再只局限于浏览器,同时通过算法与数据结构的学习,建立解决复杂问题的能力,助你构筑一条既深又宽的 “护城河”。
  • 模块四,彩蛋:谈谈工作之内、技术之外的内容,包括职业规划和面试技巧,帮你直取高薪 Offer。

课程虽然会同时讲到原理和运用,但你不用担心因此而增加了理解难度。事实上,我为你努力设计了合理的学习方式,会尽量先从你熟悉的 “表象” 开始,然后逐渐深入原理,最后探究一些高级应用场景,带你循序渐进地理解和学会实践。

课程寄语

前端这个职业虽然在软件开发中比较 “年轻”,但其前景不可限量:服务端有 Node.js,客户端有 Electron,移动端小程序又以 JavaScript 作为主语言,PWA 更有颠覆原生 App 之志。更妙的是它们都是跨系统或者跨端的,这些技术大大丰富了前端技术的应用场景,使得前端工程师的天花板和薪资不断提高,前端工程师再也不只是 “写页面” 的了

前端技术的光明前景也吸引了更多人加入到前端工程师的行列,各种前端新技术、新框架的出现,也在考验前端工程师的能力。

面对 “前有险阻、后有追兵” 之势,如何提升竞争力,建立自己的“护城河”,是每一位优秀的前端工程师都在思考的问题。而在这个课程中,希望我能够帮你打通基础知识底层原理来甩开追兵,提升学习和架构能力来克服险阻。

你也不妨在课程伊始,给自己设立个小目标,等到课程学完以后,再来回顾复盘。也欢迎你在留言区与我、或与同行的朋友分享你的成长和经验心得,一起学习成长,成为优秀的前端工程师!