五分鐘！前端最佳入門路徑給你講透
最近知乎根據(jù)我的標(biāo)簽，給我推了不少前端相關(guān)的問(wèn)題，其中有一類問(wèn)題特別多，就是新手如何快速掌握前端技能，成為一名合格的前端工程師。
比如這個(gè)：
這位新手的困惑極具普遍性，多數(shù)人在面對(duì)前端紛繁復(fù)雜的技能樹(shù)的時(shí)候，很容易隨便找一個(gè)單點(diǎn)，陷進(jìn)去拔不出來(lái)，然后產(chǎn)生無(wú)盡的挫敗感。
這便是典型的路徑錯(cuò)誤。
通常我們?cè)诿鎸?duì)巨型（復(fù)雜）事務(wù)的時(shí)候，很容易手忙腳亂，毫無(wú)頭緒，不知道從哪里開(kāi)始，也不知道到哪里算結(jié)束。
人一旦進(jìn)入這種狀態(tài)，就勢(shì)必會(huì)產(chǎn)生焦慮感，挫敗感。更重要的是，事情本身會(huì)delay，實(shí)現(xiàn)周期被拉長(zhǎng)。
路徑一旦錯(cuò)誤，就可能越努力越挫敗，且大概率容易半途而廢。
我做前端十來(lái)年，雖然不是什么大牛，但也算總結(jié)了一些行之有效的方法論，可以給新入行的年輕人一些參考。
話不多說(shuō)，我們直接來(lái)看。
其實(shí)無(wú)論做什么事，不管是學(xué)一項(xiàng)新技能，還是在職場(chǎng)里攻堅(jiān)一個(gè)新項(xiàng)目，或者交付一個(gè)復(fù)雜的新需求 ，對(duì)于未知領(lǐng)域知識(shí)的學(xué)習(xí)路徑，都可以采用這樣一個(gè)方法論來(lái)演進(jìn)：
說(shuō)到底，即便再厲害的人，直接面對(duì)和處理巨型事務(wù)時(shí)都會(huì)不知所措，所以我們必須對(duì)事務(wù)進(jìn)行拆解，降低復(fù)雜度。
通過(guò)這四步拆分，再大再難的事，都會(huì)變成小事，簡(jiǎn)單事，任何人都能輕易上手。
小樣（Demo）01
小樣的確立和選擇很關(guān)鍵，介紹一個(gè)很有用的原則：
MVP（Minimum Viable Product）—— 最小可用產(chǎn)品。
MVP原則其實(shí)通常是用在需求交付時(shí)候的，其核心有仨：
- 優(yōu)先滿足核心需求
- 成本盡可能最小
- 結(jié)果可及時(shí)驗(yàn)證
都很好理解對(duì)吧。
第1點(diǎn)說(shuō)的是，任何復(fù)雜事物，都可以根據(jù)第一性原理，抽取出核心路徑（P0路徑），想法設(shè)法把它跑完，就算能滿足最核心訴求了。
第2點(diǎn)說(shuō)的是，在設(shè)計(jì)方案的時(shí)候需要考慮成本盡可能小，避免過(guò)度設(shè)計(jì)，超前設(shè)計(jì)。
第3點(diǎn)說(shuō)的是，及時(shí)的結(jié)果驗(yàn)證，也就是持續(xù)交付。持續(xù)交付能有效減緩人的焦慮感，避免挫敗感。
咦？不是在說(shuō)學(xué)習(xí)新技能么，為什么聽(tīng)起來(lái)像在說(shuō)一個(gè)需求的實(shí)現(xiàn)過(guò)程？
是，也不是。
其實(shí)對(duì)于前面這個(gè)case，我們可以把交付物看成是：
“一個(gè)能獨(dú)立完成項(xiàng)目的前端工程師”
你只需要找到實(shí)現(xiàn)這個(gè)交付物的核心路徑，以最小的成本去實(shí)現(xiàn)，并且隨時(shí)驗(yàn)證。
我們展開(kāi)說(shuō)說(shuō)吧，看看怎么應(yīng)用這個(gè)方法論。
要從新手，成長(zhǎng)為一個(gè)合格的前端工程師，意味著你需要能獨(dú)立完成一個(gè)項(xiàng)目。這是個(gè)復(fù)雜事務(wù)，我們對(duì)其進(jìn)行拆解：
-> 找到一個(gè)項(xiàng)目（比如做個(gè)類似知乎的問(wèn)答平臺(tái)）
-> 找出核心路徑（1. 問(wèn)題列表，2. 問(wèn)題詳情，3. 提問(wèn)，4. 回答）
-> 選個(gè)前端框架和UI庫(kù)（比如React + AntDesign，降低啟動(dòng)成本）
-> 拼湊出核心路徑涉及的4個(gè)模塊。每拼湊出一個(gè)模塊，用瀏覽器預(yù)覽（及時(shí)驗(yàn)證），并獎(jiǎng)勵(lì)自己一頓好吃的（及時(shí)反饋）
-> 拼出問(wèn)題列表頁(yè)
-> 拼出問(wèn)題詳情頁(yè)
-> 拼出提問(wèn)表單
-> 拼出回答表單
-> Show Case，獎(jiǎng)勵(lì)自己一頓大餐，然后進(jìn)入Step2。經(jīng)過(guò)這個(gè)MVP的迭代，你并沒(méi)有深入學(xué)習(xí)三件套（HTML/CSS/JS），你甚至都沒(méi)有了解清楚前端框架和UI庫(kù)的細(xì)節(jié)，但你確實(shí)很快的實(shí)現(xiàn)了一個(gè)Demo。
看著這個(gè)親手搭建的Demo，你會(huì)無(wú)比的興奮，不停的把玩。
若如此，那么這一步的效果就達(dá)到了，我們進(jìn)入下一步：重構(gòu)。
重構(gòu)（Refactoring）02
這一部分，我們會(huì)把剛剛實(shí)現(xiàn)的Demo親手毀掉，然后再以新的面貌涅槃重生：
-> 重構(gòu)樣式：
把UI庫(kù)的樣式去掉，想辦法自己實(shí)現(xiàn)一模一樣的樣式。
（此時(shí)就要開(kāi)始學(xué)CSS知識(shí)，可以參考著寫(xiě)，邊寫(xiě)，邊查，邊學(xué)）。
-> 重構(gòu)組件：
把UI庫(kù)的組件逐步替換成自己實(shí)現(xiàn)的組件
（此時(shí)就要開(kāi)始學(xué)Javascript和React）以上兩種重構(gòu)中，每重構(gòu)出一個(gè)組件或一個(gè)樣式，就及時(shí)的驗(yàn)證和反饋。
在這個(gè)過(guò)程中，你一點(diǎn)點(diǎn)的看著代碼逐步被替換成自己的實(shí)現(xiàn)，但效果依然很棒，你會(huì)不斷的產(chǎn)生自豪感，成就感。
沒(méi)錯(cuò)，這就是持續(xù)交付帶來(lái)的快樂(lè)！
完成所有代碼的自研化之后，記得獎(jiǎng)勵(lì)自己一頓大餐，因?yàn)檫@意味著，你已經(jīng)離最終目標(biāo)不到一半的距離了。我們進(jìn)入下一步：規(guī)范。
規(guī)范（normalization）03
這一步之前，我們并沒(méi)有花費(fèi)多余的時(shí)間去糾結(jié)工程化的問(wèn)題，而是采用刀耕火種的方式，用最原始的力量，完成了MVP的整體自研。
但一個(gè)成熟的項(xiàng)目，應(yīng)該能夠接納其他開(kāi)發(fā)人員的參與，協(xié)同開(kāi)發(fā)才能使項(xiàng)目持續(xù)壯大。
而協(xié)同的前提，是項(xiàng)目必須足夠規(guī)范，是具備一定工程化條件的。
工程化的知識(shí)點(diǎn)非常多，包括CICD，自動(dòng)化測(cè)試，配置管理，容災(zāi)容錯(cuò)，監(jiān)控，日志等等。對(duì)于一個(gè)新手，尤其是前端新手（非全棧），可以不用考慮那么多，只需要完成兩小件事即可：
- Build（構(gòu)建）
- Lint（校驗(yàn)）
通常來(lái)講，你可以選擇一個(gè)構(gòu)建工具（比如webpack），將源碼構(gòu)建成瀏覽器可執(zhí)行代碼。對(duì)比源碼和編譯后代碼，可以了解到諸多原理知識(shí)：構(gòu)建編譯原理，HTML原理，JS原理等等。
另外，接入Lint（styleLint，esLint），對(duì)你的代碼進(jìn)行合規(guī)性校驗(yàn)。
完成這兩件事，你的項(xiàng)目就具備最基本的工程化能力了，你也因此習(xí)得不少實(shí)用的技能，然后我們進(jìn)入下一步：優(yōu)化。
優(yōu)化（optimization）04
這一步之前，我們并沒(méi)有關(guān)注代碼的性能問(wèn)題，我們只管實(shí)現(xiàn)了效果。
而你要知道，一個(gè)成熟的前端，和一個(gè)新手前端，即便實(shí)現(xiàn)了同樣一個(gè)效果，其性能和代碼優(yōu)雅性也往往會(huì)天差地別。
在這一步，我們就是要通過(guò)觀察和解決一個(gè)個(gè)的性能問(wèn)題，對(duì)前端知識(shí)體系進(jìn)行查缺補(bǔ)漏，深入學(xué)習(xí)。
本文轉(zhuǎn)載自微信公眾號(hào)「沐灑」，作者「ASCII26」，可以通過(guò)以下二維碼關(guān)注。
