前端工程化:从切图仔到前端 Leader,如何跨越式成长

前端的小伙伴应该能够很明显地感觉到,在面试过程中,各大公司面试官已经非常注重前端工程化能力的考察了。

前端工程化的演进可以极大地提升开发效率。前端发展到现在,社区涌现出大量的优秀框架和工具,得以将前端工程师从繁重的工作中解脱出来。比如,同样地给一个 dom 元素绑定一个 click 事件,使用 Vue 就会比 JS 更简单清晰。

我相信每个踏入前端这个行业的同学都是有着一颗热爱学习的心。因为前端这个行业不如后端那么成熟稳定,所以一直是在高速地推陈出新,每年都会有新的框架出来。但每个人的精力又是有限的,每个人都希望投入有限的精力的情况下,能学到最有价值的东西。所以我一直在想能否将这些年前端在工程化方面的优秀成果浓缩到一个课程中。感兴趣的同学可以了解下 ?《透视前端工程化》

结合自己的经历总结了一些在前端学习上的方法,希望对大家有所帮助:

  1. 夯实自己的基础能力。HTML、CSS、JS这三个前端必备的技术是必须要精通的,不能做了几年前端了连CSS布局、异步编程这些基本的东西还模糊不清。
  2. 抓主要矛盾,打造核心竞争力。每个人的精力有限,我们应该挑选一个感兴趣的方向往深里去钻研。而不是企图将所有的方向都做到最好。
  3. 工作中多思考总结。很多人吐槽自己一直疲于做做业务需求,没有机会做技术项目,得不到提高。其实在业务中也能做到能力的提升。在做业务的时候,完全可以将自己平时的新想法,接触到的新技术付诸实践。另外,做完项目后做一个复盘,总结自己遇到的问题和解决方案。久而久之,你会发现自己在业务中也能很好地得到成长。
  4. 多与别人交流。现在互联网技术讲究开源,我们的心态更要open,应该互相学习对方的优点,内化为自己的东西,让自己得到快速提升。
  5. 时刻关注社区技术动态。前端的新东西层出不穷,不一定什么东西都去学,但要掌握行业动态,知道大家都在玩什么技术,跟上行业的脚步。

我是谁?

我是王超,现任快狗打车(原58速运)前端负责人,从 0 到 1 组建了快狗前端团队,负责团队技术体系的搭建,形成了以 Webpack 和 Vue 为基础、 Node.js 中间层为补充的,自动化、工程化、组件化的快狗前端技术体系。

曾任职于人人网、奇虎360、58,有 8 年知名互联网工作经验。

这次主要是想和大家聊聊从切图仔到前端 Leader,究竟是如何实现的个人成长?

联合推荐:沈剑 快狗打车CTO王海旭 58大前端团队创始人冯阳 58到家平台前端负责人


我的工作经历

时间如白驹过隙,转眼已经在前端这个行业已经七八年的光景了。非计算机专业出身的我从事前端这个行业,确实经历了很多的挫折,走了很多弯路。

但现在回首自己的职业经历,每一份经历都有不一样的收获。

毕业生,第一份工作千万不能选错

我毕业后第一份工作是在一家广告联盟公司做 flash 广告设计和平面设计。当初选择这份工作自己根本就没经过仔细的考虑。

由于公司很小,在 flash 开发设计这个岗位上就我一个人,身边没有有经验的人可以学习。随着 Web2.0 时代的到来,Flash 技术也在走下坡路了,我的 flash 之路是条死路。

后来公司来了一个做前端的同事,工作中与之不断交流中渐渐了解了前端开发,flash 技术未来一定会被前端的技术所取代。这才将自己的精力投入到了前端的学习上,慢慢也能做一些简单的前端工作了。

现在来看,虽然自己最终找到了一个正确的航道。但如果在选择工作的时候就经过仔细调研,能让自己少走很多弯路。

平台对新人很重要,好的平台会让新人有很好的成长起点,具备良好的视野。而且在平台众多有经验的老人的提携下,新人成长的会很快,能为以后的职业发展奠定一个良好的基础。

「人人网」时期,见证 PC Web 到 移动 Web 的跨越

当时的前端处于从 PC Web 开发向移动 Web 开发过渡的时期。在这里的两年多,无论是 PC 上的开发还是移动上的开发都做了很多,比如 PC 各种浏览器厂商的兼容问题,移动端上各种机型的适配问题,使用 CSS3 实现各种新特性。

此时前端领域正在发生快速的变化,像 Angular、React 等现代前端框架已经开始出现。而这边依旧是使用传统的原生 JS、jQuery 重复性地完成项目,自己的技术也进入了一个瓶颈期。

面对自己的技术瓶颈,我想到的是换个环境来逼迫自己跳出舒适区,突破技术瓶颈。
但是,这里我想多说一句,一定不要为了跳槽而跳槽。

跳槽之前要问自己一句,我在这里是不是已经该学的都学会了?如果答案是肯定的,那就早点行动,否则就踏踏实实地继续沉淀提高。

「360」时期,越痛苦提升越快

360 这边的技术体系很完善,前后端分离开发、前端部署平台化、上线前代码自动 diff,新技术的应用、定期的技术交流。

入职之初我做项目很吃力,因为从开发框架 Backbone、React 到构建工具 Webpack,再到开发方式使用 Linux 开发机,所有的东西都是新的,感觉哪哪都不会。

我足足用了半年的时间,直到和同事一起使用 React 重构 360 地图,才完全熟悉和适应。但让我无比痛苦的半年恰恰是自己提升最快的时候。

谈到这里我想说一下是如何一步步提升自己的。

第一是独立思考解决方案。遇到了问题我通常是自己去网上去找解决方案,实在解决不了了,再去找自己的同事和 leader 寻求帮助。

第二看比自己能力强的同事的代码。从他们的代码中,可以借鉴到很多好的设计方式和编程习惯,日积月累变成自己的东西。

第三多与同事进行技术交流。通过与他们的交流,可以很好地开阔自己的视野,弥补自己不知道的知识。这里特别感谢一下我的老朋友司望利,从他的身上学到了很多。

「快狗」的挑战,建设前端工程体系

快狗这边的早期的前端开发方式比较原始。担任快狗前端负责人后,我开始着手推进前端工程化。首先就是升级技术栈,并进行前后端分离。陆续建设了前端部署平台、组件库、脚手架、以及性能监控平台逐渐形成了完善的前端技术体系。

做为团队负责人如何从无到有搭建技术体系,这里分享一下我的经验。

新晋技术负责人从技术思维向管理思维转变。很多技术人在成为团队管理者后,还是习惯什么事情都自己搞,一方面担心别人做不好,另一方面担心自己的技术优势会慢慢丧失。别人不会做,你可以进行指导,但不能千万自己替他做,因为你的精力是有限的。另一个担心更不可取了,你虽然不再深入技术细节,但在知识的技术广度、技术视野上会有更大的提高。

技术体系建设要以解决业务痛点为目的。任何的技术工具和平台建设都不能脱离这个目的,不能仅仅为了试用一下某项技术或者好玩就去搞。否则很可能是白白浪费了研发成本,缺很难在团队中推广使用,无法产生价值。

技术体系建设要充分讨论后再实施。方案的设计讨论清楚了,才能避免将来各种问题的出现。我们在建设前端部署平台的时候就有过深刻的教训。

由于前期方案考虑不周,后期平台经历一次大的调整,使用老平台部署的项目用了半年的时间才完成迁移,成本很高。

建议将 70% 的时间用在方案设计和讨论上,30% 时间用在工具和平台的研发上。

为什么大公司现在这么重视前端工程化?

从事前端开发这个职业有七八年的时间了,既经历过工程化程度极低的开发方式,也见证了这几年前端领域工程化水平的大幅提升。导致前端工程化水平大幅提升的原因,大致有二:

一方面是由于大公司本身业务复杂,相应的前端工程化程度高,配套的基础设施很成熟,对人员的要求自然很高。

另一方面,现在的前端开发都是在一些先进的工程化工具基础之上,比如 React、Vue、Sass、Webpack 等。只有具备良好的工程化能力,才能更好地应对日益复杂的开发任务,才能更容易进入大公司。

试读 ?《透视前端工程化》

课程设计

前端工程化是个比较大的话题,涵盖的知识很多。大篇幅的讲述理论知识又是很枯燥的,而且效果不好。

所以在课程设计上,我是以动手实现一个前端脚手架工具为主线,过程中引出实现某个功能的思路和用到的工具,并一一讲解。

例如,为了把规范开发者的代码,我们在脚手架中需要引入代码检查工具eslint和stylelint,并对两者的使用进行了讲解。

又比如,在搭建本地开发环境可能有多种实现方式,比如自己单独写一个静态服务器来实现或者使用 webpack-dev-server 和 webpack-dev-middleware 进行来实现,我们着重对后者进行了详细介绍。

读者在课程结束后,不但可以系统学习了前端工程化的工具和知识,还可以完成一个实用的脚手架工具。

课程特色

实操驱动,沟通前端知识

实际操作脚手架搭建,沟通起流程规范、开发、联调、测试、构建、部署各个环节知识

实用性强,直接落地业务

课程内容基于团队的实际工程化经验,可以把课程所学直接应用到业务开发中

你能学到什么

  1. 对前端工程化有一个系统认知;
  2. 能独立设计一套前端工程化解决方案;
  3. 知识广度上有大幅提升;
  4. 进入更好的平台,获得更好的薪酬。

最后,希望每一个前端人都能通过努力来完成自己的人生进阶道路,加油!

试读 ?《透视前端工程化》

目录

开篇词:到底什么是前端工程化

第一部分:模板设计

第01课:模板功能设计
第02课:Webpack 基本介绍
第03课:搭建项目模板框架
第04课:前端模块化解决方案
第05课:搭建本地开发环境
第06课:搭建本地 Mock 服务
第07课:引入代码检查工具
第08课:自动生成雪碧图
第09课:根据浏览器构建
第10课:根据环境构建
第11课:集成移动端调试工具
第12课:引入单元测试
第13课:引入 e2e 测试
第14课:Webpack 构建性能优化
第15课:添加部署功能
第16课:聚合项目配置并模板化

第二部分:命令行设计

第17课:cli 功能设计(上)
第18课:cli 功能设计(下)

结语:开放的心态才是更高阶的工程化

展开阅读全文

透视前端工程化

06-05
### 专栏背景 前端的小伙伴应该能够很明显地感觉到,在前端面试的过程中,各大公司的面试官显然非常注重**前端工程化**能力的考察了。前端工程化是一个很大的话题,到现在都没有一个明确的定义,但它带来的效果却是显而易见的:**可以极大地提升研发效率、可以降低大型项目的开发难度、可以更容易获得面试官的青睐**…… 所以无论你处于前端工程师的哪个阶段,都有必要深入了解一下前端工程化前端圈一直在高速地推陈出新,虽然每个踏入前端行业的小伙伴都有一颗热爱学习的心,但精力是有限的,也有一些专栏大家看了很多资料,依然不能上手。每个人都希望在投入有限精力的情况下,能学到最有价值的东西。 在《透视前端工程化》中,王超老师**以 Vue 为例**,结合快狗打车(原 58 速运)团队在前端工程化方面的实践经验,带领大家**从搭建一个脚手架开始**,将用到的技术点逐一拆解,以点带面地使大家对前端工程化的思想有比较深入的理解。 《透视前端工程化》的知识具有系统性,从流程规范、开发、联调、测试、构建、部署各个环节系统地讲解搭建一个脚手架所用到的前端知识。并且,专栏源于王超老师所在团队的工程化实践,实用性很强,学完后可以**直接应用到业务开发中**。 ### 讲师简介 ![avator](https://images.gitbook.cn/dxx98s.png) ### 专栏收获 - 对前端工程化有系统的认知,完成开发级别提升; - 能独立设计一套前端工程化解决方案,自己动手实现业务; - 在前端知识广度上有大幅提升,提高面试通过率。 ### 前置知识 **Vue** 配置的基础知识 使用 **React、Angular** 的读者可以对应替换调整 ### 适宜人群 - 期望面试大厂、平台跃升的初中级前端工程师 - 期望提升自己开发级别的初中级前端工程师 - 期望带团队的前端工程师 ### 目录 [<font color=#007AFF>开篇词:到底什么是前端工程化</font>](https://gitbook.cn/gitchat/column/5cf77250ce53ed3f49faf0e5/topic/5d0c6f33820bf61799b753a3) 第一部分:模板设计 [<font color=#007AFF>第01课:模板功能设计</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c6f64820bf61799b753a4) [<font color=#007AFF>第02课:Webpack 基本介绍</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7596820bf61799b753d2) [<font color=#007AFF>第03课:搭建项目模板框架</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c77c3820bf61799b753e1) [<font color=#007AFF>第04课:前端模块化解决方案</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7af9820bf61799b753ec) [<font color=#007AFF>第05课:搭建本地开发环境</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7b27820bf61799b753ed) [<font color=#007AFF>第06课:搭建本地 Mock 服务</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7b47820bf61799b753ee) [<font color=#007AFF>第07课:引入代码检查工具</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7b69820bf61799b753ef) [<font color=#007AFF>第08课:自动生成雪碧</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7bd6820bf61799b75404) [<font color=#007AFF>第09课:根据浏览器构建</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7bfb820bf61799b75406) [<font color=#007AFF>第10课:根据环境构建</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c18820bf61799b75409) [<font color=#007AFF>第11课:集成移动端调试工具</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c36820bf61799b7540b) [<font color=#007AFF>第12课:引入单元测试</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c4d820bf61799b7540c) [<font color=#007AFF>第13课:引入 e2e 测试</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c68820bf61799b7540d) [<font color=#007AFF>第14课:Webpack 构建性能优化</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c81820bf61799b7540e) [<font color=#007AFF>第15课:添加部署功能</font>](https://gitbook.cn/m/mazi/columns/5cf77250ce53ed3f49faf0e5/topics/5d0c7c9f820bf61799b7540f) 第16课:聚合项目配置并模板化 第二部分:命令行设计 第17课:cli 功能设计(上) 第18课:cli 功能设计(下) 结语:开放的心态才是更高阶的工程化 ### 联合推荐 <font color=#FF700A>**沈剑 快狗打车CTO**</font> 前端决定体验,这个说法一点也不为过。有没有一个专栏能够涵盖大部分前端技术思想呢?王超的《透视前端工程化》,正是满足了广大前端工程师望眼欲穿的期待!在这里,我把这个课推荐给想要了解和掌握前端工程化、希望提升自身工程化能力的前端小伙伴。**只此一课,强力推荐!** <font color=#FF700A>**王海旭 58大前端团队创始人**</font> 在当今互联网行业的快速发展下,为了更好地应对市场变化和产品迭代,工程化能力已经成为了各公司前端研发部门的必备能力。从初级到高级管理者都应具备工程化意识,并在项目实施和技术升级中道术结合,以提升个人及团队的竞争力。王超老师将自己多年前端工程化实践总结成专栏,从道和术的层面分享给大家,相信会给大家带来不错的收获。 <font color=#FF700A>**冯阳 58到家平台前端负责人**</font> 前端工程化前端工程师提高开发效率的必备技能,同时是目前各大公司入职面试考察的基本能力,也是前端团队实现从刀耕火种到工业化的基础技术设施。王超同学拥有多年的前端开发经验,经历过前端技术发展各个阶段,对前端工程化有深刻的理解和感悟,相信通过本专栏的学习,你的前端开发技能一定能实现突飞猛进的进步。 ### 购买须知 - 本专栏为文内容专栏,共计 20 篇 - 付费用户可享受文章永久阅读权限 - 读者可在评论区向作者提问或交流 - 本专栏为虚拟产品,一经付费概不退款,敬请谅解 - 本专栏可在 GitChat 服务号、APP 及网页端 [gitbook.cn](https://gitbook.cn/gitchat/column/5cf77250ce53ed3f49faf0e5?utm_source=pcbanner190623) 上购买,一端购买,多端阅读 #### 订阅福利 - 订阅本专栏可获得专属海报(在 GitChat 服务号领取),分享专属海报每成功邀请一位好友购买,即可获得 25% 的返现奖励,多邀多得,上不封顶,立即提现 - 提现流程:请在 GitChat 服务号中点击“我-我的邀请-提现”进行提现
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值