2016年总结--成长

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

一个活动页面

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

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

和朋友搭伙建立了一个网站

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

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

再次马尔代夫之行

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

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

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

重头戏---这一年的工做状况

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

1.推进了整个WEB前端技术架构体系的演进

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

首先说明下咱们目前基本上全部项目（几个特殊的除外）都是用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前端系统，专门留给前端本身使用的，主要目的是提供一些自身部门须要的服务，包括收集操做日志和文件上传功能等，后续可能还会提供更多功能。

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

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

2.主导了咱们公司本身的组件库

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

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

这个库具体的一些来龙去脉能够看我这篇文章，简单一点就是在知足本身公司的需求状况下，开发了一个开源的组件库回馈社区，并且当时vue的组件库确实空白，固然后面就出现了好多相似的各类组件库。

3.开发了定制化的文章编辑器

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

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

• 富文本编辑器小结

• 性能优化之旅

4.鼓动前端全部人参加了D2技术分享

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

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

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

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

5.保持了必定频率和质量的技术文章

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

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

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

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

结尾

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

不忘初心，不惧将来！