一淘UX Brix组件框架一淘UX Brix组件框架.pdf

一淘UX Brix组件框架 Brix 是基于 Kissy(PC端)和 Z ept o 、Backbo ne、SeaJS 等(移动端)底层类库的应用层组件框架。 目 标是打造面向前台 示型业务、后台管理型业务、移动高端版业务的通用且易用的一淘UX前端组 件平台。 　　我们现在的网页开发 参与网页开发同学有着两种角色 ： 1.前端开发 2.后端开发 　　网页形成展现需要做三件事 ： 1.数据 ：准备将要 现的数据 2.结构 ：将数据嵌入至HT L结构中形成 示 3.行为 ：为HT L结构增加交互行 　　由谁负责“结构”输出这个问 ，衍生出两种架构 ： 1.准备数据是后端开发的职责 ，丰富行为是前端开发的看家本领。而结构谁来负责?这个问题衍生出 两种架构 ： 2.传统Web开发模式 ：前端写Demo ，结构与数据的整合输出(即套页面)由后端开发在服务器端完成 。 　　WebA PP开发模式 ：前后端约定数据接口 ，结构与数据的整合有前端开发在浏览器中完成。 　　关于WebA PP WebA PP开发模式是传统Web开发模式的一项变革 ，有如下好处 ： 前后端数据接口协议明确 ，可以面向接口分别开发 ，后端不直接接触HT L ，联调更高效。 WebA PP多采取单页应用模式 ，页面变化由JS控制 ，网络中仅传递动态数据 ，速度快。 但WebA PP模式也有它的问题 ，对于有哪些信誉好的足球投注网站引擎不够友好使得它前台 示型页面开发 ，所以两种架构 会长期并存。 而从架构上来看 ，WebA PP开发模式和传统Web开发模式都存在一个类似的问题。 　　问 是什么 一个角色负责的两件事混在一起做 传统Web开发模式 ：各种后台架构都有着或多或少的 V C抽象 ，但业务逻辑依然经常混杂在构 建HT L的过程中。 　　WebA PP开发模式 ：前台在渲染基础HT L结构的过程中常常不断穿插绑定交互事件等行为。 甚至在先渲染出不能够完整表达信息的基础HT L后 ，再由JS将状态数据通过DO 方法二次同步 至HT L中才形成最终 现。 　　两件事混做带来的问 代码结构不清晰 没有可重用的组件或组件无法在多项业务中通用 一淘- UX Brix前端组件平台首要解决这个问题 　　Brix 前端Framewo rk 　　Brix关键任务 确保前台“结构”与“行为”分离 ，推动后台“数据”与“结构”更好的分离。 采用统一模板引擎 ，并提供向各种语言的不同模板引擎的翻译器。 统一“组件接口”、“组件间交互”、“组件拆装”和“组件管理”,降低组件使用的难度。 提供多种布局生成工具 ，统一管理组件出现的位置。 　　Brix带来益处 提供同时适合前台 示类、后台管理类、移动类页面的统一组件平台。 统一组件内、组件间数据交互 ，业务代码书写更加直白。 无论前后台谁负责输出“结构” ，其开发方法趋于一致 ，而组件即可以使用JS在浏览器渲染 ，也可以 整合至任何现有后台技术中 ，从服务端渲染。 “传统Web开发模式”的“数据”与“结构”的分离 ，让前后端并行开发、联调、测试像“WebA PP开发 模式”一样容易。 　　Brix平台前后端角色改变 前端开发负责组件的开发、积累和升级维护。 后端开发负责数据提供。 使用布局工具和组件平台书写业务 ，搭建页面的任务做法简单且固定 ，前后端同学皆可胜任。 　　Brix产出页面=组件+布局+输出方法 组件 ：统一的组件开发模式是基础 布局 ：确定组件出现在哪里问题。除普通布局之外 ，Brix提供响应式布局和单页应用布局工具。 输出 ：确定组件从哪里出来问题。Brix采用 ust ache模板系统 ， ust ache本身具有所有主流语言的 实现库。但为了平台顺利实施不冲击后台架构 ，Brix将逐步提供 ust ache到当前一淘使用的各种后 端模板系统的翻译器。 下面是Brix与一淘UX各类主要业务关系 　　Brix阶段总结和展望 来源 ：一淘 人人都是产品经理 （woshipm.co m ）中国最大最活跃的产品经理学习、交流、分享平台