25 歲，畢業寫前端的這三年

時間回到 2016 年，彼時 996 還不算福報，比特幣單價也還遠遠不到 1000 美圓。那時的我懷着對大廠的敬畏和對前途的迷茫，拿着一紙畢業證告別了校園。這第一份名爲 Web 前端開發的工做，代碼寫着寫着就到了今天。

一晃三年過去了，從純粹的趕需求到造輪子、作分享和帶團隊，許多剛畢業的本身只能仰望的事情，如今看來也並不是那麼高不可攀了。簡單地說，我這三年中我換了三份工做，而每份工做的年終績效都是所在部門裏最高的。不過這種說法未免太功利、太乏味了。我相信這段經歷並不僅是週報和簡歷上刻板的流水帳，把它在我滿 25 歲之際整理下來，也許對你們來講能夠是個好故事。所以也就有了這篇文章。

遇上時代的第一年

我畢業後加入的第一家公司是科大訊飛。雖然這不是家小公司，但科大訊飛對於一個科大學生來講，想入職幾乎就像藍翔學生去開挖掘機同樣容易。記得面試流程大體就是和幾位在訊飛身居高位的科大校友聊聊，而後就收到 offer 了。

如今的技術社區裏，經常由於培訓班與科班的出身之爭吵個不停。但那時算是半個科班出身的我，並不以爲當時的本身除了學歷，和培訓班的學員有很大的區別：那時我還不清楚絕對定位和相對定位有什麼差異，基本只會 jQuery 加 Bootstrap 把功能堆出來而已。不過不要緊，總有不差錢的公司願意僱 985 的同窗來切圖寫頁面，這也就是我在訊飛主要的工做內容了。

畢業的第一年裏，個人工做以實現訊飛開放平臺的部分 Web 前端需求爲主。這期間個人精力除了實現各類業務需求，主要仍是放在了對開源技術的學習和我的項目上。在我剛入職時，我所在的開發團隊技術棧仍是先後端不分離的 jQuery + JSP 模式，前端代碼上傳到靜態服務器還須要靠 FTP，而團隊同窗還在調研 Knockout 做爲下一代基礎庫的可能性——即使是那時，離 Knockout 誕生也有將近十年了。其實，只要能接觸到社區的主流技術，許多過期的工具都是很容易被替換的。正由於如此，我很快地就應用了 Gulp 全家桶來處理一些很容易自動化的工做，並在那一年的十一假期起，開始試水如今如日中天的 Vue 2.0 和 Webpack。然後，我又搭建了內網的私有 NPM 倉庫，發佈了腳手架在內的十餘個包來幫助你們向新的技術棧遷移。這套如今對於前端同窗司空見慣的技術在那時仍是很有點新鮮的。以此爲契機，我推進了團隊的先後端分離實踐，後來也有幸被評爲了那一年的部門最佳新人。

剛畢業的那段時間，能學的和想學的東西都實在太多了。記得訊飛的內部 App 能夠顯示天天的打卡排名。若是你在晚上 12 點準時打卡，那麼你就有機會搶到次日的打卡第一名——這個時段的打卡截圖，個人手機裏存着三十多張。固然，即使訊飛確實是我呆過的公司裏強制加班最多的，但其實也遠遠沒有忙到這個量級。真相是自從那時我就發現，只要你對着一屏幕的代碼又能按時交差，沒人關心你到底寫的是什麼。藉着那時候高漲的興趣，我鼓搗出了很多如今看來基本純屬娛樂的東西。好比：

• Ove Lang 編程語言，能夠解釋執行形如 (表態 (欽點 董先生 特首) (= 特首 董先生) 哦。 的代碼。
• Merry8 虛擬機，能夠模擬運行用上古的 Chip8 彙編指令寫出來的 PONG 遊戲。
• Sinomap 地圖庫，能夠用麥卡托投影算法把 GeoJSON 數據渲染到 Canvas 上。
• Flylog 遠程調試工具，能夠將其它設備頁面中的 log 信息推送到 PC 端的後臺上。
• CSS Emoji 示例，能夠用兩個 div 畫出 Emoji 表情。

你固然能夠指責那時的我只醉心技術而無論業務（這確實是某家大廠對個人面試評價），不過折騰起這些有趣的項目，讓我感受那時的生活比起在每一個週末都要痛苦地趕（抄）做業的大學要自在得多。從旁觀者的角度來看，我在訊飛成長得並不慢，也有許多科大校友歷經多年成爲了那裏的技術骨幹。然而事實是，我在訊飛並無呆滿一年，留下了篇《小記在訊飛的 300 天》做爲記念以後就告別了合肥。爲何離開呢？非要用一句話歸納的話，應該是我感受本身並不屬於那裏吧：合肥這座城市對我這個南方人來講並無那麼多歸屬感，而我熟悉的前端技術對於一家並不是互聯網公司的科技公司來講，更偏向於錦上添花而非雪中送炭。出於對地緣和我的價值的嚮往，我選擇了告別這家食堂至今讓我十分懷念的公司。感謝勁東、芳姐和家軍等很多人的關照，但願有緣可以江湖再見吧。

一張調試 2016 年會大屏 Demo 的照片。那是我在訊飛最忙的 24 個小時，也是惟一一次直接和董事長彙報工做。

參與社區的第二年

我在自我介紹的時候，經常說我呆過的地方好像都是「假的」：我在科大讀書，但它不在北京；我畢業前水到了鵝廠的實習，但 base 不在深圳；我離開訊飛後去了美團點評，但部門卻在廈門。直到如今，我暫時也尚未離開這座城市的打算。只要不去爲了那些庸俗的同齡壓力去束縛本身，廈門呆起來就是個既離個人家人很近又很容易看到海的溫馨城市。2017 年，美團點評的廈門研發中心在搬家前還能看到遊艇，天天騎着單車上下班都能吹到海風，有時下班還能和小夥伴們去沙灘抓螃蟹 :)

我加入美團點評的面試很順利，最主要的流程就是我把上面的一些各色玩具和相應的博客和前端老闆虎哥秀了一下吧。在那裏，個人主要工做是開發一個名爲學城的內部知識庫系統。雖然我爲這個項目提交的代碼佔比可能已經所剩無幾，但我相信只要它還活着，就總會和我有着點微妙的關係——學城的名字就是我起的。看過《權力的遊戲》的同窗應該都知道容納維斯特洛大陸七國學士的 Citadel 吧，這個聽起來就頗有智慧的名字是否是挺適合一個知識庫的呢？

對相似 Wiki 的知識庫系統來講，Web 前端的富文本編輯器就很是重要了。稍有經驗的同窗都知道，富文本編輯是個長期以來被認爲是天坑的領域，相關主流基礎庫從啓動到成熟的時間都是以年爲單位來計算的。咱們顯然沒有必要從新發明輪子，能夠基於社區已有的成熟框架來開發。在這個背景下，我首先接觸了 Slate，這是一個可讓你以編寫 React 組件的形式來定製本身的富文本應用的框架，它的 API 之優雅、文檔之完善與源碼之整潔使我很快就決定上車了，甚至都沒有太在乎它還屬於 Beta 狀態的友情提醒。

在學城的最先的幾個版本中，咱們基於 Slate 編寫的代碼還算工整。但很快問題就來了：它還不能算一個 battle-tested 的框架，咱們定製的組件在編輯時暴露出了不少狀態問題，bug 數量很是高。在我以前的工做經歷中，對於框架用着不順手的問題，基本均可以在業務中變通或繞過。但這對於富文本編輯器來講不適用，由於許多 bug 自己就在框架層，即使反饋到社區，也沒人有義務立刻替你解決。因此該怎麼辦呢？下載一份源碼本身改吧。

修復框架的 bug 和修復業務代碼的 bug，其實並無本質的不一樣。畢竟只要能穩定復現，幾乎全部 bug 最終都是能被修復的，只是業務代碼中更容易出現骯髒的修復代碼而已。但修復 bug 以後呢？在我第一年工做的時候，我在 GitHub 上還幾乎沒有爲其餘人的項目提交過代碼，但我知道只要代碼合併入主幹分支，你就會成爲這個項目的貢獻者。雖然這沒有任何物質獎勵，但這做爲貢獻過開源項目的證實仍然讓我十分心動。抱着這種嚮往的心情，我爲社區提交了第一個 PR。

到如今我還記得很清楚第一個 PR 的內容：給 .npmignore 文件增長了一行，來解決 Babel 默認重複編譯的問題。雖然只有一行代碼，但出於我對開源項目的敬畏，我仍是寫了至關詳細的描述來表達我爲何須要增長這一行代碼，以及它會經過什麼方式來解決問題。做者也很快就合併了這個 PR。在發現貢獻開源項目原來也就是這麼回事以後，我有了很大的動力將更多個人改進提交到上游。到我離開學城項目爲止，我把包括 bug 修復、測試、文檔在內的近 20 個 MR 合併入了 Slate 的主幹，並維護了一份 0.24 版本文檔的完整中文翻譯。今天 Slate 已經有接近 1.5 萬個 star 和超過 200 名貢獻者了，而我在它的 contributors 排行榜裏仍然能夠排在前十。

惋惜的是，即使我盡力改進 Slate，它對於表格、列表等存在嵌套的 UI 組件，其穩定性仍然難以知足學城的需求。再加上它較爲激進的更新方式，咱們很快就遇到了難以繼續同步上游更新的問題。在充分地向公司上層拋出問題並給出備選方案以後，咱們將富文本框架遷移到了架構類似但更爲穩定的 ProseMirror 上，它應該已經在學城上沿用至今了。雖然 Slate 的落地時間不長，但在對它的使用與改進過程當中，讓我充分地理解了開源項目的運做和參與方式，我在 GitHub 上也終於再也不僅僅是自娛自樂了。

2016 年和 2017 年我在 GitHub 的貢獻對比。

到了第二年，我在 GitHub 上提交的代碼雖然仍是有很多玩票成分，但也再也不是清一色的玩具了。大體有這些：

• 異步的數據遷移工具 Bumpover，它實現了 100% 的單元測試覆蓋率。
• 經過提取語法樹節點來比較 Vue 與 Angular 類似度的 naming-style-demo 示例。
• HTML 字符串轉虛擬 DOM 的解析器 html-toy-parser。
• 40 行的 MVC 框架 nano-mvc。

在美團點評的那段時間裏，除了在 GitHub 上提交代碼外，我在一些技術社區裏也至關活躍。記得剛入職時須要把 Vue 切換到 React，對 Vue 的懷念促使我去 SegmentFault 上回答了許多 Vue 的問題，一度是某幾周內這個話題下的第一名。而且，我還發現掘金是個很適合發（新手向）前端技術文章的地方。在 2017 年結束時，個人 掘金專欄 已經有了 3000 以上的關注者。不過，我可不是純粹只貢獻技術正能量的傻白甜。若是那段時間你在掘金髮文章講如何深刻理解 this 的四種指向和寄生混入繼承之類老掉牙的糟粕內容，那麼我多半會在評論區義無反顧地站出來吐槽 :) 只是如今的我已經沒有興趣參與這些口水話題了而已。

因爲遇到了更適合個人機會，我也沒有在美團點評工做超過一年，不過我仍是很留戀剛剛入職時的那支團隊。不管是晚上飯點時小夥伴們吃遍菜單的平常聚餐，仍是不按期能蹭到的虎哥牌星巴克，都是至關有趣的回憶。也還要額外感謝佳立、根龍、春雨等接手學城的同窗們。多虧了大家，鄒老闆纔沒有找上門來追殺我啊。

圖中多邊形風格的大樓就是美團點評廈門研發中心的前所在地，咱們的團隊曾在照片拍攝地捕獲螃蟹。

突破瓶頸的第三年

在離開美團點評前，我確實能夠 hold 住一些基礎框架的開發了。但富文本編輯器的性質決定了它在基本穩定後的迭代方式，更多地只是修修補補而非開疆拓土。這讓我感到焦慮，感受本身處在一個爲了四處救火而疲於奔命，技術進步開始放緩的瓶頸狀態。在這個時候，新的機會出現了。

2017 年末的某一天，我在掘金上灌水時發現了一篇名爲《咱們在海邊寫代碼》的軟文，署名糖餅，看起來出自個很有底氣的前端團隊。巧的是它的 base 也在廈門，而且實際地址恰好在個人上班路上。本着聊一聊反正不虧的心態，我騎着單車拜訪了這家當時名叫歡樂逛的公司。

接待個人兩名面試官，一位說本身花名就是糖餅（真人和頭像畫風不符），另外一位說本身花名叫小米。他們兩我的看起來蠻樸素的，但對個人長篇大論卻出奇的有耐心，中途還有一名穿着黃拖鞋的男子參與了旁聽。那是我經歷過的最久的一輪面試，總共和我扯了應該有兩三個小時。我原本覺得這就是一次初面，尋思着這公司的一線同窗還蠻經得住忽悠的。但其實我已經把技術面該遇到的所有 Boss 都過了一遍，沒想到說好的青銅局裏來了一羣王者啊。

必須說，若是糖餅沒有貼出他合併到 Webpack 的並行構建支持 PR，我是不會輕易選擇在畢業還不到兩年的時候被他慫恿着換第三次工做的。固然，咱們通常的平常也並不都是那麼高大上的 Rocket Science。我在這裏的工做，主要集中在當時尚未獨立出來的稿定設計項目裏。我負責維護這個設計站點中的平面編輯器 SDK，以及相關的 UI 組件。最開始，我還覺得稿定就是個較爲邊緣的新業務，直到公司搬家後前臺都掛着稿定設計的招牌，才發現我在這大概至關於在中國郵政分拆以前進了名叫中國移動的部門。

平面設計編輯器與富文本編輯器有許多類似之處，而且這個細分領域中當前的主流開源項目，其設計思想還達不到 Slate 那種高度可擴展的靈活性，這無疑給了我不少發揮的空間。在過去的一年多的時間裏，我從細小的 bug 修復開始一步步熟悉這個編輯器，終於在上個季度上線了我最想從 Slate 中借鑑的特性：組件化的可編輯元素。Slate 賦予了咱們只要用 React 聲明一個 <Table> 組件，就能在富文本編輯器中編輯表格的擴展能力。我將這個思想應用到了咱們基於 Vue 的編輯器上。如今咱們只須要提供基於 Vue 編寫的 UI 組件，就能輕鬆地爲編輯器組裝出新的可編輯元素類型支持，而無需改動框架核心源碼。再加上小夥伴在前端出圖上的不懈努力，咱們的編輯器作到了兼取 Canvas 與 DOM 兩者之所長，目前暫時尚未主流的開源編輯器能知足這一點。

咱們的平面編輯器，歡迎你們訪問 gaoding.com 體驗噢。

除了在較高的層面上，將框架按照本身的設計思想重構以外，我還在較低的細節層面上作了些有意思的工做。好比，我使用座標系變換的思想，將圖形旋轉後的 裁切拖拽限制算法 從上百行的 if else 判斷簡化爲了十餘行數學變換；基於節點序列化數據的哈希值，實現了更細粒度的歷史狀態結構共享，並開源了歷史狀態管理庫 StateShot；使用 CodeMod 自動將 ES5 代碼重構爲 ES6；設計實現了編輯器的特效調節機制，並做爲第一發明人提交了專利申請等等。如今我是 Web 工具團隊名義上的負責人（吉祥物），工做至今寫了 80 篇左右的技術博客，掘金專欄的閱讀量也超過了 20 萬，看起來彷佛還過得去吧？

但這些工做並無讓我感受突破了瓶頸。

很早以前我就問太小米，咱們作的事情比起 Adobe，有什麼特別的優點嗎？小米的回答是咱們須要主打內容與細分的場景，作到對普通用戶更高的易用性。從商業角度來說我很承認這個答案，但我在純粹的技術角度上，總以爲這是更適合市場部門負責人的回答而不是屬於技術部門的覺悟。而且，我也一直以爲我本身的技能體系還差了一些什麼，使我雖然在一家主打商業設計而特別重視前端技術的公司裏，作的事情卻還不夠酷。到底還差了什麼呢？個人答案是渲染。

咱們前端同窗們所擅長編寫的 JavaScript，只是在 CPU 裏執行的單線程代碼而已。別忘了咱們還有 WebGL 這個雖然很是繁冗，但能讓咱們釋放 GPU 潛力的武器。這個領域經常被認爲是遊戲開發者所專屬的。而你們對於應用 Web 上的 3D 能力，首先想到的可能也都是套用 Three 等充分封裝後的成熟開源渲染引擎。所以，在這個領域就沒有必要從新發明輪子了嗎？偏偏相反，我發現這是一片巨大的藍海，它在 Web 設計領域的應用幾乎仍是白紙一張，存在着很是大的定製、優化可能性和應用前景。限於篇幅和本文的主題，這裏再也不詳細展開，只展現一下咱們自研的渲染引擎在投入開發一個月以內所獲得的一些渲染效果就足夠了：

在我前一段時間選擇深刻 WebGL 的時候，幻神提醒過我這基本至關於刪號重練了。確實，在學習曲線的初期，圖形學晦澀 API 的門檻讓我感到很是艱難，但在堅持不使用現成引擎來實現 Demo 的一段時間後，某個時間點上我感受本身終於能夠把那些零散的點鏈接起來了。而這時再加上前端框架的設計經驗，我確實找到了很是適合咱們應用場景的一個自研方向，具體的內容暫時沒有辦法在這裏詳述，只能說我和小夥伴們正在緊張的開發中，很是但願能讓咱們的新特性早日和你們見面 :)

在 25 歲的今天，我感受終於走出了以前幾年在 CPU 上編寫邏輯的瓶頸。從最先的玩具編程語言和遊戲模擬器，再到如今的渲染引擎，所謂「編程語言、操做系統和計算機圖形學」的程序員三大浪漫，我也能吹牛說本身都略有涉獵了。對我來講，從事一份工做三年以後仍然保持高漲的熱情和找到值得繼續鑽研的技術領域，可能不是件很容易的事，所以如今的狀態對我來講已經很好了。固然，要想在將來在技術上還可以繼續深刻，所須要的應該就不只僅是傳統的 Web 前端的領域知識，還須要更多跨領域和學科的知識了。感謝稿定這裏鑽研遊戲引擎和圖形學的大佬們，和他們的交流讓我獲益匪淺。如今我實在有太多須要作的事情了，所以個人博客和專欄也可能不能再維持月更的節奏，但願往後能用更多的乾貨來彌補 :D

後記與致謝

從第一年編寫展現頁和後臺業務邏輯，到第二年活躍在開源社區，再到第三年開發自研框架並嘗試往圖形學領域轉型，畢業以來的這些經歷讓我以爲我確實還在成長。我雖然已經再也不是團隊裏最年輕的成員了，但如今我還遠遠沒有到轉型徹底的管理者去分配需求和任務的時候：還有這麼多有趣的代碼能夠寫，放棄了豈不惋惜？

雖然這篇文章主要和技術相關，但個人生活其實也並不僅有技術啦：我有微單和無人機，玩通了 Switch 上的塞爾達和馬里奧，花名（雪碧）和公衆號名（彩色相簿）都來自白學，畢業以來除了公費遊歷了北上廣滬杭等大城市，也去了臺灣、新加坡、捷克、法國（包括白學家的聖地斯特拉斯堡）等至關有趣的地方。只要在生活裏保持開放的心態，總能認識到許多比本身更厲害的人並向他們學習。若是按照論文致謝的方式列出個名單，那麼我感受對我影響最大的是這麼幾位，即使其中的一些人我還不曾謀面：

• 我司的小米和糖餅在對技術的態度和團隊管理上都給我起到了很棒的「模範帶頭做用」，在這個團隊的成長體驗是最好的。
• Slate 的做者 Ian Storm Taylor 在我初入開源社區時給了我不少熱情而不失嚴格的 Review，他的框架設計理念對我有很深的影響。
• 攜程的工業聚向我展現了代碼邏輯所能達到的優雅水平。聚聚總結的 GSP 編碼風格即使在編寫渲染引擎時都十分適用，扭轉了我對函數式編程矯枉過正的態度。
• Photopea 的做者 Ivan Kutskir 在布拉格熱情地招待了我，他的做品對圖形學的應用給了我巨大的信心來深刻這一領域。
• 一位不肯透露姓名的女性在我遇到困難時給了我很大的安慰，我已經習慣在每一個週末去見她的動車上安心地寫代碼了。

在斯特拉斯堡巡禮時拍下的照片。

我還要感謝畢業到如今遇到的不少不少人，畢竟終歸是和你們因緣際會的無數選擇才能成就一我的。在生活這個巨大而混沌的系統裏，幸運的是咱們能夠做出選擇來結識他人、追求理想並做出改變——We are what we choose. 最後，一樣感謝你的閱讀噢 :D

本文首發於個人公衆號「彩色相簿」，不圖流量不圖廣告，純屬交個朋友，歡迎關注 :)