《很高兴我没有猝死》- 前端新人的 2016 年总结和感悟

现在是 2016 年 12 月 31 日晚，很高兴我没有猝死。

想弥补耽搁的几年，过去一年里，我几乎一直坚持着 9117（周一至周五每天 9 点半至 11 点半，周六、日 12 点 至 24 点）。

开始前端之旅

2015 年 8 月 1 日，刚入职南通一家船舶制造国企的第三天，我就决定做改行的准备，开始前端学习之旅。每晚下班后学习两个小时，用了一个月，把最基础的 HTML, CSS, JavaScript，到 Git, Gulp, Less, Node(Express) 过了一遍。9 月初投了 5 份简历试试水，很幸运的得到了两个面试机会并拿到了 offer。

入行一年

晃荡了一个月之后，2015 年 10 月 27 日，正式入职。

试用期早已计划好疯狂学习一个月。主动坚持着 9117。这段时间里，除了熟悉业务，我补充了一些基础知识，学习了 Angular。

试用期过后，觉得自己有限的知识，应付工作仍然吃力，于是又自觉地坚持 9117 两个月。春节后我参与了一个全新的项目，使用 Vue + PostCSS + Webpack。作为一位初学者，我非常珍惜这次机会。

3, 4 月，尝试着写一个监测属性变化的库和一个简单的 MVVM 框架。这段时间我找到了造轮子的快乐，于是决定 9117 制度延长至一年。

5 月，参与了另一个使用 Vue 的项目。业余时间，我开始学习 Vue 的源码，主要是响应系统。为了方便单独学习和使用，我把 Vue 的响应系统剥离了出来（地址: smart-observe）。

6 月，开始学习 Virtual-DOM，并希望尝试结合 JavaScript 表达式和 JsonML ，实现跨平台渲染（地址: eJsonML）。幸运的是，这个项目很快收到了 JsonML 作者 Stephen McKamey 的 star 。

好景不长，8 月初，因工作需要，我负责独立开发一款 Android 扫码软件。之前并没有 Android 或 Java 基础，于是中断了 eJsonML 和 Vexil 的开发。拿出全部精力，学了 1 天的 Java，2 天的 Kotlin，3 天的 Android，一周的 RxJava, Dagger2, Firebase 等，做了个在线记事本的 Demo，第三周开始开发，第五周上线，成就感瞬间爆棚。

9 月和 10 月，做着修修补补的工作，休了个假，过了个十一。

2016 年 10 月 26 日工作刚好满一年，决定不再续签。

目前

原本计划疯狂的玩耍半个月，然后再开始找工作。但没有工作时，才发现根本无心玩耍，于是开始疯狂的投简历。

阿里二面被淘汰，虽有些难过，但对未来仍充满信心，毕竟前端之旅我才开始一年。

目前在一家做性能加速、监控的公司做数据可视化方面的前端开发，偶尔写写服务端。

感悟

感悟太多，随便挑几条吧

入行要学好 Git

工作中 Git 真的很重要。就在前几日，一刚入行的博士生同事在转正报告中，阐述了他没有解决好冲突就上线的悲剧，并总结了一句话，“Git 不学好，上线上到老”。Git 不难学，网上教程也很多。建议本地建个专门学习 Git 的 repo，针对教程多多练习。工作中如果遇到拿不准的场景，也可以用来模拟一下。在熟悉之后，建议设置一套适合自己的 alias。

初学者要珍惜参与全新项目的机会

参与新项目可以直面很多问题，拿 CSS 来说，垂直居中、封闭浮动、高度根据宽度等比例自适应、多行文本尾部自动省略……这些问题网上有很多介绍，但真正遇到并亲自解决掉时，会有着更加深刻的体会。

如果只是直接参与项目的维护，这些问题可能都已经被解决好了，对于初学者，看着别人写好的解决方案，可能就不会有那么多的感触了。

用好 Webpack，以及 Babel 和 PostCSS 等

Webpack 是一个神器，但是“官方文档是一坨屎”（注：引用来源找不到了）。初学者可以多看看国内的教程，多研究研究 Github 上的 Demo。此外，对只有 JavaScript 的项目，也可以试试 Rollup。

Babel 重要性不用多说，使用 Chrome 最新浏览器开发时，可以裸 Babel 运行，这意味什么……？

我真的非常喜欢 PostCSS 搭配 CSSNext，配置好插件，就可以使用自定义变量、自定义属性集、自动加前缀等等，喜欢上标准，会让你从心底放弃 SASS，LESS。

Vue

Vue 的官方教程很 nice，入门首选。

工作中建议多思考：如何划分 Vue 组件（提取公用组件、确定组件层级）、提取组件的共享状态（vuex）和业务逻辑（使用纯 JS）、Vue 组件 和 CSS 模块如何搭配等问题。

当前 MVVM 框架核心是“绑定”，做的事情主要是监测变化和响应变化，在 Vue 中它们分别对应着响应系统（源码学习推荐 smart-observe）和 Virtual-DOM，相信业余时间学习一下会很有收获。

我的 2017 年

• 大量地做读书笔记

• 把 eJsonML，Vexil 重新拾起

• 平衡工作和生活，确保不猝死

• 护发