可復(fù)制的前后端分離開發(fā)模式精選課件

1、可復(fù)制的前后端分離開發(fā)模式Cisco WebEx 杜歡w3cgroupdh20196126WEB開發(fā)方式歷史回顧問題與挑戰(zhàn)迎接挑戰(zhàn)組織結(jié)構(gòu)上的前后端分離F2E & SDE改變的意義開發(fā)模式上的前后端分離合理的開發(fā)流程Yahoo!的分離開發(fā)經(jīng)驗全新的思想-可復(fù)制的前后端分離開發(fā)模式驗證與實踐議題WEB開發(fā)方式歷史回顧組織結(jié)構(gòu)業(yè)務(wù)管理開發(fā)甲乙丙丁開發(fā)主管技能數(shù)據(jù)庫服務(wù)端客戶端開發(fā)流程(單項目)業(yè)務(wù)管理開發(fā)甲乙丙丁開發(fā)主管客戶需求數(shù)據(jù)庫設(shè)計服務(wù)端編程客戶端頁面開發(fā)流程(多項目)業(yè)務(wù)管理開發(fā)甲乙丙丁開發(fā)主管客戶需求數(shù)據(jù)庫服務(wù)端客戶端客戶需求客戶需求數(shù)據(jù)庫服務(wù)端客戶端數(shù)據(jù)庫服務(wù)端客戶端迎接挑戰(zhàn)如何降低招

2、聘成本？如何提高項目質(zhì)量？如何完善開發(fā)資源分配？如何提高企業(yè)的專業(yè)形象？如何為員工提供技能升級的空間？如何為員工提供更好的職業(yè)規(guī)劃指引？組織結(jié)構(gòu)上的前后端分離F2E & SDEF2EFront End Engineer泛指WEB前端開發(fā)SDEServer Develop Engineer泛指WEB后端開發(fā)開發(fā)的組織結(jié)構(gòu)重組推薦的內(nèi)部組織結(jié)構(gòu)組織結(jié)構(gòu)Team LeaderTechnic LeaderTeam member企業(yè)提高生產(chǎn)力提高項目品質(zhì)降低招聘成本提升專業(yè)形象員工做自己想做的事具備成為領(lǐng)域內(nèi)專家的基礎(chǔ)獲得更為清晰的職業(yè)規(guī)劃路線改變的意義開發(fā)模式上的前后端分離明確的需求合理的開發(fā)流程F2

3、E前端SDE后端整合測試QA測試項目發(fā)布變動的需求轉(zhuǎn)換成明確的需求非緊急，重大變動的部分可以版本更新的方式進行處理制定適合的“需求更改”流程合理的開發(fā)流程PHPMaple System + PHP存在的問題在頁面中找到要替換的假數(shù)據(jù)有點困難，需要“淡定”經(jīng)常弄丟HTML中的字符、引號、結(jié)束符等等SDE表示“壓力很大”SDE套頁后的頁面拿到前端跑不起來QA需要等到后端全部弄好后才能開始測試Yahoo!的分離開發(fā)經(jīng)驗全新的思想可復(fù)制的前后端分離開發(fā)模式適合任何后端語言的分離開發(fā)模式JAVAPHPASP.NET思想核心指令引入JS的I18N資源文件頁面中調(diào)用該指令后，應(yīng)該輸出如下代碼:“en_US”

4、 應(yīng)該由該指令自動識別客戶端語言如果站點允許用戶選擇“語言”，則以此為準(zhǔn)指令實現(xiàn)頁面中輸出的I18N信息該指令應(yīng)該從相應(yīng)的i18n屬性文件中取到key為”feed.userinfo”的值，如果支持參數(shù)形式，則可以將參數(shù)傳遞過去，支持多參數(shù)以數(shù)組形式的傳遞，如：arguments=”a”,”b”,”c”前端Mock環(huán)境時將只有一個模擬i18n文件（每種語言一個）例如，i18n資源中有: feed.userinfo=0s Info那么，調(diào)用該指令后應(yīng)該輸出: Charlies Info指令實現(xiàn)業(yè)務(wù)數(shù)據(jù)的訪問“name” 取到的數(shù)據(jù)將賦值給它，以便在后面可以通過它來訪問取到的數(shù)據(jù)“param” 該s

5、ervice需要用到的參數(shù)“service” 在前端mock環(huán)境下，它會去讀取對應(yīng)的mockdata/biz/feed/feed_list.json 這個文件，在真實環(huán)境中，它由后端對該指令接口的具體實現(xiàn)去提供真實數(shù)據(jù)，service和params將傳遞進去。指令實現(xiàn)通過AJAX訪問業(yè)務(wù)數(shù)據(jù)bizcall.ext.do, .php, .asp(x)所有通過AJAX訪問業(yè)務(wù)數(shù)據(jù)的請求都指向到同一個bizCall.ext, 發(fā)送一個字段:字段名:bizcall字段值:name:“feed”, service:“feed.feed_list”, params:pageSize:10,pageInde

6、x:0對后端來講, 他們?nèi)匀豢梢允褂?easySC.bizData 來處理, 對前端來講, 他們的假數(shù)據(jù)不需要編寫多份.提示: 前端對業(yè)務(wù)數(shù)據(jù)訪問的AJAX Call可以封裝為一個通用方法，如 “bizCall”指令實現(xiàn)環(huán)境數(shù)據(jù)訪問“key” 在前端開發(fā)的mock環(huán)境中，應(yīng)該匹配到前端模擬的環(huán)境假數(shù)據(jù)文件中的 “currentuser.username” ，在真實環(huán)境中，則由后端對該指令接口的具體實現(xiàn)去提供真實數(shù)據(jù)，key將傳遞進去。“name” 取到的對應(yīng)KEY的返回值，如: “Charlie Du”，可以在后面的代碼中使用指令實現(xiàn)“指令”，可以由任何語言進行實現(xiàn)“指令”設(shè)計思想:“指令”在

7、前端mock環(huán)境中取假數(shù)據(jù)“指令”在真實環(huán)境中取真實數(shù)據(jù)環(huán)境切換由開關(guān)控制指令實現(xiàn)業(yè)務(wù)數(shù)據(jù)格式需要由前后端共同約定數(shù)據(jù)接口status:“SUCCESS|FAILURE”,message:“當(dāng)前請求的情況資訊”,result:“返回值, 可以是任何數(shù)據(jù)類型, 比如 String, Array, Object, 需要前后端一起約定”環(huán)境數(shù)據(jù)格式需要由前后端共同約定，后面的注釋可以由后端同事補齊，用于后端在真實環(huán)境中取數(shù)據(jù)時可以明確數(shù)據(jù)出處（比如，來自Session或Cookie）。數(shù)據(jù)接口rootpath:“/”, skinpath:“/resource/skin_default/”,jspat

8、h:“/resource/js/”, currentuser.cred: “U1U7EXG5”, /*數(shù)據(jù)出處*/currentuser.username:“Charlie Du” /*備注信息*/前端模擬假數(shù)據(jù)文件結(jié)構(gòu)數(shù)據(jù)接口表單數(shù)據(jù)約定Action URLItems NameSubmit Method鏈接URL、參數(shù)約定數(shù)據(jù)接口所有這些約定最終需要形成“數(shù)據(jù)接口文檔”數(shù)據(jù)接口Data Interface SpecificationXXX ProjectVersion:0.1F2E Owner:Charlie DuSDE Owner:Bo Song2019/10/09驗證與實踐分離框架EasySCEasy Separate and Cooperate它是一個簡易的前后端分離框架基于可復(fù)制的前后端分離開發(fā)模式思想，JAVA + Freemarker的簡單實現(xiàn)分離框架EasySCHTTP ServerEasySC Framework前端環(huán)境真實環(huán)境實現(xiàn)接口BizDataEnvDataI18NI18NJS分離框架EasySC分離框架EasySC分離框架EasySCModule: current-list分離框架EasySCmstarWEB-INFclassesp