本文為原創(chuàng)文章，未經(jīng)許可，本文拒絕任何形式的轉(zhuǎn)載缨硝。
楊永林，人稱“教主”痒给，八年前端開發(fā)經(jīng)驗说墨，原新浪微博前端技術(shù)專家，現(xiàn)任鏈家網(wǎng)前端總架構(gòu)師苍柏。長期研究Web訪問性能優(yōu)化和前端框架搭建尼斧。
作為初始團(tuán)隊成員，教主參與了新浪微博所有PC版本的開發(fā)试吁，其中4~6版以架構(gòu)師的身份設(shè)計了微博PC版的前端架構(gòu)棺棵。在新浪微博任職期間，教主設(shè)計實現(xiàn)了流水線加載技術(shù)與模塊化代碼組織熄捍，達(dá)到了在提高訪問性能的同時極大降低了開發(fā)成本的目的烛恤。主要研究方向是Web訪問性能優(yōu)化與框架組織。在國內(nèi)為數(shù)不多地實現(xiàn)了BigPipe技術(shù)余耽，極大地提升了微博的訪問速度缚柏。同時，微博的前端代碼基礎(chǔ)包碟贾、前端框架和構(gòu)建工具均出自教主之手币喧。
2015年年底，教主加入鏈家網(wǎng)袱耽，負(fù)責(zé)前端的整體架構(gòu)工作杀餐。
在8年的前端開發(fā)生涯中，教主是如何一步一步地成為知名前端架構(gòu)師的呢朱巨？為何選擇加入了鏈家網(wǎng)呢史翘？
>>>>您在微博和鏈家都是前端架構(gòu)師，能說說前端架構(gòu)師這個工種具體是做什么的嗎冀续？
楊永林：我對架構(gòu)師所擔(dān)任的職責(zé)的認(rèn)識是一步步變化琼讽，慢慢深入的。
在剛參加工作的時候沥阳，我覺得架構(gòu)師就是代碼寫得又快又好的人跨琳，是工程師的晉級版本自点。
工作過一些年以后桐罕，我發(fā)現(xiàn)僅僅提高自身的開發(fā)效率是遠(yuǎn)遠(yuǎn)不夠的，團(tuán)隊需要整體的提升桂敛。發(fā)現(xiàn)這一點后功炮，我開始制作并完善各種開發(fā)工具，編寫開發(fā)框架术唬。
最近幾年薪伏，隨著迭代開發(fā)了一些產(chǎn)品本，我又發(fā)現(xiàn)之前能夠提升效率的框架工具很有可能在后來成了產(chǎn)品發(fā)展的絆腳石粗仓。這時嫁怀，我開始考慮架構(gòu)設(shè)計的指導(dǎo)原則设捐，開始考慮取舍。一些在短期內(nèi)能夠提升效率但不符合原則的東西塘淑，我就選擇不做或者想辦法在原則的指導(dǎo)下進(jìn)行改進(jìn)萝招。比如我相信可變化的代碼才是有生命力的代碼，在架構(gòu)設(shè)計上我也會趨向于讓項目的代碼可以一點一點的變化演進(jìn)存捺，不是那種一言不合就重構(gòu)到狀態(tài)槐沼。所以我認(rèn)為前端架構(gòu)師就是那種在前端領(lǐng)域提出開發(fā)的指導(dǎo)原則，在原則下設(shè)計開發(fā)框架和開發(fā)工具捌治，讓更多的開發(fā)者可以協(xié)同工作的人岗钩。
>>>>您在新浪微博的時候設(shè)計了前端架構(gòu)，能否介紹一下包括了哪些組成部分肖油，有什么關(guān)鍵技術(shù)兼吓？
楊永林：主要是代碼基礎(chǔ)包，頁面加載框架和前端構(gòu)建工具构韵。
早期前端開發(fā)面臨兩個主要問題是瀏覽器兼容和API不夠豐富周蹭，基礎(chǔ)包一般都是用來解決這兩個問題。當(dāng)時新浪有一個自己的Sina包疲恢，但是代碼比較零散凶朗，模式也不統(tǒng)一，各產(chǎn)品線有自己的擴(kuò)展显拳，同樣的功能可能有多種實現(xiàn)棚愤，不太好維護(hù)。后來我用業(yè)余時間開發(fā)了一個帶有命名空間管理功能的基礎(chǔ)包杂数，特點就是簡單清晰宛畦，易于使用，被團(tuán)隊采納作為了微博的基礎(chǔ)包使用至今揍移。
頁面加載框架是被需倒逼著產(chǎn)生的次和，2010年微博業(yè)務(wù)膨脹，頁面展示的內(nèi)容越來越多那伐，這使得頁面響應(yīng)速度也變得越來越慢踏施。我所在的團(tuán)隊接到的需求是要求在內(nèi)容變多的情況下將響應(yīng)速度變得更快。
這個時候Facebook推出了BigPipe技術(shù)罕邀，我們覺得這個理念正好能夠解決我們應(yīng)對的問題畅形，所以決定實施，但當(dāng)時Facebook只是分享了他們的做法诉探，并沒有提供實現(xiàn)日熬，所以對我來說也是巨大的挑戰(zhàn)。我當(dāng)時將頁面劃分成多個獨立的子模塊肾胯，模塊是完全可以自主運(yùn)行的竖席，模塊可以嵌套耘纱，所以頁面就是一批模塊的樹形堆疊。服務(wù)端用Chunked的方式將模塊的信息以JavaScript代碼塊的方式傳輸?shù)巾撁姹霞觯岸诵枰龅暮苤匾墓ぷ魇枪芾砻總€模塊的生命周期揣炕。
我很榮幸那時能有機(jī)會和團(tuán)隊成員一起開發(fā)了這個加載框架，我們可能是國內(nèi)第一個在大型互聯(lián)網(wǎng)應(yīng)用上全面使用這項技術(shù)的东跪。之后的一年我一直致力于此項技術(shù)的優(yōu)化工作畸陡，比如支持服務(wù)端亂序輸出，保證服務(wù)端可以使用并行策略虽填，壓縮丁恭，減少前置依賴條件等，并在2013年與@Laruence（鳥哥）合作實施了CBigPipe（并行的BigPipe）技術(shù)斋日，進(jìn)一步提高了這項技術(shù)的性能牲览。微博的V5版的加載性能也達(dá)到了頂峰，頁面的加載速度幾乎相當(dāng)于靜態(tài)網(wǎng)頁恶守。
前端構(gòu)建工具是這幾年才開始流行第献，其實早在2008年的時候，新浪就已經(jīng)使用前端小文件開發(fā)兔港，使用構(gòu)建工具進(jìn)行開發(fā)庸毫，測試和上線。現(xiàn)在想想應(yīng)該是比較超前了衫樊，不過那時的版本是需要PHP飒赃、Python和Java環(huán)境，團(tuán)隊維護(hù)起來比較困難科侈，而且使用的是字符串替換方案载佳，功能比較有限。2012年我將這個工具進(jìn)行了改造臀栈，使其僅需要Node環(huán)境蔫慧，同時支持開發(fā)、測試部署和打包上線权薯。由于使用了UglifyJS姑躲，有了語法樹，我加了一些以前沒有的功能崭闲，比如預(yù)編譯的模版引擎肋联、支持模版嵌套和母模版威蕉、代碼健康度檢測刁俭、冗余模塊分析等。
>>>>前端構(gòu)建工具前后有Grunt/Gulp韧涨、Webpack牍戚、npm scripts等侮繁，您對這些工具有什么看法，哪個更好如孝？如何選擇適合公司產(chǎn)品的工具宪哩？應(yīng)從哪些方面考慮？
楊永林：我覺得這些工具有效地解決了前端開發(fā)效率的問題第晰，它們的出現(xiàn)都是對技術(shù)的推動锁孟，如果在我做工具的時候有這些項目的出現(xiàn)，會減少我很多的工作量茁瘦。至于哪個更好品抽，我覺得，你能掌握哪個甜熔，哪個就是最好的圆恤。因為說到底，工具是為你的業(yè)務(wù)服務(wù)的腔稀，你可能需要對它做些改造或者是寫一些擴(kuò)展盆昙，在這個時候你發(fā)現(xiàn)你對他的熟悉變的很重要。構(gòu)建工具的遷移成本還是挺高的焊虏，我不太推薦頻繁地變更它淡喜，所以最好不要追著流行走，還是要根據(jù)自己團(tuán)隊的特點诵闭，因地制宜地選擇一款合適的拆火。如果不是超大型的應(yīng)用，其實build的結(jié)果的影響并沒有太大的差異涂圆，與其想著哪個更好哪個更牛逼们镜，不如將其中一個玩熟玩透。
>>>>如何保證團(tuán)隊成員不會踩到同樣的坑润歉？在設(shè)計框架和構(gòu)建工具時有無這方面的考慮模狭？請舉例說明。
楊永林：首先踩衩，制定規(guī)范嚼鹉、分享經(jīng)驗是免不了的，但紙上得來終覺淺吧驱富，很多時候锚赤，親身踩一次坑，得到的經(jīng)驗才會深刻褐鸥。而我所要做的是在團(tuán)隊成員踩到坑的時候降低這件事造成的后果线脚。比如我提供的開發(fā)環(huán)境是可以完全模擬線上環(huán)境的，測試代碼和線上保持一致，很多意外情況都可以在開發(fā)浑侥、測試期被發(fā)現(xiàn)姊舵。同時，制定的開發(fā)規(guī)范要由工具檢測來保證寓落，不符合規(guī)范的代碼不能夠打包上線括丁。對于規(guī)范代碼可以使用工具計算出業(yè)務(wù)影響范圍，能有效保證測試覆蓋面伶选∈贩桑總的來說，踩坑不要緊仰税，架構(gòu)來幫你兜底祸憋，爬出坑的過程就成為了團(tuán)隊成員所得到的財富。
>>>>您認(rèn)為對Web訪問性能的優(yōu)化需要關(guān)注哪些方面肖卧？其中蚯窥，最值得關(guān)注的點是什么？為什么塞帐？
楊永林：我覺得性能優(yōu)化需要方方面面都要兼顧拦赠，包括網(wǎng)絡(luò)時間、服務(wù)器計算時間葵姥、頁面請求數(shù)荷鼠、下載量、頁面載入模型等榔幸。而這里面任何一項的性能提升可能都需要你修改大量代碼或者調(diào)整架構(gòu)來實現(xiàn)允乐，但是得到的效果可能就是一點點。因此很少見到銀彈削咆，一般都是一點一點地做出來的牍疏。我這里談兩個我覺得比較值得關(guān)注但很容易被忽視的點吧。
一是你所服務(wù)產(chǎn)品的形態(tài)拨齐，用戶關(guān)心什么鳞陨，這是一些工程師比較容易忽略的。有些產(chǎn)品需要用戶打開時很快瞻惋，有些需要用戶使用時流暢厦滤；有些產(chǎn)品用戶可以容忍看舊數(shù)據(jù)，而有些則必須是新內(nèi)容歼狼；有些產(chǎn)品用戶一天打開很多次掏导，而有些看一次就關(guān)掉了。這些產(chǎn)品需求的差異都會影響你的決策羽峰。
二是評測標(biāo)準(zhǔn)趟咆，用什么來測量性能的好壞添瓷。一些人認(rèn)為請求數(shù)或者請求量減少了，訪問就快了忍啸，其實這是不一定的，有可能你花了很大精力做的事情在用戶看來并沒有什么太大變化履植。所以计雌，找一個評測標(biāo)準(zhǔn)讓每一個優(yōu)化在數(shù)據(jù)上有所體現(xiàn)是很重要的。
>>>>度量前端性能的指標(biāo)有哪些玫霎？如何對Web訪問性能進(jìn)行監(jiān)控凿滤？
楊永林：我所服務(wù)的產(chǎn)品一般都關(guān)注訪問性能，也就是用戶看到內(nèi)容的快慢庶近，所以我們一般用首屏?xí)r間來評估翁脆，一般的性能檢測服務(wù)商都能提供這個指標(biāo)。
選這個指標(biāo)有兩點考慮：一是因為它并不是一個技術(shù)指標(biāo)鼻种，而是一個感知指標(biāo)反番，所以更接近人類的感受。二是旁路檢測叉钥，它并不在系統(tǒng)內(nèi)罢缸，不是系統(tǒng)匯報上來的數(shù)據(jù)，這樣就有效的規(guī)避了幸存者偏差的問題投队。當(dāng)然它也有些不足：一是數(shù)據(jù)采樣小枫疆，二是可以被欺騙。所以可能需要一點兒統(tǒng)計學(xué)功底和性能監(jiān)控的正確認(rèn)識敷鸦。
在監(jiān)控的過程中息楔，一是要關(guān)注長期趨勢的變化，如果不是突發(fā)狀況扒披，單點的數(shù)據(jù)的絕對值是沒有意義的值依，要收集長期的數(shù)據(jù)，分析其中的變化碟案，當(dāng)有變更的時候尤其要關(guān)注數(shù)據(jù)的變化鳞滨。二是關(guān)注最差25%的狀況，有些人蟆淀，會在公司內(nèi)網(wǎng)刷自己的產(chǎn)品拯啦，感覺挺快，其實不論你用什么手段熔任，只要網(wǎng)快褒链，用戶的體驗都不會太差，體驗的差異在于最差那部分用戶疑苔。三是從不同維度分析數(shù)據(jù)甫匹，如地區(qū)、網(wǎng)絡(luò)、時段兵迅、運(yùn)行環(huán)境等抢韭。
>>>>前端工程師如何成為前端架構(gòu)師，除了編程能力和架構(gòu)知識恍箭，還需要培養(yǎng)哪些能力刻恭？
楊永林：我想，大部分領(lǐng)域的架構(gòu)師工作都是差不多的扯夭，就是搭建一個解決問題的框架鳍贾，讓團(tuán)隊成員能在框架下良好的配合工作，完成產(chǎn)品的開發(fā)需求交洗。
我們知道骑科，解決一個問題的手段有很多，在這個過程中取舍就很重要了构拳，我們也知道咆爽，沒有銀彈，很少能遇見那種全面優(yōu)勢的解決方案置森，大部分方案都是犧牲掉一部分東西來換取一部分東西伍掀。因此，作為架構(gòu)師暇藏，不僅要對各個技術(shù)方案的特點蜜笤、成本要熟知（也就是編程能力和架構(gòu)知識），還要學(xué)會如何選擇盐碱。顯然把兔，架構(gòu)師需要根據(jù)產(chǎn)品的特點和發(fā)展方向做出決定，在前端領(lǐng)域的架構(gòu)要能讓配合的團(tuán)隊對接的順暢瓮顽。那么在這個過程中县好，良好的溝通能力、同理心暖混、利他的思維方式缕贡，就顯得很重要了。因為我們不僅要完成開發(fā)任務(wù)拣播，也要思考在自己的領(lǐng)域內(nèi)如何幫助項目解決問題晾咪。
>>>>據(jù)說有些同事在對技術(shù)的討論中以“擊敗”您為榮，您是如何看待的贮配？這對團(tuán)隊及其個人的發(fā)展帶來了哪些影響谍倦？
楊永林：這是我一個毛病，喜歡給別人的方案著茬泪勒。我覺得這是一個思辨的過程昼蛀，通過從不同角度分析問題宴猾，去挑戰(zhàn)解決方案的合理性，才能讓問題解決的更穩(wěn)妥叼旋。在知識的獲取中也是這樣仇哆，一次一次地去問為什么，去追根溯源夫植，才能讓知識體系更牢固讹剔。
我很喜歡在團(tuán)隊內(nèi)扮演一種“反派”的角色，從反面的角度分析問題偷崩，去挑戰(zhàn)別人的方案辟拷。其實撞羽，我不是真的去否定他阐斜，而是希望他的方案是經(jīng)過反復(fù)推敲、深思熟慮產(chǎn)生的诀紊，這樣的方案會更健壯谒出。時間長了，他們會覺得我是一個愛抬杠的人邻奠，就會做足準(zhǔn)備來“挑戰(zhàn)”我笤喳。能把我說得接不上話來，他們會覺得很開心碌宴。這個結(jié)果是我想看到的杀狡，因為這說明團(tuán)隊成員在解決問題時進(jìn)行了充分的思考。
>>>>您為什么放棄了在之前新浪微博的元老級身份贰镣，而選擇加入鏈家網(wǎng)呜象？
楊永林：這可能源自我對工作的看法吧，我覺得人生活在社會上碑隆，工作是在為社會創(chuàng)造價值和財富恭陡，這和他具體從事哪種職業(yè)沒有直接關(guān)系。現(xiàn)在行業(yè)里有一種風(fēng)氣上煤，就是覺得程序員寫好代碼就好了休玩，不用關(guān)心自己做的事情是什么。甚至社會上也給程序員打一些什么“木訥”劫狠、“情商低”之類的標(biāo)簽拴疤。我覺得不應(yīng)該是這樣的，程序員也是社會人独泞，也有他的社會責(zé)任遥赚，也有家庭責(zé)任，也需要陪伴他的伴侶阐肤，照顧他的小孩凫佛，不是每天只是面對代碼而不管其他的事讲坎。人不要因為群體印象就把自己限制住，人的生活就應(yīng)該是多種多樣愧薛、豐富多采的晨炕，人生應(yīng)該是有意義的。
就我個人而言毫炉，在過去的幾年瓮栗，我所服務(wù)的產(chǎn)品不僅加深了人們之間的溝通和理解，也使得國家的信息變得更透明瞄勾。而我所做的工作對這樣的一個產(chǎn)品做出了貢獻(xiàn)费奸，可以說我的工作讓世界變得美好了那么一點點。這讓我覺得我的人生增添了那么一點意義进陡。而當(dāng)我搭建起前端框架后愿阐，我個人能起的作用變得越來越小，我能繼續(xù)創(chuàng)造的價值也越來越少趾疚，所以需要另一個平臺來繼續(xù)發(fā)揮我的能量缨历。
這時我有機(jī)會接觸到鏈家網(wǎng)，這家公司致力于解決人們的居住問題糙麦，它讓中國最大的市場變得透明辛孵、有序。我覺得鏈家網(wǎng)做的是很有意義的事赡磅，同時魄缚，它僅僅用了不到兩年的時間，就集結(jié)了一批各領(lǐng)域的牛人焚廊，維護(hù)了國內(nèi)規(guī)模最大的房地產(chǎn)交易系統(tǒng)冶匹，用技術(shù)手段讓房屋的買賣變的更輕松、透明节值、快捷徙硅。在與鏈家網(wǎng)的接觸中，我感受到了那種積極解決問題的活力和務(wù)實做事的態(tài)度搞疗。再加上鏈家網(wǎng)中大部分技術(shù)人嗓蘑，在之前也都是各個大型互聯(lián)網(wǎng)公司的中堅力量，我想沒有什么比與志同道合的人來一起改變世界更令人激動的了匿乃。此時桩皿，鳥哥專門來邀請我加入鏈家網(wǎng)，我就毫不猶豫地同意了幢炸。
** 教主答群友問：**
Q：您對初級前端人員有什么好的建議嗎泄隔？
A：多嘗試一些解決方案，多想想這些方案的特點宛徊，對別人的方案深究原理佛嬉。
Q：前端學(xué)習(xí)方面有什么書籍可以介紹嗎逻澳？
A：現(xiàn)在前端書籍都挺多挺好多呀，我一般推薦高級程序設(shè)計暖呕，圖解CSS3斜做。
Q：您在擔(dān)任架構(gòu)師這個角色中遇到的最嚴(yán)重的線上事故是什么？當(dāng)時是怎么解決的湾揽？
A：工作這么多年瓤逼，在前端應(yīng)該就只有一次B級故障，做非前端的時候倒是通過大簍子库物，因為上線速度比較快霸旗，而且大問題也都是很明顯的解決方案，所以就是快速上線了戚揭。這個要感謝測試同學(xué)诱告，很給力，避免了很多線上故障毫目。
Q：學(xué)前端是否去參加商業(yè)培訓(xùn)更見效蔬啡？亦或是這種商業(yè)培訓(xùn)反而更會僵化思維诲侮？這樣流水線培訓(xùn)出來的學(xué)員在企業(yè)認(rèn)可度如何镀虐。
A：我沒參見過商業(yè)培訓(xùn)，也不太好評價沟绪，我是覺得被灌輸?shù)闹R可能不如自己躺坑得來的扎實吧刮便。企業(yè)認(rèn)可這方面，我基本只看能力绽慈。
Q：對于您來說技術(shù)比較重要還是產(chǎn)品比較重要恨旱？因為剛才您說是因為覺得鏈家的“產(chǎn)品”比較有意義才考慮去的，那能理解為你覺得產(chǎn)品比技術(shù)更重要嗎坝疼？
A：我所說的產(chǎn)品不是“產(chǎn)品人員”搜贤，是公司的產(chǎn)出的服務(wù)。顯然對于一家公司來說钝凶，產(chǎn)品是最重要的仪芒，技術(shù)是如何實現(xiàn)產(chǎn)品的手段啊。
Q：您覺得什么樣的代碼才算是可變化的代碼耕陷？這方面又做出了哪些實踐掂名？有哪些系統(tǒng)化的產(chǎn)出？
A：我說變化的代碼其實代碼是可控的哟沫，可以方便的去調(diào)整項目饺蔑，可以一步一步的改造項目而不是重構(gòu)，我做開發(fā)一致遵循這個理念嗜诀。
Q：前面提到搭建團(tuán)隊可用的框架猾警，但我感覺這個工作量非常巨大而且需要很多改進(jìn)和測試孔祸，教主當(dāng)時有同感嗎？怎么解決這么大的工作量問題发皿？
A：我可能比較幸運(yùn)融击，曾經(jīng)有一段時間來調(diào)整結(jié)構(gòu)，我是這樣想的雳窟，每當(dāng)我向前邁一步的時候尊浪，我就是在進(jìn)步，所以我沒有急于讓架構(gòu)搭建一次到位封救，我會想好調(diào)整的步驟拇涤，每一步都會讓架構(gòu)進(jìn)步，把大問題拆解成小問題一步一步做誉结。
Q：小公司開發(fā)前端鹅士，由于缺少項目管理經(jīng)驗，導(dǎo)致許多冗余性的工作惩坑，請問教主在管理方面有何建議掉盅？
A：這個不同公司的情況都不一樣吧，不太好建議以舒。
Q：多嘗試一些解決方案和“一步一步逐步改進(jìn)產(chǎn)品”是否矛盾趾痘？
A：不矛盾啊，多嘗試不代表多實施啊蔓钟。
