我的2017年前端之路總結

NO IMAGE

原文首發於我的博客

年末了,趕著剛考完兩門考試,在最後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】

我的2017年前端之路總結

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-demohexo-theme-melodyPicGo
  • 學習持續集成

希望我的2018年能夠繼續有所收穫!

相關文章

利用NodeGithubProfileSummary來生成你的Github簡歷吧

Electronvue開發實戰1——Main進程和Renderer進程的簡單開發

Electronvue開發實戰0——Electronvue入門

Vue組件開發實錄:組件的三種調用方式