2016年--個(gè)人總結(jié)

如果想看技術(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í)力派類(lèi)似虐先,不過(guò)不同的是,采用了Vuejs來(lái)寫(xiě)派敷,單頁(yè)面蛹批,也踩了不少的坑。填坑日記在此html5 上傳本地圖片處理各種問(wèn)題篮愉。

臨時(shí)上傳了一份代碼在github上腐芍,地址如下:http://leslieyq.github.io/2046/#!/

和朋友搭伙創(chuàng)建了一個(gè)網(wǎng)站

15年末到16年初,在我大學(xué)好基友@葉孤城__的提議下试躏,我們做了一個(gè)專(zhuān)門(mén)搞Code Review的網(wǎng)站猪勇,網(wǎng)站地址。做這個(gè)的原因就是覺(jué)得Code Review很重要颠蕴,但是重視的公司很少泣刹,大家覺(jué)得很多時(shí)候,沒(méi)有bug就行裁替,不會(huì)去管這些恭喜项玛。而我們覺(jué)得Code Review 是一種最快捷有效的方式讓你清楚地知道“好的代碼是怎樣寫(xiě)出的”。所以幾個(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)情之類(lèi)的递递,找個(gè)景色好,環(huán)境好啥么,能讓人感覺(jué)到舒適的地方,躺下贰逾,每天吃喝玩休息對(duì)于我而言就是最好的放松了悬荣。

這次旅游,好基友有個(gè)文章專(zhuān)門(mén)記錄了下疙剑,也是他的第一次出國(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)體系
前端技術(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)槲覀兪遣渴鹪诎⒗镌粕厦娴能癯灾苯邮褂玫氖前⒗镌频腃DN服務(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編寫(xiě)秉颗,同時(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)填寫(xiě)的文案和上傳到阿里云OSS圖片地址之類(lèi)铃辖。還有我們得到APP訂閱文章的紅包分享項(xiàng)目,里面為了存儲(chǔ)用戶(hù)信息猪叙,使用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代碼的上線(xiàn)莺琳。我們使用自己內(nèi)容搭建的部署系統(tǒng)搞定這個(gè)事情,添加上權(quán)限管理和回滾機(jī)制载慈,靜態(tài)資源使用增量部署惭等,保存無(wú)縫切換,先行部署靜態(tài)办铡。服務(wù)端采用替換部署機(jī)制辞做,就是說(shuō),在負(fù)載均衡上寡具,踢掉一臺(tái)秤茅,部署一臺(tái),再上線(xiàn)到負(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)扶认,保存線(xiàn)上的進(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),專(zhuān)門(mén)留給前端自己使用的制肮,主要目的是提供一些自身部門(mén)需要的服務(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)就是在滿(mǎn)足自己公司的需求情況下缤骨,開(kāi)發(fā)了一個(gè)開(kāi)源的組件庫(kù)回饋社區(qū)阀溶,而且當(dāng)時(shí)vue的組件庫(kù)確實(shí)空白橘茉,當(dāng)然后面就出現(xiàn)了好多類(lèi)似的各種組件庫(kù)怎憋。

3.開(kāi)發(fā)了定制化的文章編輯器

我司在16年開(kāi)始,有2條不太相同的業(yè)務(wù)線(xiàn)岸蜗,一條是原來(lái)的微信公眾號(hào)尉咕,羅輯思維,另外一個(gè)是得到App璃岳,主打知識(shí)分享年缎,提供省時(shí)間的高效知識(shí)服務(wù)。

使用過(guò)我們得到App的人铃慷,應(yīng)該是知道的单芜,我們有一個(gè)訂閱專(zhuān)欄,里面有訂閱文章可以觀看犁柜,這個(gè)文章的技術(shù)棧都是Web前端的洲鸠,包括編輯器,展示馋缅,以及里面的各種操作扒腕。最初使用的是百度編輯器,后面遇到了好多問(wèn)題萤悴,主要是定制化瘾腰,樣式,字體問(wèn)題覆履。所以后面為了提供更好的閱讀體驗(yàn)蹋盆,我們重新開(kāi)發(fā)了一個(gè)屬于我們自己的定制化編輯器,融合了特殊字體切割技術(shù)硝全,整體大幅提升了閱讀時(shí)的體驗(yàn)和效果栖雾。為此我寫(xiě)了兩篇文章:

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ī)票和酒店数初。

初心-我是不會(huì)說(shuō)我是哪一個(gè)的

具體討論大家可以去知乎上看:參加第11屆D2前端技術(shù)論壇,你有什么收獲

對(duì)于這一屆的D2梗顺,說(shuō)實(shí)話(huà)我是失望的泡孩,感覺(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)同徙赢。

17年前端

連續(xù)的產(chǎn)出一定質(zhì)量的文章字柠,也帶來(lái)了另外的一個(gè)意外收獲,就是有出版社約我出書(shū)狡赐,2個(gè)不同的人窑业,雖然還沒(méi)有寫(xiě),主要是不知道寫(xiě)什么枕屉,又害怕寫(xiě)的不好常柄,耽誤了有志青年。

同時(shí)還在給慕課網(wǎng)錄制一些教學(xué)視頻,希望能早日上線(xiàn)(說(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市馏谨,隨后出現(xiàn)的幾起案子别渔,更是在濱河造成了極大的恐慌,老刑警劉巖惧互,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哎媚,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡喊儡,警方通過(guò)查閱死者的電腦和手機(jī)拨与,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)艾猜,“玉大人买喧,你說(shuō)我怎么就攤上這事〈以撸” “怎么了淤毛?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)算柳。 經(jīng)常有香客問(wèn)我低淡,道長(zhǎng),這世上最難降的妖魔是什么瞬项? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任蔗蹋,我火速辦了婚禮,結(jié)果婚禮上囱淋,老公的妹妹穿的比我還像新娘猪杭。我一直安慰自己,他們只是感情好绎橘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般称鳞。 火紅的嫁衣襯著肌膚如雪涮较。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,146評(píng)論 1 297
  • 那天冈止,我揣著相機(jī)與錄音狂票,去河邊找鬼。 笑死熙暴,一個(gè)胖子當(dāng)著我的面吹牛闺属,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播周霉,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼掂器,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了俱箱?” 一聲冷哼從身側(cè)響起国瓮,我...
    開(kāi)封第一講書(shū)人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎狞谱,沒(méi)想到半個(gè)月后乃摹,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡跟衅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年孵睬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伶跷。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掰读,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出撩穿,到底是詐尸還是另有隱情磷支,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布食寡,位于F島的核電站雾狈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏抵皱。R本人自食惡果不足惜善榛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望呻畸。 院中可真熱鬧移盆,春花似錦、人聲如沸伤为。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至叙甸,卻和暖如春颖医,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背裆蒸。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工熔萧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人僚祷。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓佛致,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親辙谜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子俺榆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容