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

前端快速开发框架需求说明书代号：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.1. 前端开发需要用到的技术元素1. 开发规范：包括开发、部署的目录规范，编码规范2. 模块化开发：更好的分离和更好的代码组织方式3. 组件化开发：可复用的单一功能小部件4. 性能优化：js运行性能，图片，文件，请求5. 项目构建：包括构建与优化，开发与调试等6. 功能套件：公共的功能套件及基于项目特殊性所需要的套件以上几项是从现有前端开发中所用到的技术元素进行归纳和总结。所有的技术点都有一定的内在联系：1. 模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求，也会影响开发规范的定制2. 组件化开发应该基于模块化框架来加载其他依赖的组件，如果组件化框架自带模块管理功能，那么就可能导致工程性的性能优化实现困难3. 组件库应该与组件化开发配套，组件仓库中的组件都应该按照相同的标准来实现，否则下载的组件不具有可复用性、可移植性，就是去了仓库的意义4. 我们设计的开发规范工具是否能很容易的实现，如果部署上有特殊要求，工具是否能很容易的做出调整，而不是修改规范。5. 工具是否能提供接入公司已有流程中的接口，比如命令调用等问题。由于现有前端开发中暴露出来了许多问题，比如：开发的规范性问题，组件的可复用问题，项目单元测试及构建问题等等。为了解决前端开发所暴露出来的问题，就需要有一套解决方案来处理所出现的问题。所以本文档作为描述该解决方案的具体细节说明。1.2. 解决方案应包含的功能及优点1. 快速搭建项目，提供灵活的脚手架工具（可根据需要定制），自动生成项目、页面、模板、路由等各类资源。 2. 自动化构建，对文件进行编译、校验、压缩、合并、优化处理等 3. 统一的编码方式前端开发的可维护性4. 功能完整的UI组件库5. 一致的UI风格和交互体验针对上述的各个功能，需要有对应的描述完整的文档说明，包括如何使用工具一步一步的搭建应用，以及工具的使用说明文档。2. 需求要点2.1. UI风格l 问题在现有的应用开发中，各个应用虽然在表象上贴近扁平化风格，但是实际的内容设计和功能设计仍然是传统化的风格，缺乏统一的UI风格来指导应用的UI设计，迫切需要摸索和沉淀出一套适合建模产品的UI风格来指导后续的应用设计和开发l 需求UI风格的摸索和确定 （基于建模产品的特点进行学习和设计以及以扁平化为UI方向）l 要点1. 收集和整理现有应用的类型和特点，针对类型进行分类2. 在了解应用的基础上，学习和确定符合应用的UI风格3. 组件的UI风格也要和UI 风格一致l 技术要点1. 采用Bootstrap样式框架库2. 以ThemeForest等应用模板为参考（该模板类别丰富，功能齐全，UI统一，交互一致）2.2. 统一的交互体验l 问题在现有的应用开发中，交互体验没有统一，存在着不同应用交互不一致，以及没有统一的指导性文档来引导产品和开发进行交互体验的设计，在UI风格确定的情况下，需要制定符合该风格的交互体验指导说明。（在借鉴其他用户体验原则基础上）概述：从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标。l 需求制定出风格一致的交互体验设计指导说明l 要点1. 整体界面的设计和交互2. 组件的交互需要保持统一l 技术要点无2.3. UI组件l 问题基于现有的UI组件功能的不完整性和易用性方面存在缺陷，以及前端开发所采用的框架为MVC，所以为了与框架无缝结合以及使用上的统一，需要制定出一套MVC UI 组件库l 需求制定出基于Ember的MVC UI 组件库，包含组件核心机制和制定指导后续组件开发的模式。具体的控件不重复造轮子，以移植到核心机制及MVC框架上为前提），UI 组件核心提供组件的基本功能，包括有限状态机的流转、动作的触发及处理等等，为组件的编码提供清晰的结构和用户行为和组件行为的分离。大部分组件的细节编码以不重复造轮子为前提，将整套组件移植到核心基础上。要点：1. 组件基础功能的确定和编码2. 具体组件编码模式的确定3. 风格相同组件的确定技术要点：1. 状态机的编码2. 基于Ember.Component的组件编码模式的确定3. 组件基于上述核心功能的改造和迁移，符合MVC模式2.4. 项目构建l 问题目前项目的应用开发中，应用搭建，开发比较混乱，没有遵循统一的模式，导致维护上的困难，以及项目代码质量低下，并且对应的文件没有经过处理，体积和数量过大，导致性能较差，为了解决开发上的一致问题，需要有统一的项目脚手架以及对应的构建工具和便捷的命令工具来指导后续的开发，提升效率。l 需求1. 统一的应用开发脚手架2. 制定出开发应用的基本模式，能够指导应用开发时各个模块的拆分，和编码3. 项目构建工具的优化和改进（Ember App Kit 及 Ember-Cli，在学习已有优点的基础上，进行优化和改进）4. 脚手架的可扩展l 要点1. 规范的目录2. 针对制定好的规范所形成的指导性文档说明3. 构建工具功能的扩展4. 提供可扩展的脚手架套件l 技术要点1. 针对Ember-Cli目前的脚手架进行研究，以及基于本身应用的基础上，对比是否有需要改进的地方2. 提供更丰富的功能，以方便开发者进行构建，比如命令行创建对应的控制器，路由和其他资源文件3. 定制化脚手架研究2.5. 性能优化l 问题目前应用开发上，比较少关注性能优化方面的问题，而性能优化是前端开发中非常重要的一个环节，为了处理好前端性能问题，需要有针对性的对前端开发的各个方面进行深入研究，总结出优化性能、提升效率的方式方法。l 需求提升性能要点：1. 请求优化2. Js运行性能优化3. 资源文件优化 2.6. 制定通用的html、css规范l 问题目前的应用开发中，html和css没有遵循一致的开发规范，以及开发人员和美工人员的配合缺乏统一的方式，需要制定出通用的规范来指导工作l 需求1. 制定规范的html规范和css规范2. 模块化的css2.7. 功能套件l 问题现有应用开发中，大部分应用都有用到相同的功能，比如国际化问题，应用间通讯，路由切换引起的历史记录问题等等，但是缺乏公共的功能提炼。l 需求总结和提炼现有应用开发中的公用功能，针对每个公用功能进行编码l 要点1. 总结和提炼现有应用开发中的共用功能2. 应用间通讯3. 路由切换中数据的保存4. i18n国际化2.8. 与后端通讯的统一处理方式的制定l 问题现有的应用开发中，没有遵循一致的与后端通讯的接口，混乱的使用引起的维护困难和不一致的情况，需要制定前端开发与后端接口通讯的标准。l 需求1. 采用统一的与后端交互的模块接口，Ember-Data2. 扩展Ember-Data，以提供不同数据格式的扩展和解析，以适应不同的后端数据接口l 要点1. 分析和总结采用前端ORM与后端通讯的弊端2. 分析弊端以及解决问题2.9. 可视化的接口联调l 问题现有前端开发人员与后端开发联调接口的弊端：1. 后端人员编写好接口后，手动维护api接口文档，文档不够清晰，不够直观，2. 并且接口有变更后，后端人员需要再次 手动维护该文档，并且经常出现缺漏维护的现象3. 前端人员的接口的定义变化较大基于以上原因，