如果想看技術(shù)相關(guān)的，下拉到后面的重頭戲就是了。
一個(gè)活動(dòng)頁(yè)面
在15年末的時(shí)候，加入到羅輯思維，剛過(guò)來(lái)就接手了一個(gè)微信朋友圈要傳播的活動(dòng)頁(yè)面，效果頁(yè)面大概和當(dāng)時(shí)錘子手機(jī)的活動(dòng)頁(yè)面漂亮的不像實(shí)力派類似，不過(guò)不同的是，采用了Vuejs來(lái)寫，單頁(yè)面，也踩了不少的坑。填坑日記在此html5 上傳本地圖片處理各種問(wèn)題。
臨時(shí)上傳了一份代碼在github上，地址如下：http://leslieyq.github.io/2046/#!/
和朋友搭伙創(chuàng)建了一個(gè)網(wǎng)站
15年末到16年初，在我大學(xué)好基友@葉孤城__的提議下，我們做了一個(gè)專門搞Code Review的網(wǎng)站，網(wǎng)站地址。做這個(gè)的原因就是覺(jué)得Code Review很重要，但是重視的公司很少，大家覺(jué)得很多時(shí)候，沒(méi)有bug就行，不會(huì)去管這些恭喜。而我們覺(jué)得Code Review 是一種最快捷有效的方式讓你清楚地知道“好的代碼是怎樣寫出的”。所以幾個(gè)趣味相投的人搞出來(lái)這個(gè)網(wǎng)站，雖然現(xiàn)在已經(jīng)沒(méi)有維護(hù)和運(yùn)營(yíng)了，但當(dāng)時(shí)還是非常有激情和想法的。
從這個(gè)網(wǎng)站，脫胎出的一個(gè)變種想法，已經(jīng)被我們當(dāng)時(shí)合伙人之一的李智維做了一個(gè)新的網(wǎng)站，叫做趣直播技術(shù)直播網(wǎng)站，很有意思，大家感興趣可以去看看。我還在里面直播了一期前端的技術(shù)，雖然聽(tīng)的人很多都是IOS開(kāi)發(fā)，直播地址：1024號(hào)的碰巧。
再次馬爾代夫之行
過(guò)春節(jié)的時(shí)候，沒(méi)有回老家，和老婆以及好基友去了一趟馬爾代夫，這是我第二次去馬爾代夫了，上次是15年8月度蜜月的時(shí)候，說(shuō)說(shuō)我為什么又去一次，很簡(jiǎn)單就是覺(jué)得值的再去一次。
我不太喜歡，那種去到處趕景點(diǎn)的旅游，真的是到此一游的感覺(jué)，反而比較喜歡慢節(jié)奏的旅行，可能是平時(shí)節(jié)奏就比較快吧，出去玩就想單純的放松下，不去什么太多的景點(diǎn)，體驗(yàn)各種人文風(fēng)情之類的，找個(gè)景色好，環(huán)境好，能讓人感覺(jué)到舒適的地方，躺下，每天吃喝玩休息對(duì)于我而言就是最好的放松了。
這次旅游，好基友有個(gè)文章專門記錄了下，也是他的第一次出國(guó)之旅。馬爾代夫之行
重頭戲---這一年的工作情況
這一年，個(gè)人感覺(jué)還是做了不少事情，主要集中在我們公司的前端領(lǐng)域，同時(shí)也給整個(gè)技術(shù)團(tuán)隊(duì)不少的建議，引入了不少新的東西和方式，總結(jié)起來(lái)比較重要的在下面五個(gè)方面。
1.推動(dòng)了整個(gè)WEB前端技術(shù)架構(gòu)體系的演進(jìn)
目前我司的前端技術(shù)架構(gòu)體系
首先說(shuō)明下我們目前基本上所有項(xiàng)目（幾個(gè)特殊的除外）都是用Nodejs作為一個(gè)比較輕薄的中間層來(lái)啟動(dòng)。這是一個(gè)基本情況，這樣有利于理解我接下來(lái)說(shuō)的東西。
各個(gè)不同的層級(jí)都做了什么，做決定時(shí)怎么想的：
訪問(wèn)層，分為2個(gè)部分（靜態(tài)和服務(wù)端），靜態(tài)資源的CDN，因?yàn)槲覀兪遣渴鹪诎⒗镌粕厦娴?，所以直接使用的是阿里云的CDN服務(wù)，不得不吐槽下，阿里云的CDN服務(wù)不是很穩(wěn)定，不如他們自家淘寶用的CDN給力啊。服務(wù)端用Nginx在外層提供HTTPS服務(wù)，反向代理我們自己?jiǎn)?dòng)的Nodejs服務(wù)，同時(shí)使用了阿里提供的多機(jī)器的負(fù)載均衡服務(wù)，來(lái)保證了項(xiàng)目的穩(wěn)定性。
代碼層，瀏覽器端代碼，基于Vuejs編寫，同時(shí)使用我們自己開(kāi)發(fā)的Radon-UI組件庫(kù)，拼接頁(yè)面元素，開(kāi)發(fā)效率急速提升。服務(wù)端Express核心框架，結(jié)合Thenjs解決異步問(wèn)題，Request代理API服務(wù)，Render頁(yè)面給瀏覽器。根據(jù)頁(yè)面的業(yè)務(wù)要求，會(huì)有兩種情況，一種Render頭尾部，然后JS異步獲取數(shù)據(jù)，渲染頁(yè)面，第二種Render整個(gè)首屏頁(yè)面，部分彈出層或者DOM使用js來(lái)管理。幾個(gè)特殊的系統(tǒng)和頁(yè)面，Nodejs擔(dān)任的任務(wù)就變多了，比如我們給運(yùn)營(yíng)開(kāi)發(fā)的活動(dòng)頁(yè)面生成系統(tǒng)，使用mongoDB來(lái)存儲(chǔ)運(yùn)營(yíng)填寫的文案和上傳到阿里云OSS圖片地址之類。還有我們得到APP訂閱文章的紅包分享項(xiàng)目，里面為了存儲(chǔ)用戶信息，使用Redis來(lái)存儲(chǔ)Session信息。
工具層，這里我們有一個(gè)Yeoman的generator，可以直接生成新項(xiàng)目的各種配置和基礎(chǔ)代碼文件，使用webpack來(lái)開(kāi)發(fā)和打包構(gòu)建，添加Md5戳到我們的靜態(tài)資源上，增量部署到CDN上。同時(shí)用到Gulp的原因是有很多老項(xiàng)目還在使用，沒(méi)有完全的切換過(guò)來(lái)，但現(xiàn)在也正在一步一步切換。使用Sass和Babel，提供了css的模塊化和提高了css的可維護(hù)性。Babel讓我們有了開(kāi)發(fā)環(huán)境下直接使用ES6的可行性。NPM作為項(xiàng)目的包管理，同時(shí)我們搭建私有的NPM源，來(lái)保證更新包時(shí)候的速度和穩(wěn)定性（還記得 Azer Ko?ulu 刪除了自己的所有 npm 庫(kù)的事件么）。
部署層，這里主要是運(yùn)維的場(chǎng)地，對(duì)于我們前端而言，主要是靜態(tài)資源的部署和Nodejs代碼的上線。我們使用自己內(nèi)容搭建的部署系統(tǒng)搞定這個(gè)事情，添加上權(quán)限管理和回滾機(jī)制，靜態(tài)資源使用增量部署，保存無(wú)縫切換，先行部署靜態(tài)。服務(wù)端采用替換部署機(jī)制，就是說(shuō)，在負(fù)載均衡上，踢掉一臺(tái)，部署一臺(tái)，再上線到負(fù)載上，重復(fù)到所有機(jī)器完成為止。保證服務(wù)穩(wěn)定，不間斷。
監(jiān)控層，這里就有很多包含很多東西了，有第三方的，我們自己開(kāi)發(fā)的，還是開(kāi)源的。關(guān)于服務(wù)端報(bào)警我們采用了Sentry來(lái)監(jiān)控錯(cuò)誤，一旦發(fā)生錯(cuò)誤，我們就用Sentry發(fā)送郵件給相關(guān)人。可以立刻知道錯(cuò)誤的地方和原因。同時(shí)，在性能方面，我們使用第三方的One APM來(lái)監(jiān)控性能指標(biāo)，這樣就能知道哪些頁(yè)面加載比較慢，需要優(yōu)化，優(yōu)化的點(diǎn)在哪里。對(duì)于Nodejs有一個(gè)問(wèn)題，就是進(jìn)程監(jiān)聽(tīng)方面，這里我們選用了PM2來(lái)做進(jìn)程監(jiān)聽(tīng)，保存線上的進(jìn)程一單出錯(cuò)奔潰，就能自動(dòng)拉起服務(wù)，不會(huì)因此僵死在那里。加上使用Log4js來(lái)輸出日志到知道文件，接著使用阿里云的日志服務(wù)，監(jiān)聽(tīng)日志文件，輸出到日志服務(wù)系統(tǒng)，就可以直接在外網(wǎng)環(huán)境中看到日志的詳情以及上下文情況，非常有用。最后我們自己搭建了一個(gè)Foundation前端系統(tǒng)，專門留給前端自己使用的，主要目的是提供一些自身部門需要的服務(wù)，包括收集操作日志和文件上傳功能等，后續(xù)可能還會(huì)提供更多功能。
以上的架構(gòu)是根據(jù)團(tuán)隊(duì)的人員配比，技術(shù)水平，以及業(yè)務(wù)需求來(lái)搭建的，并不一定要追求所謂的高大上，所謂的完美，很多時(shí)候要綜合考慮。
這個(gè)架構(gòu)和美團(tuán)酒旅的前端技術(shù)很像，但是有略有不同，比他們少了不少東西。大家看的時(shí)候可以互相參考，結(jié)合自己當(dāng)前的業(yè)務(wù)形態(tài)以及團(tuán)隊(duì)技術(shù)水平來(lái)搭建公司的技術(shù)架構(gòu)體系。
2.主導(dǎo)了我們公司自己的組件庫(kù)
在一個(gè)合適的時(shí)機(jī)，我主導(dǎo)開(kāi)發(fā)了一個(gè)基于Vuejs的公司用到的組件庫(kù)，并且最后開(kāi)源出來(lái)了。起名為 Radon-ui
開(kāi)發(fā)這個(gè)庫(kù)的主旨是： ** 幫助你快速開(kāi)發(fā)產(chǎn)品的Vue組件庫(kù)，簡(jiǎn)潔好用，效率高，讓你擺脫各種定制化的煩惱。**
這個(gè)庫(kù)具體的一些前因后果可以看我這篇文章，簡(jiǎn)單一點(diǎn)就是在滿足自己公司的需求情況下，開(kāi)發(fā)了一個(gè)開(kāi)源的組件庫(kù)回饋社區(qū)，而且當(dāng)時(shí)vue的組件庫(kù)確實(shí)空白，當(dāng)然后面就出現(xiàn)了好多類似的各種組件庫(kù)。
3.開(kāi)發(fā)了定制化的文章編輯器
我司在16年開(kāi)始，有2條不太相同的業(yè)務(wù)線，一條是原來(lái)的微信公眾號(hào)，羅輯思維，另外一個(gè)是得到App，主打知識(shí)分享，提供省時(shí)間的高效知識(shí)服務(wù)。
使用過(guò)我們得到App的人，應(yīng)該是知道的，我們有一個(gè)訂閱專欄，里面有訂閱文章可以觀看，這個(gè)文章的技術(shù)棧都是Web前端的，包括編輯器，展示，以及里面的各種操作。最初使用的是百度編輯器，后面遇到了好多問(wèn)題，主要是定制化，樣式，字體問(wèn)題。所以后面為了提供更好的閱讀體驗(yàn)，我們重新開(kāi)發(fā)了一個(gè)屬于我們自己的定制化編輯器，融合了特殊字體切割技術(shù)，整體大幅提升了閱讀時(shí)的體驗(yàn)和效果。為此我寫了兩篇文章：
4.鼓動(dòng)前端所有人參加了D2技術(shù)分享
在一個(gè)明媚的午后，我們前端組開(kāi)著周會(huì)，討論著本周的事情和技術(shù)問(wèn)題，我收到了D2技術(shù)論壇開(kāi)始報(bào)名的消息，于是趁熱打鐵在會(huì)上就鼓動(dòng)了大家去參加這個(gè)分享，風(fēng)風(fēng)火火一行人7個(gè)，直接就報(bào)名參加了，然后就是訂機(jī)票和酒店。
具體討論大家可以去知乎上看：參加第11屆D2前端技術(shù)論壇，你有什么收獲
對(duì)于這一屆的D2，說(shuō)實(shí)話我是失望的，感覺(jué)比不上上一屆，各種大廠的廣告橫飛，都是比較淺顯的東西，深入的很少。但是還是有引起我對(duì)于前端的一些思考，比如說(shuō)是否應(yīng)該更多的和Native的人一起考慮App的各種技術(shù)融合方案，跨界的Weex技術(shù)，以及Uc瀏覽器里面UC頭條的性能優(yōu)化。
例如美團(tuán)的人的思考：統(tǒng)一的前端
5.保持了一定頻率和質(zhì)量的技術(shù)文章
算算自己的15年，產(chǎn)出了12篇文章，基本上算是1個(gè)月一篇，其中有一個(gè)系列叫《如何打造一個(gè)令人愉悅的前端開(kāi)發(fā)環(huán)境》，這個(gè)系列還蠻多人看的，也有不少公眾號(hào)轉(zhuǎn)載了的，在segmentfault還因此獲得了第三季度的Top Writer，算是意外收獲吧（嘚瑟臉：）！
這養(yǎng)成了我一個(gè)習(xí)慣，覺(jué)得有意思有意義的技術(shù)點(diǎn)，就記錄下來(lái)和大家分享，也算是一種梳理，這種梳理對(duì)于我而言，很有作用，每隔一段時(shí)間就會(huì)思考業(yè)內(nèi)前端的各種發(fā)展，以及我自身的優(yōu)缺點(diǎn)，我需要提高的地方。這種梳理，誕生了16年最后一篇技術(shù)文章---割裂的前端工程師，這篇文章也被百度FEX周刊收錄進(jìn)去，還有不少前端相關(guān)的公眾號(hào)收錄（前端早讀課，前端之巔--infoq的，野狗等），非常欣慰，對(duì)我是很大的鼓勵(lì)和認(rèn)同。
連續(xù)的產(chǎn)出一定質(zhì)量的文章，也帶來(lái)了另外的一個(gè)意外收獲，就是有出版社約我出書，2個(gè)不同的人，雖然還沒(méi)有寫，主要是不知道寫什么，又害怕寫的不好，耽誤了有志青年。
同時(shí)還在給慕課網(wǎng)錄制一些教學(xué)視頻，希望能早日上線（說(shuō)的不好，不要打我）?。?！
結(jié)尾
互聯(lián)網(wǎng)這條路，沒(méi)有終點(diǎn)，只會(huì)不停地奔跑下去。
** 不忘初心，不懼未來(lái)！**
本文已在版權(quán)印備案，如需轉(zhuǎn)載請(qǐng)?jiān)L問(wèn)版權(quán)印。51003204
