公眾號斷更的這幾天，土哥的全部精力都撲在了公司的專案上，還有團隊技術培訓，連vlog都懶得折騰了，畢竟個人精力有限。說到技術培訓，之前很多在土哥知識星球裡的球友都問過我，說「土哥，啥時候講講你這幾年的技術成長經歷啊」

其實，覆盤我的前端成長這件事，我很早就想在公司內部搞一次了，因為有聽眾基礎，我司前端組的小夥伴包括實習生，都樂意聽我站在臺上吹牛逼。

於是，就在上週五，我帶頭組織策劃了一起公司內部技術分享會。美其名曰，前端漫談，其實就是技術人扯閒篇。在這裡特別感謝下，公司小夥伴們的捧場。

我曾經也是個前端小白

剛開始，我跟很多前端新人一樣，從學習前端基礎知識入門，比如網頁佈局基礎、javascript動態特效等，為後面學習更深入的知識打好基礎。

我最先接觸的是html和css，後面又出來html5和css3的時候，我又跟著對比學習了一下它們的新特性，通過前期掌握的知識，我有了網頁佈局的能力，那會兒已經可以憑藉自己的能力，去開發實現淘寶網首頁的靜態頁面了，當時覺得這些標籤和屬性好神奇，酷爆了。

過了一段時間後，我開始不滿足於靜態頁面的實現，也想掌握如何讓自己的網頁作品動起來的技能，就跟淘寶網上的效果一樣。於是，我緊接著學習了行為層javascript，當我能通過自己手敲的js程式碼，在網頁中加入了輪播圖、tab切換、動態導航等特效的時候，當時覺得自己好有成就感。

那會兒我還不知道，這僅僅是切圖仔必備的技能包而已。然而當時，我已經很滿足了，身邊朋友有不會的，我都會主動教他們，從思路分析，到程式碼實現，如何運用html5、css3、js實現炫酷網頁，比如滑動門特效、導航條雙向繫結、漸變動畫、迴圈動畫等技巧，那會兒的我已經學會了通過教別人為自己撈好處，這是我第一次體驗到用技術賺錢的快感，也因此接過幾個小活兒，賺了點小錢。

跳出舒適區，才能迎來快速提升

2013年那會兒，當你能通過自己掌握的html、css、javascript開發出一整套動態網頁時，就可以在太原找到一份初級前端開發的工作了，工作內容主要是網頁製作，行內術語叫「切圖」。

當時，還是jQuery大行其道的年代，你只需要掌握ajax前後臺數據交換，就可以完美勝任一家公司的前端工程師這個崗位了。

那會兒我也沉浸在「為一個又一個網頁裡新增動態特效」的滿足感裡，並且樂此不疲。這種狀態一直保持一年多，直到後來無意間添加了好幾個不同地區的技術交流群，有北京的、上海的、杭州的、深圳的......，通過在群裡的冒泡、潛水以及日常圍觀，我接觸到了一個叫做「元件化」的東西。

其實，那會兒北上廣深的前端圈裡，已經開始慢慢湧現出了很多前端框架，並開始在前端專案裡流行開來。

彼時，太原技術圈還處在刀耕火種、後知後覺的狀態，身在太原的前端從業人員，感覺就像井底之蛙。我當時覺得，是時候跟上北上廣的節奏了。

於是，我果斷入坑前端元件化網頁開發。

經過時間洗滌，後來元件化成為了企業中開發的主導思想，也成為流行框架vue、react的核心思想。

當時還做了一個個人資訊驗證的專案，開始慢慢使用正則驗證，提升使用者體驗，在前端這塊及時反饋給使用者他填寫的是否正確，或者符合規則。

踏上移動網際網路的快車

再到後來，移動網際網路大熱，移動端開發開始流行，為了順應潮流，我又接觸到了webapp的學習。入了這個坑才發現，它和pc端開發套路有點不同，像什麼移動佈局、適配、相容機型、效能優化等，一度搞得我頭大，好在我堅持了下來。

如果當時我沒有咬咬牙堅持，可能現在的我已經被前端淘汰了，或者成前端老油條了，躲在某個二線城市的小公司切圖，直到價效比被年輕人超越，然後混到30歲被迫中年轉行，然後去飯店端盤子洗碗，閒暇之餘跟服務員同事們吹噓，當年我還是個碼農......

嗯嗯，一定是這樣的，這境遇聽著都挺慘的。快醒醒，這一定是個噩夢。當然了，如果真是那樣，你們也不可能認識我這麼個人，誰叫“碼農土哥”？管他呢，who care !

我人生的這段經歷，可以說「成功了，青雲直上；失敗了，萬劫不復」。

後來在專案實戰中，我又掌握了表單驗證、儲存、地圖、響應式佈局等，當時swiper外掛剛剛火起來。在此期間，我練手做了好幾個專案，比如swiper移動端輪播專案、canvas手勢解鎖專案、音視訊播放專案、高德地圖定位專案等。最後結合之前所學的知識，開發了一套仿美團外賣的webapp專案。

坊間傳言，優秀的碼農，都敲過10萬行程式碼。

這句話，我信了，一信就是八年。

再後來，微信小程式橫空出世。為了不掉隊，土哥立馬跟進學習，敲程式碼，寫demo，當時好像做的第一個小程式就是新聞列表的一個專案，還記得第一次利用json檔案配置資訊成功時的那種興奮勁，現在都回味無窮。

在這個小程式中，鞏固加深了我對資料繫結、列表渲染等小程式API知識的運用熟練程度。

至此，移動端開發讓我嚐到了甜頭，薪資也隨之水漲船高，比之前剛入行那會了翻了不止10倍，經過前期資本的積累，真正做到了銀行卡里有六位數存款，那段時間睡著都能笑醒，中午出去吃飯再也不會點最便宜的土豆絲蓋飯了，都往貴的來，過油肉、木須肉、水煮肉，只要是帶肉的、比土豆絲貴的蓋飯，我都吃了個遍。

我終於證明，貧寒學子靠程式設計翻身，不是說說而已。

然而，隨著工資和經驗的增長，我卻慢慢變成了前端圈裡的老人，一晃八年已過，這一點在以後的歲月長河裡，埋下了隱患。

我技術棧的最終形成

其實，前面講的有些內容我是穿插著學的，並沒有先後次序，工作中用到什麼就去學什麼。熟練運用前端框架是提高工作效率的必備技能包，說到前端框架，就不得不提vue.js and react.js。

很多人都知道，土哥是vue陣營的忠實粉。可我一開始入手學習的，卻是react。一開始我被react的虛擬dom和jsx語法糖吸引住了，就像小孩看見了玩具。

緊接著，我又發現react提供了響應式 (Reactive) 和元件化 (Composable) 的檢視元件。興奮之餘，我準備找個專案練練手，越往後走，越發現react框架帶來的便利性和顛覆性的程式設計思想，它不止能在javascript中寫css，還能有路由去串聯各個頁面模組。

當時覺得，我可能要成為react信徒了，誰都別攔我，它是如此的awesome。

直到後來vue.js的出現，加上國內很多公司和前端開發者使用vue作為專案開發框架，我才慢慢將注意力轉移到了Vue.js的身上。

不得不說，vue和react有很多相似之處，這也決定了我技術選型的難度不是那麼高。而且，vue同樣提供了Virtual DOM，提供了模版、元件樹的概念。後來vue的框架開發者也提供了渲染函式，甚至支援jsx。

真正讓我投靠vue陣營的，是它的vuex狀態管理工具和vue-cli腳手架，這樣可以更好更快速地搭建專案環境，相比於react學習曲線的陡峭，vue顯然更適合前端同學入門，選擇vue作為技術棧，我也更方便去管理和培訓前端組成員，降低了學習成本。在專案開發缺人時，公司也更容易招聘到會vue開發的前端應聘者。

當然，如果你想更加深入掌握vue框架，es6的功底是絕對不能差的，專案開發中，es6和vue框架更配哦。

比如es6裡面的promise、class、async、proxy、iterator等，都是需要熟練掌握的，當然，這些也是現在前端面試中，可能會經常問到的話題。

除了es6，整個技術棧班底，可缺少不了webpack和node.js的加盟。只有將這一套技術工具結合使用，才能算是發揮出mvvm框架的最大威力，前端後分離如今也是大勢所趨。

每個人都是awesome

其實，我這幾年的技術成長經歷也沒什麼特別的，基本上是跟著專案走的，隨著專案開發數量的增多，我學會並掌握的技術也在增加。我走過的，只不過是大部分人正在走的路，這本身沒什麼新鮮的，每個人都會最終到達他自己的目的地。

後來，我如願當上了我司的前端leader，抵達了我自己的目的地。之後，我開始了一段新的旅程。

這些年一路走來，我喜歡並愛上了程式設計給我帶來的神奇感和成就感，每天不敲幾行程式碼，感覺就渾身不舒服。

我也曾為了學習一個框架，週六日宅在家裡沒日沒夜的研究，餓了就吃，吃完了就學，敲累了就睡覺，睡醒了就接著學......拉著窗簾的我都不知道窗戶外面是上午還是下午，不知道天氣是颳風還是下雨，是晴空萬里，還是烏雲密佈。

我也曾為了趕專案進度或者接私活，不睡覺不洗臉不洗頭不刷牙不換衣服一天不喝幾杯水不上幾趟廁所，忘乎所以的幹過，現在想想，當時的自己真tm瘋狂，wow, crazy boy！！！

等私活兒發給甲方或者專案交付給領導，獲得對方認可之後，呼呼在家矇頭大睡一天一夜。第二天起床去衛生間照鏡子，撓撓頭髮，發現掉了好幾根。早晨去公司上班，有同事提醒我，“你後腦勺多了幾根白頭髮”。當時我記得自己還自嘲過，「hai，誰還沒為夢想瘋狂過？」

我也曾為了一個bug，熬夜到天亮，留宿在公司，吃喝全靠外賣，相信大家都有這種經歷，選擇了程式設計，就義無反顧的去熱愛它，可能你入行之初，是抱著掙高薪的目的進場的，可越往後走，越覺得，程式設計已然成為了你生命不可或缺的一部分。

如果有一天，你終於不再敲程式碼了，等你回頭翻看你曾經敲過的專案程式碼時，你也可能會感嘆一句：臥槽，這誰寫的，太有才了！

是的，只要你一腔熱愛併為之付諸努力，每個人都是awesome。

Hey man, what's up? Just keep your swag.

這篇文章來源於我的個人公眾號「閏土大叔」。

不為流量，只為能結交更多喜歡網際網路、熱愛前端的朋