« 回到博客列表

一个非著名前端开发者的 2017

Dec 29th, 2017阅读本文大约需要 12 分钟

写在前面

当我准备写这篇博客的时候,我突然意识到:麻蛋,又一年过去了,我又老了一岁,去年定的目标又有一部分要延期处理了。

虽然年年都有被遗忘的小目标,但也还是有不少实现了的小目标的

过去这一年

2016 年是我正式参加工作的头一年,这一年里,我从一个只会 Bootstrap + jQuery 的“伪前端工程师”,成长为一个基本掌握主流 MVC/MVVM 框架,能够以不那么原始的方式开发 Web 应用,“勉强算合格的前端工程师”。

2017 年,是继续成长的一年,这一年里我进一步扩展技能树,努力把自己打造成一个“像样的前端工程师”。

这一年里:

我把三大生态(Angular / React / Vue)都学习了一遍

去年只是学习了 Angular.js(其实去年的描述不够严谨,Angular.js 和 Angular 是两样东西了),并少量接触了 React 和 Vue。2017 年,我认真学习了一下这三大生态的全家桶,并最终选择了 React 和 Vue 作为主力。倒不是说觉得 Angular 真有那么的不堪,一方面一个组件至少 3 个文件,这在习惯了 Vue 的单文件组件和 CSS Modules 的我眼里是无法接受的,编辑器分分钟被标签淹没;尽管这不是什么新鲜事儿,早年间强调 HTML-CSS-JS 分离的时候,我们一直都是这么干的,但毕竟现在时代不同了。另一方面 Angular 里涉及到的概念远不如 React 和 Vue 里那么直观,惰性使然,在有更好的替代品的情况下,不是很想去接触这些难懂的东西。加上开发者社区几乎一边倒地站在 React 和 Vue 的阵营里坚定不动摇,这让 Angular 的处境像极了 Windows Phone。一样事物能否存活,很大程度上受到其周边生态的影响,生态不容你,自然发展不下去,被淘汰出局也就是意料之中了。

当然三大生态每一个都不是省油的灯,随便一个拎出来都顺着一套全家桶。学完了渲染模板/函数,还要学路由、状态管理,每个生态都有与自己相关的测试工具、脚手架配置、静态类型检测方案、HTTP 方案等等。想要进阶还要去深入理解其实现原理和一些内部函数。在这上面,我花费了不少的精力,但回报也是值得的:

  • 现在我可以自由地选择要用什么样的技术栈去完成项目
  • 学习新技术时不会因为前置知识的缺失而无法继续下去
  • 跟同行们聊天可以就这其中的任意一个框架/库展开话题
  • 面试别人时候可以大胆地说“这几个里你最熟悉哪一个”而不用心虚
  • 面对各种路子出身的新人提出的问题也都能够从容应对

学习新的框架/库的过程中,经常会引发对之前学过的内容的重新思考,比如刚开始接触 Vue 的时候,我觉得 v-model 真是方便,学过 React 之后,我对 v-model 就怎么也看不顺眼了。再比如刚学会 Redux 时候感觉这套方案真好,直到遇见了 Vuex,发现原来还有更简洁的写法,这大概就是没有对比就没有伤害吧。

事实上据我了解,这三个框架/库都会用的人并不多,大多数只会其中一个(Vue 居多),有些会两个(多一个 React),可能我的关注点比较奇特吧,喜欢做一些横向对比的事情,比如当初学完 LESS 之后,我又去把 SASS、Stylus 也都学了一遍,其实都是大同小异的东西。很多人会说,会那么多干嘛,工作中又不会全都用到,选一个深入就好了,其他都差不多的。在我看来,多学一种框架/库其实就多一种看问题的角度,能够更好地去分析问题,寻求最优解。即便单从实用角度出发,只有掌握的足够多了,才有权利选择如何去做,而不至于因为别的不会而被迫只能用这个。

有人问我你通过什么方式去学这些东西,我的回答是首选官网,按照章节依次去读,三大生态的官网都提供了非常良好的文档和教程,质量也都非常的好,比市面上任何一本“权威指南”更权威,而且持续更新,而且免费,也都有对应的翻译(Vue是官翻,Angular 和 React 是社区提供的中文站)。然后是实践,动手去做一些 Demo,实践中你会遇到各种问题,带着这些问题去官方文档搜,搜不到的去 StackOverflow、Github Issue、Google 里找,以此来查漏补缺。

我接触了更多的样式管理方案

去年我接触了 LESS 和 SASS 两大主流的 CSS 预处理器。从此我再也无法忍受手写 CSS 时那些冗余的代码,感觉那就是在浪费生命。这一年我把重点放在了探索其他方案上,比如 PostCSS,过去我以为这货就是个后处理器,用来加个浏览器标识前缀之类的,是个小插件般的存在。然而我错了,PostCSS 其实是一个生态,是用 JS 来对 CSS 进行编程的一项技术,深究起来,其实可以跟 Gulp、Webpack 这些东西一样形成一套系统,利用插件去实现各种各样的功能。

这一年,我还接触到了当下最流行的样式命名方案——BEM,以及与之相关的 OOCSS、SMACSS。之前我的 CSS 类名完全是随性发挥,想到啥叫啥,没什么章法。在接触了这几套方案,并且阅读了 Bootstrap 的源码之后,我对于如何管理样式有了全新的认识,原来 CSS 也可以这样去做模块化。前辈的话是对的,CSS 确实很容易,但是要把它用精了,非常难。

这一年,我还接触了时下最流行的两种 CSS-in-JS 方案——CSS Modules 和 Styled-Components,前者的写法更多地保留了 CSS 本身的方案,开发者可以自由使用处理器去生成 CSS,然后通过 styles.className 的方式引入样式;后者虽然语法上保留了原生的 CSS,但实际上则是完全依托 JS 来实现。实践下来,目前感觉还是 CSS Modules 更适合一些,主要理由是它生成的类名可读性更高一些;Styled-Components,或许是我还没有找到合适的方法吧,生成的类名就是一行随机字符,根本无法从类名上去识别一个元素究竟代表啥。但是 Styled-Components 的可控性更好,可以通过 JS 编程来进行控制,比 CSS Modules 更灵活。还有就是 CSS Modules 更加通用,因为它与库/框架无关,而 Styled-Components,据我所知,还只能用于 React。

我入门了 TypeScript

现在的前端恨不得放弃 JavaScript,啥都改用 TypeScript 来写。借着学习 Angular 的劲头,我也对 TypeScript 入了个门。静态类型的好不用我多说,体验过的都懂,没体验过的建议去体验一下,会发现新世界的大门。

不过 TypeScript 目前还是有一些比较大的坑,让我不是很想用它,一个是对类型的要求略有些严苛,一些原本很正常的写法,到了 TypeScript 里会报类型不匹配的错误,从 TypeScript 的设计上讲这是合理的,但使用起来难免有些尴尬。再有就是 Vue 对 TypeScript 的支持还比较有限,虽然 Vue 2.5 加强了对 TypeScript 的支持,但只是加强了,总的还差很多。另外整个前端生态对 TypeScript 也还处于适配阶段,很多模块都需要添加类型申明之后才能配合 TypeScript 使用,想让开发者迁移到 TypeScript 上还需要一个过程。

我积累了大量的前端工程化经验

这一年里,我坚持使用 standard.js 和 stylelint 进行代码风格检查,一年下来已经养成了习惯,即便没有这些工具,照样能写出符合规范的代码。Webpack + Gulp 的组合成为了标配;前者用于打包构建,配合 webpack-dev-server 做热替换,开发时用着爽到飞起,再也回不去了;后者用于一键部署,一行命令直接完成从构建到部署的整个流程。月初社区里还乍现了一款名叫 Parcel 的打包工具,零配置,速度还贼快,对于一些小型项目而言,可以免除配置 Webpack 之苦,直接用 Parcel 就好了。当然 Parcel 正式发布毕竟也才一个月不到,功能上还有待完善,很多功能的支持度还有待提升。之前还有一个 Prepack,一度上了热点,大致是实现了类似 Webpack 的 tree-shaking 功能,在打包前去掉一些没有用到的代码,或是简化代码的结果,以达到减小打包后代码大小的目的。

我学会了前端自动化测试的基本套路

Karma、Mocha、Jasmine、Jest、Enzyme、Chai、NightWatch、Protractor、Phantom……一样样都有接触过,可以进行像样的单元测试、端到端测试了。

虽然前端本身是一个变化多端的行业,需求和技术的变化都很快,很多时候我们没有时间去做完整测试。但少总归好过没有,迟到总归好过缺席,哪怕测试覆盖率再低,那至少我可以比较有信心说被覆盖到的那部分代码是正确有效的。

我深入了解了一些构建系统

其实这事纯属意外,我本意只是想深入了解一下 Gulp、Webpack 的配置,后者的配置看似简单,但是深究起来还是挺复杂的,很多东西官方文档没说明白,还得去各个社区扒拉;Gulp 虽然好一些,但底层也是一大堆的概念。结果由于一些原因,面临了一些现有插件无法解决,或是解决效果和我们的预期相差非常大的情况,被迫去研究了一下 Gulp 插件和 Node 脚本,自己写了一些插件和脚本,去执行我们需要的任务。从此也是解锁了新技能,曾经觉得高攀不起的脚本,解剖开来也没那么的深不可测么,还是能 hold 住的。

不过这条路有毒,一旦开始了,就会想着再弄点别的啥出来,有种手握锤子到处找钉子的意思。

我开始走向管理岗

或许是我运气好吧,过去做学生干部的经历到了还是派上了用场。现在手底下有几个人,小团队人不多,但也是一个团队了,自己也晋升为 Team leader,从一线的业务开发中脱离出来,开始走向技术管理。以我的性格,大体不会去带产品,更多会是做技术管理,带技术团队,往架构师的方向去发展。

现在会需要花时间去考虑团队协作的规范、如何培养新人、如何合理分配工作以发挥手下每个人的长处,同时还有自己持续的技术提升,事情其实并没有比以前少,反而增加了很多。开发完成只要交给测试去测就好了,没测出 Bug 之前大脑完全可以放空。现在不行,做完一件事反复地在考虑这样做够不够好、会不会有什么问题、受众的感受会是如何、怎么才能更好。脑子里满满的都是要考虑的点,生怕因为自己的不够专业,而辜负了团队的期望。

下一年

2017 年整个一年,基本都是围绕的“工程化”这个问题进行的深入,从中我积累了大量的工程化实践经验,

2018 年,我会把重点放到原生应用和服务端开发上,前者是 JavaScript 在传统应用场景下不会或是极少会遇到,然而 JavaScript 及其周边生态的发展使得这些事变为了可能的领域。后者在服务端开发里已经不能算是新秀了,主要是想做一下 SSR,还有实践一下 GraphQL 和 MongoDB,所以 Node.js 服务端开发这一块就绕不过去了。

明年打算重点研究以下这些内容:

React Native / Weex / NativeScript

JavaScript 开发原生移动应用目前最好的几套方式,分别由 React、Vue、Angular 在背后撑腰,感觉又是一套全家桶的样子。不过 iOS 对此的限制依然是个大坑,先从 Android 开始吧,祈祷苹果方面能够让步。

可以预计到的是,学习这些技术的同时,肯定也离不开对 iOS/Android 原生开发的了解,应该会去入门一下 Swift/Kotlin 吧。

Electron / React Desktop

JavaScript 开发桌面端应用目前最好的方案,多个明星项目的实践结果表明,Electron 已经是一套非常成熟的方案了,大可放心用到生产环境中。不过其复杂的签名、配置等,到时应该也会很烦。

React Desktop 是一套比较完善的基于 React 开发的 Windows/Mac 原生样式组件库,对于想模拟原生体验的项目而言,可以直接使用。

PWA

相比微信小程序雷大雨小的窘境,社区对 PWA 似乎更加看好,现在就等 Edge 和 Safari 跟上脚步了。我也打算在这方面投入一些时间,感觉会很值得。目前已经实践过的大概也就只有使用了 manifest 这种最初级的改造,真正的力量还没被释放,Service Worker 是一定要去学一下的。

KOA

过去最辉煌的是 Express,不过放到现在应该是让给 KOA 了。

GraphQL

严格来说这个不局限于前端,不过因为跟 JavaScript 关系很大,先划入前端的范畴里吧。要是可以的话,打算下一波推广一下替代 REST。

除了前端

当然前端依然会继续是我的主攻领域,这一点短期内是不会变的,但是世界在往前走,我们也不能死拽着 JavaScript 就认为自己无敌了,还是得与时俱进去接触一些领域范围以外的技术。

Python

高中生都要开始必修 Python 了,不想那么快就被淘汰的话,还是得学一下 Python。面对即将到来的人工智能时代,即便不从事直接的人工智能开发工作,也需要懂一些基本的内容,这样才不至于在人工智能时代被机器玩得团团转还不知所以。当然,人工智能领域里主流的库(比如 TensorFlow 之类的)基本都提供了适用于 JavaScript 的 API,所以用 JavaScript 来开发 AI 应用也已经提上日程了。

区块链

除了人工智能外,区块链的应用也是当下一大关注焦点。神奇的是当下火热的几大领域,JavaScript 都能做,万万没想到 Node.js 在区块链开发里已经是除了 Python 以外的最佳选择了。

管理学

如前面所说,现在走上了管理岗,在其位谋其政,虽然对政治不感兴趣,但是管理和政治那是两回事。管人和管代码很多时候是一样的,能把代码管好的,管人应该也不会太差。

小结

总的来说今年的学习过程还是按照去年定的方案走的,侧重点在“工程化”方面,对于一些大前端领域的新技术,涉及的还比较少。接下来的一年,会重点去点这方面的技能,进一步开枝散叶。

现在大前端的发展也已经形成了一棵庞大的技能树,有根有枝杈,学习新技术之前,会需要一些前置知识的铺垫。比如 React 和 Vue 坐上了当年 jQuery 的宝座,成为了前端必会的新基础,你甚至可以不会 jQuery,但 React 和 Vue 至少得会一样。很多新技术都是围绕它们去拓展的,理解不够的话就很难去理解它们之上的技术,比如:想学 Styled-Compoents 就必须先会 React,而学习 React 又免不了要接触 ES6+ 的语法;不学 Vue 可能压根就不会知道 Axios 是个啥;为了在生产环境去使用它们,自然免不了会去接触 Babel、Webpack、Gulp 等的工具。过去这一年基本就是在这种缺什么补什么的过程中度过的,到现在基本业务上的事情已经没太大压力了,即便是不曾具体实践过的内容,也大致有思路该怎么去做,或者哪里有类似的源码可以拿来参考学习。

当前整个互联网圈子的开发模式大体已经稳定为“云 + 端”的模式,大前端就是其中的端(包括 Web 和 无线),每多一种访问终端,或许就会催生一种新的岗位,着眼未来考虑,广度上的覆盖(比如去接触一下 VR、IOT、AI 相关领域的内容)是非常有必要的。但同时一些基建方面的内容(比如:ECMAScript 的标准、Node.js、GraphQL、Python 等)依然不能拉下,得往深度去走。

广度与深度结合,形成一个“T”字型的技能栈,这大概会是我未来的一个目标。现在一横已经有了,一竖也有了一些了,接下来要做的,就是让那一横更宽,让那一竖更深,同时让“T”字尽可能胖一些,形成一个倒三角。

继续努力

都说参加工作的前 3 年是技能的积累阶段,照这样看我已经走完了 2 年,再有 1 年就进入 3~5 年经验这个阶段了,到时市场的要求会更高,我必须提前做好准备。

学习的过程是痛苦的,比这更痛苦的,是持续不断的学习,而做这一行,就得终身学习,什么时候停止不学了,什么时候你就要开始濒临淘汰了。好在我对前端是热爱的,有兴趣驱动,这一切就不难,怕就怕不喜欢还非得做,那就非常尴尬了。

最后,新年快乐!来年我们继续共同进步!

该系列的其他文章