2021年的今天，如何成為一名專業的前端工程師？
- 2021 年 2 月 3 日
- 筆記
簡介： 如果你想成為一名專業的前端工程師，那麼你需要了解要學什麼，學到什麼程度，以及如何有效的學習。大學裏沒有正規的前端技術課程，普遍缺少比較權威的渠道來系統地了解和學習當前最實用、最前沿的前端技術。作為一個入行許久的前端工程師，我提煉了4個大家普遍關心的話題一一探討，希望對想要成為專業前端工程師的同學們有所幫助。
如果你想成為一名專業的前端工程師，那麼你需要了解要學什麼，學到什麼程度，以及如何有效的學習。大學裏沒有正規的前端技術課程，普遍缺少比較權威的渠道來系統地了解和學習當前最實用、最前沿的前端技術。作為一個入行許久的前端工程師，我提煉了4個大家普遍關心的話題一一探討，希望對想要成為專業前端工程師的同學們有所幫助：
- 從事前端開發有前途嗎？
- 畢業之後去大公司，還是去「小而美」的公司？
- 個人很喜歡前端開發，掌握到什麼程度才能進「大廠」？
- 個人有一些前端開發經驗，怎麼提高自己？
一 前端開發的現況和前景
回顧編程語言的發展史，我們可以看到很多曾經流行一時的編程語言都消亡了，或者在慢慢淡出。同時，2009年以後又有一批新興語言湧現。我們注意到一些歷史悠久的語言生命力特別頑強，像C / C++、Java。90年初大眾互聯網誕生，Web技術此時開始興起，Python / PHP / Java都是這個時期出現的。其中HTML / JavaScript / CSS也在那個時代相繼誕生。語言的興衰和當時的時代背景緊密相關。前端技術經歷了近三十年時代變遷，JavaScript依然是世界上最流行的語言，JavaScript開源社區也是最活躍的，我們可以看到Github Top20的項目里，多一半都是前端項目。今天的前端技術似乎是無所不能，無孔不入的，在各個領域都有應用的可能性。
前端行業的發展實際上跟互聯網的發展和時代的需要是密不可分的。通過下圖可以看到有三個明顯的轉折點：
第一個轉折點是在2004年左右，2004年Gmail發佈，這個產品意義非凡，Gmail可以說是最早的單頁應用，大規模應用Ajax這項技術，在瀏覽器里能夠實現和桌面軟件一樣的交互體驗，這在當時掀起了一場交互體驗的革命。這是一次真正意義的突變（在此之前，我們經常說前端開發80%是排版問題，今天80%是工程開發問題），由此，JavaScript開始快速發展起來。正如Atwood定律所言「任何能用JavaScript實現的應用，最終都會用JavaScript實現」。
第二個轉折點在2010年左右，Node的出現沒有顛覆服務端開發方式，但是徹底升級了前端的工具鏈，從此前端的工程化體系開始了日新月異的發展。隨之NPM提供的開源包管理服務，激活了全球前端社區的活躍度。
到了2013年左右，移動時代來臨，商業戰場轉向移動端。傳統前端開發不得不說進入低谷。但是很快，第三次轉折來了，服務和產品的互聯互通，跟原生應用的封閉性是矛盾的。於是，衍生出各種混合開發方案，各種跨端技術。同時小程序的出現，為前端開闢出一塊新戰場，前端開發再次煥發活力。到了2017年左右，雲時代正式拉來帷幕，生產和辦公方式加速數字化轉型，toB業務開始火了，傳統的前端技術又成為不二之選。因此，我們可以看到現在的人才市場對前端工程師的需求非常大，但是，資深前端人才一直都是稀缺資源。
二 前景：前端技術的價值
技術的價值決定了它的生命力。前端技術的價值就是「界面」的價值，我相信所有「界面」最終都會用前端技術實現。連接消費者和互聯網的，是數字化生活的「界面」，連接生產者（企業、機構、自媒體）到互聯網的，是數字化生產方式的「界面」。今天大家也能感受到，這些「界面」變得越來越多元化、智能化、而且無所不在。
舉個例子，我們看60年代開始，火箭的控制台都是物理界面，到最新的「龍飛船」的控制台完全以數字化為主體的界面，據披露這個界面就是用JavaScript開發的。我相信，未來所有物理界面都會進化為數字化界面。
前端開發簡單的說是實現產品的表現和交互。今天不同類型的產品的表現形式和交互形式非常豐富，早已不是單一的圖文、視頻和一些鼠標鍵盤的交互操作。在業務類型上，有toC、toB，toG，面向的客群不同，前端技術應用的方式方法有很大差異。會不會有人擔心前端行業存在近30年了，會不會喪失創新性，出現內卷？綜上所述，顯然不會。未來已至，需要更多「後浪」進入到這個行業，這個行業需要更多的創新力。
總結一下，前端的發展趨勢正在從「單端向多端發展」、「界面正在從GUI向NUI演進」，VR / AR、數字孿生等相關技術越來越成熟，這些在阿里的業務里都有落地。開發方式上也正在從傳統的B/S模式，向雲+端的雲原生模式發展。同學們目前正處在這樣一個全新的、充滿創新活力的時代。
三 職業選擇
第二個問題是關於職業選擇的問題。如果選了前端工程師，每個人都會關心專業成長的問題。個人成長離不開環境因素。去「大廠」、「小而美」的公司，還是去創業，我的建議是：如果心懷明確的夢想就去「小而美」的公司或者去創業，如果想成為一名專業的技術人就要去大公司。我個人建議人生之路很長，不要那麼早就到達終態。剛畢業，先去公司好好歷煉一番，再出來創業。所謂的「專業性」，我們會看重這些方面：
- 解決的問題域要廣泛：有豐富的業務場景的實踐經驗，解決問題的廣泛性。
- 足夠大的難度和挑戰：好比「修車」和「修飛機」，同一套技術棧，應用的深度，項目規模的大小，玩法和挑戰都非常不一樣。
- 大軍團作戰的經驗：好比「游擊隊」和「正規軍」，在戰略戰術的認知上、管理規劃、專業角色協同、開發流程、平台思路、綜合能力上能帶來豐富的感受和經驗。
- 專業的開發素養和特質：小公司要求做完，大公司要求做好。高標準嚴要求下，有利於形成專業的開發素養。
- 具備先天的研發儲備：打持久戰，就必須投人投時間自研核心能力、技術儲備豐富。
「這個我會」、「那個我也懂」是遠遠不夠的，前端工程師的成長需要一定時間跨度的經驗積澱。正如Bob Dylan的一句歌詞：「How many roads must a man walk down，Before you call him a man」，翻譯過來就是：一個前端工程師要踩過多少坑，才能稱的上是一個專業的前端工程師。
四 前端工程師的人才畫像
第三個問題，掌握到什麼程度才能進大廠？大廠對前端工程師的需求量很大，但校招通過率實際上並不高，市場供需明顯不對等。
目前現狀是所有人都是從自學開始，個人學的和公司需要的存在一定差距。學習上不夠系統，平時看看書，逛逛社區、隨機看一些文章，很容易被誤導。有一些實習經驗，但接觸的比較有限，不清楚跟專業要求有什麼差距。這樣帶來的問題是：大家普遍是碎片式的學習，不成體系，對前端技術的全景、發展趨勢不是很清楚。在阿里我們經常說「體感」，體感就是有切身的感受和理解，唯有做過，反覆做，踩過很多坑，才可能建立這種體感 。前端發展很快，很多知識過時的也很快。所以，不能停留在表面的用法上。前端技術有變化快的部分，也有相對穩定的部分，所以，前端技術的學習方式應該是多線程的、多維度的，這個後面會講到。
如圖所示，我們對前端候選人主要看三個變量：基礎程度（基礎怎麼樣）、認知程度（認知是否全面、是否到位）、實踐程度（實際用過什麼、做過什麼）。
基礎方面：首先就是HTML / CSS / JavaScript / Web API要系統的學，要看好書（評價高的書，這裡列了兩本），要養成看權威文檔（MDN、官方文檔）的習慣。輔助看一些文章。
認知方面：要有全景的了解（先有總體認知，知道關注什麼、關注技術的發展趨勢）、各種領域知識不要求多深，但要有準確的理解。我建議大家多關注開源項目，主流的框架和流行的庫。關注的方式就是訂閱它們的更新，多看它們的源碼，在Github上圍觀別人的討論，能參與當然更好。個人知識結構要豐富，網絡、算法、產品、設計、可視化、工具 / 插件等等都要有所了解，人的視野在哪兒邊界就在哪兒。培養自己總結、歸納的習慣，平時應該多寫寫，總結就是一種把知識結構化的過程。
實踐方面：像實習項目、學校的項目、學習過程中多寫demo、最好有一些個人項目，總之要尋找各種動手實踐的機會。
另一個維度是潛質方面，或者說個人特質。我們非常看重候選人的潛質。遇到問題能否追根溯源，刨根問底，探求問題的本質。對新 / 奇 / 特的事物，是否有足夠的好奇心和求知慾，願意去嘗試，尤其對產品設計有自己的審美和品味。前端工程師的價值就在於「創造」，是否願意動手實踐，用代碼還原你的想法，這一特質非常重要。面試聊的很好，一筆試就懵了，寫不出來，這個肯定不行。在校招中，我們其實更看重人的潛質，能力方面更看重基礎。
五 多線程學習路徑
我們看看第四個問題，如何持續提高個人的技術水平？在校招面試中，我發現大部分同學都零零散散的學了一些前端技術，也能做出一些東西，問題是止步不前了，不知道如何深入地學下去。公司和學校不同，學校是學習的地方，公司是工作的地方。我們希望同學們在進入公司之前，就能建立好的學習習慣和有效的學習方法，這樣，進到一個工作環境中，利用具體的業務場景，才能夠快速的成長起來。
前端技術的學習有兩條路徑：一個是「多線程」的學習路徑，一個是深入學習的路徑。什麼是「多線程」的學習路徑？
第一個線程，是基礎知識的學習。這個是學習其它技術的基礎。基礎知識需要系統的學，基礎包括JavaScript / HTML / CSS / 原生 Web API的學習。學過之後還不能直接做項目，你還需要掌握一些框架和工具才能解決問題，但如果要更好的解決問題、組合方案、調試問題，就必須對語言和語言特性有深入的理解。
第二個線程，領域知識的學習。前面也說過，要不斷豐富自己的知識結構。特定的崗位需要特定的領域知識。會有一些通用性的知識，像軟件工程 / 數據 & 算法 / 網絡 / 可視化 / 安全 / 交互設計，這些知識和理論不要求有多深的學習，但要有一定的認知。
第三個線程，工程實踐經驗。重點是使用的經驗。像開發工具 / 包管理 / 構建工具 / 主流的框架和庫 / 代碼版本管理 / 調試和測試相關工具等等，這些工具層面的東西，雖然比較多，很多達到會用的程度就可以。前端工具有「喜新厭舊」的特點，變化很快，要不斷吸收最新的東西。所謂「善假於物」，善於使用開源的庫和工具，能夠幫助我們快速的解決問題。但是，如果不了解背後的原理、技術點，僅僅停留在會用的層面，只能是生搬硬套，很難有進一步提高。很多人說前端發展太快了，剛學會一個東西，過兩年就被淘汰了，說的其實就是工具層面的東西，越基礎的東西相對越穩定，也就越值得投入精力去學。工程方面，像React這種基礎庫相對穩定，值得深入的去學，後面我會講怎麼深入去學。實際上，任何新東西都有其發展的脈絡，如果你具備一定基礎，了解背後的原理，你不僅能很快掌握它，還能完善它。
要成為一名專業的前端工程師，需要多線程、多維度的學習，包括工作之後，仍然需要持續去學習。對同學們起步來說，基礎要牢固，工程方面有一定的使用經驗，知識結構要儘可能廣泛和豐富。
六 深度學習路徑
剛才說的是橫向上的，我們再看看縱向上如何深入的學習。深入就是從Know What到Know How再到Know Why的過程。對應到下面的鏈路上，Know What就是「聽過」、「概念清晰」，並且「知不同」。Know How就是「用過」、「理解用法」、「踩過坑」（沒踩坑的，基本上用的很淺）。Know Why就是「理解原理」、「演繹」，就是達到靈活運用的程度。
對於同學們來說，前面提到的三個維度：
- 基礎知識：要到「理解原理」的程度
- 工程實踐：尤其是前端主框架的學習，至少要到「理解用法」的程度
- 領域知識：要到「概念清晰」的程度
我們以React為例：
「聽過」是指我知道它是什麼，一個UI開發的庫。概念清晰，我知道它的所有相關概念，它是一個聲明式的、基於組件架構的、可預測的、響應式的UI庫。那麼什麼是聲明式、什麼是組件架構，什麼是響應式，都需要知道。組件狀態是什麼，響應式編程是什麼，VDOM、JSX分別是什麼，這些都是它的相關概念，順藤摸瓜，一路要摸下去。
「用過」指有沒有做過一些比較複雜的、有挑戰性的項目，整個React技術棧里，用過哪些東西。理解用法，比如理解組件化的特點、組合方式、屬性傳遞的各種方式、類組件和函數組件的區別，為什麼現在提倡用函數組件、受控和非受控組件用在什麼場景下等等。「踩坑」，踩的坑越多，說明用的越深，比如版本差異的問題、re-render的性能問題、Hooks依賴的問題，有沒有真實的體感。理解原理，比如說是否理解Hooks的運行機制、是否理解React的併發模式、是否理解虛擬DOM的基本原理、React協調器的基本原理等等。
七 有效學習的方式
前面說的是學什麼，以及要學到什麼程度。接下來我們說說有效學習的方式。有效學習一定是在動手過程中學習，所有知識我都懂，但不一定能很好地解決問題（和人生一樣）。解決問題的能力是一種綜合能力，如圖所示：
解決問題是一個閉環。當我們真正面對需求，面對問題時，我們要培養自己分析問題的能力，找到背後的需求點、技術點，再去調研方案，否則你都不知道搜什麼。探索方案的過程建議多寫demo，把複合的問題拆成單一的點一一攻破（微積分的思路）。然後才是正式的編碼，解決問題。問題解決之後，還要歸納總結，這樣才能把實踐變成有效的經驗。最後還沒完，還要繼續探索最優解，有沒有更好的方案、代碼怎麼寫可維護性更高、怎麼寫擴展更靈活。探索最優解相當於健身中，達到極限閾值時，突破的那一下。
我經常聽到一些抱怨的聲音，「沒有好的實踐機會」、「工作中沒有接觸過」、「現在的工作沒挑戰，學不到東西」…….這些都是借囗，解決問題正是從善於發現和定義問題開始，平時當我們學習一個技術點時，應該先學會給自己出題，這就是定義問題。問題搞的越通透，解法越簡單明了。提高自己首先是提高自我要求，不滿足於現狀，從追求代碼質量開始，到追求最優解。
最後我們小結一下今天的分享。首先我們談到了「選擇」，講了前端技術的發展歷程和一些展望，前端行業的未來非常值得期待。大廠在培養專業人才上的優勢，阿里有非常豐富的業務場景和技術儲備，如果願意學，願意接受挑戰，這裡有很多機會。接下來，又講了前端工程師在能力和潛質上的要求。最後重點探討了如何學習，講了兩條路徑：多線程的學習路徑和深入學習的路徑。目前我們有阿里巴巴前端練習生計劃為廣大的在校同學提供專業學習前端技術的機會，讓同學們對前端技術有一個全面的認知，知道學什麼，怎麼學，儘可能貼合大廠的要求。在校同學們可以積极參与，我相信一定會有很多收穫。
作者：開發者小助手_LS
本文為阿里雲原創內容，未經允許不得轉載
