原文首發(fā)于我的博客

年末了，趕著剛考完兩門考試，在最后4門考試來臨之前抽空寫一下今年的小結(jié)。

今年格外忙。忙完本科畢設(shè)，又馬上投入了研究生實(shí)驗(yàn)室的搬磚生涯。跟去年一樣，列個(gè)今年的學(xué)習(xí)成果清單：

過去的一年

技術(shù)成果

2017.03~2017.05.07 開坑學(xué)習(xí)Three.js，完成了一個(gè)簡單的機(jī)械裝置展示平臺（我的本科畢設(shè)）【Three.js+dat.gui】

2017.05.23~2017.07.15 基于vue2+koa2重構(gòu)了福建北郵人服務(wù)系統(tǒng)，這是我自己的項(xiàng)目。開始引入eslint（以前嫌麻煩233），以后的項(xiàng)目也一并引入。期間在手寫一些常用Vue組件的時(shí)候?qū)W習(xí)了不少東西，寫了一篇Vue組件的三種調(diào)用方式【Vue2+Koa2】

2017.05.26 為了上面那個(gè)項(xiàng)目簡單做了一個(gè)基于stylus的柵格系統(tǒng)css——Melody.css，用來快速做響應(yīng)式開發(fā)。【stylus】

2017.06.07 協(xié)助解決實(shí)驗(yàn)室Vue項(xiàng)目里webpack的Hot Reload速度太慢的問題，做了個(gè)webpack的開發(fā)模式的插件webpack-dev-compile-optimize提升熱重載速度（只在自己內(nèi)部項(xiàng)目測試過），同期總結(jié)了一篇基于vue-cli項(xiàng)目的webpack構(gòu)建優(yōu)化文章。【webpack】

2017.07.07 博客開啟持久化構(gòu)建，依賴于github-page，不過加上了https以及進(jìn)入了HSTS列表。第一次接觸了Travis-CI，發(fā)表了一篇經(jīng)驗(yàn)文。【Travis-CI】

2017.08.09 開坑hexo-theme-melody，寫一個(gè)送給我妹子的hexo主題，效果見我博客即是。【hexo hexo-theme】

2017.10.09 寫每周電影推薦的時(shí)候因?yàn)橄訔壂@取電影信息步驟繁雜，于是改造了一下早期寫的node小爬蟲dbmovie-spider支持讀取命令行信息了。【node】

2017.10.28 開始練習(xí)算法，并借機(jī)學(xué)習(xí)TypeScript和前端測試（采用了Jest）。 不過后來一直有其他事壓著，沒有持續(xù)，等考完試要繼續(xù)。【TypeScript Jest】

2017.11.02 開坑vue-koa-demo項(xiàng)目的前端測試。同期寫了一篇Jest 全棧測試的經(jīng)驗(yàn)博客。【Jest】

2017.11.18 開坑PicGo，學(xué)習(xí)electron的基本開發(fā)流程，邊寫邊學(xué)。最終完成了一個(gè)我現(xiàn)在寫博客貼圖片時(shí)很方便的工具。并于12月中發(fā)布正式版，還上了少數(shù)派首頁推薦。【electron】

PS，在掘金也發(fā)了一遍推薦不過沒有被推薦到首頁T T

之后應(yīng)該會(huì)發(fā)幾篇electron開發(fā)的文章。

2017.11.30 抽空把vue-koa-demo的ssr版本做了一下。踩了一些ssr的坑。

對比去年給自己立的目標(biāo)：

**算法****數(shù)據(jù)結(jié)構(gòu)****Three.js -> 瀏覽器3D建模****回歸JS語言基礎(chǔ)****學(xué)會(huì)玩Webpack2****持續(xù)的項(xiàng)目開源****Python簡單入門** 復(fù)制代碼

感覺除了Python沒怎么學(xué)之外(尷尬)，其他的目標(biāo)大致都有所建樹，算是完成地還不錯(cuò)吧！

期望、目標(biāo)

依然要寫下2018年需要學(xué)習(xí)的東西：

• 算法、數(shù)據(jù)結(jié)構(gòu)
• Parcel
• TypeScript
• Puppeteer自動(dòng)化測試
• PWA
• 給開源庫提PR
• github robot
• 如果可以，學(xué)習(xí)一下react

隨筆

這一年來的前端的學(xué)習(xí)之路，收獲還是不少的。比起去年來說，我自己覺得收獲最大的就是在開源社區(qū)跟開發(fā)者、使用者的交流更多了。因?yàn)樽约阂灿虚_源項(xiàng)目，所以很多時(shí)候一些情況也是第一次見：比如第一次遇到PR（開心不已），第一次給開源庫提issue，第一次跟開發(fā)者討論項(xiàng)目細(xì)節(jié)等等。今年還沒有給開源庫提過PR，所以明年的目標(biāo)是來一個(gè)吧~

今年也是前端框架、庫井噴的一年。各種新的技術(shù)涌現(xiàn)、較新的技術(shù)逐漸走向成熟、成熟的項(xiàng)目走向穩(wěn)定。這種感覺似乎從我兩年半前學(xué)習(xí)前端的時(shí)候就有了，不過今年真的特別強(qiáng)烈。也因此才有那篇流傳甚廣的《2017年學(xué)JavaScript是怎樣的一種體驗(yàn)》。前端要學(xué)的東西太多了啊。不過我覺得雖然看似多，作為前端工程師，還是要有自己的大體學(xué)習(xí)路線。

我認(rèn)為如今前端工程師應(yīng)當(dāng)分成兩類，

結(jié)合Node的偏向全棧的前端，他們更注重網(wǎng)站的訪問優(yōu)化、性能提升、毫秒級別的用戶體驗(yàn)。

結(jié)合CSS\JS的偏向用戶端特效的“純”前端工程師。這部分的前端工程師通常來說必須要有自己的設(shè)計(jì)認(rèn)知。

很多優(yōu)秀的前端工程師都是設(shè)計(jì)師出身。比如TJ，比如尤雨溪。但是卻不是很常聽說優(yōu)秀的設(shè)計(jì)師是前端工程師出身。這就是因?yàn)楝F(xiàn)在很多學(xué)前端的人還是在認(rèn)為自己能夠?qū)憘€(gè)頁面、套個(gè)模板，厲害點(diǎn)的還原個(gè)頁面就行了。殊不知，你要學(xué)習(xí)的不僅僅是前端配套的HTML\CSS\JS，你還需要知道結(jié)合了Nodejs后帶來的一系列現(xiàn)代開發(fā)工具和工程化的流程。不再是只會(huì)用個(gè)bootstrap+jquery做個(gè)頁面就完事的年代了。刀耕火種的年代已經(jīng)過去，可是還是有人在抓著舊石器不放。

不過還是需要強(qiáng)調(diào)一下，基礎(chǔ)真的很重要。我身邊遇到太多半路“出家”，自愿也好，被迫也罷來學(xué)前端的同學(xué)，他們很多都是草草幾天看完HTML\CSS\JS基礎(chǔ)，然后就直接用上Vue、React來寫項(xiàng)目了。連npm都不知道是什么東西的他們，很多時(shí)候?qū)懫鹎岸藖矸浅Ｍ纯唷Ｇ岸瞬辉偈且郧澳菢诱J(rèn)為的是一門可以速成的技術(shù)了啊，現(xiàn)在而言，至少入門門檻高了不少。

前端圈還是太浮躁了點(diǎn)。還是沉下心來，好好鉆研自己喜歡的技術(shù)吧。

另外，由于最近出現(xiàn)的諸如PWA、Electron、RN、微信小程序等由前端主導(dǎo)的新技術(shù)，很多人就說了“啊iOS開發(fā)要完啦”、“啊安卓開發(fā)要完啦”、“要轉(zhuǎn)行前端啦”等，我覺得其實(shí)還沒有必要恐慌到那個(gè)程度。誠然如今前端能做的事不少，但是局限性還是很強(qiáng)。PWA由于依賴高版本Chrome在一般安卓機(jī)器上體驗(yàn)依然不怎么樣，想做出像原生一樣的效果還是受限于機(jī)能，iOS就更別說了，雖然safari開始支持service worker，但支持PWA還有待時(shí)日；Electron雖然能開發(fā)跨端應(yīng)用，不過還有很多的局限，比如應(yīng)用體積實(shí)在大，比如無法獲取外部當(dāng)前鼠標(biāo)選中的文件等等。所以對于新技術(shù)應(yīng)該理性看待，自己親手實(shí)踐一下，而不應(yīng)盲目從眾。

總結(jié)一下

今年的技術(shù)棧成長：

• 更加深入Vue的開發(fā)
• 開始學(xué)習(xí)Three.js
• 開始用上ESLint
• 開始學(xué)習(xí)TypeScript
• 開始使用前端測試（Jest）
• 開始學(xué)習(xí)Electron
• 開始練習(xí)算法
• 對前端工程化+自動(dòng)化有更多的實(shí)踐和體會(huì)
• 持續(xù)維護(hù)三個(gè)開源項(xiàng)目：vue-koa-demo、hexo-theme-melody、PicGo
• 學(xué)習(xí)持續(xù)集成

希望我的2018年能夠繼續(xù)有所收獲！

總結(jié)

以上是生活随笔為你收集整理的我的2017年前端之路总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。