ConardLi的2019—尾聲和開始|年度徵文

NO IMAGE
ConardLi的2019—尾聲和開始|年度徵文

2019年,是對我非常重要的一年,比想象中更累的一年,比想象中收穫更多的一年。這一年,真的發生了非常多的事,無論是生活還是工作學習上,由於是技術社區的年度徵文,我就從 寫作和積累技術上的提升工作上的轉換 這三個方向來總結一下這一年。

寫作和積累

ConardLi的2019—尾聲和開始|年度徵文

我來掘金的時間並不長,而且今年才開始在掘金上寫文章,所以我發表的文章並不多,算上這篇文章也就18篇,這些文章產生了50W+次閱讀、將近2w次點贊,這些數字能夠滿足我的虛榮心,但是同樣讓我在發表文章的時候變得誠惶誠恐。文章一旦發出來就會經過眾多目光的檢閱,所以雖然我發表文章的數量並不多,但每篇文章都是經過我反覆修改和優化的,所以一篇原創文章所要花費的時間是非常多的,由於平時工作比較忙,每天只有有限的時間學習和總結,加上反覆的修改和優化,有時一篇文章要花上一個月的時間。

這裡關於原創文章我發表一些我的看法,關於原創文章知識總結是有非常大的區別的,前者是要為他人提供一定價值,後者是自己做查閱使用。如果文章僅僅停留在知識總結的層面上,那大可不必發出來,放在自己的筆記裡就好了,所以一旦是發表在外面的原創文章我一定會保證每篇文章的質量,保證發出來都是對大家有一定價值的。很多同學問過我,寫好一篇文章的祕訣是什麼,如果真的有祕訣,那就是在寫這篇文章的時候時刻要想著,寫出來的東西不僅僅自己要非常明白,而且能夠讓其他閱讀的人也明白,並且為他們帶來一定價值。

下面是我今年在掘金上發表的一些文章,雖然數量不多,但我儘量保證每一篇都是精品:

自檢

這篇文章本來是用於歸納總結我自己的知識體系的,沒想到發出來受到很多人的關注,我更希望的還是大家以我的這篇文章為例,建立自己的知識體系,然後不斷去自檢和完善。

工程化

今年下半年的工作主要在前端工程化上,所以我研究和輸出的重心也放到了這上面,這將會是一個很長的系列,未來我會盡可能的將我在工程化上的底層研究和最近技術輸出給大家。

React

關於React我做了很多源碼和原理上的分析,大多數都停留在16版本以前,React17馬上要發佈了,未來我還會繼續在時間切片、異步渲染等最新特性上輸出一些原理分析文章。

JavaScript

市面上非常多關於JS基礎的文章,我不太喜歡簡單的知識點羅列,我更喜歡在實際的應用中將這些知識點體現出來,未來也是如此,這部分也會有更多的文章。

送你43道JavaScript面試題源於我對開源項目 javascript-questions的翻譯,只發了一篇文章在掘金上,好久沒更新了,後面會繼續跟進最近題目。

網絡

一篇非常全面的對 ajax、fetch 原理和應用的分析文章。

Electron

用JS開發跨平臺桌面應用,從原理到實踐 是從【運行原理】到【實際應用】對Electron進行一次系統性的總結,非常全面。

Webgl

跨端

從移動端適配的基礎概念出發,探究移動端適配各種問題的解決方案和實現原理。

數據結構和算法

數據結構和算法是我一直在持續練習的,我平時也會分享出一些題目或者一些類型的解題方法出來,不過重要的還是要掌握解題的思想,所以我整理了開源項目 awesome-coding-js ,並且寫了前端應該如何準備數據結構和算法?這篇文章,希望大家通過這篇文章能系統性的掌握和聯繫數據結構和算法,而僅僅不侷限於某些題目。

新技術

我一直比較喜歡關注業界的最新技術動態以及走向,並且定期總結,今年年尾我開始把我關注的技術動態的東西分享出來,於是我總結成【技術圈】這個專欄,它是我對業界最新技術動態的跟進總結,不僅限於前端,未來我會持續更新。

技術上的提升

2019年我的技術關鍵詞應該是 React數據結構和算法工程化,當然其他的技術我也有涉獵,但是主要深挖的還是這三個方向,

React

ConardLi的2019—尾聲和開始|年度徵文

這一年關於React我做了很多原理上的分析,讀了 reduxmobx 以及一部分React 源碼。

說實話 React 源碼是我讀過的源碼裡最難讀的一個,我相信很多同學都有這個想法,如果硬生生的讀很容易半途而廢。這裡我分享一下我的經驗:一定要帶著實際問題去讀源碼,我就是如此,在讀源碼的時候帶著日常開發中經常會遇到的問題:

  • setState 是同步的還是異步的?
  • 為什麼有時連續多次 setState 只有一次生效?
  • React 如何實現自己的事件機制?
  • 為何 React 事件要自己綁定 this

這樣你在讀源碼的時候就會不斷想去通過源碼找到這些問題的答案,而不是看完源碼再想發現了些什麼,當你從源碼中找到了你想要的答案,那麼說明你的努力是沒有白費的。

ConardLi的2019—尾聲和開始|年度徵文

因為之前我在生產環境使用的 React 一直是 15.x,所以源碼解析大多數都停留在16版本以前,如今 React17 馬上要發佈了,React 又給我們帶來了非常多的令人激動的新特性:可中斷渲染、指定加載順序、並行處理多狀態… 未來我還會針對這些新特性對 React 繼續探索。

數據結構和算法

ConardLi的2019—尾聲和開始|年度徵文

18年立過一個flag,2019年要把重新把數據結構和算法練好,我一直認為,數據結構和算法對於一個程序員是非常重要的,前端工程師也是一樣的。它能帶給你的不僅僅是面試上的收益,更重要的是可以拓寬你解決問題的思路。

當然你可能會講,有些大佬並沒有刻意練習數據結構和算法,但是他們一樣很厲害。不得不承認有些人先天就有優勢,又或者他們能從其他途徑領悟這些解決問題的思路,但這並不能否認數據結構和算法能夠讓你獲得這些思路,而且是屬於比較快捷的途徑。

2019年我做了差不多300道左右題目,輸出了題解60餘篇,困難:中等:簡單比例大概是1:3:3左右,全部都放在我的倉庫 awesome-coding-js 中。

雖然這個數量跟很多大佬比起來不算什麼,但是這些題目基本上覆蓋了常見算法(排序、遞歸、二分、搜索、回溯、動態規劃、貪心)和數據結構(數組、二叉樹、鏈表、棧和隊列、哈希、堆)的各個分類,由於時間有限,我一般也只會挑這些分類的典型題目,然後針對某一類題目進行總結。我也針對這些題解又做了一個比較全面的系統性的解題指南 前端該如何準備數據結構和算法? 希望能夠幫到大家。

剛開始做算法題目是非常耗時的,有時候一道題要花上幾個小時的時間,我的做題時間一般是晚上下班後睡覺前,做完就睡覺,所以做題時間和睡覺時間是成反比的,這也能激勵我快速的把題目解出來。

ConardLi的2019—尾聲和開始|年度徵文

當然現在已經好很多了,經過長時間有規律的練習和總結,現在遇到典型的題目我都能很快的解答出來,遇到有點難度的基本上也可以套用已有的思想慢慢的解出來,不會再有當初毫無頭緒的感覺了,不得不說,這真的是一個非常奇妙的過程,強烈建議大家也體驗一下。

工程化

前端工程化就是以工程化方法和工具提高開發生產效率、降低維護難度、把控研發質量。我研究的方向仔細劃分其實還可以劃分為研發效率、研發質量、研發安全三個方向。

研發效率

ConardLi的2019—尾聲和開始|年度徵文

提升研發效率應該是最常見的前端工程化方向了,整個研發流程的各個節點都是可以進行統一規範和優化的。

從初始化的腳手架,到研發的代碼規範,到開發調試的工具,再到構建打包、自動化CICD,都可以做成一套統一的並且可適配不同業務場景的解決方案。這個工作還是非常有意思並且有一定挑戰性的。

研發質量

研發質量也可以放到工程化的範疇,研發質量也是可以從多維度多場景來衡量的。和上面的研發效率類似,研發質量也可以從研發的全流程,也就是初始化、開發、調試、構建、上線、性能監控、錯誤監控來體現出來。

市面上大部分的監控研發質量的工具都只是針對以上的某一個階段,我的目標是實現一套針對研發質量監控的全流程解決方案。

我之前寫過一篇 前端代碼質量-圈複雜度原理和實踐,實際上這隻屬於以上的開發階段的代碼分析階段的一小部分,其中單單代碼分析階段就會有很多很多需要探索的事情。

比如下面的代碼文件耦合度分析:耦合指邏輯層面上有互相關聯和影響的代碼模塊,通常這個可以通過分析文件的依賴,以及分析一個給定時間分片內,代碼的提交情況判斷(耦合的模塊通常會在一起提交),耦合是一種常見以及肯定會出現的情況,並不一定是壞事。但是需要能夠展現出非必要耦合的能力,例如我在改文件A的時候通常也會修改和文件A看似毫無關聯的B文件,這兩個文件就可能存在需要解耦的必要。

如下圖,紅色部分代表系統內某個時間分片內經常協同修改的文件,即改了A就會改B,這些文件是存在耦合的。通過耦合的檢測和可視化,我們可以做到檢測單元測試以及文檔是否在和系統代碼本身同時演進;檢測代碼架構上有問題的部分和模塊間隱藏的設計上的依賴。

ConardLi的2019—尾聲和開始|年度徵文

下面的協作效率分析,也屬於開發階段的質量監控:有時增加開發者的數量並不能顯著的增加開發效率,如果你的項目有可能成為布魯克斯定律的受害者,那麼你會發現開發者總數與其產出之間的距離會增加。

布魯克斯法則:指投入更多的人來開發一個緊急的項目只會讓進度更慢。更多並不意味著更好,有些事最好是一個人來幹。

ConardLi的2019—尾聲和開始|年度徵文

總之這也是一個很複雜並且很有挑戰性的方向,需要研發全流程的大量數據監控和算法架構的支持。我也期待未來可以把這個方向做的更好。

研發安全

大部分同學可能對安全問題還停留在 xsscsrf 等常見問題上,其實安全問題多種多樣,有可能你不經意間一個操作就可能引起一個安全問題,比如你不小心把 source map 文件傳到了線上,吃瓜群眾就可以開心的在控制檯看你的源碼了…

ConardLi的2019—尾聲和開始|年度徵文

當然,安全問題造成的影響不僅僅是上面這麼簡單,可能你的日誌打點不小心在某些國家多收集了一些數據,就可能會引起該國家對你啟動國家安全調查(咳咳這裡就不明說了…)。回想之前 Facebook 的用戶信息洩露問題,直接給他帶來50億美元的鉅額罰款…

這些都有可能是你的幾行代碼就可能造成的影響,所以一定要重視代碼安全問題,不然有可能你在不經意間就把公司寫破產了~

大部分安全問題其實都是可以人為避免的,而我們能做的就是從工程化的角度去發現和避免這些問題,這樣的工作對於有一定體量的公司還是非常重要的。

開源

我玩github的時間並不久,之前只是去github下載項目,偶爾逛逛issues,今年才開始把自己沉澱的一些東西開源出來。以後會有更多更實用更有意思的東西開源出來。

這一年收穫的star大概有2k左右,這個數字跟眾多上萬star的大佬們真的不能比,但是對我來講已經很滿足了,是一個很好的開始。

ConardLi的2019—尾聲和開始|年度徵文

我的道歉

這裡真的要跟關注和使用我開源項目的同學說一聲抱歉,首先真的很感謝你們的關注,你們的關注也帶給我持續輸出的動力,但是下半年工作上我真的非常忙(具體原因下面會闡述),花在博客和開源項目上的時間少了許多,以至於很多問題不能及時修復,下面是我某個項目下的 issues

ConardLi的2019—尾聲和開始|年度徵文

下面是我的 github commit 記錄,後半年的提交真的少了很多,這裡真的要跟大家說一聲抱歉。明年我會盡力想辦法更好的去平衡工作和學習時間,來修復這些問題。

ConardLi的2019—尾聲和開始|年度徵文

項目列表

還有一點就是真的希望有感興趣的同學來一起來參與項目的共建,我之前也收到過很多同學的pr,只要是有價值的我都會合並,一個好的開源項目還得需要社區的力量來不斷的完善和優化,下面是我的幾個開源項目:

tpanorama

ConardLi的2019—尾聲和開始|年度徵文

tpanorama 是一個全景插件,它可以把一張平面圖轉換為可操作的全景效果,並且提供自定義標記、平面球面標記互轉功能,我的這篇文章 看完這篇,你也可以實現一個360度全景插件 就是對這個全景插件的實現講解。

在功能上它還有許多需要完善的地方,上面我貼的 issues 就是這個項目的,感興趣的同學可以一起共建來修復這些問題,或者添加新的功能。

https://github.com/ConardLi/tpanorama

electron-react

ConardLi的2019—尾聲和開始|年度徵文

electron-react,使用 electron + react + react-router + mobx + webpack 搭建的腳手架工程,集成了開發調試、程序保護、升級、打包構建等功能,另外還對窗口、通信、菜單、系統、彈框、打印 等常用功能提供了示例 demo

https://github.com/ConardLi/electron-react

awesome-cli

ConardLi的2019—尾聲和開始|年度徵文

這個項目是我開發的一些有趣實用的命令行工具集合,目前提供代碼掃描、代碼行數統計、代碼複雜度檢測等功能,後面我會繼續完善。

https://github.com/ConardLi/awesome-cli

awesome-coding-js

ConardLi的2019—尾聲和開始|年度徵文

這是一個 markdown 項目,上面已經介紹過了我的算法題解都記錄在這上面,不得不說 github 上的 markdown 項目 star 都挺多的。

https://github.com/ConardLi/awesome-coding-js

工作上的轉換

ConardLi的2019—尾聲和開始|年度徵文

今年我對於工作的關鍵詞應該是 轉換

由前端到全棧

最近又重新撿起了塵封已久了sql,也開始在nodejs上發力,並且還會寫一些gopython,自己cover整個研發全流程的感覺非常好,再也不用和後端撕逼了…

由業務到架構

今年上半年以及之前的工作,基本上都是和業務打交道的,按照排期完整需求。然後剩餘的時間就是關心線上監控、對已有的功能進行性能優化、以及為了提升業務效率而造輪子。

今年的下半年,可能算是我工作的一個轉折點,我開始專注於前端基礎架構方面的工作,主要方向我上面已經提到了,研發效率、研發質量、研發安全。這些東西是我以前從沒有深入研究過的,對我來講非常有挑戰性,我也非常感興趣。

上面我提到了我下半年非常的忙,這裡我就簡單說明一下,做業務和做架構真的不一樣。做業務相對來說是見到成效比較快的,而基礎架構不一樣,需要很長的時間去打磨和優化,短時間很難見到成果,做完一件事情之後我會想方設法的去優化,讓它變的更好,而且還有非常多新的事情等著我去做。總之我一直會抱著一種沒有最好只有更好,沒有最完善只有更完善的心態去做,所以下半年我花在開源項目和總結輸出上的時間少了很多。

但是這對我來講並不是一個壞事,輸出的時間變少意味著沉澱的時間會更多,通過大量長時間的積累和沉澱才能多輸出一些有價值的東西。也希望未來的我能夠繼續沉澱下去,戒驕戒躁、厚積而薄發。

尾聲和開始

2019已經進入尾聲,我們也即將迎來2020的開始。其實我現在還能想起2018年除夕夜的鞭炮聲,想到當時我對新的一年的展望… 閉上眼睛,2019的點點滴滴還歷歷在目,一個圓滿的尾聲又即將變成了一個嶄新的開始… 2020年會發生什麼?誰知道呢~

2019年你過得怎麼樣?開心還是不開心?賺錢了還是負債了?減肥成功了麼?年初的flag完成了麼?和喜歡的人在一起了麼?升職加薪還是被裁員了?你的尾聲是什麼?你的開始又是什麼?歡迎在留言區分享出來…

掘金年度徵文 | 2019 與我的技術之路 徵文活動正在進行中……

相關文章

飛一般的WebGL之唱起3D編程前的戰歌

解讀新一代Web性能體驗和質量指標

當瀏覽器全面禁用三方Cookie

前端安全—你必須要注意的依賴安全漏洞