摘要:楊永林,人稱教主,八年前端開發(fā)經(jīng)驗,原新浪微博前端技術(shù)專家,現(xiàn)任鏈家網(wǎng)前端總架構(gòu)師。年年底,教主加入鏈家網(wǎng),負(fù)責(zé)前端的整體架構(gòu)工作。
楊永林,人稱“教主”,八年前端開發(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)時將頁面劃分成多個獨立的子模塊,模塊是完全可以自主運行的,模塊可以嵌套,所以頁面就是一批模塊的樹形堆疊。服務(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ā),測試和上線?,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ù)影響范圍,能有效保證測試覆蓋面??偟膩碚f,踩坑不要緊,架構(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ò)、時段、運行環(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)系?,F(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:我可能比較幸運,曾經(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:不矛盾啊,多嘗試不代表多實施啊。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101869.html
摘要:問題回答者黃軼,目前就職于公司擔(dān)任前端架構(gòu)師,曾就職于滴滴和百度,畢業(yè)于北京科技大學(xué)。最后附上鏈接問題我目前是一名后端工程師,工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 問題回答者:黃軼,目前就職于 Zoom 公司擔(dān)任前端架構(gòu)師,曾就職于滴滴和百度,畢業(yè)于北京科技大學(xué)。 1. 前端開發(fā) 問題 大...
摘要:以下將分別從五大技術(shù)專場維度介紹本屆峰會的部分聯(lián)席主席與精選案例。天時間集中分享年最值得學(xué)習(xí)的個研發(fā)案例實踐。 從萬維網(wǎng)到物聯(lián)網(wǎng),從信息傳播到人工智能,20年間軟件研發(fā)行業(yè)趨勢發(fā)生了翻天覆地的變化。大數(shù)據(jù)、云計算、AI等新興領(lǐng)域逐漸改變我們的生活方式,Devops、容器、深度學(xué)習(xí)、敏捷等技術(shù)方式和工作理念對軟件研發(fā)從業(yè)者提出更高要求。 由麥思博(msup)有限公司主辦的第六屆全球軟件案...
摘要:圖片為本人原創(chuàng)自制,部分內(nèi)容參考,高清大圖,建議在上查看如果在手機(jī)上查看,請點擊圖片,縮放圖片展示了一名,從菜鳥成長為一名合格系統(tǒng)架構(gòu)師的必經(jīng)之路和必須具備的知識儲備,以及各個階段所需要的時間。建議前兩個階段控制在年以內(nèi)。 圖片為本人原創(chuàng)自制,部分內(nèi)容參考Darker’s Blog,高清大圖,建議:1)在PC上查看;2)如果在手機(jī)上查看,請點擊圖片,縮放 showImg(https:/...
閱讀 3406·2021-11-25 09:43
閱讀 2293·2021-09-06 15:02
閱讀 3537·2021-08-18 10:21
閱讀 3339·2019-08-30 15:55
閱讀 2342·2019-08-29 17:06
閱讀 3533·2019-08-29 16:59
閱讀 960·2019-08-29 13:47
閱讀 2756·2019-08-26 13:24