2016年总结生长

假如想看手艺相干的，下拉到背面的重头戏就是了。

一个运动页面

在15岁终的时刻，加入到罗辑头脑，刚过来就接办了一个微信朋侪圈要流传的运动页面，结果页面也许和当时锤子手机的运动页面美丽的不像实力派相似，不过差别的是，采纳了Vuejs来写，单页面，也踩了不少的坑。填坑日记在此html5 上传当地图片处置惩罚种种题目。

暂时上传了一份代码在github上，地点以下：http://leslieyq.github.io/204&＃8230;

和朋侪搭伙创建了一个网站

15岁终到16年终，在我大学好基友@恭弘=叶 恭弘孤城__的发起下，我们做了一个特地搞Code Review的网站，网站地点。做这个的缘由就是以为Code Review很重要，然则注重的公司很少，人人以为许多时刻，没有bug就行，不会去管这些东西。而我们以为Code Review 是一种最疾速有效的体式格局让你清楚地晓得“好的代码是怎样写出的”。所以几个意见意义相投的人搞出来这个网站，虽然如今已没有保护和运营了，但当时照样异常有热情和主意的。

从这个网站，脱胎出的一个变种主意，已被我们当时合伙人之一的李智维做了一个新的网站，叫做趣直播手艺直播网站，很有意义，人人感兴趣能够去看看。我还在内里直播了一期前端的手艺，虽然听的人许多都是IOS开辟，直播地点：1024号的恰巧。

再次马尔代夫之行

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

我不太喜好，那种去随处赶景点的旅游，真的是到此一游的觉得，反而比较喜好慢节拍的游览，多是日常平凡节拍就比较快吧，出去玩就想纯真的放松下，不去什么太多的景点，体验种种人文风情之类的，找个景致好，环境好，能让人觉获得温馨的处所，躺下，天天吃喝玩歇息关于我而言就是最好的放松了。

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

重头戏&＃8212;这一年的工作状况

这一年，个人觉得照样做了不少事变，重要集合在我们公司的前端范畴，同时也给全部手艺团队不少的发起，引入了不少新的东西和体式格局，总结起来比较重要的在下面五个方面。

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年末了一篇手艺文章&＃8212;分裂的前端工程师，这篇文章也被百度FEX周刊收录进去，另有不少前端相干的民众号收录（前端早读课，前端之巅&＃8211;infoq的，野狗等），异常欣喜，对我是很大的勉励和认同。

一连的产出肯定质量的文章，也带来了别的的一个不测收成，就是有出版社约我出版，2个差别的人，虽然还没有写，重如果不晓得写什么，又畏惧写的不好，耽误了有志青年。

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

末端

互联网这条路，没有尽头，只会不停地奔驰下去。

不忘初心，不惧将来！