天天看點

回顧 2018 年 | 掘金技術征文

前言

時光飛逝,我已經從大學畢業,成為前端工程師。雖然之前也寫過一篇回顧文章,但透過這一次掘金給予我的回顧機會,我重新找回了自己的初心,以及自己的方向。

前端日常

在日常開發中,我的工作是業務方向,以滿足内部使用者的需求為主,偶爾才會有寫一些面向外部使用者的網站。因而保持項目的穩定性和維護性是我的首要工作,是的,不需要很炫酷的技術,但需要很穩定的技術。

發現 Antd 彩蛋問題

在開發自己的部落格系統的時候,一直在想要不要把 Bootstrap 改為 Ant-design。

直到 2018年 9月的時候,我發現一個公共元件加入了一個聖誕彩蛋,也就是在 12月 25日的時候爆炸的那個問題。

說實話,當時我并沒有那麼注意到這個問題,隻是簡單的看了一下源碼,然後發現它直接推送到 master 分支上面,總感覺哪裡怪怪的。

是以我就在 V2EX 上面寫一個文章,然後就沒管它了,結果就是 Boom。

文章連結:www.v2ex.com/t/490917

學會調試源碼

雖然我很希望使用

ReactJS

作為我的主要技術,但是舊項目一直在用

regularJS

,以及一個元件庫

nek-ui

。因而我需要學會看這些文檔,以及文檔不一定有的暴露方法。。。

當我看見每個元件都有一大堆傳參,我就不斷地想,到底這個元件是怎樣用的?是不是真的能夠生效? 因而我就開始慢慢地學習了如何使用

SourceGraph

看源碼。

上面截圖為 Sourcegraph 的一段 nek-ui 開源代碼。

看是不足夠的,是以我就利用 Google Chrome DevTools 調試源碼。

在調試的過程,我就發現舊時代的 JavaScript 私有方法是多麼的公開透明的。。。可以利用元件暴露的方法,繼承并改寫它來達到自己想要的效果。

參與技術大會

還記得這一年我參加了兩次 Node.js Party,以及谷歌開發者大會。

是的,我對于參加這些技術大會并不感到乏味。就算是要坐兩個小時公交過去西溪濕地,我也是願意參加 Node.js 派對的。

這次開發者大會裡面,我就認識了一些來自谷歌,掘金的優秀工程師,也是讓我有所收獲。

如果你有自動化測試應用的需求,那麼你可以嘗試使用 Puppeteer。

如果你有測試網站性能的需求,那麼你就可以使用 Lighthouse,它會生成性能報告,并提供可以改進的措施。

部落格介紹文章:calpa.me/2018/09/24/…

完成部落格系統腳手架

在編寫部落格文章的時候,我經常身兼三職,編寫部落格系統的前端程式員,專心寫文章的編輯,以及保證網站服務品質的網站維護者。

  1. 前端工程師:我希望可以使用最新最快的技術,同時保證服務是穩定的,文章可以正常顯示。
  2. 編輯:我在編寫文章的時候,我希望可以看到預覽的效果。
  3. 網站維護者:網站有問題的時候,可以快速回退到正常的版本,避免線上事故繼續發生。 不僅如此,我也希望可以給校對者,對于每一個版本分别進行校對。

為了更好地實作這些目标,我選擇使用 GatsbyJS + Netlify + Contentful,來達到這件事情。

部落格介紹文章:calpa.me/2018/12/24/…

現在這個腳手架取得超過 150個 Star 數,可以說是有點超出我的預期(笑

Github 倉庫位址:github.com/calpa/gatsb…

雖然是這樣,但是還是有不少的問題。

下一步就是把 Contentful 的資料存取服務改為 Netlify CMS,充分使用 Github 剛剛提供的免費私有倉庫服務。

也是想降低使用者使用這個架構的成本吧。

工具類總結

Vue

在使用 computed 的時候,我發現原來它是可以使用 getter 和 setter 而不是單純的 getter 方法。

了解到 Vue 最基本的實作原理:

Object.defineProperty

,以及訂閱釋出模式。

Node.js

由于公司業務原因,我們使用 egg.js 來攔截,轉發,改寫請求,同時需要輸出報錯日志。

Babel

由于 async/await 的友善性,我就直接把它用到項目裡面,可是會有

regeneratorRuntime is not defined

的問題。我找到這一段代碼是和 Babel 轉譯相關,是以就開始了解 Babel 是如何轉譯的旅程,例如 async/await,class,extend。

calpa.me/2018/07/29/…

Webpack

由于要從零開始建構前端項目,是以需要對 webpack 進行一些配置。

我了解到 Webpack 原來由 loader 和 plugin 組成,Webpack 多環境配置的方法,以及如何輸出能讓程式員看指令行時感到比較友好的一些插件。

2019 年計劃

很感謝這一年幫助我從萌新階段成長的一衆程式員,也謝謝你們來到我的部落格閱讀文章,給予我繼續寫作的源動力。我會繼續編寫 GatsbyJS 的文章,以及探索移動端動效的方案。

在新的一年,我希望可以不單是解決業務問題,更加是希望以技術的手段,去解決一些重複性的工作。一方面是希望了解并落地:如何使用 GraphQL 節省 HTTP 接口,隻擷取隻需要資料的查詢方法。一方面是希望可以制作一些可配置的背景模闆,直接拖拉就可以擷取資料,無需前端手寫擷取字段。。。

後記

還記得參加谷歌開發者大會的時候,我是專門請假過去上海的,就算沒有兩天工資,但這些都是值得的。

想到這裡,我不禁想我到底是要走技術路線還是走業務路線。

不過,這個問題随着我寫這篇文章就開始有了定案。

來年還望各位多多指教。

繼續閱讀