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

前端的意義

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

到底什么是前端

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

上圖來自DOS系統(tǒng)經(jīng)典軟件DOS Navigator

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

上圖來自網(wǎng)景瀏覽器

直到現(xiàn)在，前端逐漸拆分成：

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

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

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

前端的價值在哪呢？

•  實現(xiàn)界面交互。
•  提升用戶體驗。

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

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

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

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

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

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

前端價值體現(xiàn)真的很重要么？

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

和非前端之外的技術相比

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

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

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

對產(chǎn)品業(yè)務的重要性

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

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

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

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

前端技術的進階

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

性能優(yōu)化

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

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

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

對框架的理解

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

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

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

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

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

深入Node.js領域

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

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

Canvas與WebGL

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

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

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

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

通往架構師之路

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

跨界

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

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

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

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

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

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

嘗鮮

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

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

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

工具和平臺化建設

只會寫代碼的程序員只能叫碼農(nóng)。

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

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

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

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

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

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

流程和規(guī)范化

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

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

方法論

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

在性能優(yōu)化時，我們?nèi)绾巫C明優(yōu)化是有效果的，可以采用“三明治法則”(自己起的名字)：

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

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

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

安全意識

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

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

團隊合作

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

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

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

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

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

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