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個不一樣的人，雖然尚未寫，主要是不知道寫什麼，又懼怕寫的很差，耽誤了有志青年。

同時還在給慕課網錄製一些教學視頻，但願能早日上線（說的很差，不要打我）！！！

結尾

互聯網這條路，沒有終點，只會不停地奔跑下去。

不忘初心，不懼將來！