首页 > 前端开发 > 正文

web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?

2023-09-30 16:32:24 | 我爱编程网

对于前端开发比较关注的小伙伴们一定非常关心web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?,今天我爱编程网小编为大家整理了以下内容,下面一起来看看吧。

web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?

一个互联网产品的前端开发的完整流程是怎样的?

由于技术线上的内容过于细化,且技术框架工具需要根据团队需要才可进行选取,所以技术性问题先不作答。

不过,如果想要了解一个APP的诞生流程,都包含哪些事情大致流程:

1.绘画草图

2.开始布局

3.构建核心页面

4.构建服务器

5.连接后台与前端

6.基本的业务逻辑

7.优化用户体验

8.丰富功能模块

9.开源

问题问的有点大

一般我们做的话

客户需求做出功能需求

去掉不必要的功能需求,增加有意义可行的。

然后生成正式的开发文档

梳理需要哪几方面的工程师,逐个安排一下就行。

打个比方,前端开发者的工作专注于“房屋”装修,而盖房子的工作由后端开发者负责。

通过一些专门的工具,前端开发者与设计师/用户体验分析师密切合作,帮助构建原型或是线框图,参与产品开发到发布的全过程。

下面给你讲讲开发流程

产品研发流程分为以下阶段:立项阶段、设计阶段、开发阶段、测试阶段、上线阶段、磨合阶段、运营阶段、总结阶段。

一个APP的诞生流程,都包含哪些事情大致流程:

1.绘画草图

2.开始布局

3.构建核心页面

4.构建服务器

5.连接后台与前端

6.基本的业务逻辑

7.优化用户体验

8.丰富功能模块

9.开源


怎么开发小程序

1.首先说下小程序的开发流程 我爱编程网

一个小程序的开发流程大致分为以下几个步骤:①核心需求的把控(客户用这个APP要解决什么样的具体问题)②需求的梳理(根据核心需求拓展出来的一些需求)③预算评估④原型设计⑤UI设计⑥前端开发⑦后端开发⑧测试上线⑨维护

2.那么小程序开发中哪些是需要注意的呢?

①需求的梳理(重中之重!!!)

对于开发一个小程序来说,需求的梳理是十分重要的!重要到什么程度呢?这一步没做好,接下来的开发失败的概率在50%!

为什么需求的梳理会这么重要呢?原因就在于需求是一个项目的根本,只有前期需求理顺了,把控正确了,才能确保后续项目在一个对的轨迹上运行,否则只能是南辕北辙。经常会遇见这种情况,项目开发的过程中,发现需求理解错了,结果开发出来的东西完全不符合,这就是前期不注意需求的原因。即使前期梳理时十分小心,也经常会碰到在一些细节方面上理解偏差的问题,所以这一步需要慎之又慎!

另一方面,需求也决定着项目的开发成本,需求整理的越细,评估开发成本越准确,同时开发成本也越高。举例来说一个5万的项目,需求十分细的话,可能最后100万开发成本都是不够的。

②原型设计

原型设计就是在对需求理解的基础上进行小程序原型的实现,这一步也是十分重要的,为什么呢?原因在于对需求把控了之后,就需要开发团队或者开发公司根据需求转化出一点实际的东西,并且在这一步完成后是需要和需求方核对需求的。核对过程中,进一步检查需求理解是否到位。如果没问题那么就可以进行以下的步骤了。

③接下来的步骤其实就是实现的问题了,需求获得保证后,有经验的开发团队基本上都能实现出小程序,小程序的质量则是要根据成本和技术实力来定了,这一点很好理解,预算越多,相应的开发工程师可以请的越好,需求变动时可调整性越大,项目把控也越到位。


web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?

WEB前端项目开发流程

这个环节是由项目经理完成,项目经理首先和客户进行交流,了解客户的需求,然后分析项目的可行性,如果项目可以被实现,项目经理写出项目需求文档交给设计师完成后续的开发。

这个环节主要是UI设计师参与,UI设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

这个部分由程序员来实现。(程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面,后台就做一些我们看不见的管理系统以及功能的实现。)程序员根据UI设计师的设计,用编码来完成整个项目的各个功能。

这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug,一般来说刚编码完成的程序都是存在问题的,就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug修复完成,这个项目差不多就可以上线了。

程序的维护是整个项目的最后一个阶段,但也是耗时最多,成本最高最高的的一个阶段。程序的维护包括程序上线后后续bug的修复和程序版本的更新。

web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?

前端项目的开发流程

我爱编程网(https://www.52biancheng.com)小编还为大家带来前端项目的开发流程的相关内容。

前端开发流程概述

前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段,下面分别进行叙述。

2.1 需求分析

这个环节中,首先是和客户进行交流,了解客户的需求,然后分析项目的可行性,撰写项目需求文档。如果项目可行,则起讨论具体方案,分模块分步骤进行规划,分析项目进度安排、所需成本,进行原型设计(包括页面布局图,页面逻辑流程图,说明文档等。通过原型设计,可以让项目组和客户都可以对项目有一个直观感受,同时可以低成本高效率的复现业务场景和各模块流程)。
可以说需求分析阶段是整个前端项目的基础,基础不牢,地动山摇。可以试想,如果和客户沟通不顺畅,有的方面客户没搞清楚是什么效果,开发完成后就可能与客户发生纠纷;如果可行性有问题,有的模块很难实现或成本超出预算,就很难处理。

2.2 开发阶段

这个环节是前端工程师主要参与的部分,按照需求分析阶段的规划按步骤完成任务。

  • 根据产品需求分析文档和原型图进行UI设计,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

  • 根据UI设计进行规划,提取界面中可以复用的模块方便重复利用,分析界面是否有实现难度比较困难的地方,进行沟通和功能排期,按功能大小以及难度进行功能时间的评估,和后端沟通好排期时间,保证大家能够更有效地开发合作,针对功能复杂的地方要先理清思路。

  • 不要盲目开发前端搭建框架。根据设计图进行前端界面开发,以及遇到的问题及时与产品、UI、后台人员沟通,保持大家信息一致,针对不清楚的地方也要及时沟通,以免做错功能。

  • 根据后端接口进行字段填充,以及部分功能开发。针对缺少的字段或者数据结构进行提出,及时与后端反应,尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发,针对不规范的地方要给与提出、指正,营造出规范的工作模式,以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计,也不必等后端,可以自行开发nodejs服务器配合postman等接口软件进行开发。

  • 前后端功能联调、完成自测。检查功能完成情况,看是否有遗漏,出现问题及时沟通解决。

  • 2.3 测试阶段

    发布测试、修改bug、发布上线,自测完成后提交测试,测试根据提交的项目以及需求进行测试,提出bug给相关人员修改,开发人员周期性的配合修改bug,保证今天能够修复昨天的bug。
    发布dev环境,配合测试,修复bug以及需求优化
    发布test环境,修复bug以及需求优化
    发布it环境,修复bug以及需求优化
    发布pre环境,修复bug以及需求优化
    pre验收之后,发布线上环境,产品进行验收

    2.4 维护阶段

    如果客户验收通过,项目就进入了维护阶段,程序的维护包括程序上线后后续bug的修复和程序版本的更新。

    3 个人经验总结

    3.1 文档很重要

    前端项目的文档似乎已经作为前端工程化的标准流程之一了,文档写的好,可以便于同事快速了解你的代码功能和需求,便于协作。可以想象,随之项目复杂度增加,体量越来越庞大,开发团队人数也越来越多。这种情况下,如果像变魔术一样隐匿中间流程而直接得出结果,后果可想而知:项目复杂度越增加就越难以管理,开发效率低,合作混乱,结果甚至导致项目死亡。
    好的文档看起来就像一个产品说明书,但作用却远远超过了说明书,不仅仅告诉你如何使用,还应该告诉你项目的设计思路,用了哪些组件,哪些部分不完善,将来有什么规划等等。这是一份比较好的说明文档。

    3.2 与客户及时沟通很重要

    3.3 扎实的基本功很重要

    尽管当下框架、函数库、工具包等更新迭代非常快,前端工程师有很多新的知识要学,但原生JS、HTML和CSS依然是重要的基本功,在学习前沿工具的同时不能放弃基本功的训练。

以上就是我爱编程网小编为大家带来的内容了,希望能够帮助到大家,了解更多前端开发资讯敬请关注我爱编程网。更多相关文章关注我爱编程网:www.52biancheng.com

免责声明:文章内容来自网络,如有侵权请及时联系删除。
与“web前端的真实开发流程 一个互联网产品的前端开发的完整流程是怎样的?”相关推荐
java程序的运行流程 java开发流程
java程序的运行流程 java开发流程

简述Java应用程序的开发流程Java应用程序的运行经过编写、编译、运行三个步骤。第1步,编写程序。使用记事本或其他软件编写程序的源代码,将源代码保存为文件filename.java文件。第2步,编译程序。在MS-DOS命令窗口,将当前目录转换到Java源程序所在的保存目录;输入“javacfilename.java”形式的命令进行程序编译。第3步,执行程序。在同样的命令窗口中

2024-05-10 12:05:03
java如何开发手机程序(java开发手机app的流程)
java如何开发手机程序(java开发手机app的流程)

java如何开发手机程序(java开发手机app的流程)一。下载并安装java环境jdk1.4以后版本大于1.4都可以。去sun的官网上下载二。下载并安装sun提供的专门开发手机软件的java微型版,即j2me开发工具,又叫WTK全称(WirelessToolkit)目前版本WTK2.5.2去sun的官网下载如果只用写字板,记事本之类的开发工具的话,现在就可以开发了,运行WTK

2024-06-11 05:03:06
简述java程序运行流程 简述Java应用程序的开发流程。
简述java程序运行流程 简述Java应用程序的开发流程。

简述Java应用程序的开发流程Java应用程序的运行经过编写、编译、运行三个步骤。第1步,编写程序。使用记事本或其他软件编写程序的源代码,将源代码保存为文件filename.java文件。第2步,编译程序。在MS-DOS命令窗口,将当前目录转换到Java源程序所在的保存目录;输入“javacfilename.java”形式的命令进行程序编译。第3步,执行程序。在同样的命令窗口中

2024-04-27 02:38:35
哪里有JAVA开发板,软件开发平台,Web开发平台或快速开发平台的源码,包括工作流源码,还有JAVA OA源码?
哪里有JAVA开发板,软件开发平台,Web开发平台或快速开发平台的源码,包括工作流源码,还有JAVA OA源码?

初学者想学ARM嵌入式,应该选ARM9还是ARM11开发板?对于ARM嵌入式的初学者,建议用ARM9开发板。首先,从功能上来说,ARM11要比ARM9强一些,但是性能优异并不代表适合初学者。对于初学者来说ARM11的有些功能是冗余。其次,学习ARM9或者ARM11就在所难免学习其所支持的操作系统Linux(ARM11可以支持Android)。目前,市面上ARM9的开发版的价格要比AR

2024-07-03 16:24:53
怎么搭建的java开发,测试,生产环境的
怎么搭建的java开发,测试,生产环境的

怎样创建和调试java程序首先配置java的JDK运行环境的环境变量:我的电脑点右键,选择“属性”,选择“高级”标签,进入环境变量设置,分别设置如下三个环境变量:(1)设置好path变量,使得我们能够在系统中的任何地方运行java应用程序,比如javac、java、javah等等这就要找到我们安装JDK的目录,比如我们的JDK安装在C:\jdk1.6.0目录下那么在C:\jdk1.

2024-04-03 05:32:25
简述JAVA程序的编辑编译和运行过程(简述Java应用程序的开发流程。)
简述JAVA程序的编辑编译和运行过程(简述Java应用程序的开发流程。)

简述JAVA程序的编辑编译和运行过程第一步(编译):创建完源文件之后,程序会先被编译为.class文件。Java编译一个类时,如果这个类所依赖的类还没有被编译,编译器就会先编译这个被依赖的类,然后引用,否则直接引用,这个有点象make。如果java编译器在指定目录下找不到该类所其依赖的类的.class文件或者.java源文件的话,编译器话报“cantfindsymbol”的错

2024-06-30 21:01:16
学Python的发展前景好吗
学Python的发展前景好吗

学Python的发展前景好吗随着近几年Python的飞速发展,应用范围逐步趋于广泛,后端开发、前端开发、爬虫、金融量化分析、人工智能、自动化运维、自动化运维、大数据,Python都有涉及。Python相对其他编程语言来讲,语法较简单,就算没有任何编程基础,我们也可以学习和掌握Python编程开发,是新时代的宠儿!因此参加Python工程师培训机构的人越来越多。Python有很多吸引程

2023-12-16 03:19:15
如何在spark基础二次开发基于java swing的pc客户端
如何在spark基础二次开发基于java swing的pc客户端

如何在spark基础二次开发基于javaswing的pc客户端packageorg.jivesoftware.spark.ui;importjava.util.ArrayList;importorg.jivesoftware.spark.util.log.Log;importorg.jivesoftware.spark.util.ModelUtil;importorg.j

2024-04-28 06:38:45