個人經(jīng)歷

大家好，我叫付小波，2017年加入京東，現(xiàn)擔(dān)任全渠道生態(tài)部前端架構(gòu)師。我負(fù)責(zé)過ToC和ToB多個業(yè)務(wù)，近幾年主要專注于B端應(yīng)用開發(fā)。以下是我的主要經(jīng)歷：

- 2017年：負(fù)責(zé)主站虛擬交易業(yè)務(wù)研發(fā)，搭建首個虛擬交易類小程序；

- 2019年：從C端轉(zhuǎn)向B端系統(tǒng)，負(fù)責(zé)萬家系統(tǒng)；

- 2021年：作為前端主負(fù)責(zé)人，主導(dǎo)線下系統(tǒng)重構(gòu)；

- 2022年：作為前端研發(fā)一號位，從0到1搭建B商城三個端；

- 2023年至今：擔(dān)任WEB前端主責(zé)人，主導(dǎo)京麥商家系統(tǒng)重構(gòu)。

從C端到B端的技術(shù)轉(zhuǎn)型

2017年，我作為一名新入職的WEB前端工程師，開始接觸移動端項目。在此之前，我對移動端開發(fā)框架在項目實戰(zhàn)中的經(jīng)驗相對較少。當(dāng)時，移動端領(lǐng)域正處于快速發(fā)展階段，尤其是微信小程序的火爆，前端技術(shù)棧也在迅速演變，如小程序和React Native等新技術(shù)對我來說都是挑戰(zhàn)，同時還需要適配不同的移動設(shè)備和進行性能優(yōu)化。

我負(fù)責(zé)的第一個項目是開發(fā)一個虛擬交易類的小程序。為此，我通過查找官網(wǎng)資料、觀看視頻教程、閱讀開源代碼以及與團隊內(nèi)部交流等方式進行學(xué)習(xí)。在公司內(nèi)部沒有現(xiàn)成流程和案例可供參考的情況下，我獨自摸索了小程序的申請注冊、開發(fā)部署以及交易鏈路聯(lián)調(diào)等全流程，最終按期順利完成了開發(fā)和上線。

在C端產(chǎn)品開發(fā)過程中，我深刻體會到用戶體驗至關(guān)重要。通過保持UI組件的一致性、提升用戶操作的連貫性、適當(dāng)使用動畫效果、優(yōu)化性能以減少用戶等待時間，以及兼顧多端設(shè)備的適配等多種手段，不僅顯著提升了用戶體驗，也積累了寶貴的經(jīng)驗。

2019年，公司進行組織變革時，我有幸接觸到B端業(yè)務(wù)系統(tǒng)。京東零售有自營、POP、線下等多種業(yè)務(wù)模式，涉及POP商家、門店、供應(yīng)商、運營、采銷等多個角色，同時包含商品管理、訂單管理、庫存管理、客戶關(guān)系管理（CRM）、財務(wù)管理、促銷等復(fù)雜功能模塊，一些B端系統(tǒng)菜單數(shù)據(jù)量多達(dá)500+。部分模塊之間存在相互依賴，增加了系統(tǒng)的復(fù)雜性。這給我?guī)砹司薮蟮奶魬?zhàn)。憑借近兩年的移動端開發(fā)經(jīng)驗和之前的WEB開發(fā)經(jīng)驗，我迎接新的挑戰(zhàn)，轉(zhuǎn)向B端業(yè)務(wù)系統(tǒng)研發(fā)。

通過實際項目案例和行業(yè)調(diào)研，從多個維度對比了C端和B端的區(qū)別，幫助我在不同項目中做出更優(yōu)的技術(shù)選擇和方案設(shè)計，如下表：

我采取了統(tǒng)一的開發(fā)框架、穩(wěn)定的底座、標(biāo)準(zhǔn)統(tǒng)一的交互規(guī)范等一些列措施，逐步攻克了B端研發(fā)的一些難題。在技術(shù)選型過程中，綜合考慮了系統(tǒng)的穩(wěn)定性、性能、可維護性和擴展性，選擇Vue和TypeScript，配合微前端框架，將復(fù)雜系統(tǒng)拆分為多個獨立的小模塊，提升了系統(tǒng)的可擴展性和可維護性。

前端工程師如何應(yīng)對業(yè)務(wù)變化

無論是C端還是B端研發(fā)，都會面臨業(yè)務(wù)隨時可能發(fā)生變化的情況。特別是B端，我們團隊負(fù)責(zé)的商家系統(tǒng)需要支持POP、VC等幾十種業(yè)務(wù)模式。B商城和線下系統(tǒng)也涉及多種模式和身份。舉個具體例子，商家系統(tǒng)的入駐功能有幾十種模式，每種模式包含7種類型，涉及多達(dá)上百個組件。再比如發(fā)品頁有9大場景，組件數(shù)量多達(dá)上百個，配置模板數(shù)量超過大幾百個。業(yè)務(wù)規(guī)則的變化對我們的技術(shù)方案設(shè)計和抽象能力帶來了巨大的挑戰(zhàn)。

為了應(yīng)對業(yè)務(wù)變化，我會花時間了解業(yè)務(wù)需求，包括產(chǎn)品定位、目標(biāo)用戶和市場趨勢等。通過參加業(yè)務(wù)部門會議、閱讀相關(guān)文檔以及與產(chǎn)品經(jīng)理溝通來實現(xiàn)。這有助于更好地理解業(yè)務(wù)流程，并為技術(shù)決策提供更全面的視角。在實際的方案設(shè)計中，我會思考將功能進行合理抽象：哪些功能應(yīng)該抽象為原子能力，哪些應(yīng)抽象為水平業(yè)務(wù)組件或垂直業(yè)務(wù)組件，哪些應(yīng)模板化，從而將通用的業(yè)務(wù)流程標(biāo)準(zhǔn)化、產(chǎn)品化。我總結(jié)了前端分層復(fù)用模型（如下圖1所示）：以面向UI、配置化方式，提升研發(fā)效率和質(zhì)量。

圖1：前端分層復(fù)用模型

另外產(chǎn)品功能上線后，通過持續(xù)監(jiān)控和收集用戶之聲，及時發(fā)現(xiàn)問題和主動了解用戶的真實反饋，從用戶的角度出發(fā)，與業(yè)務(wù)和產(chǎn)品一起，思考如何優(yōu)化產(chǎn)品的易用性和功能性，通過持續(xù)優(yōu)化和迭代完善產(chǎn)品功能和體驗，直到達(dá)成業(yè)務(wù)目標(biāo)。

前端進階之路心得分享

在B端業(yè)務(wù)這種復(fù)雜的研發(fā)里，我慢慢改變了自己的想法。一開始，我就想著怎么快點把功能做出來，但后來我明白，光快不行，還得讓代碼寫得規(guī)范、好讀、好維護。所以，現(xiàn)在會在團隊內(nèi)要求按照最佳實踐和編碼規(guī)范來寫代碼。

以前，我做一個功能就完事了，但現(xiàn)在會想著怎么讓設(shè)計更模塊化，這樣不僅能讓代碼更好復(fù)用，以后維護起來也更容易。除了實現(xiàn)功能，我還會想怎么讓整體性能更好，比如頁面加載得更快，響應(yīng)時間更短，還有怎么優(yōu)化資源的加載和渲染，這樣不管網(wǎng)絡(luò)和設(shè)備怎么樣，用戶都能有個好的體驗。而且，現(xiàn)在不只是想著怎么實現(xiàn)功能，還會參與到產(chǎn)品交互設(shè)計的討論中，希望能讓用戶愛上使用產(chǎn)品的感覺。

我的關(guān)注點也從單一的頁面擴展到了整個系統(tǒng)的架構(gòu)，想著怎么搭建一個既好擴展又好維護的前端架構(gòu)。為了系統(tǒng)更穩(wěn)定，現(xiàn)在更注重預(yù)防問題，而不是等問題出現(xiàn)后再去解決。我會通過代碼審查和測試、主動打點上報等手段，提前找出并解決問題。還有，我現(xiàn)在不只是改進一個小點，而是想著怎么讓整個系統(tǒng)都更優(yōu)化，性能更可靠。也不再只是找短期的解決辦法，而是會做長期的技術(shù)規(guī)劃，確保項目能持續(xù)發(fā)展。當(dāng)然，團隊協(xié)作也很重要。我現(xiàn)在會更多地和產(chǎn)品、設(shè)計、后端等團隊溝通交流，確保項目能順利進行，同時也會分享自己的知識和經(jīng)驗，和大家一起進步。

無論是做C端研發(fā)還是B端研發(fā)，我認(rèn)為最重要的三件事是：技術(shù)風(fēng)險管控、全局視角、用戶體驗至上，下面將重點介紹這三件事。

技術(shù)風(fēng)險管控：從解決問題到預(yù)防問題。

在B端業(yè)務(wù)中，系統(tǒng)的復(fù)雜性和業(yè)務(wù)邏輯的多樣性使技術(shù)風(fēng)險管理變得尤為重要。通過從治理到預(yù)防，實現(xiàn)防治結(jié)合，規(guī)范業(yè)務(wù)應(yīng)用研發(fā)和交付標(biāo)準(zhǔn)，完善業(yè)務(wù)監(jiān)控與告警機制，確保及時發(fā)現(xiàn)和處理異常情況，從而確保系統(tǒng)的高質(zhì)量交付。

我們通過梳理監(jiān)控范圍，制定業(yè)務(wù)監(jiān)控指標(biāo)，收集接口層、邏輯層和視圖層的錯誤類型，設(shè)計錯誤上報格式規(guī)范。為了確保錯誤信息能夠被及時、準(zhǔn)確地上報，我們設(shè)計了一套包括錯誤類型、錯誤描述、發(fā)生時間、用戶信息和設(shè)備信息的錯誤上報格式規(guī)范。統(tǒng)一的錯誤上報格式確保所有錯誤信息都能被及時、準(zhǔn)確地記錄和處理。

在技術(shù)實施方案上，我們基于公司內(nèi)部監(jiān)控平臺，通過打點上報和全局?jǐn)r截上報的方式，實時監(jiān)控系統(tǒng)運行情況，收集和分析錯誤信息。通過不斷調(diào)試和優(yōu)化報警閾值，當(dāng)系統(tǒng)運行出現(xiàn)異常情況時，及時發(fā)送報警通知，確保相關(guān)人員能夠迅速處理問題。此外，我們定期審查系統(tǒng)運行情況、監(jiān)控數(shù)據(jù)及用戶反饋，發(fā)現(xiàn)潛在問題和風(fēng)險，及時進行處理和優(yōu)化并補齊監(jiān)控盲區(qū)。

集約式管理：從單一技術(shù)到全局視角，B端系統(tǒng)的核心策略

系統(tǒng)的復(fù)雜性和業(yè)務(wù)邏輯的多樣性，使得傳統(tǒng)的開發(fā)和管理模式難以滿足快速迭代和高質(zhì)量交付的需求。為了解決多端多場景建設(shè)過程中出現(xiàn)的技術(shù)規(guī)范不一致、質(zhì)量無法保障、資產(chǎn)無法復(fù)用與精細(xì)管理、部署成本過高、多團隊協(xié)同效率與安全低的問題，集約式管理應(yīng)運而生，通過集中化的開發(fā)和管理模式，解決了許多傳統(tǒng)開發(fā)模式中的痛點。集約式管理在商家系統(tǒng)、B商城、線下系統(tǒng)的WEB端、H5、小程序有很好的落地實踐。

圖2：前端開發(fā)模式

解決的問題

1.開發(fā)效率低：傳統(tǒng)開發(fā)模式下，各個團隊獨立開發(fā)，重復(fù)造輪子，效率低下。集約式管理通過腳手架和工程化工具，提升了開發(fā)效率。

2.系統(tǒng)不穩(wěn)定：由于缺乏統(tǒng)一的技術(shù)規(guī)范和標(biāo)準(zhǔn)，系統(tǒng)的穩(wěn)定性和可維護性較差。集約式管理通過統(tǒng)一的調(diào)度配置管理中心，提升了系統(tǒng)的穩(wěn)定性和可維護性。

3.管理成本高：將復(fù)雜系統(tǒng)/應(yīng)用拆分微應(yīng)用/微模塊后，帶來的副作用用是多倉庫管理成本增加。通過工具管理跨倉庫的依賴升級，通過 CI/CD 工具實現(xiàn)統(tǒng)一管理和集成，實現(xiàn)自動化構(gòu)建和部署。

集約式管理的優(yōu)勢

1.統(tǒng)一標(biāo)準(zhǔn)和規(guī)范：通過集約式管理，可以制定統(tǒng)一的技術(shù)標(biāo)準(zhǔn)和規(guī)范，提升系統(tǒng)的可維護性和可擴展性。

2.提高開發(fā)效率：通過腳手架和工程化工具，減少了重復(fù)勞動，提升了開發(fā)效率。

3.提升系統(tǒng)穩(wěn)定性：通過統(tǒng)一的調(diào)度配置管理中心，提升了系統(tǒng)的穩(wěn)定性和可維護性。

4.降低開發(fā)成本：通過集約化管理，減少了重復(fù)開發(fā)和資源浪費，降低了開發(fā)成本。

5.高效管理：通過集中化的管理模式，可以更高效地管理系統(tǒng)和團隊，提升整體的開發(fā)效率和質(zhì)量。

當(dāng)然，集約式管理的弊端也是有的，像初期成本高，集約式管理在初期需要投入大量的資源和時間進行技術(shù)選型、工具開發(fā)和標(biāo)準(zhǔn)制定，成本較高。靈活性降低，集約式管理通過統(tǒng)一標(biāo)準(zhǔn)和規(guī)范，對每一個源碼工程的開發(fā)、構(gòu)建、上線部署全程管控，這可能會降低部分團隊的靈活性，影響個性化需求的實現(xiàn)，我們通過開放一定的配置化能力解決個性化的需求。

在項目實踐中的集約式管理，是通過前端工具集中了開發(fā)框架、原子組件、核心庫、環(huán)境配置、工程構(gòu)建、自動配置等開發(fā)要素在Framework工程中，依托coding平臺的開放接口能力，進行集中統(tǒng)一的配置開發(fā)要素，約束各個子應(yīng)用/模塊開發(fā)、構(gòu)建、部署，以節(jié)約、約束、高效為導(dǎo)向，從而達(dá)到降低開發(fā)成本、高效管理。

Framework基座能力建設(shè)，在集約式管理中是關(guān)鍵的一環(huán)。通過構(gòu)建統(tǒng)一的基座，提供標(biāo)準(zhǔn)化的開發(fā)和運行環(huán)境，提升系統(tǒng)的穩(wěn)定性和可維護性。通過構(gòu)建商家微應(yīng)用和微模塊技術(shù)體系，實現(xiàn)系統(tǒng)的模塊化和組件化，提升系統(tǒng)的可擴展性和可維護性。包括運行容器、研發(fā)工程鏈路和DUCC數(shù)據(jù)服務(wù)等。集約式管理通過統(tǒng)一的調(diào)度配置管理中心，實現(xiàn)對系統(tǒng)的集中管理和監(jiān)控，提升系統(tǒng)的穩(wěn)定性和可維護性。通過強管控，確保各個子應(yīng)用和模塊的開發(fā)和運行符合統(tǒng)一的標(biāo)準(zhǔn)和規(guī)范。

用戶體驗至上：從專注代碼實現(xiàn)轉(zhuǎn)變?yōu)殛P(guān)注用戶體驗

京東一直以來都把客戶放在最重要的位置，我們的企業(yè)文化就是“客戶為先”?，F(xiàn)在，我們更要從只關(guān)心代碼怎么寫，轉(zhuǎn)變成更加關(guān)心用戶用著感覺怎么樣。也就是說，東西能用還不夠，還得讓用戶愛上使用產(chǎn)品的感覺。

說到用戶體驗，簡單來說，就是要把用戶的需求、感受和滿意度放在心頭。一個好東西，不僅得實用、好用，還得讓用戶覺得爽。想象一下，你用的東西不僅功能全，而且用著還特順手，那感覺多棒！

要做到這點，我們得換個思路。以前我們可能更關(guān)心東西能不能用，現(xiàn)在我們要多想想用戶會怎么用，他們想要什么。這就像是，以前我們只管做飯，現(xiàn)在還得考慮吃飯的人口味如何，愛吃什么。所以，從設(shè)計到用戶體驗，我們得時刻想著用戶，關(guān)注他們使用的每一個小細(xì)節(jié)。比如，頁面怎么布局，顏色怎么搭，字體怎么選，還有用戶怎么和我們的產(chǎn)品互動，這些都得考慮。

當(dāng)然，用戶體驗不是一個人就能搞定的，得靠大家齊心協(xié)力。不管你是負(fù)責(zé)什么的，都得關(guān)心用戶體驗，一起努力讓產(chǎn)品更貼近用戶，讓用戶愛上我們的產(chǎn)品。

最后，用戶體驗這個領(lǐng)域一直在變，我們也得跟著學(xué)，看看有什么新的設(shè)計理念，或者更酷更便捷的交互方式。總之，我們要以用戶為中心，做出既實用又讓用戶愛不釋手的產(chǎn)品。

未來展望：持續(xù)學(xué)習(xí)與創(chuàng)新

無論是業(yè)務(wù)研發(fā)還是基礎(chǔ)技術(shù)研發(fā)，我們的核心目標(biāo)都是通過技術(shù)解決用戶痛點并實現(xiàn)價值的最大化。展望未來，我們致力于在業(yè)務(wù)研發(fā)領(lǐng)域持續(xù)推動技術(shù)創(chuàng)新，秉承價值驅(qū)動的理念，堅持長期主義，以打造卓越的B端平臺產(chǎn)品為己任。為此，我們將進一步深入探索業(yè)務(wù)需求，并運用先進的技術(shù)手段，旨在提升業(yè)務(wù)效率和優(yōu)化用戶體驗。

從前端的角度來看，研發(fā)效率的瓶頸主要集中在視圖設(shè)計、邏輯編寫、接口聯(lián)調(diào)以及測試驗證等環(huán)節(jié)。伴隨著人工智能的出現(xiàn)，將會出現(xiàn)更智能的開發(fā)工具、全新的開發(fā)平臺，這將顯著提高研發(fā)效率和質(zhì)量。

結(jié)束語

目前，我們憑借統(tǒng)一的技術(shù)架構(gòu)和方案，為B端業(yè)務(wù)系統(tǒng)及研發(fā)人員提供了堅實的支撐。我們已按照既定標(biāo)準(zhǔn)，沉淀出通用的前端技術(shù)能力，這些能力深入滲透到商家系統(tǒng)、B商城、線下系統(tǒng)等核心B端業(yè)務(wù)領(lǐng)域，從而確保了商家用戶、運營及采銷團隊享有連貫且優(yōu)質(zhì)的體驗。

技術(shù)的發(fā)展是一個不斷探索與實踐的旅程。在此過程中，我們既要不斷學(xué)習(xí)新技術(shù)，也要持續(xù)優(yōu)化和提升現(xiàn)有技術(shù)能力。通過分享我個人的成長經(jīng)歷和技術(shù)實踐，我希望能為在技術(shù)道路上探索的同仁們提供些許啟示與助力。

不論您是初入職場的前端工程師，還是經(jīng)驗豐富的技術(shù)大咖，只要您懷揣對技術(shù)的熱情和對未來的憧憬，我們都熱切期盼您加入我們的團隊。

加入我們吧

在京東，我們注重團隊合作和技術(shù)創(chuàng)新。我們鼓勵每個團隊成員分享自己的技術(shù)經(jīng)驗和心得，通過技術(shù)交流和討論，共同解決問題和挑戰(zhàn)。我們還定期組織技術(shù)培訓(xùn)和分享會，幫助團隊成員不斷提升技術(shù)水平和能力。

審核編輯 黃宇