前端快速开发框架需求说明书

1、前端快速开发框架需求说明书代号：Bricks目的：将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求所提出的一种解决问题的方案，同时能够确保加以有效的执行。特点：工程化自动化关键字：规范简化效率1.问题 31.1.前端开发需要用到的技术元素 31.2.解决方案应包含的功能及优点 32.需求要点 42.1.UI 风格 42.2.统一的交互体验 42.3.UI 组件 52.4.项目构建 52.5.性能优化 62.6.制定通用的 html、css 规范 62.7.功能套件 62.8.与后端通讯的统一处理方式的制定 72.9.可视化的接口联调 71.问题1前端开发需

2、要用到的技术元素1.开发规范：包括开发、部署的目录规范，编码规范2. .模块化开发：更好的分离和更好的代码组织方式3. .组件化开发：可复用的单一功能小部件4. .性能优化：js 运行性能，图片，文件，请求5. .项目构建：包括构建与优化，开发与调试等6. .功能套件：公共的功能套件及基于项目特殊性所需要的套件以上几项是从现有前端开发中所用到的技术元素进行归纳和总结。所有的技术点都有一定的内在联系：1 .模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求，也会影响开发规范的定制2 .组件化开发应该基于模块化框架来加载其他依赖的组件，如果组件化框架自带模块管理功能，那么就可能导致工程性的

3、性能优化实现困难3 .组件库应该与组件化开发配套，组件仓库中的组件都应该按照相同的标准来实现，否则下载的组件不具有可复用性、可移植性，就是去了仓库的意义4 .我们设计的开发规范工具是否能很容易的实现，如果部署上有特殊要求，工具是否能很容易的做出调整，而不是修改规范。5 .工具是否能提供接入公司已有流程中的接口，比如命令调用等问题。由于现有前端开发中暴露出来了许多问题，比如：开发的规范性问题，组件的可复用问题，项目单元测试及构建问题等等。为了解决前端开发所暴露出来的问题，就需要有一套解决方案来处理所出现的问题。所以本文档作为描述该解决方案的具体细节说明。1.2.解决方案应包含的功能及优点1 .快

4、速搭建项目，提供灵活的脚手架工具（可根据需要定制），自动生成项目、页面、模板、路由等各类资源。2 .自动化构建，对文件进行编译、校验、压缩、合并、优化处理等3 .统一的编码方式前端开发的可维护性4 .功能完整的 UI 组件库5 .一致的 UI 风格和交互体验针对上述的各个功能，需要有对应的描述完整的文档说明，包括如何使用工具一步一步的搭建应用，以及工具的使用说明文档。2.需求要点1UI 风格问题在现有的应用开发中，各个应用虽然在表象上贴近扁平化风格，但是实际的内容设计和功能设计仍然是传统化的风格， 缺乏统一的 UI 风格来指导应用的 UI 设计， 迫切需要摸索和沉淀出一套适合建模产品的 UI

5、风格来指导后续的应用设计和开发需求UI 风格的摸索和确定（基于建模产品的特点进行学习和设计以及以扁平化为 UI 方向）要点.收集和整理现有应用的类型和特点，针对类型进行分类.在了解应用的基础上，学习和确定符合应用的 UI 风格.组件的 UI 风格也要和 UI 风格一致技术要点.采用 Bootstrap 样式框架库.以 ThemeForest 等应用模板为参考（该模板类别丰富，功能齐全，UI 统一，交互一致）1统一的交互体验问题在现有的应用开发中，交互体验没有统一，存在着不同应用交互不一致，以及没有统一的指导性文档来引导产品和开发进行交互体验的设计，在 UI 风格确定的情况下，需要制定符合该风格

6、的交互体验指导说明。（在借鉴其他用户体验原则基础上）概述：从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标。需求制定出风格一致的交互体验设计指导说明要点.整体界面的设计和交互.组件的交互需要保持统一技术要点无1UI 组件问题基于现有的 UI 组件功能的不完整性

7、和易用性方面存在缺陷，以及前端开发所采用的框架为MVC,所以为了与框架无缝结合以及使用上的统一，需要制定出一套 MVCUI 组件库需求制定出基于 Ember 的 MVCUI 组件库，包含组件核心机制和制定指导后续组件开发的模式。具体的控件不重复造轮子，以移植到核心机制及 MVC 框架上为前提），UI 组件核心提供组件的基本功能，包括有限状态机的流转、动作的触发及处理等等，为组件的编码提供清晰的结构和用户行为和组件行为的分离。大部分组件的细节编码以不重复造轮子为前提，将整套组件移植到核心基础上。要点：.组件基础功能的确定和编码.具体组件编码模式的确定.风格相同组件的确定技术要点：.状态机的编码.

8、基于Ember.Component 的组件编码模式的确定.组件基于上述核心功能的改造和迁移，符合 MVC 模式1项目构建问题目前项目的应用开发中，应用搭建，开发比较混乱，没有遵循统一的模式，导致维护上的困难，以及项目代码质量低下，并且对应的文件没有经过处理，体积和数量过大，导致性能较差，为了解决开发上的一致问题，需要有统一的项目脚手架以及对应的构建工具和便捷的命令工具来指导后续的开发，提升效率。需求.统一的应用开发脚手架.制定出开发应用的基本模式，能够指导应用开发时各个模块的拆分，和编码.项目构建工具的优化和改进（EmberAppKit 及 Ember-Cli,在学习已有优点的基础上，进行优化

9、和改进）.脚手架的可扩展要点.规范的目录.针对制定好的规范所形成的指导性文档说明.构建工具功能的扩展.提供可扩展的脚手架套件技术要点.针对 Ember-Cli 目前的脚手架进行研究，以及基于本身应用的基础上，对比是否有需要改进的地方.提供更丰富的功能，以方便开发者进行构建，比如命令行创建对应的控制器，路由和其他资源文件.定制化脚手架研究性能优化问题目前应用开发上，比较少关注性能优化方面的问题，而性能优化是前端开发中非常重要的一个环节，为了处理好前端性能问题，需要有针对性的对前端开发的各个方面进行深入研究，总结出优化性能、提升效率的方式方法。需求提升性能要点：.请求优化.Js 运行性能优化.资源

10、文件优化制定通用的 html、css 规范问题目前的应用开发中，html 和 css 没有遵循一致的开发规范，以及开发人员和美工人员的配合缺乏统一的方式，需要制定出通用的规范来指导工作需求制定规范的 html 规范和 css 规范模块化的 css功能套件问题现有应用开发中，大部分应用都有用到相同的功能，比如国际化问题，应用间通讯，路由切换引起的历史记录问题等等，但是缺乏公共的功能提炼。需求总结和提炼现有应用开发中的公用功能，针对每个公用功能进行编码要点.总结和提炼现有应用开发中的共用功能.应用间通讯.路由切换中数据的保存.i18n 国际化与后端通讯的统一处理方式的制定问题现有的应用开发中，没有

11、遵循一致的与后端通讯的接口，混乱的使用引起的维护困难和不一致的情况，需要制定前端开发与后端接口通讯的标准。需求.采用统一的与后端交互的模块接口，Ember-Data.扩展 Ember-Data,以提供不同数据格式的扩展和解析，以适应不同的后端数据接口要点.分析和总结采用前端 ORM 与后端通讯的弊端.分析弊端以及解决问题可视化的接口联调问题现有前端开发人员与后端开发联调接口的弊端：.后端人员编写好接口后，手动维护 api 接口文档，文档不够清晰，不够直观，.并且接口有变更后，后端人员需要再次手动维护该文档，并且经常出现缺漏维护的现象.前端人员的接口的定义变化较大基于以上原因，需要制定出接口维护

12、的相关规范，需求.采用通用的 API 文档生成工具.可视化的 API 文档查看.在可视化的基础上，后端人员和前端人员都可以对所有接口进行数据的测试和联调。可以按照统一的规范，自动化的生成文档，免去维护的繁琐工作要点.采用 Swagger 的可视化 API 生成工具.支持多种后端，比如 java、node、ruby效果APIDikMrtrCaEyggfOEie，口userword(huw/Hid*UitOpmRm|TAvord.jSGn/rtord/entri：e&Rrbyrnftfitrirs制制口word|SET/wond.jwrVfwordV。xam 限 5Rebjirnseumpleif

13、oraword1TrwordjsofV(wordi/examplesFetshweumplcsgTwrdJEMord.jMHVfwordJ/wordFormsR由MjfitoAw，d|Wr/wond.jwn/iword/wflrdFormsRMjmi.otherf&rmt口faword|Mll(rord.jHV(word/wordFormsOrtetesardtUonshipfrom。wordIMTfvmrdJwfVIwcrdJGMmw&rd*sastringrnurru曲帆也ObjectihjitrcpreunliitParametersParjm4lefVMu。DeWifi噂n)febur

14、nsexwtlywhilrequeiled.KewmUJggr2G$12。忏tct$口妙中圣龄。徜眇肉的JlimMildCfttteCrtaregdIF同emsogTryMZ.|GFTZwoEjson/MwWdefWiionsReturm.deRnAonsfc-rdword|GU/rjrd,json/wcnjJ/stat5Rfiurni住曲|5CT/mrdjson/wardtopFjtample电Eurm1top富*Ep*SQTaword|由/wo 旭118n/MordVsrit*承 uMLookupiRdur井,mcmj%rwoM尿i3*dM111堂ierittnce话whichgisfound1*MTA/ordJ5orVwani/contextudlLockupRttumsiforAwordbed。门ui*senocnwhichaisfound|T/word,jwn/vrt