個人2017年前端之路總結

原文首發於個人博客

年底了，趕着剛考完兩門考試，在最後4門考試來臨以前抽空寫一下今年的小結。

今年格外忙。忙完本科畢設，又立刻投入了研究生實驗室的搬磚生涯。跟去年同樣，列個今年的學習成果清單：

過去的一年

技術成果

2017.03~2017.05.07 開坑學習Three.js，完成了一個簡單的機械裝置展現平臺（個人本科畢設）【Three.js+dat.gui】

2017.05.23~2017.07.15 基於vue2+koa2重構了福建北郵人服務系統，這是我本身的項目。開始引入eslint（之前嫌麻煩233），之後的項目也一併引入。期間在手寫一些經常使用Vue組件的時候學習了很多東西，寫了一篇Vue組件的三種調用方式【Vue2+Koa2】

2017.05.26 爲了上面那個項目簡單作了一個基於stylus的柵格系統css——Melody.css，用來快速作響應式開發。【stylus】

2017.06.07 協助解決實驗室Vue項目裏webpack的Hot Reload速度太慢的問題，作了個webpack的開發模式的插件webpack-dev-compile-optimize提高熱重載速度（只在本身內部項目測試過），同期總結了一篇基於vue-cli項目的webpack構建優化文章。【webpack】

2017.07.07 博客開啓持久化構建，依賴於github-page，不過加上了https以及進入了HSTS列表。第一次接觸了Travis-CI，發表了一篇經驗文。【Travis-CI】

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

2017.10.09 寫每週電影推薦的時候由於嫌棄獲取電影信息步驟繁雜，因而改造了一下早期寫的node小爬蟲dbmovie-spider支持讀取命令行信息了。【node】

2017.10.28 開始練習算法，並藉機學習TypeScript和前端測試（採用了Jest）。 不事後來一直有其餘事壓着，沒有持續，等考完試要繼續。【TypeScript Jest】

2017.11.02 開坑vue-koa-demo項目的前端測試。同期寫了一篇Jest 全棧測試的經驗博客。【Jest】

2017.11.18 開坑PicGo，學習electron的基本開發流程，邊寫邊學。最終完成了一個我如今寫博客貼圖片時很方便的工具。並於12月中發佈正式版，還上了少數派首頁推薦。【electron】

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

以後應該會發幾篇electron開發的文章。

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

對比去年給本身立的目標：

**算法**

**數據結構**

**Three.js -> 瀏覽器3D建模**

**迴歸JS語言基礎**

**學會玩Webpack2**

**持續的項目開源**

**Python簡單入門**
複製代碼

感受除了Python沒怎麼學以外(尷尬)，其餘的目標大體都有所建樹，算是完成地還不錯吧！

指望、目標

依然要寫下2018年須要學習的東西：

• 算法、數據結構
• Parcel
• TypeScript
• Puppeteer自動化測試
• PWA
• 給開源庫提PR
• github robot
• 若是能夠，學習一下react

隨筆

這一年來的前端的學習之路，收穫仍是很多的。比起去年來講，我本身以爲收穫最大的就是在開源社區跟開發者、使用者的交流更多了。由於本身也有開源項目，因此不少時候一些狀況也是第一次見：好比第一次遇到PR（開心不已），第一次給開源庫提issue，第一次跟開發者討論項目細節等等。今年尚未給開源庫提過PR，因此明年的目標是來一個吧~

今年也是前端框架、庫井噴的一年。各類新的技術涌現、較新的技術逐漸走向成熟、成熟的項目走向穩定。這種感受彷佛從我兩年半前學習前端的時候就有了，不過今年真的特別強烈。也所以纔有那篇流傳甚廣的《2017年學JavaScript是怎樣的一種體驗》。前端要學的東西太多了啊。不過我以爲雖然看似多，做爲前端工程師，仍是要有本身的大致學習路線。

我認爲現在前端工程師應當分紅兩類，

1. 結合Node的偏向全棧的前端，他們更注重網站的訪問優化、性能提高、毫秒級別的用戶體驗。
2. 結合CSS\JS的偏向用戶端特效的「純」前端工程師。這部分的前端工程師一般來講必需要有本身的設計認知。

不少優秀的前端工程師都是設計師出身。好比TJ，好比尤雨溪。可是卻不是很常據說優秀的設計師是前端工程師出身。這就是由於如今不少學前端的人仍是在認爲本身可以寫個頁面、套個模板，厲害點的還原個頁面就好了。卻不知，你要學習的不只僅是前端配套的HTML\CSS\JS，你還須要知道結合了Nodejs後帶來的一系列現代開發工具和工程化的流程。再也不是隻會用個bootstrap+jquery作個頁面就完事的年代了。刀耕火種的年代已通過去，但是仍是有人在抓着舊石器不放。

不過仍是須要強調一下，基礎真的很重要。我身邊遇到太多半路「出家」，自願也好，被迫也罷來學前端的同窗，他們不少都是草草幾天看完HTML\CSS\JS基礎，而後就直接用上Vue、React來寫項目了。連npm都不知道是什麼東西的他們，不少時候寫起前端來很是痛苦。前端再也不是之前那樣認爲的是一門能夠速成的技術了啊，如今而言，至少入門門檻高了很多。

前端圈仍是太浮躁了點。仍是沉下心來，好好鑽研本身喜歡的技術吧。

另外，因爲最近出現的諸如PWA、Electron、RN、微信小程序等由前端主導的新技術，不少人就說了「啊iOS開發要完啦」、「啊安卓開發要完啦」、「要轉行前端啦」等，我以爲其實尚未必要恐慌到那個程度。誠然現在前端能作的事很多，可是侷限性仍是很強。PWA因爲依賴高版本Chrome在通常安卓機器上體驗依然不怎麼樣，想作出像原生同樣的效果仍是受限於機能，iOS就更別說了，雖然safari開始支持service worker，但支持PWA還有待時日；Electron雖然能開發跨端應用，不過還有不少的侷限，好比應用體積實在大，好比沒法獲取外部當前鼠標選中的文件等等。因此對於新技術應該理性看待，本身親手實踐一下，而不該盲目從衆。

總結一下

今年的技術棧成長：

• 更加深刻Vue的開發
• 開始學習Three.js
• 開始用上ESLint
• 開始學習TypeScript
• 開始使用前端測試（Jest）
• 開始學習Electron
• 開始練習算法
• 對前端工程化+自動化有更多的實踐和體會
• 持續維護三個開源項目：vue-koa-demo、hexo-theme-melody、PicGo
• 學習持續集成

但願個人2018年可以繼續有所收穫！