WebAPP開發(fā)模式是傳統(tǒng)Web開發(fā)模式的一項(xiàng)變革，有如下好處：

前后端數(shù)據(jù)接口協(xié)議明確，可以面向接口分別開發(fā)，后端不直接接觸HTML，聯(lián)調(diào)更高效。

WebAPP多采取單頁應(yīng)用模式，頁面變化由JS控制，網(wǎng)絡(luò)中僅傳遞動(dòng)態(tài)數(shù)據(jù)，速度快。

但WebAPP模式也有它的問題，對于搜索引擎不夠友好使得它前臺(tái)展示型頁面開發(fā)，所以兩種架構(gòu)會(huì)長期并存。

而從架構(gòu)上來看，WebAPP開發(fā)模式和傳統(tǒng)Web開發(fā)模式都存在一個(gè)類似的問題。

　　問題是什么

一個(gè)角色負(fù)責(zé)的兩件事混在一起做

傳統(tǒng)Web開發(fā)模式：各種后臺(tái)架構(gòu)都有著或多或少的MVC抽象，但業(yè)務(wù)邏輯依然經(jīng)?；祀s在構(gòu)建HTML的過程中。

代碼結(jié)構(gòu)不清晰

沒有可重用的組件或組件無法在多項(xiàng)業(yè)務(wù)中通用

一淘-UX Brix前端組件平臺(tái)首要解決這個(gè)問題

　　Brix 前端Framework

　　Brix關(guān)鍵任務(wù)

確保前臺(tái)“結(jié)構(gòu)”與“行為”分離，推動(dòng)后臺(tái)“數(shù)據(jù)”與“結(jié)構(gòu)”更好的分離。

采用統(tǒng)一模板引擎，并提供向各種語言的不同模板引擎的翻譯器。

統(tǒng)一“組件接口”、“組件間交互”、“組件拆裝”和“組件管理”,降低組件使用的難度。

提供多種布局生成工具，統(tǒng)一管理組件出現(xiàn)的位置。

　　Brix帶來益處

提供同時(shí)適合前臺(tái)展示類、后臺(tái)管理類、移動(dòng)類頁面的統(tǒng)一組件平臺(tái)。

統(tǒng)一組件內(nèi)、組件間數(shù)據(jù)交互，業(yè)務(wù)代碼書寫更加直白。

無論前后臺(tái)誰負(fù)責(zé)輸出“結(jié)構(gòu)”，其開發(fā)方法趨于一致，而組件即可以使用JS在瀏覽器渲染，也可以整合至任何現(xiàn)有后臺(tái)技術(shù)中，從服務(wù)端渲染。

“傳統(tǒng)Web開發(fā)模式”的“數(shù)據(jù)”與“結(jié)構(gòu)”的分離，讓前后端并行開發(fā)、聯(lián)調(diào)、測試像“WebAPP開發(fā)模式”一樣容易。

　　Brix平臺(tái)前后端角色改變

前端開發(fā)負(fù)責(zé)組件的開發(fā)、積累和升級(jí)維護(hù)。

后端開發(fā)負(fù)責(zé)數(shù)據(jù)提供。

使用布局工具和組件平臺(tái)書寫業(yè)務(wù)，搭建頁面的任務(wù)做法簡單且固定，前后端同學(xué)皆可勝任。

組件：統(tǒng)一的組件開發(fā)模式是基礎(chǔ)

布局：確定組件出現(xiàn)在哪里問題。除普通布局之外，Brix提供響應(yīng)式布局和單頁應(yīng)用布局工具。

輸出：確定組件從哪里出來問題。Brix采用Mustache模板系統(tǒng)，Mustache本身具有所有主流語言的實(shí)現(xiàn)庫。但為了平臺(tái)順利實(shí)施不沖擊后臺(tái)架構(gòu)，Brix將逐步提供Mustache到當(dāng)前一淘使用的各種后端模板系統(tǒng)的翻譯器。

下面是Brix與一淘UX各類主要業(yè)務(wù)關(guān)系

來源：一淘