公司內部技術分享會：覆盤個人前端成長

公衆號斷更的這幾天，土哥的所有精力都撲在了公司的項目上，還有團隊技術培訓，連vlog都懶得折騰了，畢竟我的精力有限。說到技術培訓，以前不少在土哥知識星球裏的球友都問過我，說「土哥，啥時候講講你這幾年的技術成長經歷啊」

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

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

我曾經也是個前端小白

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

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

過了一段時間後，我開始不知足於靜態頁面的實現，也想掌握如何讓本身的網頁做品動起來的技能，就跟淘寶網上的效果同樣。因而，我緊接着學習了行爲層javascript，當我能經過本身手敲的js代碼，在網頁中加入了輪播圖、tab切換、動態導航等特效的時候，當時以爲本身好有成就感。

那會兒我還不知道，這僅僅是切圖仔必備的技能包而已。然而當時，我已經很知足了，身邊朋友有不會的，我都會主動教他們，從思路分析，到代碼實現，如何運用html五、css三、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.

————————————————————————————————————————————

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

不爲流量，只爲能結交更多喜歡互聯網、熱愛web前端的朋友。