前端开发是做什么的？工作职责有哪些？
时间：2023-12-05 05:00:02 | 来源：网站运营
时间：2023-12-05 05:00:02 来源：网站运营
前端开发是做什么的？工作职责有哪些？：
什么是前端
我们学习新知识之初，有必要自上而下，从抽象到具体地对前端的整套体系建立基本的认知。这有助于我们快速地入门前端，并为深入学习奠定基础。
在本课程中，我们不涉及具体的技术讲解，而是用更轻松的方式闲谈漫步，
明确前端的定义，回顾前端技术的发展历史，了解前端岗位的职责，展望前端美好未来。 初识“前端”
前端是什么？无论是带团队还是教学生，都有很多的人问过我这个问题。这其实并不好回答！
因为前端是属于计算机应用范畴，有着庞杂的体系和众多晦涩专有名词的概念。为了便于理解，我将带你
从具体到抽象，全面且深刻的认知前端。
我们先从字面意思下手，看看什么是“端”：一条线段，它的起点和终点，我们都可以称之为“端”。
“端”，也就是东西的一头。而
前端（Front-End），顾名思义，就是“前面”的那一头，或者是“外在”的那一头。
这样来看，笔的笔头、衣服光鲜的一面、手机的外壳和屏幕，这些生活中具体的事物，我们能
直接看得见，摸得着，用得上的部分，都可以称作“前端”。- 但是在计算机/软件领域，我们需要换一种角度去理解前端。
相信你平时也会使用的淘宝、京东、百度等软件应用
，它们虽然不是具体的“实物”，但本质上也是为了“
适应需要，以供使用”而诞生的。这和你坐的椅子，躺的床没有区别，也有着能够
看得见，摸得着，用得上的部分。我们可以从软件或系统界面中“看”到信息，用鼠标键盘或手指“摸”到图片和文字，并“使用“软件实现我们的需求。因此，你浏览的网站、手机中的app、电脑上的应用程序、车载导航，甚至是家里智能家居的数显，都可以称得上
计算机领域的前端。
当然，每个行业都有一些专属于自己的高大上的专业术语，前端也一样！我们将那些
“看得见”叫做“视觉效果”，将“摸得着”叫做“交互”，将“用得上”称为“功能”。具体到上面的示例中，
“视觉效果”，就是按钮、卡片、图片等元素的配色和排布；
“交互”，就是点击、滑动等动作和反馈；而
“功能”，就是这个软件能做的事情，浏览、挑选、购物。
因此，计算机领域的前端可以抽象地描述为：
产品中，能给用户提供视觉效果，完成用户的交互，并且能够借此实现一定功能的部分。你可能也注意到，针对前端概念的描述，并没有提及前端用什么技术，以怎样的方式去实现。
因为前端本来就与用户紧密相连，与技术无关。
它是软件应用中，最贴近用户的那一“端”。如果将应用比作一道美食，
前端工程师的工作就是让这道美食**色泽诱人，香气扑鼻。
当然，要深刻地认知前端，不能只从其自身进行单方面解析，要辩证性地理解；前端，字面上既然有个“前”，那么一定存在一个与“前”相对的“后”，二者共同构成某一个事物的整体，它们在这个整体中发挥各自的长处。而与前端相对的，应用中远离用户的那一端，更笼统的表述就是蕴藏在背后的大部分你看不到的部分，我们称之为“后端（Back-End）”。具体一点地说，百度云盘存储的东西在哪儿？为什么就能下载？为什么微信与QQ能够实现即时通讯呢？为什么淘宝购物的流程是这样？这都是“后端”要解决的问题。
与前端相反，后端工程师的工作，更关注的是应用这道美食背后的故事：如何取材，如何配料，如何烹制；
其负责设计并实现应用的结构、流程、功能，并为前端提供数据和服务的支持。就像上图所示，在软件应用中，
有了前端的瞭望，信息采集才会充分，有了后端的维护，程序运行才会稳定。并且，由于承担的职责不同，前端和后端所使用的技术也有所不同。只不过，我们作为使用者，
一般情况下是“看”不到后端程序员所实现的逻辑和对数据的处理。总之，
前端重点解决的是应用好不好用的问题，而后端重点解决的是应用能不能用的问题；二者是表象与内在的关系，缺一不可，需要相互配合才能完成软件应用的全部功能。
初识“前端开发”
讲解完前端的概念，我们再从具体的工作岗位看看，
“前端开发”是什么？目前，
普遍认知的前端开发特指
Web 前端开发，通俗点说就是做
网页软件应用开发。其属于
狭义的前端，是“大”前端的一部分，也是程序员中的一个细分岗位。
备注：下文所提到的前端，若不做特殊说明，均指 Web 前端。
你可能会有疑惑，网页和软件应用怎么能有关系呢？浏览器才是应用吧！其实不然，浏览器只是网站运行的一个
环境，你可以将它看作 Windows 系统，而我们的网站就是跑在这个系统上的应用。同样，作为用户的我们，是在网站上浏览内容，进行交互。
如上图所示：我们在使用上面的网站（Word网页版）时，所接触到的所有视觉内容和交互动作 --
从字体到颜色，从选项卡到下拉菜单，从键盘操作到鼠标点击，都是 Web 前端所需要开发的内容。为了让你更加全面且深刻地理解前端开发这个概念，接下来我会从前端的发展历史、前端工程师的职责和工作、前端的发展方向这几大方面，进一步介绍说明。
历史：前端的“独立之路”
互联网技术发展日新月异，行业相关岗位也在不断地兴替。为了认识现在的前端，我们先简单回顾一下过去，看一看前端这个岗位的发展历程。
在互联网刚刚兴起的那十年，受网速和设备的制约，
网页应用主要用作“内容呈现”。设计人员在设计视觉效果的同时会完成页面的构建，而少量的交互部分则交由善于操作数据的后端程序员处理。
以上是2003年的淘宝网首页，当时网站的内容和结构都非常简单，大部分交互都是单调的登录、注册、搜索商品，仅靠简单的输入框就可以完成，页面上也没有各种各样的效果呈现。
这也导致
当时前端并不是一个必需的岗位，从业者更多地像是打下手的，大部分工作都是帮助网站设计人员切割页面的素材，顺带完成一些简单的代码编写。直到现在，很多前端也会在自嘲时，称自己为
“切图仔”。直到不久前的上一个十年，
个人电脑、移动设备、智能家居等各种平台，伴随着互联网的普及和蓬勃发展，接踵而至！
相比之前，人民的物质水平提高了，精神需求也提高了。简单的网站应用不仅在内容呈现上满足不了网民的需求，也无法在功能上面对更复杂的场景。
更生动地呈现、更丰富的交互逐渐成为网站应用的需求，我们也能从淘宝网今昔的对比中，窥得一二！2020年淘宝网首页：
为了适应新时代，网站的设计工作变得更加纯粹！- 设计师更专心于风格与样式，不再关注网页的具体实现，由此设计也细分出了用户界面设计师(UI)、用户体验设计师(UE) 和用户交互设计师 (Ixd) 等岗位。
- 用户的增多、业务的复杂度提升，也使得后端程序员的工作更加后移，专注于处理庞大的数据和复杂的逻辑。
- 前端这个岗位慢慢地被独立了出来，用以填补设计和数据之间的空白，完成具体的页面构建。
尴尬的是，此时的前端，既不能决定设计，也不能全权操作数据。
虽然叫做前端，却不能独立地在产品中实现视觉效果和交互动作的功能。所以，直到现在，前端程序员一直也不能称得上是
“真正的前端程序员”。
历史的车轮还在不断地前进，17年前的我们，不会想象到淘宝网的现在的样子。在智能平台百花齐放的今天，
我们也无法预测前端的未来，但我相信，它一定会有一个万丈光芒的明天！为什么？
既然前端的地位稍有尴尬，我仍相信前端的未来发展呢？我们不妨把视角转到现在，看看现在的前端到底在做什么！
职责：沟通协作桥梁
想要了解前端从业者的工作职责，需要从一个完整网站应用产生流程入手，
一个网站应用从无到有的过程大致如下 ：1）产品经理与甲方反复沟通交流，逐步确定产品需求完成设计草图； 2）产品经理根据需求和草图进行分析，提交 PRD（需求文档），并与开发人员协商软件功能； 3）若PRD（需求文档）协商通过，后端开发团队进行可行性分析并完善方案；在一定的准备过后，进入后端开发，并给出开发文档； 4）产品经理根据协商通过后的PRD，制作原型和设计文档，并交付设计团队； 5）UI/IxD等不同职责的设计师，根据设计文档和原型产出高保真原型； 6）前端参与视觉和交互的评审，进而完成原型图切图； 7）前端根据后端/接口文档，进行页面构建和开发，并且不断针对数据和功能相关内容与后端沟通和交流； 8）前后端功能实现，数据流通之后，测试人员进行功能测试，并记录 bug（漏洞），形成文档并交付 bug 产生方，前后端修补各自的 bug ，并重复测试； 9）测试完毕之后的产品，可以交付给甲方。从以上流程中我们可以看到：
Web 应用开发过程中，后端先行，设计师出稿后，前端才能进行开发。前端确实在造物，他们是做了一个又一个的 Web 应用，只不过设计是别人的，数据也是别人的，自己的自主权被压缩了太多，这导致前端工作看上去像是仅仅将别人的设计实现。在整个团队中，可能功劳不多，但是苦劳肯定不少！
不过，这并不代表前端是
“鸡肋”。从上一章前端发展历史来看，
前端岗位独立出来，恰恰是因为它变得越来越重要！在整个项目团队中
，前端除了写好自己的代码之外，更重要的是
团队的润滑剂。一个小型团队一般就五个人：产品经理、设计师、前端、后端和测试。前端不仅要参与需求文档的开发，视觉交互的评审，还要与后端交流，与测试沟通；实际上，整个应用开发过程中，
前端处于交流的中心位置。而在整个应用中，
前端就像一道桥梁，沟通用户和软件背后的服务，不仅实现了设计，还赋予整个产品活力。如果网页应用只是单纯地将内容呈现给用户，那跟图文小说没什么区别，比较死板。如果只是单纯从用户身上获取信息，就跟问卷调查没什么区别，缺乏反馈感。
后端需要理解代码逻辑，产品经理需要理解人的逻辑，而
前端需要同时理解两者，写的是代码，产出的却不是程序，而是产品！实际上，没有一成不变的工作，也没有一成不变的职责。就像我在课程开始时提到的一样，前端的概念现在很“大”，并且一直在变化；
提升自己，保持精进，跟紧潮流，才是你真正的职责！如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。其他优质文章 ：
前端行业发展：- Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
- 找前端工作会不会很难？
- 现在web前端的工资怎样？
- 前端开发就业情况如何？
前端工作内容：
- 前端工程师主要工作内容是什么？
- 前端开发是做什么的？工作职责有哪些？
前端学习路线：
前端必读书籍：
面试相关：
- 关于前端Vue框架的面试题，面试官可能会问到哪些？
- 【一定要收藏】32000字的前端面试题总结！！！
- web前端简历个人技能该怎么写?
- 前端简历中项目描述怎么写能够更加的优雅？
- 面试前端工程师简历应该怎么写才容易通过？
- 自学 web 前端人怎么找工作？
- 自学前端简历怎么写啊？
HTML教程：
- HTML5入门教程（含新特性），从入门到精通
- HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
- HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
- HTML图文教程（通按钮/文件域/label/下拉表单）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）
Koa2教程：
- Koa2框架是什么？Koa框架教程快速入门Koa中间件
- Koa2框架路由应用，Koa2前景、Koa2中间件
- Koa2异常处理
VUE教程：
- 最全的vue学习教程来了，vue模块化组件超级好用，vue项目推荐，vue项目结构搭建，案例分析
其他：
- 13 个有趣且实用的 CSS 框架 / 组件
- 有哪些好的前端社区？
在线咨询
