一、Why choose front-end

2015.07畢業(yè)后,，進(jìn)了一家游戲公司做運(yùn)營(yíng)策劃,，寫過營(yíng)銷方案,、做過內(nèi)容編輯,、知道廣告投放和換量，還得兼職產(chǎn)品經(jīng)理畫原型,。 每天9.30-23.00以后,，周末經(jīng)常加班,，像無頭蒼蠅一樣碰撞一年后,，我沒有任何成就感，我開始思考自己每天做的是什么,，將來會(huì)做什么,，做的這份工作是自己喜歡的嗎？在這個(gè)領(lǐng)域上將來會(huì)有所成就嗎,？ 1,、重復(fù)而繁雜 => No，我喜歡專心研磨一個(gè)東西,，直到做好它 2,、各種會(huì)議和無數(shù)遍的方案修改 => No，我做事的時(shí)候不喜歡被打擾,，但這并不妨礙我是個(gè)喜歡交流的家伙 3,、表面上付出了無數(shù)心血的產(chǎn)品，到頭來說不出它哪些地方屬于你 => 很可悲,，螺絲釘,，物質(zhì)和精神上都沒有得到回報(bào) 4、個(gè)人成長(zhǎng),，想總結(jié)自己畢業(yè)一年的提升,，除了滿口的流量、DAU,、PV等詞匯和一套又一套的運(yùn)營(yíng)方法論,，發(fā)現(xiàn)竟然都是一些很虛的東西（至少在當(dāng)時(shí)的我看來是的） 5、高強(qiáng)度而無原則,、低效率的加班

基于以上等等,，從2016下半年開始，我不斷的審視自己,，我自己是個(gè)什么樣的人,，我喜歡做什么，我適合做什么,，我會(huì)在什么領(lǐng)域有所成就

1,、我經(jīng)常會(huì)為了研究一個(gè)東西廢寢忘食,，投入而專注 => 貌似適合做技術(shù) 2、我能堅(jiān)持做一件事情,，不會(huì)三分鐘熱度 => 貌似適合做技術(shù) 3,、我大學(xué)很喜歡搗鼓跟電腦相關(guān)的東西，從軟件PS,、AI,、ID到優(yōu)化電腦系統(tǒng)到重裝系統(tǒng)到最后自己組裝電腦 => 貌似適合做IT 4、我的舍友是后端,，在我搗鼓第三點(diǎn)的時(shí)候他已經(jīng)在幫學(xué)校和外面的公司寫系統(tǒng)了,，我很崇拜他，但大三大四讀了《人人都是產(chǎn)品經(jīng)理》,，崇拜歸崇拜,，畢竟還是經(jīng)理比較有吸引力，年少無知隨大流 5,、我是985通信工程專業(yè),，好歹見過C語言，知道數(shù)據(jù)結(jié)構(gòu),，上過計(jì)網(wǎng) => 這不明擺著去做開發(fā)的意思么

綜上所述,，我看到面前清清楚楚的寫著三個(gè)字：程序員 再加上詢問了一些朋友和同學(xué)的意見，2017.01.01開始在家全日制脫產(chǎn)自學(xué),，從前端開始……

二、2017.01-2017.05（自學(xué)）

嗯,，自學(xué)開始,，怎么學(xué)呢？

我并沒有一股腦就開始學(xué)

這里得感謝第一份工作對(duì)我的鍛煉,，我利用了產(chǎn)品思維來看待這件事 目標(biāo)：4-6個(gè)月找到一份前端工作 核心技能：HTML、CSS,、Javascript + 一個(gè)框架（Vue）+ 一個(gè)項(xiàng)目

確認(rèn)好需求后，我利用思維導(dǎo)圖把這三個(gè)模塊進(jìn)行了需求拆分和梳理,，每個(gè)大需求下要學(xué)的是什么,，特別是最核心的模塊-JS 然后是尋找合理快速的學(xué)習(xí)方法,，我瀏覽了很多關(guān)于如何自學(xué)前端、前端推薦書籍,、前端知識(shí)體系等等方面的內(nèi)容,，最后總結(jié)出來我要做的事：看視頻快速入門 => 看書扎實(shí)基礎(chǔ) => 大量敲代碼實(shí)踐,，期間不斷積累好的博客資源，吸取前人的經(jīng)驗(yàn),，特別是github（懂的自然懂）

但其實(shí),，前面的我并沒有消化多少，對(duì)新手來說 《Javascript DOM編程藝術(shù)》 《Javascript面向?qū)ο缶幊獭?nbsp;這兩本書我覺得是比較合適的,，其他的書都有它對(duì)應(yīng)的階段,，強(qiáng)讀不來 《Javascript高級(jí)程序設(shè)計(jì)》真是一本好書，入門后就值得不斷的翻看了

到現(xiàn)在工作一年了,，我的桌面上常備《Javascript高級(jí)程序設(shè)計(jì)》+《You don’t know JS》系列,，閑來無事就翻一翻，個(gè)人覺得進(jìn)階必備

大學(xué)折騰過科學(xué)上wang,，看得懂hello world的英文水平（大學(xué)過完六級(jí)后就扔了）……在墻外發(fā)現(xiàn)了一些新世界：Google,、Medium,、Youtube,、Twitter

四個(gè)月后的我，能寫靜態(tài)網(wǎng)站,、JS基礎(chǔ)能隨口胡扯一點(diǎn)、會(huì)Vue的基礎(chǔ)使用（對(duì),，爛大街的仿餓了么Web App）,、用github page給自己做了個(gè)在線簡(jiǎn)歷

這段時(shí)間留下來的積累是30多張知識(shí)腦圖+50篇博客（不是現(xiàn)在github上的）

花了一個(gè)月去面試，此次省略一萬心酸字,，最終入職一家理想的互聯(lián)網(wǎng)公司，產(chǎn)品技術(shù)驅(qū)動(dòng),、最新技術(shù)棧,、leader和同事是985大牛、技術(shù)氛圍很nice,、效率至上965 回想起來當(dāng)初的自己真滴是渣渣,，肚子里那點(diǎn)東西一眼忘穿秋水,，換做現(xiàn)在我是面試官，說不定自己都會(huì)搖搖頭 面試時(shí)得到的反饋：能學(xué)到的東西叫技能,，花時(shí)間就能學(xué)會(huì),，我們要的是有自學(xué)能力和技術(shù)熱情的人。 很感恩現(xiàn)在公司的CEO和前端老大,，或許因?yàn)橹写笕A工一家親,？

三、2017.06.01-2018.06.01（工作一年）

6.1兒童節(jié)當(dāng)天正式入職,，對(duì)我來說,，還有個(gè)特殊的意義：在前端路上,，我只是個(gè)兒童，剛剛開始蹣跚學(xué)步,，未來路很長(zhǎng)……

剛開始是內(nèi)部管理系統(tǒng)的開發(fā),，vue對(duì)新手小白真的非常友好,，過度平緩 然后寫了兩個(gè)星期的微信小程序，妥妥的練了一把手 緊接著就上了公司的react-native大船開發(fā)App（公司核心產(chǎn)品）,，一開始真的是一無所知,，幸得leader炒雞耐心,，簡(jiǎn)直手把手有木有，在react的路上越走越遠(yuǎn)…… 加入RN-App項(xiàng)目后,，我花費(fèi)了大量的時(shí)間去熟悉項(xiàng)目 加上我很喜歡從大局看問題，想掌控一個(gè)項(xiàng)目,，所以不斷的嘗試如何從零搭建項(xiàng)目,、移動(dòng)端打包測(cè)試,、項(xiàng)目部署、App Store提審等等流程,，全部自己跑了一遍,，有時(shí)候不懂的就直接拉著leader教自己,，在此過程順便了解了下gulp、webpack,、Xcode相關(guān)操作 從添加小功能 => 負(fù)責(zé)獨(dú)立模塊 => 宏觀掌握App => 參與重構(gòu) 很快我就對(duì)react技術(shù)棧的使用得心應(yīng)手,，但并不滿足于此,，開始研究數(shù)據(jù)流,、項(xiàng)目性能優(yōu)化,、總結(jié)踩坑，開始去了解virtual Dom和diff算法,，順遍入了閱讀react源碼的坑（路漫漫其修遠(yuǎn)兮，吾將上下而求索）,，結(jié)果發(fā)現(xiàn)redux的源碼更簡(jiǎn)單一點(diǎn)…… JS基礎(chǔ)和框架刷累了，又跑去寵幸一下網(wǎng)絡(luò)相關(guān),，HTTP,、緩存,、瀏覽器等張口就來，滿口性能優(yōu)化卻又無從實(shí)踐,，不幸還發(fā)現(xiàn)了事件循環(huán)這個(gè)東西，又趕緊跑去系統(tǒng)擼了一遍異步

大半年后,，公司前端方面的業(yè)務(wù)都已經(jīng)得心應(yīng)手,，功能開發(fā)和維護(hù)什么的都已經(jīng)不成問題，這個(gè)時(shí)候的自己其實(shí)有點(diǎn)小竊喜了,，感覺自己在前端方面有點(diǎn)無所不能的感覺,，貌似只要有后端的接口，什么頁面都能開發(fā) 幸好本人一直保持著一顆敬畏的心和危機(jī)感,，馬上意識(shí)到自己處于舒適圈了,，必須得想辦法打破它，給自己敲一個(gè)警鐘

趕緊對(duì)自己進(jìn)行總結(jié)：其實(shí)自己僅僅滿足于獲取數(shù)據(jù)渲染頁面,，就已經(jīng)開始自我陶醉了

在面向內(nèi)部人員的管理后臺(tái)上,，不太考慮性能優(yōu)化、兼容性（只用chrome）,、美觀等，那么是否應(yīng)該在開發(fā)復(fù)雜應(yīng)用功能,、優(yōu)化權(quán)限系統(tǒng),、提高開發(fā)效率上下功夫呢？ 在面向用戶的App和web頁面上,，性能優(yōu)化,、兼容性又成為了核心要素

這時(shí)候很想試一下react同構(gòu)和服務(wù)器端渲染,，聽說能解決白屏,，大大提升首屏加載速度，但遲遲未和后端同事找到機(jī)會(huì)試,，這時(shí)候就對(duì)后端的知識(shí)蠢蠢欲動(dòng)，想自己動(dòng)手

其實(shí)前端就夠自己吃一壺了,，加上node帶來的各種工具,，還有數(shù)據(jù)結(jié)構(gòu)與算法、服務(wù)端,、數(shù)據(jù)庫等等,，有點(diǎn)貪心不足蛇吞象，草草刷了一遍node擼了幾個(gè)express的demo妄圖通吃后端,，卻沒練過實(shí)際項(xiàng)目,，花了兩天學(xué)完了python語法，卻不知所措……

越學(xué)卻越發(fā)心生焦慮,，學(xué)的越多，發(fā)現(xiàn)自己越無知

學(xué)啊學(xué)的,，某天終于悟出了一點(diǎn)道理：百藝通不如一藝精 天天聽別人全棧全棧,，這學(xué)一點(diǎn)那沾一下，太浮躁了 還不如在前端這個(gè)領(lǐng)域往下深耕,，扎實(shí)基礎(chǔ)，T型縱向深入,，等時(shí)機(jī)成熟了,，一點(diǎn)點(diǎn)去擴(kuò)展服務(wù)端的知識(shí)，橫向面的寬度很重要,，但急不來，只有把目前所做的東西給擼清楚了,，留下自己的思考和沉淀，才能為長(zhǎng)足發(fā)展打下厚實(shí)的基礎(chǔ),。

再加上跟一些群里的大牛虛心請(qǐng)教,，給自己確認(rèn)了一些打基礎(chǔ)的方向，也是接下來的長(zhǎng)期方向

作為前端

• 把目前業(yè)務(wù)中用的框架用明白,，總結(jié)坑,，寫文章（react性能、RN坑）

• 讀源碼,，寫文章

• 算法（從位運(yùn)算開始）

作為程序員

• 學(xué)英語（每天Anki背單詞、聽podcast,、看英文文章和文檔、無字幕看美劇和電影）

• 補(bǔ)基礎(chǔ)（操作系統(tǒng),、編譯原理）

• 學(xué) C++（看情況,，這個(gè)有點(diǎn)遠(yuǎn)）

以上幾點(diǎn)都需要沉下心來,，一點(diǎn)一點(diǎn)去積累，急功近利不得,。

總結(jié)起來，這一年里有幾個(gè)關(guān)鍵詞：勤奮、養(yǎng)生,、學(xué)英語,、輸出、雜學(xué)

1,、勤奮

這一年里,，在本職工作之外，我貌似活成了一個(gè)很“正能量”的人 公司九點(diǎn)半上班,，我八點(diǎn)就到公司開始看書學(xué)習(xí)（家里離公司單程地鐵一個(gè)小時(shí)，沒錯(cuò),，我每天6點(diǎn)多起床）,，下班后或者周末，不是在家里就是在公司學(xué)東西

2,、養(yǎng)生

每天六點(diǎn)多早起了，那自然是得早睡,，11：00-11：30睡覺，最晚不敢超過12：00,，對(duì)于一個(gè)程序員來說，是否有點(diǎn)unbelievable 晚上下班回家后會(huì)去健身房或者家里旁邊的籃球場(chǎng)練球 周末的話,，雷打不動(dòng)至少有一個(gè)下午打籃球,，堅(jiān)持了10年的籃球 身體是革命的本錢，尤其程序員這種物種 另外,，我?guī)缀醪怀酝赓u,。

3、學(xué)英語

不知從哪個(gè)時(shí)間段起,，發(fā)現(xiàn)經(jīng)常要讀英文文檔，google和stackoverflow都是英文的,，很多好的文章和博客都是英文的

決心把自己的英語撿回來,，然后開始每天記單詞、閱讀英文文章,、嘗試無字幕看美劇或者電影

推薦一個(gè)叫Anki的軟件,，對(duì)于記憶內(nèi)容非常有幫助,，建議入手嘗試一下

4,、輸出

輸出很好理解，就是寫博客，堅(jiān)持寫 我充分利用了bear,、MindNode、Axure,、github這幾個(gè)工具 把自己所學(xué)所想所思的內(nèi)容都沉淀了下來,。

5,、雜學(xué)

對(duì)于雜學(xué)這個(gè)詞，我想了很久,，其實(shí)這個(gè)詞不好，有點(diǎn)類似上面說的,，啥都學(xué)一下，啥都不會(huì)

其實(shí)我真正想表達(dá)的是：我擁有對(duì)新技術(shù)的好奇心和熱情,，會(huì)主動(dòng)關(guān)注最新技術(shù)趨勢(shì),。對(duì)知識(shí)擁有饑渴感，以前端為中心發(fā)散開來的技術(shù)領(lǐng)域,，我都會(huì)保持關(guān)注,，但不僅限于前端，給自己的定位應(yīng)該是解決實(shí)際問題的工程師,，前端只是我目前的一個(gè)職業(yè)。

四,、next to learn

對(duì)于接下來要學(xué)什么，上面籠統(tǒng)的寫了個(gè)大方向

作為前端

• 把目前業(yè)務(wù)中用的框架用明白,，總結(jié)坑,，寫文章（react性能、RN坑）

• 讀源碼，寫文章

• 算法（從位運(yùn)算開始）

作為程序員

• 學(xué)英語（每天Anki背單詞,、聽podcast、看英文文章和文檔、無字幕看美劇和電影）

• 補(bǔ)基礎(chǔ)（操作系統(tǒng),、編譯原理）

• 學(xué) Java（看情況，這個(gè)有點(diǎn)遠(yuǎn)）

還是給自己一個(gè)一年內(nèi)的目標(biāo)吧 1,、繼續(xù)react源碼學(xué)習(xí)（學(xué)有余力就把vue的源碼也學(xué)了） 2、學(xué)Node,，并用Node+react(vue)寫一個(gè)完整的前后端項(xiàng)目 3,、把《算法》第4版啃完

時(shí)隔一年,，多虧自己有寫東西的習(xí)慣,，還能勉強(qiáng)寫個(gè)總結(jié) 新的一年，希望自己能更上一層樓 雖然自己起步晚,，但有句話：種一棵樹最好的時(shí)間,，一個(gè)是十年前，一個(gè)是今天，不要被這個(gè)事情影響 另外,，堅(jiān)持是制勝法寶

五,、一點(diǎn)學(xué)習(xí)心得

有人會(huì)覺得,，大神們才有資格寫學(xué)習(xí)心得，你算個(gè)什么東西,，你的資歷呢,，請(qǐng)先show出阿里騰訊的5年經(jīng)驗(yàn)！

個(gè)人初衷,，寫這一part是把自己這一階段的學(xué)習(xí)態(tài)度,、方法,、心得記錄下來,，可能哪天自己回頭審視的時(shí)候，發(fā)現(xiàn)這個(gè)階段其實(shí)有點(diǎn)學(xué)習(xí)方法是錯(cuò)誤的,，那么也能及時(shí)更正自己。重點(diǎn)：這是我自己的學(xué)習(xí)方法 另外一方面,，目前的確還有很多小白還苦惱于如何學(xué)習(xí)，希望能有幸對(duì)這一群體有點(diǎn)點(diǎn)幫助,，那我也是做了好事,，算回饋社會(huì)了吧。 所以,，大神們請(qǐng)繞道啦

一、合理利用時(shí)間

請(qǐng)充分利用好下班時(shí)間

1,、上班時(shí)長(zhǎng)

如果你是996,，加上通勤就沒有自己的時(shí)間了,，完全沒有下班時(shí)間給自己充電,，我建議還是盡快換一家公司

大部分情況下（除了項(xiàng)目上線+短期內(nèi)敏捷開發(fā)）,，這些加班都是無謂的消磨時(shí)間，試想一下,，六點(diǎn)半,，感覺下班了,，點(diǎn)個(gè)外賣或者出去吃飯，這里起碼得消耗一個(gè)小時(shí)吧,，七點(diǎn)半到了,，吃完飯休息一下,，這時(shí)候大部分人的心理是想著反正還要加班,，吃完飯休息一會(huì)，找個(gè)娛樂活動(dòng)，看會(huì)抖音,、頭條、斗魚,、動(dòng)漫,，就半個(gè)鐘……八點(diǎn)到了,，進(jìn)入工作狀態(tài),，離9點(diǎn)就剩一個(gè)小時(shí)，即使全程投入,，有效加班時(shí)間也就一個(gè)小時(shí),，反正我是不相信白天的八個(gè)小時(shí)內(nèi)無法通過提高效率和專注力來彌補(bǔ)這一個(gè)小時(shí)。 如果你說常態(tài)要加班到十一點(diǎn)之后,，那么復(fù)出的就是身體的代價(jià)了,，還有前途。工作時(shí)間的業(yè)務(wù)驅(qū)動(dòng),，每個(gè)人都會(huì)有，你想比別人更有優(yōu)勢(shì),，就要利用工作之外的時(shí)間,。 程序員是靠技術(shù)吃飯的,，如果沒有工作之外的時(shí)間來增長(zhǎng)技術(shù)，還要賠上大量時(shí)間,，你很快就廢掉了。

請(qǐng)利用好下班后的那一兩個(gè)小時(shí),，日積月累，你會(huì)看到不一樣的自己,，一萬個(gè)小時(shí)理論。

as for me,，除了利用下班時(shí)間,，我還有早上的一個(gè)多小時(shí)可以靜靜看書,，不受任何人影響。還有一個(gè)隱形的優(yōu)勢(shì),，吃的健康睡得早,，我每天都精力充沛，所以我能保證白天的工作效率,。

2,、上班效率

1、列好todo list,，分好優(yōu)先級(jí),，做完一個(gè)劃掉一個(gè)，比如這樣

• App **bug修復(fù)

• H5 頁面開發(fā)

• 管理后臺(tái)添加功能

2,、工作一段時(shí)間起來休息一下,，這是為了確保你下一個(gè)工作時(shí)間段更有精力，番茄工作法了解一下

二,、補(bǔ)基礎(chǔ)+看文檔

計(jì)算機(jī),、軟工的科班好學(xué)生可以忽略，我是轉(zhuǎn)行的,，所以我需要大量補(bǔ)基礎(chǔ) 不單單是JS基礎(chǔ)，還有網(wǎng)絡(luò),、算法、服務(wù)端等等等

如果是學(xué)習(xí)新框架或者其他工具,，請(qǐng)第一時(shí)間看文檔,，有代碼的地方就對(duì)著實(shí)踐一遍,，別人的博客最起碼也都是第二手資料了 官方文檔作者是最了解這個(gè)東西的人,，你不問他問誰？ 遇到問題,，也請(qǐng)第一時(shí)間查看官方文檔,，再看其他

三、會(huì)查資料+學(xué)好英語

普通程序員+google = 超級(jí)程序員 國(guó)外真的有不少好的資料,，Medium,、Youtube、Twitter請(qǐng)了解一下,，github上也大部分是英文的 國(guó)內(nèi)大部分資料都是二手的,，除了慢，還有翻譯是否準(zhǔn)確的問題

想要吸收國(guó)外的精華,，學(xué)好英語相信是毋庸置疑的

還有,，不會(huì)英文你可能連報(bào)錯(cuò)都看不懂,，還有g(shù)oogle+stackoverflow的超級(jí)組合咧

學(xué)英語其實(shí)比學(xué)編程簡(jiǎn)單多了，而且產(chǎn)出比非常高,，你可以從裝翻譯插件開始 你只需要堅(jiān)持背背單詞+強(qiáng)迫看一段時(shí)間的英文文章,，技術(shù)詞匯就那么點(diǎn)，很快你就能看得懂了,。

這一點(diǎn)上，請(qǐng)相信我好嗎,，你不會(huì)后悔的。

三,、搜索+提問

個(gè)人搜索問題三大步驟,，請(qǐng)放棄百度，擁抱google,，查看順序 1、官方文檔+github 2,、Stack Overflow 3,、國(guó)內(nèi)答案、博客,、其他

搜索不出來后,，可以求助于同事或者朋友,，請(qǐng)準(zhǔn)確描述問題 不要沒搜索過就問人，反正我就會(huì)很反感這樣的人咯,，別人的時(shí)間也很寶貴的

四,、總結(jié)、反思,、歸納

這一個(gè),，更多的是一個(gè)思維習(xí)慣 也是提升自己最關(guān)鍵的一個(gè)步驟

具體怎么做呢？ 如果初中高中有做過錯(cuò)題本,、喜歡做筆記的同學(xué),，特別是理科生，可能會(huì)比較容易理解這一塊

最笨的方法,，先從記錄bug,、寫博客開始，得先有一部分的實(shí)踐與素材才能開始整理歸納 然后慢慢歸納同一類問題,，同一類優(yōu)化方案 至于更高層次的舉一反三,，就要看個(gè)人積累與沉淀了

其實(shí)這一步也不難,，對(duì)嗎，也就是多寫寫,，記錄記錄而已

另外就是,，看了別人的博客文章，也可以記錄下來,，作為自己的經(jīng)驗(yàn)所用 踩在別人的肩膀上,，你會(huì)看得更遠(yuǎn) 如果踩的是巨人，那就更好了