前端架構師,聽起來就是個很高大上的職位，在大多數程序員的眼中，架構師一般從事后端開發，Java或者C++出身，它們往往擁有這十八般武藝，可以解決業務中出現的各種問題。好像架構師就從來沒有和前端有過關系，那么真的是這樣么，通讀此文，便可豁然開朗。

前端的意義

首先，我們先來談談本職工作，前端的意義。前端源自用戶界面，是最先和用戶接觸的地方，也是衡量一個項目產品好壞的第一道關口。

到底什么是前端

從最早的DOS系統說起，那時是沒有前端的概念的，大多數的軟件界面顯示的都是冷冰冰的黑底白字的控制臺命令，于是，慢慢的不僅是用戶，就連廣大的程序員也不滿足現狀，開發出一套圖形化的用戶界面，讓一些功能更加便于操作。那時前端叫做GUI(圖形用戶界面)。還沒有區分出多端的概念，大多數是基于操作系統開發出的原生界面。

上圖來自DOS系統經典軟件DOS Navigator

隨著互聯網的發展，第一代瀏覽器Netscape(網景瀏覽器)的誕生以及后續的IE系列瀏覽器的到來，”網上沖浪“這個詞逐漸進入到大多數的用戶生活中。直到現在大行其道瀏覽器Chrome，以及國內各種百花齊放的瀏覽器。主要給瀏覽器服務，實現各種特效的JavaScript語言，迎來了第一波春天。

上圖來自網景瀏覽器

直到現在，前端逐漸拆分成：

web前端(HTML+CSS+JavaScript)，客戶端前端(Android和iOS)。

又或者是網頁重構工程師，JS工程師，UI/UX，切圖仔等等。

那么歸根這些都是為前端服務的，說了這么多，那么前端的價值到底在哪里呢？

前端的價值在哪呢？

•  實現界面交互。
•  提升用戶體驗。

第一點是前端的本職工作，是在功能上和后端的主要區分，也是前端崗位存在的原因。第二點也不必多說，前端做得好，對用戶體驗是有益的。如果說后端的目標和價值體現在服務的高性能、高可用、可擴展、安全。那么前端的價值體現就是“用戶”二字。

所以作為一個合格的前端開發，讓用戶用的舒心(爽)就是目標，所以要想完全體現你的價值，你需要循序漸進的完成下面幾個步驟：

•  根據產品的邏輯和需求，完成對應業務的前端頁面UI展示，與用戶交互。
•  編寫可維護性高的代碼，減少BUG的產生，保證良好的用戶體驗。
•  在完成功能的同時，能夠熟悉現有業務，并提出可持續改進的地方，并付諸實施優化。

看了上面的幾條，是不是有種似曾相識的感覺，是不是很像一則招聘信息的JD。其實沒錯，作為一個企業來講，招聘一名前端開發，肯定要能夠為企業帶來價值，這本身也是你的價值體現。

但是，我想說的是，看似簡簡單單的3條內容，你真的理解么。第一條和第二條是你技術上的能力體現，這部分完全靠你的技術積累，那么第三條便是你主關能動性的體現，這部分可發揮的地方很多，一個新人和一個工作經驗豐富的人差距可能就體現在這里，具體我們后面再說。

但是，還想說的是，單純的完成上面的3條步驟，那么還是只能說明你是一個合格的前端開發，這與架構師還是有一定的距離的。

前端價值體現真的很重要么？

好吧，上面我們了解了前端的價值，并且各位前端開發還在辛辛苦苦的體現著自己的價值，但是讓人糾結的，前端是有價值，但這價值真的很重要嗎？

和非前端之外的技術相比

對于一個成熟的產品業務而言，前端往往是很薄的一層，這一層賦予你的功能，大多是就是頁面的UI展示和用戶交互。

雖說前端是產品和用戶之間的第一道關口，但也只是第一道關口，后面可能還有十幾道關口。例如搞后端邏輯的，搞底層數據庫的，搞網絡安全的，搞運維的，搞大數據分析的，或者是現在流行的機器學習的相關人員。每一個相關模塊都自己獨立的技術體系，可以說這些缺一不可。

所以，前端和這些前端之外的技術相比，就體現的并不是那么”非你不可“了。就是說前端的確有價值，但放在全局來看，前端產生的價值并非核心價值。

對產品業務的重要性

舉一個現在比較實際的例子，對于前端開發而言，在一些一線的互聯網企業例如BAT等等，這些公司對前端開發的重視程度還是不錯的，有著自己的產品業務線，整個前端技術有著不錯的氛圍，并且能夠使用前端技術持續提升產品的用戶體驗。

但是對于一些其他的中小型公司或者企業(我相信各位并非都來自BAT吧)，很多前端開發的技術含量并不是很高，特別是對于一些toB的業務來說，核心的功能都來自于后端，來自于數據庫的優化。或者是對于一些比較突出亮點的AI功能性產品，這些產品的核心競爭力甚至可能來自于硬件和算法。而前端在里面扮演的角色大多數是UI展示，數據可視化等等這些。而且很多工作屬于重復性勞動，甚至有些可能還被后端開發來兼職做了。

所以，對于一個業務的重要性而言，前端能夠體現其價值的地方還是很有限的。

當然，這里說了這么多，并不是給大家傳輸一種：前端不行了，趕快轉行吧，這種思想，當然我們還是要吃飯的，這里想說的是讓大家時刻保持一種危機感，只有這種危機感，才是讓我們不斷的對技術進行深究和進階，不斷發展不斷前行的動力。

前端技術的進階

在成為一名架構師之前，你需要有充分的技術儲備，這些技術儲備可能不止限制于前端技術。當然這里，我先介紹一些前端技術需要如何去進階。

性能優化

在大廠工作過的同仁應該都知道，性能優化是一個敲門磚，因為如果去衡量一個前端開發是否真正的有經驗，性能優化是一個分水嶺，其相關流程主要涵蓋：

•  首先是如何發現問題。
•  發現問題之后，是如何分析其中原因。
•  找到原因之后，采用的解決辦法。
•  解決之后，是否真實的對用戶體驗有所提升。

從這些問題中，可以衍生出各種值得深究的問題，并且可以從中找出一些方法論問題，所以性能優化是一項非常重要的點，當然，我們在這里就不說具體有哪些優化了，推薦讀一讀《移動web性能優化從入門到進階》這篇文章。

對框架的理解

如果你想成為一名架構師，不能只停留在框架的 API 使用層面。

對于當下最流行的3個前端框架Vue，React，Angular來說，掌握其基本的用法是必要的，但是也是最簡單的，現在網上有各種各樣的課程，可以讓一個剛畢業的實習生就能輕松入門，并達道做項目的能力。所以說，為什么一個需求，給一個實習生就能做，為什么要選擇你呢？

所以，掌握框架的原理，并理解其中的思想，舉一反三，是和大多數前端程序員拉開差距的關鍵所在，在這里給大家以Vue舉幾個例子，看看你是否真正掌握。

•  Vue中的雙向綁定，只是簡單的Object.defineProperty()么？
•  Vue的數據依賴是如何實現的？
•  Vue的computed和watch到底有何本質區別？
•  keep-alive的實現原理？

大家不妨試試去理解一下這幾個問題的根本點，試試從源碼里來找到答案。理解源碼的同時，有利于對框架本身的理解，對于提升解決問題的能力，以及減少出現BUG的幾率，有所幫助。

深入Node.js領域

Node.js是讓前端工程師能夠觸及后端邏輯的一個利器，也給了我們搶后端飯碗的正當理由，但是這里的Node.js并不是單獨的指后端邏輯的開發。例如現在的前端工程化體系中，扮演重要角色的webpack，parcel，vue-cli等等，或者是現在讓JavaScript能夠開發PC桌面程序的Electron，都和Node.js密不可分，在這里給大家舉幾個例子，可以嘗試一下從這幾個點來進階：

•  與瀏覽器端的JavaScript不同，Node.js后端是直面服務器的，如何定位和分析內存泄漏問題。
•  嘗試寫一些webpack插件。

Canvas與WebGL

WebGL是基于OpenGL的Web3D圖形規范，是一套JavaScript的API。簡單來說，可以把它看成是3D版的Canvas，當然，提到這個方向，可能有些人會覺得有點偏了。的確對于大多數前端開發來說，使用WebGL相關的3D處理技術和算法，并不需要掌握復雜的算法或者數學知識，只需要學會three.js就行了。

但是基于Canvas或者WebGL可以提供給我們針對一些特定問題的解決方案。同樣在這里給大家舉幾個例子：

•  實現一個刮刮卡或者涂鴉墻的業務需求。
•  圖片上傳時進行壓縮和裁剪。
•  在實現幀動畫方面，使用CSS3和Canvas的選擇。

上面幾個場景，就好比你拿到這些需求時，如果你根本不了解Canvas或者WebGL，你可能根本想不到有這些技術方案可以解決這些問題，所以，并不是說對Canvas或WebGL理解的多么透徹，但是作為一個架構師而言，你需要有一些技術廣度，來拓寬你的技術棧，也就提升了你解決問題的能力。

通往架構師之路

說道這里，好像才進入正題。基本的進階知識是你晉升成為成為高級前端的必要條件，但卻不是你成為一名架構師的核心。正所謂一專多長，首先你得先精通一門。前端知識的進階正是通往架構師的突破口，所以首先需要明白一點：掌握前端技術的同時，你還要學了解前端技術之外的技能。跳出前端這個思維，才能看到的更多。那么如果你想從一個前端資深人員進階架構師，來看看下面的內容吧。

跨界

如果你只會寫前端頁面，那么無論你的功力練到多么爐火純青的地步，那么也只能稱為你是一個HTML高手。真正的架構師是需要有跨界的能力的，隨著技術的持續完善，這種通過崗位變遷實現技術架構升級的情況會越來越少。而架構層面新的變化將來自于崗位自發的對自身工作內容、職責的重新定義，也就是這里說的邊界。所以說并不是你作為一個前端開發崗位，你就不能干前端之外的事了，要嘗試跳出邊界來思考和解決問題。

頁面的秒開是衡量一個前端優化的重要指標，我們以這個優化點來總結一下從哪些方面跨：

•  提升速度，從服務端渲染著手，可以利用Node.js往后端跨。
•  提升移動web的H5頁面的啟動耗時，從webview著手，利用iOS和Android技能往客戶端跨。

用戶交互操作體驗，也是衡量前端優化的重要指標，我們以這個優化點來總結一下從哪些方面跨：

•  提升用戶交互體驗，嘗試將web頁面客戶端化，基于React Native或者Weex，也可以往客戶端跨。
•  提升頁面動畫效果，編寫高性能的前端動畫，也可以往UI動效設計跨。

合理的跨界，可以讓架構師對于業務的整體有深層次的認識，針對各種問題可以提出非前端之外的解決方案。

嘗鮮

技術是不斷發展的，作為一個架構師，不斷學習新的技術是非常重要的，這里所說的嘗鮮，就是要對技術保持一定的熱情，不能只滿足于現狀，說白了講就是要不斷的學。

•  習慣了jQuery開發頁面，不妨試試Vue，React。
•  寫了很久的ES5代碼，學學ES6也不錯。
•  沉醉在HTML，CSS，JavaScript開發頁面，不妨學學Flutter。
•  打造高性能的Web App，試試Service Worker。
•  從HTTP協議觸發，改造升級spdy和HTTP2，嘗試一下HTTP3。
•  嘗試一下新的編程語言：WebAssembly。
•  知道為服務，但你知道微前端嗎。

上面列舉的嘗鮮技能，是完全可以從一個前端的角度觸發，來不斷深入的，保持對每一個新技術的求知欲，是一名架構師必不可少的。

工具和平臺化建設

只會寫代碼的程序員只能叫碼農。

當技術達到一定的高度時，能夠為業務再次提升的能力就會逐漸變少，那么我們不如跳出技術本身，來改善業務周邊的工具平臺，同樣來為業務服務。作為一名架構師，要有這種能力。

提到工具平臺，大家很快就能跟自己的團隊里面的一些工具聯系起來。這里主要跟大家探討一下，我們的工具體系要用什么的思路去規劃和review，也看一下我們還有那些可以進一步去完善的點。

為了通俗一點，同樣舉幾個工具平臺的例子：

•  針對開發調試，需要有一些提升開發效率的工具，例如移動web常用的Fiddler，或者是小程序模擬器。
•  針對性能檢測，需要有一些能夠進行壓力測試，發布后線上回歸測試的工具，例如騰訊wetest等。
•  針對統計分析，每個業務都需要能夠提供給產品人員觀察數據的工具，當然由于數據敏感性，這里一般每個團隊有內部的工具，對外的類似工具例如Google分析等。

可以看出來工具平臺主要就是圍繞我們的研發流程中的每一步關鍵節點去建設起來的，結合起來說，我們可以稱之為工程化。工程化是這幾年非常熱門的概念，對前端來講也是一個很明確的前端發展方向，其實工具平臺的完善過程就是架構工程化的推進過程。

身為一名架構師，你需要有敏銳的嗅覺來洞悉這些節點。并且在適當的時機能夠做出對業務有提升的工具平臺，要做到遇到重復性的問題時，想想是不是開發出一款自動化工具平臺來處理，這才是代碼之外對業務提升解決方案。

流程和規范化

身為一名架構師，對流程的制定和規范，是非常重要的。不要小瞧規范的威力，可以極大的提升開發效率，真正優秀的規范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。這里的規范，總結起來可以分為成：

•  結構的規范：對項目的代碼結構，不管前后端，合理的分層和組件化是非常必要的。
•  編碼的規范：這里主要就是代碼codereview了，定期的進行codeview的同時，最好可以使用一些自動化工具。
•  流程的規范：項目的評審，研發，測試，發布這些階段都需要有流程來約束，這些需要結合自身團隊的實際情況來制定。
•  規范的落地：對于規范來說最關鍵的是執行落地，在制定完規范的同時，要不時的回顧是否切實的落地，這個應該是團隊里每個成員堅持的基本準則。

方法論

所謂方法論，可能單單說起來是比較抽象的，這里的方法論，主要是指在完成一項小的需求，或者是承接一個重大的項目，在具體的實施過程中，要有一定的方法和技巧，相信大家都看過《穹頂之下》這個視頻，就是很強的方法論體現。其實說白了講就是做事要有套路，這里就舉一個性能優化的例子。

在性能優化時，我們如何證明優化是有效果的，可以采用“三明治法則”(自己起的名字)：

•  首先優化前，我們需要找到問題的現狀，并且要有數據能夠佐證優化前的狀態。所以就要學會去收集數據。
•  有了數據之后，我們在進行對數據分析的同時，就需要找到問題出現的原因，并且付諸實施解決。這個階段，就需要記錄具體的優化原理。
•  優化之后，就要想方設法去驗證，并且在驗證過程中，同樣需要收集數據。

到此，我們就有了 優化前數據，優化的原理，優化后的數據。通過數據對比，我們就可以很輕易的去佐證我們這次優化是有成效的，并且可以做出一份很漂亮的總結，作為一名架構師而言，這是一個很好的樹立威信的場景體現。

我們可以在發散開來，上面的三步驟可以再次迭代，也就是說，第一次優化，我們達到了效果，但是深究之后，還可以再次進行優化，每次優化都有數據佐證，這就是性能優化的方法論。

安全意識

這里為什么要把安全單獨拿出來說呢，因為對于一個業務而言，安全是第一要素，就好比一個國家，安全穩定才是發展一切的前提，一旦業務出現安全問題，就可能瞬間損失掉全部，代價是非常慘重的。所以作為一名架構師，必須要保證業務的穩定性，可以總結以下幾點：

•  對低級的的代碼安全問題，要堅決說不，例如前端里面的xss，csrf這些問題。
•  對大型運營類活動需求，要有容災意識和備份，例如在準備了一套方案的同時，要有可選的備用方案。
•  嘗試使用工具化來解決和預防安全問題，例如BAT這種大型企業，在運維和代碼層面，都有一層保障機制，如騰訊的門神系統等。

團隊合作

沒有完美的個人，卻有完美的團隊。

即使是一名架構師，我相信他也不是一直在一個人戰斗，一個優秀的產品業務，總是誕生于團隊，所以時刻保持和團隊人員的溝通是必不可少的，這些溝通不限于日常的文字，或者會議，甚至私下的團建活動，都是可以相互了解的。

所以團隊合作的目的就是讓團隊中的每個人都能明確自己的職責，并發揮出最大的價值，架構師有義務來維護這種合作關系。并且對你的認同，也是團隊成員賦予你的，維護良好的氛圍，才能讓團隊成員信服。

最后，總結一下，對前端架構師理解的一些誤區：

•  架構師并不等于全棧工程師。
•  架構師切忌完全脫離代碼，但是也不要一直悶著頭寫代碼。
•  架構師應當跳出技術本身，從全局的角度來看的業務，發現并解決問題。
•  任何項目的架構都不是一開始制定好就是一成不變的，它應該是不斷迭代和演進的，架構師有義務來保證架構的創新性。

最后，希望各位前端同仁，能夠在成為架構師的道路上，披荊斬棘，一帆風順！