2016年总结--成长

摘要：马尔代夫之行重头戏这一年的工作情况这一年，个人感觉还是做了不少事情，主要集中在我们公司的前端领域，同时也给整个技术团队不少的建议，引入了不少新的东西和方式，总结起来比较重要的在下面五个方面。

如果想看技术相关的，下拉到后面的重头戏就是了。

在15年末的时候，加入到罗辑思维，刚过来就接手了一个微信朋友圈要传播的活动页面，效果页面大概和当时锤子手机的活动页面漂亮的不像实力派类似，不过不同的是，采用了Vuejs来写，单页面，也踩了不少的坑。填坑日记在此html5 上传本地图片处理各种问题。

临时上传了一份代码在github上，地址如下：http://leslieyq.github.io/204...

15年末到16年初，在我大学好基友@叶孤城__的提议下，我们做了一个专门搞Code Review的网站，网站地址。做这个的原因就是觉得Code Review很重要，但是重视的公司很少，大家觉得很多时候，没有bug就行，不会去管这些东西。而我们觉得Code Review 是一种最快捷有效的方式让你清楚地知道“好的代码是怎样写出的”。所以几个趣味相投的人搞出来这个网站，虽然现在已经没有维护和运营了，但当时还是非常有激情和想法的。

从这个网站，脱胎出的一个变种想法，已经被我们当时合伙人之一的李智维做了一个新的网站，叫做趣直播技术直播网站，很有意思，大家感兴趣可以去看看。我还在里面直播了一期前端的技术，虽然听的人很多都是IOS开发，直播地址：1024号的碰巧。

过春节的时候，没有回老家，和老婆以及好基友去了一趟马尔代夫，这是我第二次去马尔代夫了，上次是15年8月度蜜月的时候，说说我为什么又去一次，很简单就是觉得值的再去一次。

我不太喜欢，那种去到处赶景点的旅游，真的是到此一游的感觉，反而比较喜欢慢节奏的旅行，可能是平时节奏就比较快吧，出去玩就想单纯的放松下，不去什么太多的景点，体验各种人文风情之类的，找个景色好，环境好，能让人感觉到舒适的地方，躺下，每天吃喝玩休息对于我而言就是最好的放松了。

这次旅游，好基友有个文章专门记录了下，也是他的第一次出国之旅。马尔代夫之行

这一年，个人感觉还是做了不少事情，主要集中在我们公司的前端领域，同时也给整个技术团队不少的建议，引入了不少新的东西和方式，总结起来比较重要的在下面五个方面。

目前我司的前端技术架构体系

首先说明下我们目前基本上所有项目（几个特殊的除外）都是用Nodejs作为一个比较轻薄的中间层来启动。这是一个基本情况，这样有利于理解我接下来说的东西。

各个不同的层级都做了什么，做决定时怎么想的：

访问层，分为2个部分（静态和服务端），静态资源的CDN，因为我们是部署在阿里云上面的，所以直接使用的是阿里云的CDN服务，不得不吐槽下，阿里云的CDN服务不是很稳定，不如他们自家淘宝用的CDN给力啊。服务端用Nginx在外层提供HTTPS服务，反向代理我们自己启动的Nodejs服务，同时使用了阿里提供的多机器的负载均衡服务，来保证了项目的稳定性。

代码层，浏览器端代码，基于Vuejs编写，同时使用我们自己开发的Radon-UI组件库，拼接页面元素，开发效率急速提升。服务端Express核心框架，结合Thenjs解决异步问题，Request代理API服务，Render页面给浏览器。根据页面的业务要求，会有两种情况，一种Render头尾部，然后JS异步获取数据，渲染页面，第二种Render整个首屏页面，部分弹出层或者DOM使用js来管理。几个特殊的系统和页面，Nodejs担任的任务就变多了，比如我们给运营开发的活动页面生成系统，使用mongoDB来存储运营填写的文案和上传到阿里云OSS图片地址之类。还有我们得到APP订阅文章的红包分享项目，里面为了存储用户信息，使用Redis来存储Session信息。

工具层，这里我们有一个Yeoman的generator，可以直接生成新项目的各种配置和基础代码文件，使用webpack来开发和打包构建，添加Md5戳到我们的静态资源上，增量部署到CDN上。同时用到Gulp的原因是有很多老项目还在使用，没有完全的切换过来，但现在也正在一步一步切换。使用Sass和Babel，提供了css的模块化和提高了css的可维护性。Babel让我们有了开发环境下直接使用ES6的可行性。NPM作为项目的包管理，同时我们搭建私有的NPM源，来保证更新包时候的速度和稳定性（还记得 Azer Koçulu 删除了自己的所有 npm 库的事件么）。

部署层，这里主要是运维的场地，对于我们前端而言，主要是静态资源的部署和Nodejs代码的上线。我们使用自己内容搭建的部署系统搞定这个事情，添加上权限管理和回滚机制，静态资源使用增量部署，保存无缝切换，先行部署静态。服务端采用替换部署机制，就是说，在负载均衡上，踢掉一台，部署一台，再上线到负载上，重复到所有机器完成为止。保证服务稳定，不间断。

监控层，这里就有很多包含很多东西了，有第三方的，我们自己开发的，还是开源的。关于服务端报警我们采用了Sentry来监控错误，一旦发生错误，我们就用Sentry发送邮件给相关人。可以立刻知道错误的地方和原因。同时，在性能方面，我们使用第三方的One APM来监控性能指标，这样就能知道哪些页面加载比较慢，需要优化，优化的点在哪里。对于Nodejs有一个问题，就是进程监听方面，这里我们选用了PM2来做进程监听，保存线上的进程一单出错奔溃，就能自动拉起服务，不会因此僵死在那里。加上使用Log4js来输出日志到知道文件，接着使用阿里云的日志服务，监听日志文件，输出到日志服务系统，就可以直接在外网环境中看到日志的详情以及上下文情况，非常有用。最后我们自己搭建了一个Foundation前端系统，专门留给前端自己使用的，主要目的是提供一些自身部门需要的服务，包括收集操作日志和文件上传功能等，后续可能还会提供更多功能。

以上的架构是根据团队的人员配比，技术水平，以及业务需求来搭建的，并不一定要追求所谓的高大上，所谓的完美，很多时候要综合考虑。

这个架构和美团酒旅的前端技术很像，但是有略有不同，比他们少了不少东西。大家看的时候可以互相参考，结合自己当前的业务形态以及团队技术水平来搭建公司的技术架构体系。

在一个合适的时机，我主导开发了一个基于Vuejs的公司用到的组件库，并且最后开源出来了。起名为 Radon-ui

开发这个库的主旨是： 帮助你快速开发产品的Vue组件库，简洁好用，效率高，让你摆脱各种定制化的烦恼。

这个库具体的一些前因后果可以看我这篇文章，简单一点就是在满足自己公司的需求情况下，开发了一个开源的组件库回馈社区，而且当时vue的组件库确实空白，当然后面就出现了好多类似的各种组件库。

我司在16年开始，有2条不太相同的业务线，一条是原来的微信公众号，罗辑思维，另外一个是得到App，主打知识分享，提供省时间的高效知识服务。

使用过我们得到App的人，应该是知道的，我们有一个订阅专栏，里面有订阅文章可以观看，这个文章的技术栈都是Web前端的，包括编辑器，展示，以及里面的各种操作。最初使用的是百度编辑器，后面遇到了好多问题，主要是定制化，样式，字体问题。所以后面为了提供更好的阅读体验，我们重新开发了一个属于我们自己的定制化编辑器，融合了特殊字体切割技术，整体大幅提升了阅读时的体验和效果。为此我写了两篇文章：

富文本编辑器小结

性能优化之旅

在一个明媚的午后，我们前端组开着周会，讨论着本周的事情和技术问题，我收到了D2技术论坛开始报名的消息，于是趁热打铁在会上就鼓动了大家去参加这个分享，风风火火一行人7个，直接就报名参加了，然后就是订机票和酒店。

具体讨论大家可以去知乎上看：参加第11届D2前端技术论坛，你有什么收获

对于这一届的D2，说实话我是失望的，感觉比不上上一届，各种大厂的广告横飞，都是比较浅显的东西，深入的很少。但是还是有引起我对于前端的一些思考，比如说是否应该更多的和Native的人一起考虑App的各种技术融合方案，跨界的Weex技术，以及Uc浏览器里面UC头条的性能优化。

例如美团的人的思考：统一的前端

算算自己的15年，产出了12篇文章，基本上算是1个月一篇，其中有一个系列叫《如何打造一个令人愉悦的前端开发环境》，这个系列还蛮多人看的，也有不少公众号转载了的，在segmentfault还因此获得了第三季度的Top Writer，算是意外收获吧（嘚瑟脸：）！

这养成了我一个习惯，觉得有意思有意义的技术点，就记录下来和大家分享，也算是一种梳理，这种梳理对于我而言，很有作用，每隔一段时间就会思考业内前端的各种发展，以及我自身的优缺点，我需要提高的地方。这种梳理，诞生了16年最后一篇技术文章---割裂的前端工程师，这篇文章也被百度FEX周刊收录进去，还有不少前端相关的公众号收录（前端早读课，前端之巅--infoq的，野狗等），非常欣慰，对我是很大的鼓励和认同。

连续的产出一定质量的文章，也带来了另外的一个意外收获，就是有出版社约我出书，2个不同的人，虽然还没有写，主要是不知道写什么，又害怕写的不好，耽误了有志青年。

同时还在给慕课网录制一些教学视频，希望能早日上线（说的不好，不要打我）！！！

互联网这条路，没有终点，只会不停地奔跑下去。

不忘初心，不惧未来！