【本文系ITA1024原創(chuàng)首發(fā)踊谋，轉(zhuǎn)載或節(jié)選內(nèi)容前需獲授權(quán)（授權(quán)后一周以后可以轉(zhuǎn)載）隔显，并在文章開(kāi)篇注明：本文轉(zhuǎn)載自ITA1024前端技術(shù)專題月分享實(shí)錄秧骑，微信公眾號(hào)ita1024k】
2016年3月19日材义，由互聯(lián)網(wǎng)技術(shù)聯(lián)盟（ITA）舉辦的1024前端技術(shù)峰會(huì)赏寇，在中關(guān)村WEPAC盛大舉辦！
400+位經(jīng)驗(yàn)豐富的前端工程師共同參與磨隘，是一場(chǎng)業(yè)內(nèi)最頂級(jí)講師陣容的前端技術(shù)峰會(huì)缤底，而且，這是一場(chǎng)不落幕的峰會(huì)番捂，因?yàn)?月開(kāi)始的每一周个唧，都有線上的分會(huì)場(chǎng)如期分享著各個(gè)一線互聯(lián)網(wǎng)公司在前端技術(shù)方面的最佳實(shí)踐。
58同城資深前端架構(gòu)師劉浩源分享話題：前后端分離開(kāi)發(fā)模式實(shí)踐设预。
如下是1024前端技術(shù)峰會(huì)上徙歼，劉浩源的分享實(shí)錄。
大家好！我是劉浩源魄梯，在58同城做了將近五年的FE桨螺，現(xiàn)在在技術(shù)委員會(huì)負(fù)責(zé)FE技術(shù)支線。
我 今天分享的主題是前后端分離開(kāi)發(fā)模式酿秸。這個(gè)概念是三四年前出現(xiàn)灭翔，可能大公司出現(xiàn)的會(huì)更早一些，就是所謂大前端的開(kāi)發(fā)模式≡噬龋現(xiàn)在有不少公司已經(jīng)在做缠局，特別是 大型公司已經(jīng)在做了。58——當(dāng)時(shí)在我來(lái)58考润，是在2012年——那邊開(kāi)發(fā)模式還不是大型公司的開(kāi)發(fā)模式狭园，所以我們一直在推進(jìn)這個(gè)事，去年有一些成果糊治，接 下來(lái)的時(shí)間唱矛，我會(huì)把技術(shù)相關(guān)東西摘出來(lái)，給大家介紹一下這個(gè)事情怎么推進(jìn)的井辜。
大家看一下流程圖——模版開(kāi)發(fā)現(xiàn)狀——大部分FE工作狀態(tài)就是這樣绎谦。
首 先FE是一條工作線，那邊RD是另外一條粥脚；一開(kāi)始交給UI做設(shè)計(jì)圖出來(lái)窃肠，然后是FE人進(jìn)入，同時(shí)RD做數(shù)據(jù)庫(kù)設(shè)計(jì)和代碼刷允；等到RD需要做模塊的時(shí)候會(huì)把 FE的開(kāi)發(fā)結(jié)果冤留，HTML拿過(guò)去，做頁(yè)面組裝树灶；組裝好之后那邊跟自己的后端進(jìn)行聯(lián)調(diào)纤怒，這個(gè)過(guò)程當(dāng)中會(huì)出現(xiàn)很多問(wèn)題，因?yàn)镠TML是我們做的天通，F(xiàn)E做的不太 關(guān)注頁(yè)面邏輯什么樣泊窘，數(shù)據(jù)什么樣，我們不會(huì)關(guān)注到實(shí)際數(shù)據(jù)庫(kù)里到底是5位還是6位像寒，還是更多烘豹。這時(shí)聯(lián)調(diào)就有很多BUG，就從RD聯(lián)調(diào)又回來(lái)诺祸，找到FE幫他 們調(diào)HTML吴叶，甚至于如果我們隨便調(diào)又會(huì)跟UI出的結(jié)果還不太一樣，還得往上倒騰讓UI重新給出設(shè)計(jì)等等序臂。等RD自測(cè)聯(lián)調(diào)完了，提測(cè)，所有輸出的結(jié)果有問(wèn) 題都會(huì)找到FE幫助處理這些問(wèn)題奥秆，甚至對(duì)測(cè)試人員來(lái)說(shuō)是如何確認(rèn)RD失誤還是FE失誤逊彭，測(cè)試很難做到。測(cè)試完了發(fā)現(xiàn)作為FE构订，我們上線的時(shí)候侮叮，我們不會(huì)上 模版，我們FE上線上JS悼瘾、CSS囊榜，要等到等模版上線之后服務(wù)端重啟完成才能上，提前上就可能引起舊代碼出現(xiàn)問(wèn)題亥宿。
整個(gè)開(kāi)發(fā)過(guò)程中FE雖然是一條工作線卸勺，但是這條工作線絕大部分工作是附屬到RD工作線上，并不是真正獨(dú)立的開(kāi)發(fā)人員烫扼。這樣的開(kāi)發(fā)現(xiàn)狀就是有一些地方是大家都不爽的曙求，并不只是FE覺(jué)得不爽的。
首 先第一點(diǎn)人員項(xiàng)目多映企，周期長(zhǎng)悟狱，成本大。哪怕頁(yè)面上很簡(jiǎn)單文案的修改堰氓，都不會(huì)涉及到數(shù)據(jù)結(jié)構(gòu)挤渐，邏輯結(jié)構(gòu)的東西，都得UI出圖双絮，F(xiàn)E切圖浴麻，之后給RD，RD給 完整開(kāi)發(fā)流程掷邦，F(xiàn)E這邊相對(duì)開(kāi)發(fā)流程會(huì)比RD簡(jiǎn)單很多白胀，快捷性好很多。但是即使是一個(gè)文字的修改抚岗，現(xiàn)在也必須RD來(lái)或杠，由原本FE+測(cè)試就搞定的項(xiàng)目，還一 定要RD也進(jìn)來(lái)宣蔚，還把RD相關(guān)所有的管理流程都加進(jìn)來(lái)才能完成向抢。這樣的話，特別是產(chǎn)品和運(yùn)營(yíng)相關(guān)的人員就覺(jué)得非常不可理解了胚委。
第 二點(diǎn)專業(yè)性錯(cuò)配挟鸠，成就感歸零。FE是專業(yè)的亩冬，我做HTML是專業(yè)的艘希，但是我工作結(jié)果并不是由我最終放在線上硼身，對(duì)于RD來(lái)說(shuō)，他們可能對(duì)HTML并不算專 業(yè)覆享，只是附屬技能佳遂，好的一點(diǎn)可能對(duì)HTML了解，做的好模版結(jié)構(gòu)撒顿，了解模版里的標(biāo)簽涵義丑罪；但是大部分RD都不在乎這個(gè)東西。對(duì)于RD來(lái)說(shuō)就是模版上改一個(gè) 文字要耗費(fèi)開(kāi)發(fā)測(cè)試上線流程走一遍凤壁，對(duì)他來(lái)說(shuō)也是沒(méi)有任何成就感的吩屹，他很不愿意的。
第三點(diǎn)FE的項(xiàng)目歸屬感 過(guò)低拧抖。我們經(jīng)常出現(xiàn)一個(gè)什么問(wèn)題煤搜？就是兩周前或者三周前把一個(gè)運(yùn)營(yíng)的頁(yè)面切完了，RD在排期中徙鱼，等他們兩三周后開(kāi)始拿這個(gè)頁(yè)面套模塊時(shí)出問(wèn)題了宅楞，甚至更惡 劣一點(diǎn)產(chǎn)品跟RD說(shuō)要改什么，改完之后不通知FE袱吆，上線前四五個(gè)小時(shí)說(shuō)這地兒不對(duì)厌衙，幫我改一下，F(xiàn)E兩三周前做的東西绞绒，中間有變化我們不知道婶希，拿過(guò)來(lái)直接 蒙了，沒(méi)法做蓬衡。因?yàn)閷?duì)于RD來(lái)說(shuō)在剛才那個(gè)流程圖里喻杈，RD是核心流程，管控項(xiàng)目的絕對(duì)進(jìn)度狰晚，對(duì)產(chǎn)品來(lái)說(shuō)就會(huì)催著RD筒饰，跟RD說(shuō)有沒(méi)有時(shí)間，有沒(méi)有開(kāi)始做壁晒， 是不是有問(wèn)題瓷们，但是他不會(huì)跟FE說(shuō)這個(gè)事，F(xiàn)E是被邊緣化的秒咐，我們很難說(shuō)管控一些事情谬晕。
最后一點(diǎn)前面這些東 西結(jié)果就是FE在團(tuán)隊(duì)里，特別是小公司携取，在一個(gè)公司切三年頁(yè)面攒钳，換一家公司再切三年頁(yè)面，我們不會(huì)了解這個(gè)頁(yè)面上這個(gè)區(qū)域放的是什么雷滋，這個(gè)價(jià)格和某一個(gè)產(chǎn) 品幾種價(jià)格不撑，這互相之間的關(guān)系是什么文兢。產(chǎn)品也不會(huì)告訴你，他只是告訴UI告訴你我放三個(gè)價(jià)格燎孟，交給FE切禽作，切了給RD，RD清楚某個(gè)產(chǎn)品會(huì)有6個(gè)價(jià)格揩页，但 是有可能會(huì)有復(fù)雜的地方，比方說(shuō)進(jìn)價(jià)是一個(gè)烹俗，賣價(jià)是一個(gè)爆侣，產(chǎn)品業(yè)務(wù)員可能又會(huì)很多個(gè)價(jià)格，但對(duì)FE來(lái)說(shuō)不了解這些幢妄，我們對(duì)業(yè)務(wù)流程合理不合理沒(méi)有發(fā)言權(quán) 的兔仰。
整個(gè)結(jié)果是這樣的，那怎么辦呢蕉鸳？——前后端重新分工乎赴。
現(xiàn) 在的這樣分工，背景是什么潮尝？我剛到58的時(shí)候榕吼，前端工作組里邊大概20個(gè)人，只有三個(gè)做FE的勉失，剩下全部是java羹蚣，我去了這個(gè)部門也是一段時(shí)間之后，發(fā) 現(xiàn)這個(gè)所謂前端跟服務(wù)的區(qū)分乱凿，是RD內(nèi)的前端顽素，前端工作就是做數(shù)據(jù)組裝，后端就是提供數(shù)據(jù)服務(wù)徒蟆，搜索服務(wù)胁出，提供數(shù)據(jù)庫(kù)的服務(wù)，這是后端段审。而它的前端是RD 前端全蝶。我進(jìn)去之后FE人員非常少，對(duì)于這樣的業(yè)務(wù)工程流程勉強(qiáng)可以認(rèn)可的戚哎，F(xiàn)E人員不足裸诽，當(dāng)時(shí)那批RD人員相對(duì)素質(zhì)高一點(diǎn)，因?yàn)橐恢痹谧鲞@些事型凳，所以他們 的HTML和業(yè)務(wù)流程都比較熟丈冬。
但是現(xiàn)在58趕集集團(tuán)已經(jīng)大不一樣了，現(xiàn)在RD人員是幾百的概念甘畅，三四百了埂蕊，現(xiàn)在業(yè) 務(wù)線好幾條往弓，前端業(yè)務(wù)組已經(jīng)不是一個(gè)了，按產(chǎn)品線分5個(gè)大業(yè)務(wù)線蓄氧，里面還有各種各樣的分支業(yè)務(wù)函似，F(xiàn)E人員也大不一樣，F(xiàn)E光是我們這邊UBU事業(yè)部已經(jīng) 70個(gè)人喉童。在這個(gè)階段下撇寞，剛才那個(gè)業(yè)務(wù)工作流程就完全沒(méi)有什么合理性了，14年底我們對(duì)這個(gè)問(wèn)題重新進(jìn)行了考量堂氯，最后決定——重新分工蔑担。
我 們把傳統(tǒng)三層結(jié)構(gòu)View層拿過(guò)來(lái)，再好好的觀察一下咽白，對(duì)于FE來(lái)說(shuō)啤握，F(xiàn)E本身也可以分這三層，但是這里列得更多是后端晶框，因?yàn)槲覀儾块T是從后端部門派生出 來(lái)的排抬。RD負(fù)責(zé)Controller，Model是專門的數(shù)據(jù)服務(wù)授段，F(xiàn)E對(duì)HTML的控制是很弱的蹲蒲，所以我們想把View接過(guò)來(lái)。
這 是經(jīng)過(guò)實(shí)際調(diào)研之后改進(jìn)出來(lái)的一個(gè)新的工作流程畴蒲，再往前是產(chǎn)品悠鞍，產(chǎn)品在這步會(huì)分兩邊傳達(dá)需求，這邊給UI做圖片設(shè)計(jì)模燥，給到FE之后咖祭，靜態(tài)開(kāi)發(fā)之前需要跟 RD進(jìn)行數(shù)據(jù)格式約定。FE現(xiàn)在不僅要知道頁(yè)面的區(qū)域放一個(gè)價(jià)格，還要知道這個(gè)價(jià)格哪來(lái)的。這個(gè)數(shù)據(jù)格式的設(shè)計(jì)會(huì)出現(xiàn)一個(gè)問(wèn)題急灭，就是怎么約定才能讓雙方認(rèn) 可？
我們后邊會(huì)講浩嫌，數(shù)據(jù)格式完了之后FE做靜態(tài)開(kāi)發(fā)，樣子渲染出來(lái)补胚，之后模塊開(kāi)發(fā)又要涉及到環(huán)境搭建码耐，這是這邊的工 作路線。那邊RD數(shù)據(jù)設(shè)計(jì)之后有自己的代碼結(jié)構(gòu)設(shè)計(jì)溶其，業(yè)務(wù)邏輯開(kāi)發(fā)骚腥。兩邊工作之后進(jìn)行數(shù)據(jù)聯(lián)調(diào)，F(xiàn)E做自己的模塊提測(cè)瓶逃，debug和上線束铭，然后RD做他們 的測(cè)試和上線廓块。
FE和RD只有兩個(gè)地方是必須一起工作的，一個(gè)是數(shù)據(jù)格式約定契沫，另外一個(gè)是聯(lián)調(diào)带猴，但是這是一個(gè)比較大 的或者比較常規(guī)的日常需求才需要的工作路徑。而如果是一個(gè)偏向于運(yùn)營(yíng)的項(xiàng)目的話懈万，這個(gè)工作路徑可能所有RD相關(guān)的東西就被過(guò)濾掉了拴清，我們就是靜態(tài)頁(yè)面，不 需要RD幫我們上線钞速，我們文案修改贷掖，圖片修改，路徑修改渴语，版本變更不需要RD，F(xiàn)E直接走我們這邊就可以了昆咽。
調(diào)研之后驾凶，我們討論了一下，包括跟RD人員進(jìn)行討論掷酗，最后決定試一下调违，這個(gè)事情在58也是一個(gè)比較大的業(yè)務(wù)開(kāi)發(fā)模式的變化。
這 樣做有什么好處呢泻轰？RD和FE專業(yè)性都可以了技肩，RD就負(fù)責(zé)把后面數(shù)據(jù)服務(wù)提供的數(shù)據(jù)拼裝成需要的內(nèi)容就行了，F(xiàn)E把HTML模塊拿過(guò)來(lái)浮声，我們負(fù)責(zé)HTML 格式虚婿。個(gè)人成就感上升，對(duì)于FE需要新掌握一門技能泳挥，而且需要我們掌控到到一部分服務(wù)器端的知識(shí)然痊，RD就更多會(huì)把他們的注意力和溝通內(nèi)容放到數(shù)據(jù)結(jié)構(gòu)拼裝 上面。現(xiàn)在FE項(xiàng)目參與度真的提高了屉符，現(xiàn)在所有的產(chǎn)品或者運(yùn)營(yíng)做一個(gè)項(xiàng)目的時(shí)候不會(huì)先找RD剧浸，而是先找FE。個(gè)人發(fā)展就有了新的可能矗钟，對(duì)于RD來(lái)說(shuō)唆香，每天 應(yīng)付產(chǎn)品和運(yùn)營(yíng)的文字性工作肯定是不愿意的，對(duì)FE來(lái)說(shuō)吨艇，現(xiàn)在真正開(kāi)始做一個(gè)程序員了躬它，這樣才有自己提升的空間。
我們跟RD那邊相關(guān)人員溝通之后就要推進(jìn)這個(gè)事秸应，第一個(gè)難點(diǎn)就是RD改開(kāi)發(fā)模式虑凛。
舊的開(kāi)發(fā)模式是這樣碑宴，因?yàn)槲覀兪莏ava框架，后端有純后端的代碼桑谍，這些代碼會(huì)訪問(wèn)后端的數(shù)據(jù)庫(kù)服務(wù)延柠，訪問(wèn)緩存的東西，訪問(wèn)完之后通過(guò)這邊代碼把數(shù)據(jù)結(jié)構(gòu)拼 裝出來(lái)锣披，放到context里贞间，這是java的關(guān)鍵詞（其他的php或者。Net也有類似東西）雹仿，從程序到模版這段要推送數(shù)據(jù)過(guò)來(lái)到模版增热。
模 版再對(duì)數(shù)據(jù)對(duì)象進(jìn)行渲染，同時(shí)調(diào)用傳過(guò)來(lái)的工具方法胧辽，它還可以做一些其它的事情峻仇。但是這個(gè)開(kāi)發(fā)模式肯定是有問(wèn)題的，第一雖然context有數(shù)據(jù)內(nèi)容傳過(guò) 來(lái)邑商，但是并不太關(guān)注數(shù)據(jù)模型摄咆，根據(jù)頁(yè)面迭代部署新的頁(yè)面。當(dāng)一個(gè)小型項(xiàng)目人断，比如一個(gè)一次性或者很短時(shí)間要做完的項(xiàng)目沒(méi)有長(zhǎng)時(shí)間維護(hù)需求的項(xiàng)目這樣可能還 好吭从，但是像58一個(gè)列表頁(yè)維護(hù)了四五年，RD換了好幾撥恶迈，模版改了好幾版涩金，會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題——后做的人不知道前面的人有沒(méi)有把對(duì)象推送到頁(yè)面上，為了快速 進(jìn)行功能迭代就會(huì)重新把對(duì)象推送一下暇仲，數(shù)據(jù)結(jié)構(gòu)就會(huì)越來(lái)越混亂步做，模塊這曾代碼結(jié)構(gòu)會(huì)越來(lái)越雜亂。我們FE幫他們整理過(guò)模版熔吗，幾乎30%都是無(wú)用的辆床。
那 怎么辦呢？這時(shí)FE對(duì)RD開(kāi)發(fā)有規(guī)范要求桅狠，要求你這樣做讼载，logic這點(diǎn)我們FE不關(guān)注，但context給我們的第一要有完整的數(shù)據(jù)結(jié)構(gòu)樹(shù)中跌，不再是根據(jù) 產(chǎn)品今天提一個(gè)需求咨堤，明天提一個(gè)需求，可以隨便變漩符，隨便放到這上面一喘，需要根據(jù)頁(yè)面的功能提供什么內(nèi)容，規(guī)則格式化的結(jié)構(gòu)樹(shù)出來(lái)，而且這個(gè)結(jié)構(gòu)樹(shù)如果我們通 過(guò)URL訪問(wèn)傳特定參數(shù)凸克，就可以不通過(guò)模塊渲染呈現(xiàn)HTML頁(yè)面议蟆，還可以直接渲染出一個(gè)JSON數(shù)據(jù)結(jié)構(gòu)，可以直觀的看到拼裝的數(shù)據(jù)是不是正確萎战。
第 二咐容，在實(shí)際應(yīng)用當(dāng)中發(fā)現(xiàn)可能還是有一些特殊的方法還是需要RD幫我們封裝，但是這個(gè)封裝不太希望用對(duì)象的方法蚂维，最常見(jiàn)的戳粒，字符串的處理方法，不太希望直接 調(diào)用字符串類型的方法虫啥，更多希望是一個(gè)單獨(dú)的過(guò)程方法蔚约。這樣做之后FE和RD通過(guò)數(shù)據(jù)結(jié)構(gòu)樹(shù)就可以完成了解到數(shù)據(jù)結(jié)構(gòu)是什么樣的，有沒(méi)有重復(fù)涂籽，有沒(méi)有變化 是一目了然苹祟，而且現(xiàn)在很明確跟RD區(qū)分出功能，模版上面只負(fù)責(zé)數(shù)據(jù)顯示和只會(huì)有數(shù)據(jù)顯示相關(guān)的代碼评雌、相關(guān)的判斷苔咪，不能再給我頁(yè)面上寫調(diào)用一個(gè)對(duì)象方法，再 調(diào)后端的服務(wù)拿數(shù)據(jù)回來(lái)柳骄，這是不允許的，一定要拼裝好一個(gè)完整的context數(shù)據(jù)結(jié)構(gòu)過(guò)來(lái)給我好做渲染箕般。
這個(gè)為什 么是難點(diǎn)耐薯？這種開(kāi)發(fā)模式對(duì)RD來(lái)說(shuō)工作量非常大的，它要完整把后端代碼整理一遍丝里，而之前開(kāi)發(fā)模式RD是不太需要關(guān)注context里面已經(jīng)有的曲初，只需要關(guān) 注當(dāng)前需求過(guò)來(lái)，我需要取什么數(shù)據(jù)杯聚，模塊需要顯示什么數(shù)據(jù)臼婆，只要這兩邊能對(duì)上就可以了，不會(huì)關(guān)注有沒(méi)有重復(fù)獲取幌绍，有沒(méi)有效率問(wèn)題颁褂。之前很多RD不會(huì)關(guān)注這 個(gè)，現(xiàn)在他們是一定要保證數(shù)據(jù)結(jié)構(gòu)的合理性傀广，如果發(fā)現(xiàn)別人已經(jīng)訪問(wèn)過(guò)某個(gè)服務(wù)颁独，你不能再做重復(fù)訪問(wèn)，這樣他們做這個(gè)事一開(kāi)始很痛苦伪冰，但這個(gè)事只要做完一遍 他們就非常輕松了誓酒，而我們接下來(lái)的事情剛剛開(kāi)始。
難點(diǎn)二贮聂、FE開(kāi)發(fā)模版靠柑。
第 一就是模版新的知識(shí)寨辩，對(duì)于FE來(lái)說(shuō)這些模版的語(yǔ)法本身是全新的知識(shí)，可能會(huì)有愿意學(xué)習(xí)的同學(xué)會(huì)做這方面的學(xué)習(xí)歼冰，但是對(duì)大部分FE來(lái)說(shuō)模版語(yǔ)法是全新的知 識(shí)靡狞，需要重新學(xué)習(xí)。我當(dāng)年學(xué)的時(shí)候是我一個(gè)前輩給我一個(gè)3頁(yè)的WORD文檔停巷，但是因?yàn)槲沂呛蠖顺錾硭Ｈ粒瑢?duì)我還是可以理解的。但是對(duì)FE畔勤，特別沒(méi)有接觸過(guò)很多 后端知識(shí)的FE來(lái)說(shuō)蕾各，還是需要一點(diǎn)時(shí)間來(lái)學(xué)習(xí)的，花點(diǎn)精力才能進(jìn)入狀態(tài)的庆揪。
第二點(diǎn)才是真正阻礙FE進(jìn)入模版 的工作式曲，就是開(kāi)發(fā)環(huán)境的搭建。我不知道別的公司缸榛，大家用PHP很好吝羞，現(xiàn)在全智能化很好，但是在58的java環(huán)境搭建内颗，對(duì)于FE來(lái)說(shuō)我工作的時(shí)候如果要搭 建一個(gè)java開(kāi)發(fā)環(huán)境钧排，做了模版解析，我的機(jī)器上面就會(huì)跑不動(dòng)均澳。因?yàn)槲乙话闱闆r下會(huì)開(kāi)一個(gè)ps切頁(yè)面的工具恨溜，再開(kāi)一個(gè)eclipse、再開(kāi)一個(gè)HTML 的編輯器找前，一般的工作的電腦就肯定扛不住了糟袁。
此外，對(duì)58來(lái)說(shuō)大部分的數(shù)據(jù)存儲(chǔ)都不是簡(jiǎn)單的數(shù)據(jù)庫(kù)躺盛，而是后端大量的 服務(wù)项戴，配置環(huán)境就非常非常復(fù)雜。對(duì)于58成熟的RD來(lái)說(shuō)槽惫，招的java開(kāi)發(fā)人員大概需要兩到三天進(jìn)行環(huán)境部署周叮，而且很多情況下java環(huán)境下現(xiàn)在對(duì)模版開(kāi) 發(fā)并不算太友好。當(dāng)時(shí)為了推行我們這個(gè)想法躯枢，開(kāi)發(fā)環(huán)境搭建花了很多時(shí)間则吟，想了很多辦法，最后怎么辦呢锄蹂？我們發(fā)現(xiàn)一個(gè)好東西node.js氓仲，當(dāng)時(shí)找到了淘寶 開(kāi)源的項(xiàng)目Velocityjs，我們搭建了本地的開(kāi)發(fā)環(huán)境，主要做什么事呢敬扛？
第一點(diǎn)最基礎(chǔ)可以模擬數(shù)據(jù)環(huán)境晰洒，把 RD給我們實(shí)現(xiàn)的數(shù)據(jù)結(jié)構(gòu)和方法可以拿node.js重新實(shí)現(xiàn)一遍，這樣子在開(kāi)發(fā)過(guò)程當(dāng)中可以不做數(shù)據(jù)聯(lián)調(diào)啥箭，只需要按照一開(kāi)始跟RD規(guī)定好的數(shù)據(jù)結(jié)構(gòu)就可 以做我們的模版開(kāi)發(fā)谍珊。此外，我們還通過(guò)某個(gè)參數(shù)變化可以把RD輸出的HTML變成純JSON數(shù)據(jù)結(jié)構(gòu)的輸出急侥，我們就可以拿node.js直接連那個(gè)頁(yè)面砌滞， 這時(shí)候就可以做到使用線上數(shù)據(jù)的開(kāi)發(fā)，看模版是不是正常的坏怪。我也挺推薦這個(gè)東西的贝润，我知道有一些公司沒(méi)有辦法就跟淘寶一樣寫自己的node下的模塊解析， 需要注意一點(diǎn)铝宵，各種各樣的模版規(guī)則是脫離語(yǔ)言的打掘，極端情況下可以在java實(shí)現(xiàn)一個(gè)模版開(kāi)發(fā)模式，也可以在PHP下模版解析鹏秋，我們能夠找到開(kāi)源就用開(kāi)源尊蚁， 開(kāi)源找不到自己寫一套，這是有點(diǎn)難度的侣夷。
最后一個(gè)難點(diǎn)横朋，對(duì)于FE來(lái)說(shuō)是測(cè)試。
有 的公司好一點(diǎn)會(huì)提供比對(duì)工具百拓，管理工具叶撒，只要保證能順利放到線上去就可以了。我們很少直接跟測(cè)試人員做溝通耐版。但是現(xiàn)在需要深入介入到測(cè)試流程，需要有單元 測(cè)試压汪，保證最后代碼開(kāi)發(fā)出來(lái)之后粪牲，測(cè)試那邊bug率比較低。但我們之前模版開(kāi)發(fā)是交給RD的止剖，我們不太關(guān)心這個(gè)腺阳，我們更多幫助RD改bug。我們做推進(jìn)項(xiàng) 目的時(shí)候穿香，這個(gè)地方也是遇到了一些坑亭引，主要是人員素質(zhì)方面，F(xiàn)E之前很少有這樣的機(jī)會(huì)跟測(cè)試人員一步一步跟進(jìn)測(cè)試皮获，甚至有人測(cè)試工具看不懂焙蚓，或者跟測(cè)試人 員要描述清情況，這個(gè)測(cè)試環(huán)境的情況，怎么去部署都描述不清楚购公。
這是一個(gè)解耦前后的效果萌京。
我 們?nèi)ツ昊舜蟀肽暝贛站嘗試進(jìn)行了開(kāi)發(fā)模式的推進(jìn)，開(kāi)發(fā)效率整體提升了30%宏浩，整個(gè)排期開(kāi)始一看就很明顯知残，大的項(xiàng)目提升40%。M房產(chǎn)業(yè)務(wù)線解耦前改一次 版花24個(gè)工作日比庄，14年之前的一次改版求妹，之后解耦后新工作方式13.5工作日，整個(gè)效率提升43.75%佳窑，幾乎是腰斬制恍。小項(xiàng)目，M招聘紅包华嘹，開(kāi)發(fā)效率提 升30%吧趣。日常運(yùn)營(yíng)和產(chǎn)品維護(hù)就不再需要RD介入了，所有跟數(shù)據(jù)結(jié)構(gòu)耙厚，數(shù)據(jù)變化不相關(guān)的需求就不要RD了强挫，沒(méi)他們事——RD其實(shí)也很高興，58的RD有很 多人都有個(gè)人理想薛躬，技術(shù)理想俯渤，他們也不想整天在HTML浪費(fèi)自己的時(shí)間，現(xiàn)在他們絕大部分不用他們幫助了型宝，F(xiàn)E全都做了八匠。實(shí)際上FE上線跟RD上線，從時(shí) 間效率上講趴酣，F(xiàn)E還是要占優(yōu)勢(shì)的梨树，這是毋庸置疑的。
我們把這個(gè)項(xiàng)目做的過(guò)程當(dāng)中和做完之后還發(fā)現(xiàn)了一些附加的效果岖寞。
首 先方案選擇更加合理抡四，以前如果有一個(gè)運(yùn)營(yíng)項(xiàng)目RD實(shí)在排不開(kāi)，我們要給FE做仗谆，產(chǎn)品運(yùn)營(yíng)說(shuō)FE把這事全部搞定行不行指巡，現(xiàn)在純的HTML頁(yè)面要實(shí)現(xiàn)一些純運(yùn) 營(yíng)商的需求應(yīng)該是沒(méi)有任何問(wèn)題的，這點(diǎn)是肯定的隶垮。但是之前因?yàn)镽D時(shí)間沒(méi)有辦法保證藻雪，所以我們做的時(shí)候只能通過(guò)JS跟API服務(wù)器進(jìn)行數(shù)據(jù)交互，這樣頁(yè)面 要發(fā)很多需求狸吞，有一些特殊的功能沒(méi)有辦法實(shí)現(xiàn)的勉耀，比如seo指煎，只能靜態(tài)處理。現(xiàn)在不一樣了瑰排，現(xiàn)在模版在我們手里贯要，數(shù)據(jù)只要是之前有的我就可以用，seo數(shù) 據(jù)想要什么用我就可以直接改椭住，跟著類詳情頁(yè)運(yùn)營(yíng)頁(yè)seo信息可以跟當(dāng)前產(chǎn)品的分類崇渗、地域有很高的相關(guān)性。
第二點(diǎn)可以在模塊上按需執(zhí)行京郑。早先的時(shí)候如果純粹FE做的話宅广，這些東西所有狀態(tài)值這邊都需要考慮到，即使是通過(guò)前面判斷完全不會(huì)存在的dom些举，這邊模版也需要隱藏存在「現(xiàn)在就不需要了，我已經(jīng)能知道這個(gè)模塊上會(huì)顯示哪些户魏，輸出的時(shí)候就可以按需執(zhí)行了驶臊。
第 三種各種優(yōu)化不求人。我的jS和CSS要做升級(jí)叼丑，CSS結(jié)構(gòu)和jS結(jié)構(gòu)要升級(jí)必須找RD关翎，一些圖片一但通過(guò)了cdn服務(wù)器，很難保證所有用戶看到最新圖 片鸠信，如果模版在我這邊纵寝，我就能保證這些。另外RD維護(hù)的HTML中寫的一些代碼是很不專業(yè)的星立，比如說(shuō)簡(jiǎn)單的標(biāo)簽閉合爽茴，空白字符的處理，甚至能找到一些大部 分編輯器看不著的字符绰垂，RD一查兩三天查不出來(lái)室奏，但是現(xiàn)在是我們自己負(fù)責(zé)，處理這些問(wèn)題我們也不用等RD的排期劲装。
最 后一點(diǎn)窍奋，為更完整模塊化開(kāi)發(fā)做準(zhǔn)備。之前酱畅，F(xiàn)E雖然會(huì)負(fù)責(zé)輸出HTML，但是一旦上線管的模塊就只包含JS和CSS江场，HTML上線之后跟我開(kāi)發(fā)內(nèi)容不一樣 了纺酸，里面加一些判斷，循環(huán)之后址否，DOM結(jié)構(gòu)跟我們一開(kāi)始做的不太一樣了餐蔬，所以很難把這三塊真正做到一起處理碎紊，現(xiàn)在可以了，我說(shuō)一個(gè)模塊樊诺，包含的DOM結(jié)構(gòu) 是這樣的仗考，包含的JS和CSS是那樣子的。
回過(guò)頭再看一下解耦之后新的工作流程词爬。解耦這個(gè)事是不是就完成了秃嗜，差不多年前年后推差的不多了，那是不是就徹底完成了顿膨？其實(shí)我們公司推的這個(gè)開(kāi)發(fā)流程僅僅是開(kāi)始锅锨。
FE還可以負(fù)責(zé)哪些事情？
首先恋沃，路由還是在RD手里必搞，現(xiàn)在改變一個(gè)、新增一個(gè)路由配置還是要RD囊咏，還是要java上去解析的恕洲。
其次，邏輯層返回的數(shù)據(jù)是一個(gè)整體梅割，數(shù)據(jù)結(jié)構(gòu)樹(shù)對(duì)雙方是進(jìn)步霜第，但是這個(gè)結(jié)構(gòu)樹(shù)是整體，假設(shè)還是一個(gè)商品詳情頁(yè)炮捧，除了當(dāng)前商品信息具體內(nèi)容之外庶诡，可能還會(huì)有推薦信息、關(guān)聯(lián)信息咆课、廣告位等等末誓，我們?nèi)绻朐谀骋粋€(gè)運(yùn)營(yíng)的情況下，只讀取商品信息的具體內(nèi)容书蚪，我還是得找RD幫忙喇澡。
第三點(diǎn)公共的工具類也還依賴RD，還是模塊殊校。
第四個(gè)最核心的這個(gè)項(xiàng)目還是java項(xiàng)目晴玖，只要是java項(xiàng)目就很難說(shuō)更深入做一些想做的開(kāi)發(fā)和架構(gòu)調(diào)整的事情。
怎么辦为流？我們目前的工作設(shè)想——一個(gè)理想的大前端開(kāi)發(fā)模式呕屎。
我 知道在淘寶、美團(tuán)敬察，其它的一些友商已經(jīng)有一些項(xiàng)目在這么做了秀睛，而且在現(xiàn)階段的開(kāi)發(fā)里面，用這種方式還可能有特殊的收益莲祸。先說(shuō)這個(gè)開(kāi)發(fā)模式是什么樣的蹂安，就是 希望FE能夠用node/php服務(wù)器搭建一個(gè)中間層椭迎，這里四個(gè)功能，第一點(diǎn)是路由田盈，希望有FE能控制的路由配置器或者使用路由配置功能畜号，這樣可以控制一 些東西，比如說(shuō)摩托車和自行車是共同的模版允瞧，當(dāng)要把這兩個(gè)模版拆開(kāi)的時(shí)候就可以把這兩個(gè)路由到不同的模版解析简软。
第二 是參數(shù)解析，現(xiàn)在這個(gè)東西完全是java做的瓷式，我們還是希望FE能夠介入到這個(gè)參數(shù)解析上面去替饿，當(dāng)然這個(gè)參數(shù)處理有可能是全自動(dòng)化的。接下來(lái)是數(shù)據(jù)請(qǐng)求與 拼裝贸典，現(xiàn)在有一些公司在推服務(wù)端的異步化视卢，服務(wù)端開(kāi)發(fā)絕大部分是同步的，比如說(shuō)這個(gè)頁(yè)面對(duì)后端服務(wù)器發(fā)8個(gè)請(qǐng)求廊驼，它是按順序一個(gè)個(gè)發(fā)的据过，不是同時(shí)發(fā)起的， 時(shí)間長(zhǎng)度是疊加的妒挎。
但是現(xiàn)在有一些公司在推異步绳锅，按照需求先發(fā)四個(gè)，根據(jù)回來(lái)的情況酝掩，再發(fā)后面的鳞芙，這樣節(jié)省很大的時(shí) 間等待。但是我希望這種事情最后也是由FE做期虾，數(shù)據(jù)請(qǐng)求也是FE來(lái)做的原朝。最后模版渲染，不管是哪種模版渲染效益都不算高镶苞，我們還是希望FE能夠有權(quán)限管理 HTML的渲染喳坠，能選擇一種比較高的方式渲染，不管是node.js還是其它的方式茂蚓，我們希望FE有自己權(quán)限做這樣的事壕鹉。
這 樣做（搭建中間層）還有一個(gè)好處，如果我們把中間層抹掉換APP聋涨，發(fā)現(xiàn)這個(gè)結(jié)構(gòu)完全可以用的晾浴。這個(gè)中間層跟我們手機(jī)端APP是同樣的一層，后端服務(wù)是可以 共用的牍白，對(duì)一個(gè)大型公司來(lái)說(shuō)這樣做現(xiàn)在可能有風(fēng)險(xiǎn)脊凰，（對(duì)于小公司來(lái)說(shuō)）如果為M端、PC端搭建這樣的服務(wù)器淹朋，IOS笙各、安卓開(kāi)發(fā)的時(shí)候，后端服務(wù)器就可以共 同用的础芍。而傳統(tǒng)的RD的工作杈抢，后退在這個(gè)下面，做復(fù)雜的業(yè)務(wù)服務(wù)仑性，一些頁(yè)面可能很復(fù)雜惶楼，比如一個(gè)發(fā)布頁(yè)信息提交過(guò)來(lái)之后要保存，保存之前會(huì)有大量的校驗(yàn)等 等的诊杆，這些服務(wù)是RD需要做的事情歼捐。而對(duì)于RD來(lái)說(shuō)，這樣難度晨汹，這樣復(fù)雜程度工作才會(huì)是有意義的工作豹储。
一個(gè)完整的模塊結(jié)構(gòu)。
因 為我做FE淘这，專業(yè)FE到現(xiàn)在也沒(méi)多少年剥扣，以前做java。我對(duì)模塊化的概念很重視铝穷，很想在FE這邊能有比較完整的模塊化結(jié)構(gòu)钠怯，那么我們真正FE前端模塊應(yīng) 該是什么樣子的？當(dāng)我把前面的事情都能夠做完的話曙聂，模塊化會(huì)發(fā)現(xiàn)一個(gè)新東西就是大前端下的模塊組成應(yīng)該是什么樣的——一個(gè)完整前端模塊包括數(shù)據(jù)接口配置晦炊、 模版（HTML）、js宁脊、css断国，不管你通過(guò)什么方式，任何HTML模塊真的要跟業(yè)務(wù)邏輯綁在一起是應(yīng)該包含數(shù)據(jù)接口配置朦佩，我這個(gè)模塊要做什么內(nèi)容并思。
模 版的HTML，就是DOM結(jié)構(gòu)是什么樣语稠、js和css有一部分實(shí)現(xiàn)數(shù)據(jù)接口和顯示宋彼，有一部分實(shí)現(xiàn)DOM層變化，這樣才是比較完整的前端模塊仙畦，才能在大型公 司里面输涕，比如房產(chǎn)某一個(gè)頁(yè)面寫了模塊，要在另外一個(gè)頁(yè)面分享模塊慨畸，就必須把所有東西做模塊告訴那邊莱坎，那邊才能夠直接用這個(gè)東西，否則只拿出來(lái)結(jié)構(gòu)就有問(wèn) 題寸士。
這是更超前的想法檐什，大型的模塊配置碴卧，我希望的是由路由規(guī)則，當(dāng)發(fā)現(xiàn)一個(gè)請(qǐng)求符合路由規(guī)則的時(shí)候乃正，后面模 塊是樹(shù)狀模塊結(jié)構(gòu)住册，最后的結(jié)果這個(gè)請(qǐng)求幾乎是半自動(dòng)化全部做完，RD和FE瓮具，RD那邊只需要做復(fù)雜業(yè)務(wù)重新實(shí)現(xiàn)荧飞，如果沒(méi)有的話就現(xiàn)有的這些。通過(guò)解析模塊 之后把模版拼裝出來(lái)名党。js和css也是叹阔，解析模塊就可以把js和css單獨(dú)拿出來(lái)再拼裝好去用。
謝謝大家传睹！
————Q&A————
提問(wèn)：FE和RD之間是有交互的耳幢，以模塊方式交互空間，把數(shù)據(jù)隔開(kāi)蒋歌，數(shù)據(jù)肯定就需要有解析的過(guò)程帅掘，現(xiàn)在交互量上去的話可能會(huì)是一個(gè)瓶頸，遇到這個(gè)問(wèn)題堂油，這個(gè)場(chǎng)景對(duì)所有模塊的場(chǎng)景是通用還是適用哪些修档？
劉 浩源：數(shù)據(jù)量壓力大小的問(wèn)題，58訪問(wèn)量真的很大的府框，數(shù)據(jù)的緩存層不是我們負(fù)責(zé)吱窝，服務(wù)端直接根據(jù)查詢條件或者ID就把之前放的緩存數(shù)據(jù)拿下來(lái)。前端搭建的 服務(wù)器的是不需要重新做保存的迫靖，只是數(shù)據(jù)層保存院峡。其它的數(shù)據(jù)交互量其實(shí)沒(méi)有多大。在我們這邊主要是指的詳情頁(yè)系宜、列表頁(yè)照激。
我講這個(gè)是開(kāi)發(fā)模 式，整個(gè)過(guò)程中沒(méi)有太多涉及到瀏覽器盹牧，是服務(wù)端的東西俩垃。Angular更多是交互層的東西，你要做游戲汰寓，或者富交互的應(yīng)用可以用口柳，但是我這個(gè)是開(kāi)發(fā)模式變 了。根據(jù)不同的路由規(guī)則有滑，一個(gè)FE小組要負(fù)責(zé)80-120個(gè)模版跃闹，不同的分類，加上不同參數(shù)城市匹配過(guò)來(lái)到不同的模版，最后需要的模塊希望 是能夠更復(fù)雜望艺，東西更多的模塊苛秕，這樣才能更滿足需求。
提問(wèn)：公司內(nèi)部對(duì)于這種問(wèn)題找默，前端也是需要版本的控制想帅，這個(gè)怎么突破的？
劉 浩源：解耦之后FE要把自己視為真正的RD啡莉，就要開(kāi)始適應(yīng)做純粹的程序員，要適應(yīng)一些新的工作的規(guī)則旨剥。剛才說(shuō)的這個(gè)開(kāi)發(fā)模式有另外一個(gè)附帶的好處咧欣，這個(gè)是 有爭(zhēng)議的，在大部分情況下轨帜，用這個(gè)開(kāi)發(fā)模式開(kāi)發(fā)的內(nèi)容可以分開(kāi)上線的魄咕，RD和FE可以分開(kāi)上線的，RD可以是舊的數(shù)據(jù)結(jié)構(gòu)蚌父。全部轉(zhuǎn)成新的模式之后哮兰，我FE 要上模版了，如果產(chǎn)品這邊覺(jué)得有一個(gè)短時(shí)間不匹配就接受苟弛，那我可以直接上喝滞，如果產(chǎn)品不認(rèn)可這種不匹配，我們也可以加一些判斷膏秫，判斷一下數(shù)據(jù)結(jié)構(gòu)有沒(méi)有新的 對(duì)象右遭，有的話我就加上去新的HTML結(jié)構(gòu)。當(dāng)然缤削，版本控制也是需要的窘哈，F(xiàn)E是需要重新學(xué)習(xí)的，要真正把自己看成是程序員亭敢。
提問(wèn)：您現(xiàn)在開(kāi)發(fā)模式里面前后短聯(lián)調(diào)之后滚婉，前端跟后端單獨(dú)提測(cè)，前端是模版提測(cè)帅刀，這是什么意思让腹？
劉浩源：開(kāi)發(fā)環(huán)境調(diào)好的模塊部署到測(cè)試環(huán)境颁虐。
提問(wèn)：這不是還是相當(dāng)于得有后臺(tái)數(shù)據(jù)填充到模塊里智末，這不是跟之前開(kāi)發(fā)模式是一樣的，發(fā)布上去之后粥谬，相當(dāng)于模塊跟RD提供的數(shù)據(jù)在一起娇妓。
劉浩源：極端情況下雙方提測(cè)可以分離的像鸡。
提問(wèn)：我理解您的提測(cè)應(yīng)該還是在一條線，而不是單獨(dú)提測(cè)，您意思是測(cè)試在前后端聯(lián)調(diào)之后只估，只提測(cè)前端志群，只提測(cè)后端，兩者是分開(kāi)蛔钙。
劉 浩源：兩個(gè)原因锌云，首先RD提測(cè)不是必須的，這個(gè)需求如果沒(méi)有涉及到數(shù)據(jù)結(jié)構(gòu)的變化吁脱，我是不需要RD提測(cè)的桑涎，可以改。另外一個(gè)極端情況下RD如果時(shí)間安排或 者工期趕不上兼贡，這邊模版可以先上攻冷。這樣有個(gè)好處不會(huì)因?yàn)镽D上線，因?yàn)閖ava服務(wù)器上線相對(duì)要復(fù)雜一點(diǎn)遍希，不會(huì)因?yàn)榈人沁厲|西上線很晚等曼，我今天晚上也等 到兩三點(diǎn)。
