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

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

代号：Bricks

目的：将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求所提出的一种解决问题的方案，同时能够确保加以有效的执行。

特点：工程化自动化

关键字：规范简化效率

1. 问题 (3)

1.1. 前端开发需要用到的技术元素 (3)

1.2. 解决方案应包含的功能及优点 (3)

2. 需求要点 (4)

2.1. UI风格 (4)

2.2. 统一的交互体验 (4)

2.3. UI组件 (5)

2.4. 项目构建 (5)

2.5. 性能优化 (6)

2.6. 制定通用的html、css规范 (6)

2.7. 功能套件 (6)

2.8. 与后端通讯的统一处理方式的制定 (7)

2.9. 可视化的接口联调 (7)

1.问题

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风格

●问题

在现有的应用开发中，各个应用虽然在表象上贴近扁平化风格，但是实际的内容设计和功能设计仍然是传统化的风格，缺乏统一的UI风格来指导应用的UI设计，迫切需要摸索和沉淀出一套适合建模产品的UI风格来指导后续的应用设计和开发

●需求

UI风格的摸索和确定（基于建模产品的特点进行学习和设计以及以扁平化为UI方向）

●要点

1.收集和整理现有应用的类型和特点，针对类型进行分类

2.在了解应用的基础上，学习和确定符合应用的UI风格

3.组件的UI风格也要和UI 风格一致

●技术要点

1.采用Bootstrap样式框架库

2.以ThemeForest等应用模板为参考（该模板类别丰富，功能齐全，UI统一，交互一致）

2.2. 统一的交互体验

●问题

在现有的应用开发中，交互体验没有统一，存在着不同应用交互不一致，以及没有统一的指导性文档来引导产品和开发进行交互体验的设计，在UI风格确定的情况下，需要制定符合该风格的交互体验指导说明。（在借鉴其他用户体验原则基础上）

概述：从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标。

●需求

制定出风格一致的交互体验设计指导说明

●要点

1.整体界面的设计和交互

2.组件的交互需要保持统一

●技术要点

无

2.3. UI组件

●问题

基于现有的UI组件功能的不完整性和易用性方面存在缺陷，以及前端开发所采用的框架为MVC，所以为了与框架无缝结合以及使用上的统一，需要制定出一套MVC UI 组件库

●需求

制定出基于Ember的MVC UI 组件库，包含组件核心机制和制定指导后续组件开发的模式。具体的控件不重复造轮子，以移植到核心机制及MVC框架上为前提），UI 组件核心提供组件的基本功能，包括有限状态机的流转、动作的触发及处理等等，为组件的编码提供清晰的结构和用户行为和组件行为的分离。

大部分组件的细节编码以不重复造轮子为前提，将整套组件移植到核心基础上。

要点：

1.组件基础功能的确定和编码

2.具体组件编码模式的确定

3.风格相同组件的确定

技术要点：

1.状态机的编码

2.基于ponent的组件编码模式的确定

3.组件基于上述核心功能的改造和迁移，符合MVC模式

2.4. 项目构建

●问题

目前项目的应用开发中，应用搭建，开发比较混乱，没有遵循统一的模式，导致维护上的困难，以及项目代码质量低下，并且对应的文件没有经过处理，体积和数量过大，导致性能较差，为了解决开发上的一致问题，需要有统一的项目脚手架以及对应的构建工具和便捷的命令工具来指导后续的开发，提升效率。

●需求

1.统一的应用开发脚手架

2.制定出开发应用的基本模式，能够指导应用开发时各个模块的拆分，和编码

3.项目构建工具的优化和改进（Ember App Kit 及Ember-Cli，在学习已有优点的基础上，

进行优化和改进）

4.脚手架的可扩展

●要点

1.规范的目录

2.针对制定好的规范所形成的指导性文档说明

3.构建工具功能的扩展

4.提供可扩展的脚手架套件

●技术要点

1.针对Ember-Cli目前的脚手架进行研究，以及基于本身应用的基础上，对比是否有需要

改进的地方