侯策谈突破前端开发技术瓶颈的有效方法

发表时间: 2020-10-14 09:34


本文作者 侯策,曾先后就职于法国ENGIE集团、百度等国内外知名互联网企业,具有丰富的开发经验和团队管理经验。曾担任GIAC全球互联网架构大会演讲嘉宾,FDCon2019中国前端开发者千人峰会演讲嘉宾。著有《React状态管理与同构实战》一书。新书前端开发核心知识进阶:从夯实基础到突破瓶颈》现已上市。


日本作家村上春树写过一本富有哲理的书——《当我谈跑步时我谈些什么》。

在书中,他谈到,跑步跟写作一样,都需要坚毅隐忍,追逐超越;都需要心无杂念,持之以恒。全书落笔之处,没有浮华旖旎,而是将迷惘、失败和挣扎娓娓道来。

这本书名义上是在谈跑步,实际却是作者在个人创作低潮时期对突破进行的不断思考。仔细想来,这样的思考对于一位工程师也至关重要。

前端领域,入门相对简单,可是想要“更上一层楼”却难上加难,市场上的高级/资深前端工程师凤毛麟角。这当然未必是坏事,一旦突破瓶颈,在技能上脱颖而出,便能拥有更广阔的空间。

那么,如何从夯实基础到突破瓶颈呢?

下面就来讨论一下,当前端工程师需要进阶时,应该学些什么。



说到进阶,我想先谈一谈我们每个人内心的焦虑和迷茫,正视这种情绪是学习的第一步。

对于每一个追求进步的人来说,瓶颈期总会在各个阶段“如约而至”。早在战国时期,庄子在《庖丁解牛》中就说:“吾生也有涯,而知也无涯。以有涯随无涯,殆已!已而为知者,殆而已矣!”

而如今,在这个信息爆炸的时代,信息量呈几何级数增长,知识似乎唾手可得。那么该学什么,到底该怎么学,学完之后又该做什么?大部分人都会在知识面前焦虑、迷茫。

同样,具有一定工作经验的工程师也面临着很多疑虑。

  • 该如何避免相似的工作做了5年,却没能具备5年的工作经验?
  • 该如何从繁杂而千篇一律的业务需求中提炼技术点并提高?
  • 该如何为团队带来更大的价值,体现经验和能力?

这些疑虑对前端工程师来说貌似来得更加猛烈:前端技术发展备受瞩目,前端工程师变得越发重要的背后是相关技术的不断进步和更新迭代。

因此,我们比以往任何时候都更需要主动学习。但据我观察,目前网络上的学习资料往往存在以下两个问题。

  • 过于碎片化,这类知识在某种程度上只能成为缓解焦虑的“精神鸦片”
  • 追求短平快,大牛经验、快速搞定“面经题目”等内容渐渐演变成跳槽加薪的“兴奋剂”

技术进阶是一个系统、曲折的过程。每个学习者所接触的知识内容和其背后的原理构成了他的思维方式。短期速成的内容或大量碎片化的知识很难帮助我们进行深度思考。

坦白来说,我也是这些“学习资料”的搜集者,如果没有系统且有针对性的学习和反复刻意的练习,那么结果就是,以为收藏的是知识,其实收藏的是“知道”;以为掌握了知识,其实只是囤积了一堆“知道”。

我想把自己在海外和BAT工作多年积累的经验分享给大家,也想把长时间以来收藏的“干货”梳理一遍,系统整理输出,和大家一起提高。因此,《前端开发核心知识进阶:从夯实基础到突破瓶颈》这本书就诞生了。


爱因斯坦说过:“只是学习他人的智慧并不足够,你需要自己想明白才行。花时间记录、通盘考虑和深入思考你学到的东西。”

海伦·凯勒说过:“知识使人进步,而智慧使人得道。”

希望本书不仅详述了“知识”,更能体现编程“智慧”,让所有读者朋友一起思考,一起进步。那么这本书究竟有什么特色呢?我想一边聊聊前端开发的发展,一边说说本书的聚焦点。

前端大航海时代:旧工具被淘汰,新力量崛起

记得我刚接触前端编程时,jQuery风靡一时,其清新优雅的DOM操作、稳如磐石的兼容性处理、灵活高效的封装和链式调用,让人如沐春风。

彼时,我幼稚地以为“这就是巅峰”,事实却是“这只是开始”——

随着三大框架的崛起,技术更迭就像“暴风雨前的宁静”,jQuery突然就被其他“先进的生产力”甩在身后了。于是我们看见,各大平台的技术“改朝换代”,各自引领开发潮流。

这还只是一个类库在前端浪潮中的兴衰。再想想ES(ECMAScript)语言规范的演进速度,HTML5的扩张幅度,跨端开发框架从Ionic到React Native再到Flutter,CSS从基本布局模型到弹性盒模型再到原生Grid 方案,构建打包工具从Grunt到Gulp再到webpack和Rollup……

本书在重视“亘古不变”的语言的基础上,力求为大家介绍更先进的开发技术。比如,服务器端渲染、HTTP 3.0,使用 Lerna、yarn workspaces 构建 monorepo 项目,框架的原理、演进,框架间的对比和虚拟DOM,等等。

与生俱来的混乱:披荆斩棘,勇往直前

前端三大方向 JavaScript、CSS、 HTML 的背后是无尽的碎片化场景。前端是最贴近用户的“战线”,它的基因决定了它需要处理各式各样的情况。同时,无论是跨平台还是语言特性,都让开发者感到迷茫。

  • 我们应该使用哪些HTML标签以达到最佳的语义化?
  • 我们应该如何面对不同终端的诡异问题,并保证体验一致性?
  • 我们应该如何编写JavaScript代码才能实现bug free?
  • this用得乱七八糟,它到底指向谁?

在本书中,我们除了剖析理论,更会注重经验介绍和最佳实践。

  • 分析多种场景和业界解决方案的产出。
  • 实战观摩 webpack 打包结果,对比 Rollup 解决方案,同时分析 tree shaking 的实施细节。
  • 探索究竟如何组织架构代码,提升开发效率
  • 不去讲解 CSRF、XSS 等基础概念,而从鉴权角度出发,让读者对安全有一个立体认知。

广阔的未来:打铁还需自身硬

目前,我们正在经历所谓的“资本寒冬”,不管是大厂、二线公司还是创业团队,“优化人员结构”的新闻层出不穷。但是据我观察,“高级前端工程师”的招聘需求却“逆流而上”,具备高水平和丰富经验的开发者无论何时都备受追捧。因此,磨炼技能、积累项目经验将是所有前端工程师的核心诉求。

作为作者,我也在思考如何让本书更有价值,真正帮助大家突破瓶颈,让读者感到“物有所值”,进而实现技能进阶。

在本书中,我将穿插大量经典面试例题,其中既包括我作为 BAT 面试官考查的“私房题”,又涵盖我作为面试者遇见的“经典题”,还有我和业界前辈讨论过的“开放题”。在平时的开发和学习中,我也研读了大量精品文章,会一并将感悟分享给大家。

从开发菜鸟到资深工程师,除了主观能动性,我个人认为成长过程中的一大瓶颈在于“不是每个人都能有机会接触到好项目,进而从中提高”。这里的“好项目”是指类似“项目重构”“类库迁移”“复杂应用设计”“疑难 bug 定位”“新技术落地实施”等对开发者基础和设计能力有较高要求的项目。

为此,在本书中,我会插入大量有关代码设计模式、函数式、源码分析、组件设计和封装、开源库解读、项目代码组织等内容,也会手把手地带领大家查阅Issue、Changelog,从社区中汲取精华,构建更为真实的开发场景,直击实践中的高频痛点。

最后,希望能和每一位读者保持长线联系,一起讨论问题,共同进步。



本书内容介绍

本书共分为8部分,涵盖33个主题(33篇),其中每一部分的内容简介如下。

第一部分 JavaScript 基础强化

“且夫水之积也不厚,则其负大舟也无力”——基础的重要性无须多言,这对于前端开发也不例外。本部分将介绍JavaScript语言中的关键基础内容。因为JavaScript语言的灵活特性,这些基础内容既是重点,也是难点。这些内容包括:JavaScript中的 this 指向问题、闭包问题、关键 API、高频考点等。事实上,这些内容将不仅决定你的面试表现,还能直接影响你日后的进阶和发展。

第二部分 JavaScript 语言进阶

牢固的基础知识,是进阶路上的基石。本部分将从JavaScript异步特性理论与操作、Promise的理解和实现、面向对象和原型知识、ES的发展进化等内容入手,带领大家强化难点。同时我们会通过大量实例,加深读者对知识点的理解,帮助读者融会贯通。

第三部分 不可忽视的HTML和CSS

翻过 JavaScript 的大山,也许你会觉得学习HTML和CSS能相对轻松一些,但关于HTML和CSS 的知识仍然“不可忽视”。即使它们不是面试和工作中的“拦路虎”,也是至关重要的内容。本部分,我们不会系统且全面地介绍HTML和CSS 的相关知识点,而是会启发式地从一些细节入手,“管中窥豹”,介绍应该如何学习这些内容,并介绍响应式布局和Bootstrap的实现。

第四部分 前端框架

本部分将介绍前端框架方面的知识,以 React 为主分析框架对前端而言到底意味着什么,以及我们应该如何学习 React。事实上,对 React 的学习不能只停留在“会用”的层面,学习其组件设计和数据状态管理对于培养编程思维也非常有益,有利于学习者从更高的层面看待问题。同时,我们也会对比 Vue 框架,探讨前端框架的“前世今生”。

第五部分 前端工程化

资深程序员永远逃不开的重点工作之一就是“基础构建”和“项目架构构建”。本部分将从模块化谈起,结合 webpack、Lerna 等工具,为大家还原一个真实的“基建”场景,深入项目组织设计,并落实代码规范工具设计。

第六部分 性能优化

性能优化是理论和实践相结合的重要话题。本部分将介绍大量重要的性能优化知识点,如性能监控、错误收集与上报等,同时将结合项目实例和React来探讨性能优化问题。阅读本部分之前,大家需要了解缓存策略、浏览器渲染的特点、JavaScript 异步单线程对性能的影响、网络传输知识等内容,同时也要具备一些实践经验,如用 Chrome devtool 分析火焰图、编写并运行出准确的benchmark等。

第七部分 编程思维和算法

前端开发离不开编程基础,良好的编程思维、基本的算法知识,可以说是每一位工程师所必须具备的。本部分将用 JavaScript 来描述多种设计模式,手把手教大家用JavaScript处理各种数据结构,并强化对一些常考前端算法的理解和掌握。

第八部分 网络知识

本部分将重点强化网络知识,包括缓存、超文本传输协议(HTTP)、前端安全等。作为一名前端开发者,不了解互联网传输的奥秘、不清楚网络细节是很难进阶的。网络知识关联着性能优化、前后端协作等核心环节,对于每一位工程师而言都十分重要。


授人以鱼不如授人以渔,除去书中的知识点,我更希望能够与大家分享我的学习方法:如何投身到社区中与广大开发者一起讨论;如何阅读前人的经典著作,站在巨人的肩膀上使自己看得更远;如何解读开源库并从中汲取养分;如何在面试和述职中正确地表达观点……

在这个时间节点,我们仍然面临着疫情的严峻挑战。但与此同时,一切就像阿尔贝·加缪在《鼠疫》中所说的那样:“春天的脚步正从所有偏远的区域向疫区走来。成千上万朵玫瑰依旧枯萎在市场和街道两旁花商的篮子里,但空气中充溢着它们的香气。”书中另外一句话也让我印象深刻:“对未来真正的慷慨,是把一切献给现在。”抗击疫情如此,每个人的学习进阶道路同样如此。愿与大家共勉!



图书推荐

《前端开发核心知识进阶:从夯实基础到突破瓶颈》

侯策 著


  • 前端知识从基础到进阶全面覆盖
  • 大厂面试真题花样解法揭秘

本书聚焦前端开发基础知识和进阶技能,关注前端工程化和体系化,结构清晰,循序渐进,深入浅出。在重构基础知识方面,本书将标准规范和实践代码相结合。在培养进阶技能方面,本书深度剖析了技术背后的原理和哲学。书中列举的项目设计案例涵盖了许多经典面试题目,不仅能帮助初级开发者夯实基础,还能为中、高级开发者突破瓶颈提供帮助和启发。