web front-end project development process

Disclaimer: If you have any objection to this article, then please write your comments in the article comments at. If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles. Wish everyone in the programming this road, farther and farther. https://blog.csdn.net/weixin_44369568/article/details/91489117

Development Process

Diagram

Here Insert Picture Description

demand

Review

Called UI, development, product testers organize business processes, synchronization information related to the demand for a clear division of labor
clear demand purposes, consider the current needs of whether the design can meet the purposes
finishing process if other people to be involved, to discuss the convening
such as requirements design the impact of existing business functions should be required to re-design the product implementations, and then re-accreditation

Precautions

Business Process Synchronization: re-carding process after the assessment, there is a doubt at the time to find a product communication
surrounding demand-dependent: Review function and dependent on the function parallel development, because the demand for pre-unfinished led to the current demand time cost is compressed
Buried demand: in advance and clear product buried need to
build data: advance understanding of the difficulty of manufacturing test data, the estimated test time -> test data in some scenes very difficult to build
concurrency: if the back-end machine can assume concurrency under the new requirements, if you can not bear then follow-up program must be given
self-test: As the developer will not be provided online account, and therefore also requires a self-test line tester to do regression testing
compatible range: pc end need to be clear what browser compatible, mobile terminal to be clear android and ios compatible version and which end mobile browsers

Develop

Review

Prototype Figure Review

FIG clear to the product in the application prototype and a display location of the inlet conditions, confirm the correctness of the prototype of FIG.

Design draft review

Online application observation is consistent with the current design style design draft (color, font size, line height, alignment) are consistent
observation in which portions of the design draft required cut FIG
Analyzing design artwork components are worked on, to avoid the wheel making repeated

技术实现评审

如存在不易实现的功能,第一时间与产品沟通其他降级的实现方案

排期

找到相关开发(前端,后端,app)商讨需求实现技术细节,明确产出接口格式时间与接口联调时间

代码管理

为防止合并代码时过多的代码冲突问题,建议使用分支时遵循以下标准
每次push前先拉取线上分支代码
开发新功能或者修复bug时一定要基于线上代码分支创建新分支,每个分支只对应一个jira号或一个待修复的bug问题
分支名以f_(提交人)(jira号)方式命名,对jira进行bug修复时使用f(提交人)fix(bug内容)_(jira号)
commit格式规则:每行message描述一个功能点,message格式为 ( Speak Make ) (操作): (描述),操作一般为add,del,upd分别代表新增、删除、更新三种操作

开发与调试

一般开发时不会从造轮子开始,项目中一般会有组件库供开发人员使用,但也会有一些老旧的项目中组件库版本较低,无法满足需求,
因此在开发前一定要对项目现有组件进行评估,确认是否需要重新开发组件,确保进度如期进行。

pc端

推荐优雅降级方式开发,先chrome,firefox,然后再针对兼容性较差的如ie等进行兼容处理

移动端

移动端页面兼容性相较于pc端较好,但需真机调试,为方便调试移动页面,这里推荐使用spy-debugger来让pc端做代理,具体使用
请查阅github文档。

联调

和后端对接真实接口

自测

Self-test link associated with the great environmental data, you need to have completed around the end, if the self-test data required for wide-ranging, you need to leveling the relevant personnel to assist on-line

Mention test

Begin real-world testing after the completion of self-test

bug feedback

Deployment of on-line

Development of norms

  • Naming convention (file name, variable, function, class, id) hump, - _ agreed method
  • Directory specification (how to create a directory) divided the directory structure convention law
  • Version of the specification () selected stable version recorded version if the version upgrade, you need summarized version differences
  • Encoding Specification (notes, grammar ...) eslint grammar JSDoc comments
  • Adaptation rule (pc, mobile) resolution adjustment
  • Interface Specification (successful, failed, status codes, security) and back-end agreement

Project to build

  • vue-cli Scaffolding - custom project uses demand
  • Select ui framework
  • Detached common logic, functional components division
  • Build directory
  • Route Planning
  • requesting configuration ajax
  • mock generation
  • Architecture document
  • Finishing program (which used technology, which features used)

Code Management

  • git & svn
  • Branch Management
  • Division of tasks
  • Function schedule

purpose

Consolidation and planning, to enhance the development efficiency

Guess you like

Origin blog.csdn.net/weixin_44369568/article/details/91489117